微信小程序之初践

前言

此文非教程，主要记录小程序实际开发过程中的一些体验，O(∩_∩)O。

小程序自带前端组件及API，官方文档有详尽的使用教程，使用起来还是比较方便的， 在服务端的开发上我使用的是node.js（作为前端较易上手），服务器使用的是入门级阿里云ECS（1核，2G，1Mbps带宽），数据库使用mysql+redis（session存储），部署于服务器本地，使用git作为代码管理工具。

---

开发者工具

官网下载：mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html

AppID

若小程序仅供本地调试使用，可不填AppID，添加项目时选择"无AppID即可"；

若需使用AppID，登录mp.weixin.qq.com，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的 AppID 了，注意不可直接使用服务号或订阅号的 AppID。

创建quick start

方法1：

使用微信web开发者工具新建小程序，项目目录选择一个空的文件夹，开发者工具会提示，是否需要创建一个 quick start 项目。选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的 demo。

方法2：

在官方文档（mp.weixin.qq.com/debug/wxadoc/dev/）中下载quick start源码到指定小程序路径

使用微信web开发者工具新建小程序，项目目录指向小程序系统路径

打开quick start

比照官方文档，了解小程序的框架配置：

全局配置文件（app.json）

app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口�背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释；

官网配置详解参考：mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

全局定义（app.js）

app.js是小程序的脚本代码，我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量、调用框架提供的丰富的 API；

API使用参考官网文档：mp.weixin.qq.com/debug/wxadoc/dev/api/

全局样式（app.wxss）

app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

拓展工具/插件类文件夹（utils）

放置拓展工具/插件类文件，以日期转换插件为例：

在页面脚本文件中引用，如：

require('../../utils/date-format.js').dateformat()

travel.date = new Date(travel.date).Format('yyyy-MM-dd')

页面文件夹

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成：

JS： 页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等；

JSON：是页面的配置文件，当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置；

WXML：页面的结构文件；

WXSS：页面的样式表，当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

新建页面

小程序新增单页无需手动添加文件或文件夹，在全局配置中注册新的单页地址即可，保存后会自动创建该单页的文件夹及文件

手机预览

开发者工具左侧菜单栏选择"项目"，点击"预览"，扫码后即可在微信客户端中体验。