手机扫一扫访问本页内容

微信扫描点右上角"···"分享到好友或朋友圈

关闭
微信扫一扫可打开小程序

微信长按图片或搜“分享录”可打开小程序

关闭
小程序,技术

小程序开发[零碎知识点、技巧、注意事项等整理]

本文整理微信小程序uni-app开发过程中一些知识点、技巧、注意事项等。

pages.json文件设置

文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容,在uni-app中是在manifest中配置。

配置项列表:

属性类型必填描述平台兼容
globalStyleObject设置默认页面的窗口表现
pagesObject Array设置页面路径及窗口表现
easycomObject组件自动引入规则2.5.5+
tabBarObject设置底部 tab 的表现
conditionObject启动模式配置
subPackagesObject Array分包加载配置
preloadRuleObject分包预下载规则微信小程序
workersStringWorker 代码放置的目录微信小程序

其中,globalStyle(用于设置应用的状态栏、导航条、标题、窗口背景色等。要自定义状态栏、导航条得加”navigationStyle”: “custom”,navigationBarTitleText会被pages下的具体页面的navigationBarTitleText替代,可以用uni.setNavigationBarTitle({ title: ‘标题’ });对每个页面设置标题)、所有独立页面都要在pages数组中定义(抽做公共模块的可以不用定义,自定义顶部样式的要在style加”navigationStyle”: “custom”,下拉刷新的在style要加”enablePullDownRefresh”: true)、tabBar配置底部菜单(当然加”position”:”top”菜单会在顶部显示,最多只能加5个tab,其中pagePath为页面路径、iconPath为未选中图标路径、selectedIconPath为选中图标路径、text为显示名称,这里的图标只能是图片不能用样式图标)、condition其实可以不用配置(官方文档这样描述:为启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面)、其他属性基本不用到。

App.vue

App.vue是uni-app的主组件,所有页面都是在App.vue下进行切换的,是页面入口文件。但App.vue本身不是页面,这里不能编写视图元素。这个文件的作用包括:调用应用生命周期函数、配置全局样式、配置全局的存储globalData。可以在globalData中定义全局变量,比如在iPhone X及以后的版本底部会出现遮挡问题,可以在onLaunch中加判断是否为这些手机然后在具体页面加处理。

main.js

main.js是uni-app的入口文件,主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。在这个文件可以引入公共主键、样式(uni-app官方推荐在App.vue中引入公共样式但我发在好像不起作用就直接在main.js中引入)等。

应用生命周期

应用生命周期仅可在App.vue中监听,在其它页面监听无效。uni-app 支持如下应用生命周期函数:

函数名说明
onLaunchuni-app 初始化完成时触发(全局只触发一次)
onShow当 uni-app 启动,或从后台进入前台显示
onHide当 uni-app 从前台进入后台
onError当 uni-app 报错时触发
onUniNViewMessage对 nvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯

应用生命周期事件在打开小程序时触发,其中onShow在每次打开小程序都触发、onHide在每次关闭小程序都触发。

页面生命周期

uni-app 支持如下页面生命周期函数:

函数名说明平台差异说明最低版本
onLoad监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考示例
onShow监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onReady监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
onHide监听页面隐藏
onUnload监听页面卸载
onResize监听窗口尺寸变化App、微信小程序
onPullDownRefresh监听用户下拉动作,一般用于下拉刷新,参考示例
onReachBottom页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项
onTabItemTap点击 tab 时触发,参数为Object,具体见下方注意事项微信小程序、支付宝小程序、百度小程序、H5、App(自定义组件模式)
onShareAppMessage用户点击右上角分享微信小程序、百度小程序、字节跳动小程序、支付宝小程序
onPageScroll监听页面滚动,参数为Objectnvue暂不支持
onNavigationBarButtonTap监听原生标题栏按钮点击事件,参数为ObjectApp、H5
onBackPress监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:onBackPress 详解。支付宝小程序只有真机能触发,只能监听非navigateBack引起的返回,不可阻止默认行为。app、H5、支付宝小程序
onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件App、H51.6.0
onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。App、H51.6.0
onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件App、H51.6.0

需要注意的是以上事件只在独立页面生效在公共模块是不起作用的,其中比较常用的有,onLoad可以接收上个页面传来的参数、onShow每次打开独立页面都会执行、onReady只在第一次加载页面执行、onHide跟onShow相反每次隐藏页面都会执行、onUnload销毁页面的时候会执行(可以用用于回收释放资源)、onPullDownRefresh页面下拉事件需要在pages.json中pages下具体页面的stye加”enablePullDownRefresh”: true(加uni.showNavigationBarLoading();页面下拉时在导航栏会有加载样式、加uni.stopPullDownRefresh();停止下拉、加uni.hideNavigationBarLoading();隐藏加载样式),可以根据实际需求在对应的事件加逻辑代码。

