小程序在公共全局的基础方法和变量这一块并不支持。已知的全局变量存取也不是很方便。
本文章能解决的问题：
- 实现在所有page中 js，wxml页面里使用公共的data和方法；
- 实现公共Page处理公共属性和逻辑（比如全局登录弹框）；
1.使用minxi的概念将公共Page合并到每一个Page里面:
- 新建 minxi.js 存放在until文件夹下。
const nativePage = Page
const lifecycle = ['onLoad', 'onReady', 'onShow', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll']
let globalMixin = null
//全局mixin方法
wx.mixin = function(config){
if(isType(config,'object')){
globalMixin = config
}
}
//原生Page代理
Page = function (config) {
let mixins = config.mixins
//加入全局mixin
if(globalMixin){
(mixins || (mixins=[])).unshift(globalMixin)
}
if (isType(mixins, 'array') && mixins.length > 0) {
Reflect.deleteProperty(config, 'mixins')
merge(mixins, config)
}
nativePage(config)
}
function merge(mixins, config) {
mixins.forEach(mixin => {
if (isType(mixin, 'object')) {
//合并data、生命周期以及其他数据
Object.keys(mixin).forEach(key => {
if (key === 'data') {
config[key] = Object.assign({}, mixin[key], config[key])
} else if (lifecycle.includes(key)) {
let nativeLifecycle = config[key]
config[key] = function () {
let arg = Array.prototype.slice.call(arguments)
mixin[key].call(this, arg)
return nativeLifecycle && nativeLifecycle.call(this, arg)
}
} else {
config[key] = mixin[key]
}
})
}
})
}
//判断类型工具
function isType(target, type) {
let targetType = Object.prototype.toString.call(target).slice(8, -1).toLowerCase()
type = type.toLowerCase()
return targetType === type
}
- 新建 common-page.js ,用于处理公共逻辑
// 此为公共参数 方法区
//添加全局公共参数、方法 :这里面的方法参数将合并到每一个Page里面 优先级比所属Page低
export const mixinStr = {
data: {
comm_showLoginDialog: false, //控制登录弹框
comm_imageUrl: "https://***.com/images", //小程序图片资源目录
comm_pageInfo:{ //前端首次加载页面信息
"pageNum": 1,
"pageSize": 10,
"total": 1,
"totalPage": 1,
}
},
onReady:function () {
var mApp = getApp()
this.setData({
comm_globalData: mApp.globalData,
})
},
comm_goLogin() {//唤起登录
this.setData({
comm_showLoginDialog: true
})
},
comm_resetPageInfo(){ //重置页面属性
this.setData({
comm_pageInfo:{
"pageNum": 1,
"pageSize": 10,
"total": 1,
"totalPage": 1,
}
})
},
comm_addPageNum(){ //页面加一
var mPageinfo = this.data.comm_pageInfo
mPageinfo.pageNum = mPageinfo.pageNum + 1
this.setData({
comm_pageInfo: mPageinfo
})
},
//跳转webview
comm_goWebPage(url){
wx.navigateTo({
url: '../../pages/webview/webview?url='+url,
})
},
//显示普通toast
comm_showToast(str){
if (str != null && str != undefined && str != '') {
wx.showToast({
title: str,
icon: "none"
})
}
},
//显示成功toast
comm_showSuccessToast(str){
if (str != null && str != undefined && str != '') {
wx.showToast({
title: str,
icon:"success"
})
}
},
//显示失败toast
comm_showFailToast(str){
if (str != null && str != undefined && str != '') {
wx.showToast({
title: str,
icon:"error"
})
}
},
//返回
comm_onBackBtnClick(){
wx.navigateBack({
delta: 0,
})
}
}
- 然后在app.js 里面调用 minxis.js中minxi方法，这样所有的Page将会合并我们的common-page.js中的内容，这样我们就可以在所有的Page里无缝使用公共方法和属性了
//添加全局公共参数、方法 :这里面的方法参数将合并到每一个Page里面
require('./utils/mixins.js')
wx.mixin(mixinStr)
...
App({
...
})
