一、微信小顺序wepy框架简介:

微信小顺序WePY框架是腾讯官方推出来的框架,相似的框架另有美团的mpvue,京东的Taro等; 现在公司开辟小顺序重要用到的是微信原生要领和官方的wepy框架; wepy框架在开辟过程当中参考了 Vue 等现有框架的一些语法作风和功用特征，对原生小顺序的开辟形式举行了再次封装，更贴近于 MVVM 架构形式, 并支撑ES6/7的一些新特征。相对更轻易上手,进步开辟效力;

二、WePY项目的建立与目次构造

1. WePY的装置或更新都经由过程npm举行，全局装置或更新WePY命令行东西
   npm install wepy-cli -g
2. 在开辟目次中天生Demo开辟项目
   wepy new myproject
3. 切换至项目目次
   cd myproject
4. 装置依靠
   npm install
5. 开启及时编译
   wepy build --watch

6. WePY项目的目次构造以下

    ├── dist                   小顺序运转代码目次（该目次由WePY的build指令自动编译天生，请不要直接修正该目次下的文件）
    ├── node_modules           
    ├── src                    代码编写的目次（该目次为运用WePY后的开辟目次）
    |   ├── components         WePY组件目次（组件不属于完全页面，仅供完全页面或其他组件援用）
    |   |   ├── com_a.wpy      可复用的WePY组件a
    |   |   └── com_b.wpy      可复用的WePY组件b
    |   ├── pages              WePY页面目次（属于完全页面）
    |   |   ├── index.wpy      index页面（经build后，会在dist目次下的pages目次天生index.js、index.json、index.wxml和index.wxss文件）
    |   |   └── other.wpy      other页面（经build后，会在dist目次下的pages目次天生other.js、other.json、other.wxml和other.wxss文件）
    |   └── app.wpy            小顺序设置项（全局数据、款式、声明钩子等；经build后，会在dist目次下天生app.js、app.json和app.wxss文件）
    └ ── package.json           项目的package设置

7. 搭建好项目后，IDE需设置代码高亮，文件后缀为.wpy，可共用Vue的高亮划定规矩，但须要手动设置，细致设置人人可参考wepy官方文档

三、wepy运用心得总结：

1. wepy代码作风相似Vue，如computed,data,methods等用法差不多,熟习vue开辟的同砚看看文档能够轻松上手，不过照样有许多处所写法轻易殽杂，我工作中碰到的总结几个,如列表轮回,前提衬着,父子组件值通报等,下面举例说明:

    1). wepy和vue列表轮回对照:
     // wepy 列表轮回,表面可套一层repeat标签,注重和vue写法的区分
    <repeat for="{{list}}" key="index>
        <view>{{item}}</view>
    </repeat>
    
    // vue 列表轮回,表面可套一层template标签
    <template v-for="(item,index) in list" :key="index"> // 不引荐key直接用索引index
        <div>{{item}}<div>
    </template>
    
    2). wepy和vue前提衬着中,wepy须要加{{}},vue不须要,内里都能够写表达式举行推断:
       <view wx:if="{{show}}"></view>
       <div v-if="show"></div>
       
    3). 父子组件值通报二者都在子组件顶用props吸收, props中能够定义能吸收的数据类型，假如不符合会报错,
        wepy能够经由过程运用.sync修饰符来到达父组件数据绑定至子组件的结果，也能够经由过程设置子组件props的
        twoWay:true来到达子组件数据绑定至父组件的结果。那假如既运用.sync修饰符,同时子组件props中
        增加的twoWay: true时，就能够完成数据的双向绑定了;
        
    // parent.wpy
        
        <child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>
        
        data = {
            parentTitle: 'p-title'
        };
        
        
        // child.wpy
        
        props = {
            // 静态传值
            title: String,
        
            // 父向子单向动态传值
            syncTitle: {
                type: String,
                default: 'null'
            },
        
            twoWayTitle: {
                type: String,
                default: 'nothing',
                twoWay: true
            }
        };
        
        onLoad () {
            console.log(this.title); // p-title
            console.log(this.syncTitle); // p-title
            console.log(this.twoWayTitle); // p-title
        
            this.title = 'c-title';
            console.log(this.$parent.parentTitle); // p-title.
            this.twoWayTitle = 'two-way-title';
            this.$apply();
            console.log(this.$parent.parentTitle); // two-way-title.  --- twoWay为true时，子组件props中的属性值转变时，会同时转变父组件对应的值
            this.$parent.parentTitle = 'p-title-changed';
            this.$parent.$apply();
            console.log(this.title); // 'c-title';
            console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修饰符的props属性值，当在父组件中转变时，会同时转变子组件对应的值。

2.wepy支撑自定义组件开辟,完成组件复用,削减代码冗余,进步开辟效力;

3.wepy支撑引入npm包,拓展了许多要领;

4.支撑Promise,ES2015+特征，如async await 等;

5.支撑多种编译器，Less/Sass/Styus、Babel/Typescript、Pug;

6.支撑多种插件处置惩罚，文件紧缩，图片紧缩，内容替代等;

7.支撑 Sourcemap，ESLint代码范例治理等;

8.对小顺序wx.request要领参数举行了修正,返回Promise对象,优化了事宜参数通报,细致用法以下:

// wx.request原生代码:
wx.request({
    url: 'xxx',
    success: function (data) {
        console.log(data);
    }
});

// WePY 运用体式格局, 须要开启 Promise 支撑，参考开辟范例章节
wepy.request('xxxx').then((d) => console.log(d));

// async/await 的运用体式格局, 须要开启 Promise 和 async/await 支撑，参考 WIKI
async function request () {
   let d = await wepy.request('xxxxx');
   console.log(d);

// 原生的事宜传参体式格局:
<view data-id="{{index}}" data-title="wepy" data-other="otherparams" bindtap="tapName"> Click me! </view>
Page({
    tapName: function (event) {
        console.log(event.currentTarget.dataset.id)// output: 1
        console.log(event.currentTarget.dataset.title)// output: wepy
        console.log(event.currentTarget.dataset.other)// output: otherparams
    }
});

// WePY 1.1.8今后的版本，只允许传string。
<view @tap="tapName({{index}}, 'wepy', 'otherparams')"> Click me! </view>
methods: {
    tapName (id, title, other, event) {
        console.log(id, title, other)// output: 1, wepy, otherparams
    }
}

四 、末了一点点感悟:

本文总结的比较浅易,许多处所说的也不是太细致,迎接人人留言一同交换讨论,对峙进修,不停探究总结,路漫漫其修远兮,吾将高低而求索!
参考资料:wepy官方文档 ; 微信小顺序官网开辟文档 ; vue官方开辟文档