起步
AppID：小程序的AppID相当于小程序平台的一个身份证。
AppID查看：登录https://mp.weixin.qq.com，在“设置”-“开发设置” 中可以看到AppID
代码构成
微信小程序架构.png
1. JSON配置文件
- app.json：小程序的全局配置（所有页面路径、界面表现、网络超时时间、底部Tab等）
- project.config.json：工具配置（界面颜色、编译配置等）
- page.json：页面配置（主要是界面配置顶部颜色、是否允许下拉等），可以提供与主页面不同的效果，如pages/logs下的logs.json配置文件
2. WXML模板文件
传统网页开发采用HTML+CSS+JS的方式，而小程序中WXML类似HTML的作用。
但WXML同于HTML：
- 标签名不同：小程序常用标签有view, button, text 等，并封装了地图、视频、音频等实用组件
- 包含多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式：借鉴渲染与逻辑分离的思路（JS只管理状态，而不直接操作DOM），其中{{}}将变量绑定在界面上，wx:开头具备一定控制作用，辅助数据绑定来描述状态和界面的关系
3. WXSS样式文件
类似CSS，但与CSS不同点：
- 增加尺寸单位：WXSS底层支持尺寸单位rpx，免去换算烦恼
- 提供全局样式和局部样式：类似app.json和page.json
- 仅支持部分选择器
4. JS脚本文件
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
button上添加一个属性bindtap在JS文件中响应这次点击
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})
此外，JS文件可以调用wx提供的各种API
文件结构
小程序包含描述整体程序的app和多个描述各个页面的page
小程序主体包含三个文件，位于项目根目录下
| 文件 | 必须 | 作用 |
|---|---|---|
| app.js | 是 | 小程序逻辑 |
| app.json | 是 | 小程序公共设置 |
| app.wxss | 否 | 全局样式 |
一个页面由四个文件组成，四个文件的路径和文件名需要一致
| 文件 | 必须 | 作用 |
|---|---|---|
| js | 是 | 页面逻辑 |
| wxml | 是 | 页面结构 |
| wxss | 否 | 页面样式 |
| json | 否 | 页面配置 |
小程序能力
-
启动
小程序启动之前会下载全部代码包，接着渲染app.json中第一个页面，程序启动之后app.js中的App实例的onLaunch会执行
App({
onLaunch: function () {
// 小程序启动之后 触发
}
})
-
页面渲染
微信客户端首先[1]根据logs.json生成一个界面（包含顶部颜色文字等等），然后[2]根据WXML和WXSS装载页面结构和样式，最后装载JS文件
Page({
data: { // 参与页面渲染的数据
logs: []
},
onLoad: function () {
// 页面渲染后 执行
}
})
-
组件
提供丰富的基础组件，方便开发者组合拼接成小程序 -
API
提供丰富的API可以进行调用
获取地理位置
wx.getLocation({
type: 'wgs84',
success: (res) => {
var latitude = res.latitude // 经度
var longitude = res.longitude // 纬度
}
})
调用扫一扫
wx.scanCode({
success: (res) => {
console.log(res)
}
})
发布前准备 && 上线
- 小程序版本
| 版本 | 说明 |
|---|---|
| 开发版本 | 使用开发者工具，可将代码上传到开发版本中。 开发版本只保留每人最新的一份上传的代码。点击提交审核，可将代码提交审核。开发版本可删除，不影响线上版本和审核中版本的代码。 |
| 审核中版本 | 只能有一份代码处于审核中。有审核结果后可以发布到线上，也可直接重新提交审核，覆盖原审核版本。 |
| 线上版本 | 线上所有用户使用的代码版本，该版本代码在新版本代码发布后被覆盖更新。 |
- 发布流程
- 开发者上传代码至开发版本
- 将需要发布的程序提交审核
- 将审核通过的程序点击发布
-
预览
与上传代码不同，使用开发工具可以预览小程序，帮助开发者检查小程序在移动客户端上的真实表现。
