基础设置及目录结构
1、page.json文件
需要注意globalStyle中配置的是默认启动样式。
2、manifest.json文件
- 配置小程序ADPPID
- 勾选ES6转ES5、上传代码时自动补全、上传代码时自动压缩、检查安全域名和TLS版本(上线之前勾选上) 注意:小程序这一类的开发必须使用https协议的。另外在微信公众平台-开发-服务器域名,可以看到都是https协议的,在这里配置后台接口的域名地址
3、main.js入口文件
作为项目的入口文件
4、App.vue应用配置
- 配置全局样式以及监听应用的生命周期
- onlaunch:进入应用触发,参数options可以得到当前的场景值
5、components中用来放组件
放置公共组件
组件通信
vue中的组件通信依旧适用,父传子props,子传父 this.$emit(个人尝试)
代码示例
uni.$emit(eventName,OBJECT)
触发全局的自定义事件,附加参数都会传给监听器回调函数。
uni.$emit('update',{msg:'页面更新'})
uni.$on(eventName,callback)
监听全局的自定义事件,事件由 uni.$emit 触发,回调函数会接收事件触发函数的传入参数。
uni.$on('update',function(data){
console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
})
uni.$once(eventName,callback)
监听全局的自定义事件,事件由 uni.$emit 触发,但仅触发一次,在第一次触发之后移除该监听器。
uni.$once('update',function(data){
console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
})
uni.$off([eventName, callback])
移除全局自定义事件监听器。 Tips
- 如果uni.$off没有传入参数,则移除App级别的所有事件监听器;
- 如果只提供了事件名(eventName),则移除该事件名对应的所有监听器;
- 如果同时提供了事件与回调,则只移除这个事件回调的监听器;
- 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器;
$emit、$on、$off常用于跨页面、跨组件通讯
注意事项
- uni.on 、 uni.off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等
- 使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni.off 移除,或者一次性的事件,直接使用 uni.$once 监听