微信小程序组件化开发框架WePY

这是我参与更文挑战的第1天，活动详情查看： 更文挑战

Wepy简介

WePY通过预编译手段使小程序支持组件化，类Vue.js风格的开发模式，让开发者可以像普通Web应用一样开发小程序。它是一款Github开源框架。

安装

全局安装或更新WePY命令行工具

npm install wepy-cli -g
复制代码

在开发目录中生成Demo开发项目

# 初始化项目，使用 wepy list 查看项目模板
# 1.7.0 之前的版本使用 wepy new myproject
$ wepy init standard myproject
复制代码

切换至项目目录

$ cd myproject
复制代码

安装依赖

$ npm  install
复制代码

开启实时编译

$ wepy build --watch
复制代码

开发模式装换

wepy更接近去vue的开发模式，在原有的小程序的开发模式下进行再次封装，更贴近于现有MVVM框架开发模式。框架在开发过程中参考了一些现在框架的一些特性，并且融入其中，以下是使用wepy前后的代码对比图。

官方DEMO代码：

 //index.js
 //获取应用实例
 var app = getApp()
 Page({
   data: {
     motto: 'Hello World',
     userInfo: {}
   },
   //事件处理函数
   bindViewTap: function() {
     console.log('button clicked')
   },
   onLoad: function () {
     console.log('onLoad')
   }
 })
```
基于wepy的实现：

```
import wepy from 'wepy';

 export default class Index extends wepy.page {

   data = {
     motto: 'Hello World',
     userInfo: {}
   };
   methods = {
     bindViewTap () {
       console.log('button clicked');
     }
   };
   onLoad() {
     console.log('onLoad');
   };
 }
复制代码

基于wepy的实现：

import wepy from 'wepy';

 export default class Index extends wepy.page {

   data = {
     motto: 'Hello World',
     userInfo: {}
   };
   methods = {
     bindViewTap () {
       console.log('button clicked');
     }
   };
   onLoad() {
     console.log('onLoad');
   };
 }
复制代码

支持组件化开发。

在WePY中实现了小程序的组件化开发，组件的所有业务与功能在组件本身实现，组件与组件之间彼此隔离。

// index.wpy
<template>
    <view>
        <panel>
            <h1 slot="title"></h1>
        </panel>
        <counter1 :num="myNum"></counter1>
        <counter2 :num.sync="syncNum"></counter2>
        <list :item="items"></list>
    </view>
</template>

<script>
import wepy from 'wepy';
//引入List、Panel和Counter组件
import List from '../components/list';
import Panel from '../components/panel';
import Counter from '../components/counter';

export default class Index extends wepy.page {
    //页面配置
    config = {
        "navigationBarTitleText": "test"
    };

    //声明页面中将要使用到的组件
    components = {
        panel: Panel,
        counter1: Counter,
        counter2: Counter,
        list: List
    };

    //可用于页面模板中绑定的数据
    data = {
        myNum: 50,
        syncNum: 100,
        items: [1, 2, 3, 4]
    }
}
</script>
复制代码

单文件模式，目录结构更清晰，开发更方便

原生小程序要求app实例必须有3个文件：app.js、app.json、app.wxss，而page页面则一般有4个文件：page.js、page.json、page.wxml、page.wxss，并且还要求app实例的3个文件以及page页面的4个文件除后缀名外必须同名。

而在WePY中则使用了单文件模式，将原生小程序app实例的3个文件统一为app.wpy，page页面的4个文件统一为page.wpy。使用WePY开发前后的开发目录结构对比如下：

官方DEMO：

 project
   pages
     index
       index.json
       index.js
       index.wxml
       index.wxss
     log
       log.json
       log.wxml
       log.js
       log.wxss
     app.js
     app.json
     app.wxss
复制代码

使用wepy框架后目录结构：

 project
   src
     pages
       index.wpy
       log.wpy
     app.wpy
复制代码

默认使用babel编译，支持ES6/7的一些新特性

用户可以通过修改wepy.config.js配置文件，配置自己熟悉的babel环境进行开发。默认开启使用了一些新的特性如promise，async/await等等。

对原生API进行优化

对现在API进行promise处理，同时修复一些现有API的缺陷，比如：wx.request并发问题等。

原生代码：

onLoad = function () {
    var self = this;
    wx.login({
        success: function (data) {
            wx.getUserInfo({
                success: function (userinfo) {
                    self.setData({userInfo: userinfo});
                }
            });
        }
    });
}
复制代码

基于WePY的代码：

import wepy from 'wepy';

async onLoad() {
    await wepy.login();
    this.userInfo = await wepy.getUserInfo();
}
复制代码

赋值方式更简便

频繁使用setData影响页面的流畅度

原生小程序赋值方式

this.setData ({   a:b})
复制代码

wepy赋值方式

this.a = b
复制代码