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

时间：2024-02-29 18:52:55

最近在做小程序项目，遇到多个页面共用页面变量的问题，小程序需要渲染到页面的数据，都需要在页面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\'
    }
};

　　/*for(key in config.data){//复制页面污染
　　　　globalData.data[key] = config.data[key];
　　}*/


config.apiBase = ENV_API[config.env];

module.exports = config;

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

 

 

相关文章