小程序设置全局变量，全局方法

Posted 2020-09-29

最近在做小程序项目，遇到多个页面共用页面变量的问题，小程序需要渲染到页面的数据，都需要在页面data进行定义，这样如果多个页面都需要用到同一个变量，就会造成资源的重复定义；

例子：

Page({
    data: {
        backgroundImg: request.getImgServerApi() + ‘section2/background.png‘,
        helpLinkImg: request.getImgServerApi() + ‘cardPackage/card-link2.png‘,
        logoImg: request.getImgServerApi() + ‘section2/logo.png‘
    }) 

图片是共用一个地址的，方便后面修改地址，所以前缀是拼接的。

但这样解决不了每个页面data都需要重写路径，所以用了一下下面的处理方案。

对Page进行处理:

Page({
    data:{}
})

处理为

var page = pageModel.mixin({
    data: {}})
Page(page);

pageModel代码为：

const config = require(‘./../config.js‘);
const util = require(‘./util.js‘);
const mixin = function(pageData){
    var globalData = {//全局变量
        data:config.data
    };
    return util.mixin(globalData,pageData);
}

module.exports = {
    mixin
}

核心思想在于合并data对象，

mixin方法：

function mixin(target,source){//数据对象拓展
    var args = Array.prototype.slice.call(arguments),i=1,key,index,
    ride = typeof args[args.length-1]==‘boolean‘?args.pop():true;
    
    if(args.length===1){
        target = this;
        i=0;
    }
    while((source = args[i++])){
        for(key in source){
            if(key in target){
                if(typeof source[key] == ‘object‘ && typeof target[key] == ‘object‘){
                    for(index in source[key]){
                        target[key][index] = source[key][index];
                    }
                }
            }else if(ride || !(key in target)){
                target[key]=source[key];
            }
        }
    }
    return target;
}

实现效果：

在全局定义一个data变量，所有pageModel覆盖的页面都可以使用：

config.js

// 这里添加的属性，可以通过app.config 来访问
var config = {
    env: ‘prd‘, // 在这里切换当前环境
    cdnBase: ‘‘,
    data:{//全局变量
        test:‘123‘
    }
};

config.apiBase = ENV_API[config.env];

module.exports = config;

页面直接可以用{{test}}来进行显示，全局方法也可以用类似方法定义，(*^__^*) 嘻嘻……