组建生命周期

uni-app 组件支持的生命周期,与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期:

函数名说明平台差异说明最低版本
beforeCreate在实例初始化之后被调用。详见
created在实例创建完成后被立即调用。详见
beforeMount在挂载开始之前被调用。详见
mounted挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate数据更新时调用,发生在虚拟 DOM 打补丁之前。详见仅H5平台支持
updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见仅H5平台支持
beforeDestroy实例销毁之前调用。在这一步,实例仍然完全可用。详见
destroyedVue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。详见

以上事件在包括公共模块在内的所有页面都起作用。

日志打印

console向控制台打印日志信息,包括log、info、warn、error,如console.log(‘现在是:’, new Date());

定时器

定时器可以起到延迟执行作用,但建议能不用还是不用好,处理不好会造成页面阻塞、浏览器假死,在高并发情况下还会出现数据不一致等问题。主要有以下几个方法,最好自己手动回收定时器。
setTimeout(callback, delay, rest)设定一个定时器。在定时到期以后执行注册的回调函数
clearTimeout(timeoutID)取消由 setTimeout 设置的定时器。
setInterval(callback, delay, rest)设定一个定时器。按照指定的周期(以毫秒计)来执行注册的回调函数
clearInterval(intervalID)取消由 setInterval 设置的定时器。

页面通讯

uni.$emit(eventName,OBJECT)触发全局的自定事件。附加参数都会传给监听器回调。
uni.$on(eventName,callback)监听全局的自定义事件。事件可以由 uni.$emit 触发,回调函数会接收所有传入事件触发函数的额外参数。
uni.$once(eventName,callback)监听全局的自定义事件。事件可以由 uni.$emit 触发,但是只触发一次,在第一次触发之后移除监听器。
uni.$off([eventName, callback])移除全局自定义事件监听器。
uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等。
使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni.$on 注册监听,onUnload 里边 uni.$off 移除,或者一次性的事件,直接使用 uni.$once 监听。

在公共模块的方法触发执行引用公共模块的页面中的方法,可以先在公共模块的方法加this.$emit(‘方法名’, 参数),然后在引用页面加对应的方法。


在引用公共模块的页面中调用公共模块的方法,可以先在引用页面加ref=”公共模块名称”并“this.$refs.postVue.公共模块方法名(参数)”来调用公共模块方法。

路由与页面跳转

uni.navigateTo(OBJECT)保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。
uni.redirectTo(OBJECT)关闭当前页面,跳转到应用内的某个页面。
uni.reLaunch(OBJECT)关闭所有页面,打开到应用内的某个页面。
uni.switchTab(OBJECT)跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
uni.navigateBack(OBJECT)关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
uni.navigateTo带参数跳转也可以跳转到tabBar页面,uni.redirectTo可以传参数但不能跳转到tabBar页面,uni.switchTab在iOS会先返回上一步再返回tab页,uni.reLaunch无法传参数状态栏会出现首页图标而没有返回图标,因此要根据实际情况灵活使用对应的路由方法。

交互反馈

uni.showToast(OBJECT)显示消息提示框。
uni.hideToast()隐藏消息提示框。
uni.showLoading(OBJECT)显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。
uni.hideLoading()隐藏 loading 提示框。
uni.showModal(OBJECT)显示模态弹窗,类似于标准 html 的消息框:alert、confirm。
uni.showActionSheet(OBJECT)显示操作菜单

数据缓存

uni.setStorage(OBJECT)将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。
uni.setStorageSync(KEY,DATA)将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。
uni.getStorage(OBJECT)从本地缓存中异步获取指定 key 对应的内容。
uni.getStorageSync(KEY)从本地缓存中同步获取指定 key 对应的内容。
uni.getStorageInfo(OBJECT)异步获取当前 storage 的相关信息。
uni.getStorageInfoSync()同步获取当前 storage 的相关信息。
uni.removeStorage(OBJECT)从本地缓存中异步移除指定 key。
uni.removeStorageSync(KEY)从本地缓存中同步移除指定 key。
uni.clearStorage()清理本地数据缓存。
uni.clearStorageSync()同步清理本地数据缓存。
可以用以上方法在客户手机上维护一些数据,需要注意的是,微信小程序单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB,所以没必要的数据应当及时释放。

更多内容请访问uni-app官网


展开阅读全文


上一篇:

下一篇:

您还可以访问本站的小程序、公众号等所有端,或者下载APP, 在小程序、APP上可以评论文章以及保存图片还有在线客服哦,如您有任何疑问或建议可向作者提出意见反馈
关注我的公众号每天为您分享各类有用信息
扫码打开小程序可评论文章保存图片,在“我的”有实时在线客服哦,看效果?
分享录多端跨平台系统
分享录交流群