微信小程序开发教程
如果你是看公开课视频来的,请注意
公开课上演示的代码我放到了backup
分支上,当前版本包含一套自动化工作流,请仔细往下看。
如果你不了解Node和自动化工作,可以看看之前的版本:
豆瓣电影小程序真机测试
目录
重要申明
微信小程序官方已经向没有资格的开发者开放了
微信Web开发者工具
的使用这里不需要再用之前的办法破解,破解了有问题!破解了有问题!破解了有问题!
解决办法
完全卸载之前的版本(删除掉用户目录下与
微信Web开发者工具
相关的目录)安装
0.9.092300
或0.10.102800
版本
下载链接
0.10.102800
版本
开发阶段与生产阶段分离。
自动化生成新页面所需文件并添加到配置中。
以
Standard Code Style
校验全部的js
和json
文件。开发阶段
json
配置文件可以有注释,方便备注。代码中集成部分文档内容,减少查文档的时间。
开发阶段可以使用
less
完成样式编码,原因你懂得~ (如果你了解这些,当然可以支持sass
等其他预处理样式)。借助
babel
自动进行ES2015
特性转换,放心使用新特性。开发阶段用
xml
文件后缀取代wxml
后缀,避免在开发工具中配置代码高亮。Source Map
Travis CI
操作步骤
for English
将项目克隆到本地
用到了GIT
环境,没有环境的话请自行解决吧。
# 定位到任意目录$ cd path/to/root# 克隆仓库到指定的文件夹$ git clone https://github.com/zce/weapp-demo.git [project-name] --depth 1# 进入指定的文件夹$ cd [project-name]
用到了Node
环境,没有环境的话也请自行解决吧。
$ npm install
for English
开发阶段
执行如下命令
# 启动监视$ npm run watch
通过微信Web开放者工具
打开项目根目录下dist
文件夹,预览~
打开
微信Web开放者工具
,选择添加项目
,填写或选择相应信息AppID:点击右下角
无AppID
(尚未开放申请)项目名称:随便填写,因为不涉及到部署,所以无所谓
项目目录:选择项目根目录下
dist
文件夹点击
添加项目
可以通过任意开发工具完成
src
下的编码,gulp
会监视项目根目录下src
文件夹,当文件变化自动编译
创建新页面
执行如下命令
# 启动生成器$ npm run generate? Input the page name (index) [page-name]? Do you need a configuration file (y/N) N? Select a style framework (Use arrow keys)> less# 自动生成...
由于微信小程序的每一个页面有特定的结构,新建工作比较繁琐。可以通过此任务减少操作。
生产阶段
执行如下命令
# 启动编译$ npm run build
生产阶段的代码会经过压缩处理,最终输出到dist
下。
同样可以通过微信Web开放者工具
测试。
开发计划
自动化生成新页面所需文件;
自动生成新页面时,自动添加配置到
app.json
;加入
ES2015
的Polyfill
,支持类似Promise
的新API
;自动刷新
微信Web开放者工具
中的预览;HTML
toWXML
转换器,让大家可以直接使用HTML
元素开发;
分支说明
for 新手同学
这段时间有很多人反映代码看不懂,没法看下去。
可能有很多刚入门的同学,刚开始学习没有接触太多,而我的这个仓库也旨在服务大众。
为此特地创建多个分支,每个分支的特点和复杂程度各不相同(计划,请持续关注):
最基本的微信小程序项目结构
一个简单页面的工作
包含
NavigationBar
和TabBar
的设置多标签页面切换
划分程序中的各个页面
分别完成各个页面的结构和布局
页面与页面之间的跳转
使用假数据的方式完成数据绑定
改用
wx.request
接口调用豆瓣API
完成数据加载增加加载过程界面体现(loading)
封装操作
豆瓣API
的模块二次封装
微信API
为Promise
的实现上拉加载(数据分页)
其他
微信API
的使用..
master
主线版本,包含全部功能和特性!
相关项目
zce/weapp-boilerplate - 一个小程序的快速开发骨架
项目地址:https://github.com/zce/weapp-demo