万丈高楼平地起，
盘龙卧虎高山齐。
小程序发展史
微信 -- WebView -- JS API -- JS-SDK -- -- JS-SDK增强版 -- 小程序
(每个公众号下所有 Web App 累计最多可缓存 5M 的资源)
小程序相对移动网页开发差异
- 网页开发渲染线程和脚本线程是互斥的（长时间的脚本运行可能会导致页面失去响应）
在小程序中，二者是分开的，分别运行在不同的线程中。（提高用户体验）
- 网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。
小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，
因而缺少相关的DOM API和BOM API。
同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。
（换句话说，封闭式开发）
- 网页开发者需要面对的环境是各式各样的浏览器
小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端（兼容会轻松一点）
小程序代码构成
1. .json后缀的 JSON 配置文件
-
app.json
当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
{
"pages": ["pages/index/index", "pages/logs/logs"], // (必填)用于描述当前小程序所有页面路径
// pages: 数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改
"window": {
"navigationBarTitleText": "WeChat", // 导航栏标题文字内容
"navigationBarBackgroundColor": "#000000", // (默认#000000) 导航栏背景颜色(HexColor)
"navigationBarTextStyle": "white", // (默认white) 导航栏标题颜色，仅支持 black / white
"navigationStyle": "default", // (默认default) default 默认样式,custom 自定义导航栏，只保留右上角胶囊按钮(微信客户端 6.6.0+)
"backgroundColor": "#ffffff", // (默认#ffffff) 窗口的背景色
"backgroundTextStyle": "dark", // (默认dark) 下拉 loading 的样式，仅支持 dark / light
"backgroundColorTop": "#ffffff", // (默认#ffffff) 顶部窗口的背景色，仅 iOS 支持(微信客户端 6.5.16+)
"backgroundColorBottom": "#ffffff", // (默认#ffffff) 底部窗口的背景色，仅 iOS 支持(微信客户端 6.5.16+)
"enablePullDownRefresh": false, // (默认false) 是否开启全局的下拉刷新
"onReachBottomDistance": 50, // (默认50) 页面上拉触底事件触发时距页面底部距离，单位为px
"pageOrientation": "portrait" // (默认portrait) 屏幕旋转设置，支持 auto / portrait / landscape (6.7.3+(auto) /7.0.0+(landscape))
}, // 定义小程序所有页面的顶部背景颜色，文字颜色定义等
"tabBar": {
"color": "#000", // (必填, HexColor) tab 上的文字默认颜色
"selectedColor": "#000", // (必填, HexColor) tab 上的文字选中时的颜色
"backgroundColor": "#fff", // (必填, HexColor) tab 的背景色
"list": [
{
"pagePath": "pages/index/index", // (必填) 页面路径，必须在 pages 中先定义
"text": "首页", // (必填) tab 上按钮文字
"iconPath": "", // 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。
当 postion 为 top 时，不显示 icon
"selectedIconPath": "" // 选中时的图片路径
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
], // (必填)(微信客户端 7.0.0+) tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
"borderStyle": "black", // (默认black) tabbar上边框的颜色， 仅支持 black / white
"position": "bottom", // (默认bottom ) tabBar的位置，仅支持 bottom / top
"custom": false // (默认false) 自定义 tabBar
}, // 底部 tab 栏的表现
"networkTimeout": {
"request": 10000, // (默认60000) wx.request的超时时间，单位：毫秒
"connectSocket": 10000, // (默认60000) wx.connectSocket的超时时间，单位：毫秒
"uploadFile": 10000, // (默认60000) wx.uploadFile的超时时间，单位：毫秒
"downloadFile": 10000 // (默认60000) wx.downloadFile的超时时间，单位：毫秒
}, // 网络超时时间
"debug": true, // 是否开启 debug 模式，默认关闭
"functionalPages": false, // 是否启用插件功能页，默认关闭（微信客户端 6.6.7+）
"subPackages": [], // 分包结构配置（微信客户端 6.5.22+）
"workers": "", // 使用 Worker 处理多线程任务时，设置 Worker 代码放置的目录（微信客户端 6.6.1+）
"requireBackgroundModes": ["audio"], // 申明需要后台运行的能力，类型为数组
"plugins": [], // 声明小程序需要使用的插件（微信客户端 6.6.1+）
"preloadRule": [], // 声明分包预下载的规则（微信客户端 6.7.2+）
"resizable": false, // iPad 小程序是否支持屏幕旋转，默认关闭（微信客户端 6.7.2+）
"navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"], // 需要跳转的小程序列表（微信客户端 6.7.3+）
"usingComponents": [], // 在此处声明的自定义组件视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示" // 小程序获取权限时展示的接口用途说明。最长30个字符
} // 位置相关权限声明
} // 小程序接口权限相关设置（微信客户端 7.0.0+）
}
image.png
project.config.json
开发者工具配置[page].json
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置
页面中配置项在当前页面会 覆盖 app.json 的 window 中相同的配置项
{
"disableScroll": false, // (默认false) 禁止页面整体上下滚动。页面配置中有效，无法在 app.json 中设置
"disableSwipeBack": false, // (默认false) （微信客户端 7.0.0+）禁止页面右滑手势返回
"usingComponents": {} // （微信客户端 6.5.16+）页面自定义组件配置
// ...（其余配置参考 app.js 的 window 配置）
}
小程序的JSON文件 key 必须加双引号，不能加注释，value 支持5种格式(number, string, boolean, object, Null)
2. .wxml后缀的 WXML 模板文件
对标HTML，标签组件化，MVVM开发模式
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}">获取头像昵称</button>
<block wx:else>
<image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
3. .wxss后缀的 WXSS 样式文件
对标CSS，新增了尺寸单位 rpx ，app.wxss全局样式，[page].wxss局部样式，仅支持 部分 CSS 选择器
1px == 750 / (设计稿宽度) rpx
1rem == (750 / 20) rpx
开发微信小程序时设计师可以用 iPhone6 (375px) 作为视觉稿的标准: 1px === 2rpx
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束
<view style="color:{{color}};" /> // 动态演示使用style (不能绑定动态class?)
image.png
4. .js 后缀的 JS 脚本逻辑文件
对标JS
