小程序初体验

近期公司需要做一个合格证保管箱的小程序，我就提前做了前期调研，希望对初次开发小程序的小伙伴有所帮助。

1.小程序的起步

首先，简单粗暴的把官网先放出来，https://developers.weixin.qq.com/miniprogram/dev/。第一步就是先申请账号，注册小程序， https://mp.weixin.qq.com/wxopen/waregister?action=step1，根据指引填写信息和提交相应的资料，接下来就是设置小程序的AppID，登录 https://mp.weixin.qq.com/ ，我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。下一步就是安装开发工具，附上下载页面https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=201879。打开小程序开发者工具，用微信扫码登录开发者工具，就开发你的第一个小程序啦！

2.小程序的代码构成

2.1 JSON 配置

app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
以下是一个包含了所有配置选项的 app.json ：

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

2.2 WXML 模板

WXML 充当的就是类似 HTML 的角色，和 HTML 非常相似，有标签、属性等等构成。

a.小程序有自己的标签

比如 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。

b.多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

2.3 WXSS 样式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

a.新增了尺寸单位。

在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

b.提供了全局的样式和局部样式。

和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

c.WXSS 仅支持部分 CSS 选择器。

2.4 JS 交互逻辑

你可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中，在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称，最后通过 setData 把获取到的信息显示到界面上。