告别比较晦气的2020，迎来崭新的2021年，希望一切都顺利，特别是家人，朋友都能身体健康，健康比一切都重要，没有健康一切都是浮云。2021年，除了好好工作外，我给自己立个小目标，争取每周一篇原创文章，虽然不能像那些大V一样把它当成一份自由职业,但也要向梦想出发，万一梦想哪天实现了呢？
上篇文章介绍了小程序中的自定义组件相关的内容，包括如何定义组件，组件和页面如何相关通讯。这篇文章将写点关于数据共享的一些相关内容。包括全局数据共享，behaviors和mobix技术在小程序中的应用。
一个实例
从一个实际例子开始，在下面的一个小程序中，点击俱乐部介绍将进入俱乐部详细介绍页面，下面是当前俱乐部近期活动列表。因此有两个页面，他们之间需要共享数据，第一个页面里将获取到俱乐部的信息，包括俱乐部介绍的内容，这个内容将传递到第二个页面，俱乐部详细页面。
Screen Shot 2021-01-02 at 12.32.49 PM.png
问题一：组件间数据共享
这是一个典型的页面导航例子，可以有以下方案：
方式一，第一个页面中获取数据，然后通过在navigator的url中传递数据到第二个页面，这种方式有两个问题，第一是url有长度限制，对于数据量小的方式可行，但是对于大数据，会超过url的长度限制。其二是只能传递字符串内容，对于对象的传递，需要序列化转成json字符串，然后反序列化为对象。因此，这种方式对于我们的场景不太合适。
方式二，使用全局函数和全局数据，这是小程序提供的跨组件数据交互的一个方式，使用方式也比较简单，就是在app.js里定义全局函数和全局变量，在需要的页面里使用getApp来获取全局对象。这种方式个人觉得比较适合于存储一些与业务无关的对象，而且每个页面都需要的全局对象，比如用户身份信息，系统初始数据等对象，而不应该把与业务相关的而且是只针对个别页面相关的信息存储到全局变量中。
方式三，使用behaviors，behaviors 是用于组件间代码共享的特性。但它不适用于组件间数据共享，一个页面中对数据的更新不会影响到另一个页面中的数据状态。因此，也不适用于此场景。
方式四，使用缓存方式，这种方式可以实现对数据的共享，第一个页面获取到数据后使用wx.setStorageSync来存储信息，在其他页面中使用wx.getStorageSync来从缓存中同步读取信息。
问题二，组件间代码共享
另一个问题是下方的下拉列表，这个是一个列表组件，每个列表组件都有一些公共的方法，比如分页信息，下拉刷新，触底加载等，这些是每个列表组件都需要的，因此，可以使用组件间代码共享behaviors来实现。
全局数据共享
全局数据共享是简单的数据共享方式，它是小程序框架提供的一种全局数据共享的方式，如果熟悉javascript的同学应该很容易理解，在网页开发中，经常会定义一个全局类来存储一些app中的公共信息，在其他页面中import此全局实例，然后对此全局实例进行get或set。小程序框架也类似，只是它规定了此文件的位置，以及全局变量放置的位置。
全局变量在app.js中定义。比如，我们定义一个global_UserInfo对象
App({
onLaunch: function () {
},
globalData: {
g_userInfo: {}
}
})
在需要获取该变量的页面.js文件中按照如下代码即可获取。
var app = getApp();
Page({
data: {
userInfo: app.globalData.g_userInfo
}
}）
获取之后进行修改也很简单，只需直接赋值即可。
app.globalData.g_userInfo = {
"name":"David",
“role":"admin"
};
使用是不是很简单，但是建议不能把globalData当成一个大垃圾桶，什么东西都往里面装，虽然使用最简单，但业务相关的东西，尽量不要放在全局变量中，避免污染。
Behaviors
behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”。作用有点类似于面向对象编程里的类继承，抽象出一些类的属性和方法放在父类中，派生类可以继承父类的方法，同时可以重载父类的方法。在小程序中，behavior中定义一些公共的属性，数据和方法，组件导入这些behavior，进而就有了behavior的属性，数据和方法，同时，组件还可以覆盖behavior里的属性和方法。同样一个子类实例对父类的数据修改也不会影响到其他子类实例。
小程序官网
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html
详细介绍了behaviors的概念以及使用。基本上网上搜索到的例子也都是来自官网的这个例子，我就不再抄一遍了。关键注意以下几点：
- 每个behavior包含一组属性，数据，方法和声明周期函数。
- 每个组件可以引用多个behavior，behavior可以引用其他的behavior
- 当组件引用behavior时，behavior的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。 如下是引入behavior后，组件的属性，数据，方法和生命周期。
1）属性：behavior的属性、组件自身的属性
2）数据字段：behavior的data、组件自身的data
3）方法：behavior的方法、组件自身的方法
4）生命周期函数：attached、created、ready
behavior created方法-->组件的created方法-->behavior的attach方法-->组件的created方法-->behavior的ready方法-->组件的ready方法 - behavior不能实现组件间数据共享，一个组件改变behavior的data，不会影响到另一个引用此behavior的组件。这个很重要，behavior只是代码的共享，它不能实现组件的数据共享。
在上面的实例中，我把导航列表相关的一些属性，数据和方法提炼出来放在一个navigatorListBehavior中，在我的组件中引入了此behavior，然后就可以共享这些代码，不需要在每个导航列表组件中都重复定义这些数据，属性和方法。代码如下：
let navigatorListBehavior = Behavior({
behaviors: [],
properties: {
title: {
type: String
}
},
data: {
pageNumber: 0,
pageSize: 10,
isDisableLoading: false,
isLoading: false
},
attached: function () {},
methods: {
scrollBottom: function (e) {
if (this.data.isLoading) {
console.log("waiting...")
return;
}
this.setData({
isLoading: true
});
this.showData();
},
calculateSwiperHeight: function () {
var that = this
wx.getSystemInfo({
success: function (res) {
that.setData({
clientHeight: res.windowHeight
});
}
})
},
listLoadSucceed(){
wx.hideLoading();
wx.stopPullDownRefresh();
this.setData({
pageNumber: this.data.pageNumber + 1,
isLoading:false
});
},
isDisableLoading(response){
if(response.length == 0){
this.setData({
isDisableLoading:true
})
return true;
}
return false;
},
listLoadFailed(prompt, reason){
wx.hideLoading();
wx.showToast({
title: prompt + '加载失败,原因' + res,
duration: 5000
});
this.setData({
isLoading: false
});
},
canLoad(){
return !this.data.isDisableLoading;
},
startLoading(){
wx.showLoading({
title: '努力加载中...',
});
},
reset(){
this.setData({
pageNumber:0,
isLoading:false,
isDisableLoading:false
})
}
}
})
export {
navigatorListBehavior
}
定义完behavior后，我们可以在组件或者页面里引用此behavior，这样组件或者页面就有了behavior的属性，方法和数据。比如下面的代码片段，就可以直接使用方法，比如canLoad, listLoadSucceed, listLoadFailed,数据pageNumber，pageSize等。
import {
navigatorListBehavior
} from '../navigatorListBehavior.js'
Page({
behaviors: [navigatorListBehavior],
showData: function () {
if (!this.canLoad()) {
return;
}
this.startLoading();
this.getData(res => {
console.log(res);
this.listLoadSucceed();
if (this.isDisableLoading(res)) {
return;
}
this.currentActivityList.loadData(res);
}, res => {
console.log(res);
this.listLoadFailed('活动列表', res);
})
},
getData: function (successCallback, failedCallback) {
wx.cloud.callFunction({
name: 'club',
data: {
action: "requestMyActivitiesByStatus",
status: status,
pageNumber: this.data.pageNumber,
pageSize: this.data.pageSize
}
}).then(res => {
successCallback(res.result);
}).catch(res => failedCallback(res));
},
})
Mobx数据共享
还是回到之前的实例，俱乐部介绍页面需要用到俱乐部页面的数据，这时候使用behavior是不能实现的，因为是两个组件或页面之间需要共享数据，而不是代码级别的共享。全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。在网页开发中常用的全局数据共享方案有： Vuex 、 Redux 、 MobX 等。在小程序的官网中，使用了Mobx作为数据共享方案。下面介绍一些如何使用Mobx来完成数据共享。
第一步，安装 mobx-miniprogram 和 mobx-miniprogram-bindings
npm install --save mobx-miniprogram mobx-miniprogram-bindings
第二步，创建 MobX Store
import { observable, action } from 'mobx-miniprogram'
export const store = observable({
// 数据字段
club: {},
//actions
setClubData: action(function (club) {
this.club = club
}),
})
第三步，在构造器中使用
- 组件调用方式
如果是组件中使用Mobx，按照以下方式在构造器中调用，然后就可以在组件里使用store里的字段和方法。
import {
createStoreBindings
} from 'mobx-miniprogram-bindings'
import {
store
} from '../clubStore.js'
Component({
behaviors: [storeBindingsBehavior],
data: {
someData: '...'
},
storeBindings: {
store,
fields: {
club: () => store.club,
},
actions: {
setClubData: 'setClubData'
},
},
getData: function (successCallback, failedCallback) {
wx.cloud.callFunction({
name: 'club',
data: {
action: "requestClubDetails",
id: this.pageData.clubId,
name: this.pageData.clubName
}
}).then(clubResponse => {
//调用store里的方法
this.setClubData(clubResponse);
}
}
})
2）页面中调用
如果是页面中使用Mobx，按照以下方式在构造器中调用，然后在页面中就可以使用store里的字段和方法。
import {
createStoreBindings
} from 'mobx-miniprogram-bindings'
import {
store
} from '../clubStore.js'
Page({
/**
* 页面的初始数据
*/
data: {
clubDetail: {},
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 绑定 MobX store
this.storeBindings = createStoreBindings(this, {
store, // 需要绑定的数据仓库
fields: ['club'], // 将 this.data.club 绑定为仓库中的 club
actions: ['setClubData'], // 将 this.setClubData 绑定为仓库中的 setClubData
});
},
onUnload() {
this.storeBindings.destroyStoreBindings()
},
getData: function (successCallback, failedCallback) {
wx.cloud.callFunction({
name: 'club',
data: {
action: "requestClubDetails",
id: this.pageData.clubId,
name: this.pageData.clubName
}
}).then(clubResponse => {
//调用store里的方法
this.setClubData(clubResponse);
}
}
})
第四步，页面上绑定数据
同样，需要在clubIntroduction中按照上面的方式引用Mobx，就可以在club introduction总使用club数据，达到在俱乐部中调用setClubData方法更新数据,在club introduction的wxml中就可以绑定此data.
<view class="page">
<view class="page__hd">
<view class="page__title"></view>
</view>
<view class="page__bd">
<view class="article-title">{{x}}俱乐部</view>
<view class="article-content">
<wemark md="{{club.introduction}}" link highlight type="wemark"></wemark>
</view>
</view>
</view>
注意
Mobx的使用需要在需要小程序基础库版本 >= 2.2.3 的环境
写在最后
上面就介绍完了在小程序中如何进行数据，方法，属性和代码的共享。每种方式都有特定的使用场景。Behavior是代码级别的重用，在组件和页面中共享代码，包括属性，方法和数据。Mobx是全局数据共享，解决了组件和页面间数据共享，状态更新的问题，一个组件或页面更新数据能同步到另一个组件或者页面。全局数据是最简单的数据共享方式，但最好不要把所有需要共享的数据都往全局数据里放，避免全局数据污染。缓存也是一种简单有效的数据共享方式，可以同步和异步更新或者获取缓存数据，能减少服务请求次数，提高小程序运行效率。
网友评论