uniapp学习

288 阅读1分钟

基础设置及目录结构

1、page.json文件

需要注意globalStyle中配置的是默认启动样式。

2、manifest.json文件

  1. 配置小程序ADPPID
  2. 勾选ES6转ES5、上传代码时自动补全、上传代码时自动压缩、检查安全域名和TLS版本(上线之前勾选上) 注意:小程序这一类的开发必须使用https协议的。另外在微信公众平台-开发-服务器域名,可以看到都是https协议的,在这里配置后台接口的域名地址

3、main.js入口文件

作为项目的入口文件

4、App.vue应用配置

  1. 配置全局样式以及监听应用的生命周期
  2. onlaunch:进入应用触发,参数options可以得到当前的场景值

5、components中用来放组件

放置公共组件

组件通信

vue中的组件通信依旧适用,父传子props,子传父 this.$emit(个人尝试)

代码示例

Snipaste_2023-12-08_16-35-26.png

Snipaste_2021-09-11_21-47-50.png

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.emituni.emit、 uni.on 、 uni.onceuni.once 、uni.off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等
  • 使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni.on注册监听,onUnload里边uni.on 注册监听,onUnload 里边 uni.off 移除,或者一次性的事件,直接使用 uni.$once 监听