微信小程序之MVC框架方式书写及以同步方式处理异步数据结果

作为一名php开发人员,在开发过程中通常都是使用PHP的MVC框架进行开发的,早已习惯这个开发模式,所以本次已MVC的方式进行微信小程序的搭建,方便开发,在书写js文件过程中使用ES6语法,可以按照php类的方式进行处理

1、在小程序根目录下创建pages和utils文件夹,pages就不多说,utils文件夹放我们所要封装的微信请求类base.js

import {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主要是调用各个组件进行视图渲染

<view>
<!--轮播图  -->
    <swiper indicator-dots="true" autoplay="true" class="swiper">
        <block wx:for="{{bannerArr}}">
            <swiper-item class="banner-item" data-id="{{item.key_word}}" bindtap="onProductsItemTap">
                <image src="{{item.img.url}}" class="item-image" mode="scaleToFill"></image>
            </swiper-item>
        </block>
    </swiper>
</view>

注意:因为在base.js中请求返回的结果是异步的,我们就不能想当然的按照同步的方式来接收数据(这样是接收不到任何数据的),所以此处的解决方案就是使用传递回调函数的方式来传递base.js中异步结果,以便在各个文件的可以获取的到;在回调函数传递的过程中可以分为请求和数据的返回两个过程

请求过程:home.js--->home-model.js--->base.js

数据返回:base.js---->home-model.js--->home.js