微信小程序(七)——前端小程序篇

概述

小程序的源码里都会有详细的注释,这里就不罗嗦了,需要说明的是在开发小程序过程中遇见的各种坑。

注意事项

1. 开通腾讯云服务

我们的小程序要正式发布的话,肯定是要跟云服务器结合的。腾讯云给我们提供了详细的文档和解决方案。老实讲,文档呢都是针对旧版本写的,IDE和SDK虽然是最新的,但是文档却是之前版本的。针对新手来讲,真的能让人摸不着北。
我们开通腾讯云服务需要以下几个步骤:

我在开通的时候,总是第5步在上传代码的时候出现了以下问题“当前APPID未授权给腾讯云”:

你要开通腾讯云就要经过第5步上传代码。可是你没开通腾讯云,就无法上传代码。可以说非常尴尬了。
解决办法:先退出腾讯云登录。再以公众号账号登录腾讯云。我就是因为用个人微信号登录腾讯云才出现这个问题的。就算公众号跟个人微信号是绑定的,你也不能用个人微信号进行登录。

2. 小程序POST请求

官网给出的实例是GET请求:

1
2
3
4
5
6
7
8
9
10
11
12
13
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址,默认GET请求
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success: function(res) {
console.log(res.data)
}
})

如果要换成POST请求的话,需要添加method: “POST”。另外特别注意header部分是’content-type’: ‘application/x-www-form-urlencoded’ 。跟GET方式不一样,不然后台接受不到数据:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
wx.request({
url: '你的url',
data: {
code: code
},
method: "POST",
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
success: function (res) {
// console.log(res)
},
fail: function (err) {
console.log("服务器访问失败")
}
})

3. 网络请求完成后,数据同步

我们会在app.js中进行一些初始化的网络加载,例如获取用户信息。网络加载是异步进行的。当我们已近进入小程序主页的时候,可能app.js里面的网络请求还未加载完毕。一旦请求结束后,如何通知页面更新数据?
可以在app.js中使用userInfoReadyCallback。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
wx.request({
url: '你的url',
data: {
code: code
},
method: "POST",
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
success: function (res) {//数据成功加载后
// console.log(res)
// do something
wx.getUserInfo({//此请求写在此处是为了ReadyCallback,当所有的加载都完成时才进行下一步操作
success: res => {
that.globalData.userInfo = res.userInfo
if (that.userInfoReadyCallback) {//数据更新回调,传递res
that.userInfoReadyCallback(res)
}
}
})
},
fail: function (err) {
console.log("服务器访问失败")
}
})

然后在你的页面,例如index页面中,

1
2
3
4
5
6
const app = getApp()
Page({
app.userInfoReadyCallback = res => {//res就是上面传递过来的
// do something
}
})

4. 跳转传参+生命周期

这里的话文档会表述的更加详细,提供一下链接:
页面跳转

5. 获取openid和发送模板服务消息

要对用户身份进行验证,肯定获取openid。这个十分重要。但是在本地的服务器后台获取openid会报关于证书的错误(CURLOPT_SSL_VERIFYHOST no longer accepts the value 1),测试版项目本身也是没有证书的。这样就无法在本地获取openid了。所以要结合新浪的SAE来获取。这是下节的主要内容。