最近在做小程序項目，遇到多個頁面共用頁面變量的問題，小程序需要渲染到頁面的數據，都需要在頁面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}}來進行顯示，全局方法也可以用類似方法定義，(*^__^*) 嘻嘻……

小程序設置全局變量，全局方法