uniapp 开发总结(持续更新)

80 阅读2分钟

底部导航栏

tabBar属性

image.png

uniapp 拦截手机默认的返回操作!!!

onBackPress(){} 这个周期函数,注意不是写到method里面的

image.png

弹窗的封窗

大部分ui,弹窗组件都是通过变量来控制,如果一个页面上弹窗多了,控制的变量一多,管理维护混乱,可以封装不同的弹窗,然后给组件添加 ref="xxx" ,然后通过 $refs.xxx.open()|close() 的方式去使用。直观且便于管理

uniapp 中自定义组件 components, 里面自己封装的组件是自动引入的。

微信小程序打包体积最大为5m ,所以除了底部导航栏的icon 放在本地(小程序硬性要求) static 目录下,其他体积大的文件图片都需要放在云端。!!!

调试

之前调试除主页之外的页面都需要从主页一级一级的点,现在可以在微信开发者工作中添加编译模式,选择默认调试哪个页面

image.png

image.png

路由?

uniapp 是没有像vue 那样有个router对象来管理路由的, 所有的路由都是通过pages.json 中pages 数组来管理路由页面的!!

自定义导航栏

pages.json 中配置 navigationStyle:'custom'

全局样式

image.png 如果页面没有单独配置title文字,那么都会套用全局的title!!

下拉刷新

image.png

image.png uni.stopPullDownRefresh() 很多自带方法都是挂载在uni 这个对象上!!!

默认是有个顶部导航栏的

小程序的页面对应的vue文件命名需要跟在pages里配置的一样,否则访问不到,不注册的页面也访问不到!!!

pages.json 中pages 数组的第一个就是默认小程序进去的首页!!!

小程序声明周期

onLanuch() {} // 第一次启动微信小程序才会执行!!