微信小程序跨页面传参

在小程序中我们经常需要在各个页面之间传递参数,今天做这个笔记希望能重温这个方法的同时能帮助到其他有疑惑的小伙伴。
下面是常见的跨页面传参数的方法:

go:function(){
       var that=this
        wx.navigateTo({
          url: '/pages/login/login?logining='+true
        })
  },

接下来就是我们在另外一个页面获取传递来的参数

onLoad: function (options) {
    this.setData({
      logining:options.logining=="true"?'登录':'退出',
    })
   }

这样就可以了

### 微信小程序跨JS文件参数传递 #### 使用 App 实例的 globalData 进行全局数据共享 为了实现在不同的 JavaScript 文件之间传递参数,可以通过设置 `App` 对象中的 `globalData` 来存储公共变量或函数。任何页面都可以访问这些属性并读取其值。 ```javascript // app.js 中定义全局数据 App({ onLaunch: function () { this.globalData = { key: 'value' } }, globalData: {} }) ``` 当其他页面想要获取此全局数据时: ```javascript const appInstance = getApp(); console.log(appInstance.globalData.key); // 输出 value ``` 这种方式适用于简单的场景下少量数据的分享[^3]。 #### 利用 Storage API 存储临时数据 对于不需要长期保存但在多个页面间需要交换的信息来说,可以考虑利用 WeChat Mini Program 提供的本地缓存接口来完成这项工作。比如,在源页面调用 `wx.setStorageSync()` 设置键值对;目标页面则可通过 `wx.getStorageSync()` 获取对应的值。 ```javascript // 页面A中写入数据 wx.setStorageSync('key', 'data'); // 页面B中读取数据 try { const value = wx.getStorageSync('key'); } catch (e) { console.error(e); } ``` 这种方法适合于那些不希望暴露给用户的敏感信息之外的一般用途。 #### 创建自定义模块导出功能/常量 如果某些逻辑或者配置项被多处重复使用,则应该将其提取出来形成独立的服务层或是工具类库的形式存在。通过 ES6 Modules 或者 CommonJS 风格的方式引入依赖关系即可轻松达成目的。 ```javascript // utils/service.js 定义服务 module.exports = { fetchData(url, params={}) {/*...*/} }; // pages/index/index.js 导入并使用该服务 var service = require('../../utils/service'); service.fetchData('/api/path'); ``` 这种模式不仅提高了代码复用率还增强了项目的可维护性和扩展性[^1]。 #### EventBus 方案实现解耦的消息通知机制 最后一种较为复杂的解决方案就是基于发布订阅模式设计一个轻量级事件总线(EventBus),允许各个组件监听特定类型的广播消息并在接收到后作出响应动作。这通常涉及到额外安装第三方插件如 TinyEmitter ,不过也可以自行编写简易版本满足基本需求。 ```javascript class SimpleEventBus { constructor(){ this._events = {}; } subscribe(eventType,callback){ if(!this._events[eventType]){ this._events[eventType]=[]; } this._events[eventType].push(callback); } publish(eventType,...args){ let callbacks=this._events[eventType]; if(Array.isArray(callbacks)){ for(let cb of callbacks){ cb(...args); } } } } let bus=new SimpleEventBus(); bus.subscribe('message',(msg)=>{ console.log(`Received message:${msg}`); }); bus.publish('message','Hello World!'); ``` 上述四种途径各有优劣之处,具体选用哪一种取决于项目规模和个人偏好等因素综合考量的结果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值