bsp onf const 前缀 gem mod array link
最近在做小程序项目,遇到多个页面共用页面变量的问题,小程序需要渲染到页面的数据,都需要在页面 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}} 来进行显示,全局方法也可以用类似方法定义,(*^__^*) 嘻嘻……
小程序设置全局变量,全局方法
来源: http://www.bubuko.com/infodetail-2226956.html