当前位置: 首页 > news >正文

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

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

 

1、安装 Node.js

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

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

111248_EIQo_2701299.png

如果是真实项目,安装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

相关文章:

  • 傲娇的性格、逗比的语气,和聊天机器人谈情说爱可行吗?
  • 自己简单写的 事件订阅机制
  • ReactNative从零到完整项目-state使用详解
  • 150行实现Promise 90%的功能
  • PlaNet图片识别机器,准确表现超过人类
  • 精选15个国外CSS框架
  • python基础—条件语句
  • 【391天】每日项目总结系列128(2018.03.03)
  • 有货移动Web端性能优化探索实践
  • 修复.NET的HttpClient
  • 51nod1683
  • KPN iTV的敏捷转型之旅
  • 设计模式之禅之单例模式!
  • 纠纷判决已出,法官要求Uber归还所有Waymo自动驾驶机密文件
  • 10个最新交互式Web设计实例欣赏
  • 【刷算法】从上往下打印二叉树
  • CentOS学习笔记 - 12. Nginx搭建Centos7.5远程repo
  • CSS实用技巧干货
  • isset在php5.6-和php7.0+的一些差异
  • Java编程基础24——递归练习
  • java概述
  • java取消线程实例
  • laravel with 查询列表限制条数
  • Phpstorm怎样批量删除空行?
  • SpringCloud(第 039 篇)链接Mysql数据库,通过JpaRepository编写数据库访问
  • 名企6年Java程序员的工作总结,写给在迷茫中的你!
  • 前端面试总结(at, md)
  • 实战|智能家居行业移动应用性能分析
  • 使用 Docker 部署 Spring Boot项目
  • 一份游戏开发学习路线
  • PostgreSQL 快速给指定表每个字段创建索引 - 1
  • Spring Batch JSON 支持
  • ​Linux·i2c驱动架构​
  • ​ubuntu下安装kvm虚拟机
  • ​草莓熊python turtle绘图代码(玫瑰花版)附源代码
  • ​创新驱动,边缘计算领袖:亚马逊云科技海外服务器服务再进化
  • #微信小程序:微信小程序常见的配置传值
  • $jQuery 重写Alert样式方法
  • (10)STL算法之搜索(二) 二分查找
  • (16)UiBot:智能化软件机器人(以头歌抓取课程数据为例)
  • (175)FPGA门控时钟技术
  • (3)(3.2) MAVLink2数据包签名(安全)
  • (二开)Flink 修改源码拓展 SQL 语法
  • (分布式缓存)Redis分片集群
  • (附表设计)不是我吹!超级全面的权限系统设计方案面世了
  • (附源码)计算机毕业设计ssm基于Internet快递柜管理系统
  • (附源码)计算机毕业设计SSM智能化管理的仓库管理
  • (机器学习-深度学习快速入门)第三章机器学习-第二节:机器学习模型之线性回归
  • (蓝桥杯每日一题)平方末尾及补充(常用的字符串函数功能)
  • (一)pytest自动化测试框架之生成测试报告(mac系统)
  • (转)nsfocus-绿盟科技笔试题目
  • ***汇编语言 实验16 编写包含多个功能子程序的中断例程
  • ***原理与防范
  • **PHP二维数组遍历时同时赋值
  • .NET 3.0 Framework已经被添加到WindowUpdate