小程序开发 Wepy 框架 使用规范

2019独角兽企业重金招聘Python工程师标准>>>

 

1、安装 Node.js

 Node官网 https://nodejs.org/en/

中文网 http://nodejs.cn/download/

如果是真实项目，安装LTS版本比较好

也可以用nvm进行管理安装 

2、快速入门

安装 wepy 命令行工具 （若有安装，会自动更新）。

npm install wepy-cli -g

wepy -v
# 查看wepy版本

在开发目录生成开发DEMO。

# 1.7.0 版本以下的用
wepy new demo

# 1.7.0之后的版本使用
 wepy init standard myproject  初始化项目

# 使用 wepy list 查看项目模板

切换至项目目录

cd myproject

开发实时编译。

wepy build --watch

开发使用说明

1. 使用微信开发者工具新建项目，本地开发选择dist目录。

2. 微信开发者工具 --> 项目 --> 关闭ES6转ES5。

3. 本地项目根目录运行wepy build --watch，开启实时编译。

代码规范：

1. 变量与方法使用尽量使用驼峰式命名，避免使用$开头。
   以$开头的方法或者属性为框架内建方法或者属性，可以被使用，使用前请[参考API文档]()。

2. 入口，页面，组件的命名后缀为.wpy。外链的文件可以是其它后缀。
   请参考wpy文件说明

3. 使用ES6语法开发。
   框架在ES6下开发，因此也需要使用ES6开发小程序，ES6中有大量的语法糖可以让我们的代码更加简洁高效。

4. 使用Promise （不懂promise请移步廖雪峰的promise教程 ：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000 ）
   框架默认对小程序提供的API全都进行了 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实现代码：

async onLoad() {
    await wx.login();
    this.userInfo = await wx.getUserInfo();
}

 

更新DOM

若在操作时数据时发现dom并没有发生改变，那么则需要执行 $apply 脏数据检查机制。（谨用。不可多处出现，会影响性能）

示例：

this.val = 'apply update val';
this.$apply();

 

未完。

转载于:https://my.oschina.net/johnsken/blog/1627051