作为一名php开发人员,在开发过程中通常都是使用PHP的MVC框架进行开发的,早已习惯这个开发模式,所以本次已MVC的方式进行微信小程序的搭建,方便开发,在书写js文件过程中使用ES6语法,可以按照php类的方式进行处理
1、在小程序根目录下创建pages和utils文件夹,pages就不多说,utils文件夹放我们所要封装的微信请求类base.jsimport {Config} from '../utils/config.js';
class Base
{
constructor(){
this.baseRequestUrl = Config.restUrl;
}
request(params){
var url = this.baseRequestUrl + params.url;
if (!params.type){
params.type = 'GET';
}
wx.request({
url: url,
data: params.data,
header: {
'content-type':'application/json',
'token':wx.getStorageInfoSync('token')
},
method: params.type,
//以回调函数的方式来接收处理异步结果
success: function (res) {
params.sCallback && params.sCallback(res.data);
},
fail: function (error) {
console.log(error);
}
})
}
getDataSet(event,key){
return event.currentTarget.dataset[key];
}
}
//暴露出Base类作为一个接口供外部使用
export {Base};
2、在一个页面文件中,比如说home-model.js页面(pages/home/home-model.js),在home-model.js中(相当于MVC中的M),来进行主要的数据处理,此处也是按照回调函数的方式来传递和接收异步的数据import {Base} from '../../utils/base.js';
class Home extends Base
{
constructor(){
super();
}
getBannerData(id,callback){
var params = {
url:'banner/'+id,
sCallback:function(res){
callback && callback(res.items);
}
};
this.request(params);
}
}
3、在home.js中(相当于MVC中的C)引入数据处理类Home,并调用响应的方法import {Home} from 'home-model.js';
var home = new Home();
Page({
data: {
},
onLoad: function () {
this._loadData();
},
_loadData:function(){
var id = 1;
//获取banner
//此处的回调函数按照ES6语法书写,如果此处的业务处理比较繁琐
//可以单独定义回调函数进行调用
home.getBannerData(id,(res)=>{
this.setData({
'bannerArr':res
});
});
}
})
4、接下来就是进行视图的渲染了home.wxml主要是调用各个组件进行视图渲染
注意:因为在base.js中请求返回的结果是异步的,我们就不能想当然的按照同步的方式来接收数据(这样是接收不到任何数据的),所以此处的解决方案就是使用传递回调函数的方式来传递base.js中异步结果,以便在各个文件的可以获取的到;在回调函数传递的过程中可以分为请求和数据的返回两个过程
请求过程:home.js--->home-model.js--->base.js
数据返回:base.js---->home-model.js--->home.js