原生微信小程序开发及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
参考教程链接:http://www.voidcc.com/project/wechat-weapp-redux

你可能感兴趣的:(uni-app,vue.js,javascript,小程序)