原生微信小程序开发及uni-app全局变量的几种实现方式

实际工作当中，经常需要定义全局变量来保存数据，已供多个页面在不同时间段来获取 举几个常见场景： 1.用户登录后的用户信息； 2.:购物下单选择地址，返回订单页需要拿到用户上个页面选的地址； 3.在订单详情页操作订单后返回列表时，在不刷新列表，不重新请求的情况下更新订单状态；

个人总结了自己比较常用的几种方式（小程序原生开发或者使用uniapp之类的框架开发基本都适用）

1、在项目目录里面新建一个js文件用于定义公用的方法。 在需要用到里面的变量的页面引入js即可，或者 在app.js引用然后挂载到globalData；(原生开发)

import REQUEST_CONFIG from './config/requestConfig.js';
globalData: {
    REQUEST_CONFIG
}

在main.js引用挂载到Vue.prototype 或者在App.vue引用挂载到globalData**（uniapp）**

import common from './common/common.js'
Vue.prototype.$common = common;

2、直接在globalData中定义 小程序中有个globalData概念，可以在 App 上声明全局变量。 Vue 之前是没有这类概念的，但 uni-app 引入了globalData概念，并且在包括H5、App等平台都实现了。 在 App.vue 可以定义 globalData ，也可以使用 API 读写这个值。（该方法相当于省略了第一种方法的另外创建js文件的步骤）

3、挂载 Vue.prototype（适用于uniapp）

main.js

/**
 * 微信号*加密
 * str		需要处理的字符串
 * len1		头部不需要替换字符串的长度
 * len2		尾部不需要替换字符串的长度
 */
Vue.prototype.encryption = function(str, len1, len2 = 0) {
    let strLen = str.length;
    let stars = '****'
    let newStr = str.substr(0, len1) + stars + str.substr(strLen - len2);
    return newStr;
}
//复制
Vue.prototype.copyContent = function(content) {
    uni.setClipboardData({
            data: content,
            success() {
                    console.log("success")
            }
    });
}

然后在需要用到的页面直接this.就可以直接调用

4.Storage本地缓存（setStorage、setStorageSync） 将需要用到的变量存储到本地缓存，需要用到的时候从本地获取，数据改变的时候更新本地缓存

5.Vuex和Redux状态管理 uniapp可使用vuex，原生小程序可使用redux 如何在小程序中使用redux 参考教程链接：www.voidcc.com/project/wec…