小程序入门
微信小程序上线至今已经有一年多了, 打开微信小程序搜索，已经有海量的应用入驻，其中不乏京东、当当、苏宁易购等各大电商平台。有微信流量入口作为支撑，相信小程序的爆发估计只是时间问题。
恰逢周末有时间来尝鲜体验一把小程序的开发流程。
开发语言
小程序的开发语言是JavaScript，模板采用类html的wxml，样式采用类css的wxss，做过web开发的同学可以直接上手。
另外，可以采用es6来编写程序，官方开发工具提供了esx转JavaScript的功能。
账号&开发工具
-
点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。
-
微信开发者工具
这个工具是开发、调试和模拟运行微信小程序的最核心的工具了，所以必须安装。下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
代码组成
一个小程序有JSON 配置，WXML 模板，WXSS 样式，JS (交互逻辑)文件构成。
demo 文件目录结构如下：
├── app.js
├── app.json
├── app.wxss
├── images
│ ├── icon_seo.png
│ ├── icon_seo_HL.png
│ ├── icon_speed.png
│ └── icon_speed_HL.png
├── pages
│ ├── index
│ │ ├── index.js
│ │ ├── index.wxml
│ │ └── index.wxss
│ └── logs
│ ├── logs.js
│ ├── logs.json
│ ├── logs.wxml
│ └── logs.wxss
├── project.config.json
└── utils
└── util.js
JSON 文件用于三个地方分别是小程序全局配置，页面配置，项目配置。
-
app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
-
页面配置page.json 用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。
-
工具配置 project.config.json用于一些个性化配置，例如界面颜色、编译配置等等。
WXML 和 WXSS文件等同于web开发中的html和css在此不做赘述。
JS 用于交互逻辑，如和用户做交互：响应用户的点击、获取用户的位置 。
不足
由于微信小程序的运行环境并不是一个标准的浏览器环境，而且微信的封装工作并不完善。小程序开发工具打包时实现了require函数加载依赖，但并不是完整的CommonJS依赖管理，不能调用npm包。另外,小程序组件复用停留在模板级重用，而不支持例如react那样的组件级重用。
为此,有一个开源框架WePY解决了微信小程序先天的不足。
开发框架
WePY是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise，Async Functions的引入都是为了能让开发小程序项目变得更加简单，高效。
- 类Vue开发风格
- 支持自定义组件开发
- 支持引入NPM包
- 支持Promise
- 支持ES2015+特性，如Async Functions
- 支持多种编译器，Less/Sass/Stylus/PostCSS、Babel/Typescript、Pug
- 支持多种插件处理，文件压缩，图片压缩，内容替换等
- 支持 Sourcemap，ESLint等
- 小程序细节优化，如请求列队，事件优化等
网友评论