官网：https://mp.weixin.qq.com/cgi-bin/wx
开发小程序之前需要先注册一个小程序，可以使用不同主体注册小程序，相应的权限也不同。例如以个人的身份注册小程序是无法获得支付权限的 (也可以使用测试号体验)
注册完成后设置相关信息，获取 AppID 与 AppSecret，下载开发者工具，登录，创建项目
首先右上
详情-本地设置，勾选不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书
小程序的开发属于前端开发，主要使用 JavaScript
小程序目录结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page
主体部分
由三个文件组成，必须放在项目的根目录
| 文件 | 作用 |
|---|---|
| app.js | 小程序逻辑 |
| app.json | 小程序公共配置 |
| app.wxss | 小程序公共样式表，非必须文件，类似 CSS |
页面
一个小程序有多个页面，存放在 pages 目录
每个页面由四个文件组成
| 文件类型 | 是否必须 | 作用 |
|---|---|---|
| js | 是 | 页面逻辑，JavaScript |
| wxml | 是 | 页面结构、布局，HTML |
| json | 否 | 页面配置 |
| wxss | 否 | 页面样式表，CSS |
简单入门
小程序的编写风格类似于 Vue
插值
wxml
1
<view></view>
js
1
2
3
4
5
Page({
data: {
title: 'Hello'
}
})
获取用户信息
wxml
1
2
3
4
<view>
<button type="default" bindtap="getUserInfo">获取用户信息</button>
<image src="" style="width: 100px; height: 100px;"/>
</view>
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Page({
data: {
title: 'Hello',
avatarUrl: '',
nickName: ''
},
getUserInfo: function(){
wx.getUserProfile({
desc: '获取用户信息',
success: (res) => {
console.log(res);
this.setData({
avatarUrl: res.userInfo.avatarUrl,
nickName: res.userInfo.nickName
})
}
})
}
})
微信登录
wxml
1
2
3
4
<view>
<button type="primary" bind:tap="wxlogin">微信登录</button>
授权码：
</view>
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Page({
data: {
code: ''
},
wxlogin: function(){
wx.login({
success: (res) => {
console.log("授权码：" + res.code);
this.setData({
code: res.code
})
},
})
}
})
微信登录流程：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
发送 HTTP 请求
wxml
1
2
3
4
<view>
<button type="warn" bind:tap="sendRequest">发送请求</button>
响应结果：
</view>
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Page({
data: {
result: ''
},
sendRequest: function(){
wx.request({
url: 'url', // 请求路径
method: 'GET', // 请求方式
success: (res) => {
console.log("响应结果：" + res.data);
this.setData({
result: res.data // 响应数据
})
}
})
}
})
编译与发布
上方编译按钮，编译完成后在左方预览
代码开发完毕后，上传，指定版本号。上传成功后在微信公众平台提交审核后可以发布为线上版本