微信小程序wepy框架学习和使用心得

一、微信小程序 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 官方开发文档