吟秋知忆

V1

2022/08/05阅读:6主题:自定义主题1

uni-app 从零开始-页面通讯 (三)

全局变量/模块

globalData

使用globalData

<script setup lang="ts">
onLaunch(() => {
  console.log('App Launch');
});

onShow(() => {
  console.log('App Show');
});

onHide(() => {
  console.log('App Hide');
});

onError((err) => {
  console.log('App Error:', err);
});
</script>
<script lang="ts">
export default {
  globalData: {
    name: 'globalData',
  },
};
</script>

注意: 1. 全局globalData不能在SFC单文件中定义; 2. 使用unplugin-auto-import插件自动导入Api

const app = getApp()
console.log(app.globalData)

getApp()

注意:

  1. 不要在定义于 App() 内的函数中,或调用 App 前调用 getApp() ,可以通过 this.$scope 获取对应的 app 实例
  2. 通过 getApp() 获取实例之后,不要私自调用生命周期函数。
  3. 当在首页 nvue 中使用 getApp()不一定可以获取真正的 App 对象。对此提供了 const app = getApp({allowDefault: true})用来获取原始的 App 对象,可以用来在首页对 globalData 等初始化
  4. 在应用 onLaunch 时,getApp 对象还未获取,暂时可以使用 this.globalData 获取 globalData

自定义全局变量模块

在utils/index.ts中定义:

export const common = {name:'global module'}

在其它页面使用:

import {common} from '@/utils'

console.log(common)

注意:如果对全局变量重新赋值要特别注意其“生命周期”,否则会造成数据丢失问题

路由参数

<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
// 在页面接受参数
onLoad(option) {
 const item = JSON.parse(decodeURIComponent(option.item));
}

getCurrentPages()

getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面

⚠️ 注意: getCurrentPages()仅用于展示页面栈的情况,请勿修改页面栈,以免造成页面状态错误。

缓存

storage 将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容。(推荐优先使用异步缓存)

// 保存缓存数据
uni.setStorage({
 key: 'storage_key',
 data: 'hello',
 success: function ({
  console.log('success');
 }
});

// 获取缓存数据
uni.getStorage({
 key: 'storage_key',
 success: function (res{
  console.log(res.data);
 }
});

// 移除指定缓存数据
uni.removeStorage({
 key: 'storage_key',
 success: function (res{
  console.log('success');
 }
});

// 清除所有缓存数据
uni.clearStorage()

状态管理

  1. pinia
  2. vuex

事件通讯

uni.$emit

uni.$emit(eventName,OBJECT)触发全局的自定义事件。附加参数都会传给监听器回调。

uni.$emit('update',{msg:'页面更新'})

uni.$on

uni. emit 触发,回调函数会接收所有传入事件触发函数的额外参数。

uni.$on('update',function(data){
  console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
 })

uni.$once

uni. emit 触发,但是只触发一次,在第一次触发之后移除监听器。

uni.$once('update',function(data){
  console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg);
 })

uni.$off

uni.$off([eventName, callback])移除全局自定义事件监听器。

Tips:

  1. 如果没有提供参数,则移除所有的事件监听器;
  2. 如果只提供了事件,则移除该事件所有的监听器;
  3. 如果同时提供了事件与回调,则只移除这个回调的监听器;
  4. 提供的回调必须跟$on 的回调为同一个才能移除这个回调的监听器;
uni.$off('update', fn)

完整事例

 <script>
  export default {
   data() {
    return {
     val: 0
    }
   },
   onLoad() {
    setInterval(()=>{
     uni.$emit('add', {
      data: 2
     })
    },1000)
    uni.$on('add'this.add)
   },
   methods: {
    comunicationOff() {
     uni.$off('add'this.add)
    },
    add(e) {
     this.val += e.data
    }
   }
  }
 </script>

消息订阅

  • PubSubJS PubSubJS 是一个用 JavaScript 编写的基于主题的发布/订阅库。
import PubSub from 'pubsub-js'

export const MY_TOPIC = Symbol('MY_TOPIC')

// create a function to subscribe to topics
var mySubscriber = function (msg, data{
    console.log( msg, data );
};

// add the function to the list of subscribers for a particular topic
// we're keeping the returned token, in order to be able to unsubscribe
// from the topic later on
var token = PubSub.subscribe(MY_TOPIC, mySubscriber);

// publish a topic asynchronously
PubSub.publish(MY_TOPIC, 'hello world!');

// publish a topic synchronously, which is faster in some environments,
// but will get confusing when one topic triggers new topics in the
// same execution chain
// USE WITH CAUTION, HERE BE DRAGONS!!!
PubSub.publishSync(MY_TOPIC, 'hello world!');

// unsubscribe this subscriber from this topic
PubSub.unsubscribe(token);

推荐阅读

关注我

利用空闲时间免费兼职(长期有效),请联系我(PS:关注公众号后,点击“联系我”获取联系方式)~ 吟秋知忆

分类:

前端

标签:

前端

作者介绍

吟秋知忆
V1