微信小程序--框架(wepy)

最近在写微信小程序，发现自带开发运行环境对代码的复用性，和组件化开发有着天生的不足。于是在网上看到了关于微信小程序框架wepy。抱着学习心态，学习下以后方便用到。

基本框架–笔记

类VUE语法风格，（笔记不做太详细，说明）。其中可以共用小程序中生命周期函数，可在<view ><view>中共用wx:if="false"等API。

components={}中只能放入监听页面的点击函数如<view @tap = "aPlus"></view>的aPlus事件。如自定义函数直接与components={}同级。

// 引入文件
import wepy from 'wepy';

//继承 wepy.app , wepy.page , wepy.component  
export default class Page extends wepy.app {
    customData = {};
    
    customFunction ()　{ }
    
    onLaunch () {}
    
    onShow () {}
    
    config = {}  
    
    globalData = {}
}
export default class Page extends wepy.page {
    config = {};
    
    components = {counter1: Counter};
    
    data = {};
    
    methods = {};
    
    events = {};
    
    onLoad() {};
}
export default class Page extends wepy.component {
    customData = {}  // 自定义数据
 
     customFunction ()　{}  //自定义方法
 
     onLoad () {}  // 在Page和Component共用的生命周期函数
 
     onShow () {}  // 只在Page中存在的页面生命周期函数
 
     config = {};  // 只在Page实例中存在的配置数据，对应于原生的page.json文件
 
     data = {};  // 页面所需数据均需在这里声明，可用于模板数据绑定
 
     components = {};  // 声明页面中所引用的组件，或声明组件中所引用的子组件
 
     mixins = [];  // 声明页面所引用的Mixin实例
 
     computed = {};  // 声明计算属性
 
     watch = {};  // 声明数据watcher
 
     methods = {};  // 声明页面wxml中标签的事件处理函数。注意，此处只用于声明页面wxml中标签的bind、catch事件，自定义方法需以自定义方法的方式声明
 
     events = {};  // 声明组件之间的事件处理函数
}

框架双向数据流

个人认为在框架组件中最重要是就是数据流，和各个组件中的数据传递。

在子组件接受参数的时候需要指定type的对象类型

../page/index.wepy

<template>
  <test :title='title' :syncTitle.sync="title" :twoWayTitle.sync="title"  @tap = "aPlus">点击加一 {{title}} </test>
</template>

<script>
 import wepy from 'wepy';
 import  Test from  '../components/test'
 
   export default class Index extends wepy.page {
       
    // 声明组件。
    components = {
           test : Test
     }
     
    // 页面数据
    data = {
      title : 1
    }
       }
       
    //事件处理函数(集中保存在methods对象中)。在页面（wxml）中的bindtap，bindchange等事件
     methods = {
        aPlus(){
            this.title +=1;
        }
      }
</script>

../components/test.wepy

<template>
    <view wx:if='{{test}}' class='test' @tap='test'>点击模版消息</view>
    <view  wx:else class='test' @tap='test'>点击成功</view>   
    <view> 父子组建传值 ：{{twoWayTitle}} </view> 
    <view @tap='test1' >点击减值-</view>
</template>

<script>
import wepy from 'wepy';

export default class Test extends wepy.component {
    
  props = {
// 单项数据绑定 
    title: Number,
// 单项数据动态绑定
    syncTitle: {
      type: Number,
      default: 'null',
    },
// 双向数据动态绑定
    twoWayTitle: {
      type: Number,
      default: 'nothing',
      twoWay: true
    }
  };

  data = {
    test: true
  };

  methods = {
    test() {
      this.test = !this.test;
    },

    test1(){
        this.twoWayTitle = this.twoWayTitle - 1;
    }
  };

  onLoad() {
    console.log(this);
  }
}
</script>

Mixin 混合

个人理解：

就是在Mixin类下定义的函数是可以引入到其他类中进行调用，类似于重复组建的函数，比如可以用来封装ajax请求。还有一些重复调用的功能性函数。

以微信小程序http请求为栗子：

定义HttpMixin

import wepy from 'wepy'
import setting from '../setting/setting';
import db from '../util/db';
// 封装请求
export default class HttpMixin extends wepy.mixin {
  // GET请求
  GET(url, params = {}) {
    return this.request('GET', url, params)
  }

  // POST请求
  POST(url, params = {}) {
    return this.request('POST', url, params)
  }

  request(method, url, params = {}) {
    handler.url = setting.URL + url
    handler.data = params
    handler.header = {
      'token': db.Get('token')
    }
    handler.method = method
    if (method === 'POST') {
      handler.header['content-type'] = 'application/x-www-form-urlencoded; charset=UTF-8'
    }   
    //promise 是ES6中用到的一个异步函数，用于http请求再合适不过。
    return new Promise((resolve, reject) => {
      handler.success = res => {
        if (res.data.code === 1) {
          resolve(res.data)
        } else {
          reject(res)
        }
      }
      handler.fail = err => {
        reject(err)
      }
      wepy.request(handler)
    })
  }
}

调用 HttpMixin

import wepy from 'wepy';
import HttpMixin from '../mixins/http';

export default class test extends wepy.page {
    
    mixins = [HttpMixin];
    onLoad(){
        //.then是Promise中的回调。
        const res = this.GET(url,params);
        res.then(
            res => {
                //成功
              },
            err => {
                //失败
              }
            );
        }
    }

Demo

一个简单的父子组建相互加减传值GitHub