云上部署微信小程序,需要首先购买云主机及 EIP、安全证书等资源,并且完成域名备案。(滴滴云提供免费备案服务,协助用户完成域名备案)
相关资源准备妥当以后,即可开始部署相关服务了。部署任务的第一步需要在滴滴云主机上完成 Nginx 等 Web 服务部署。本文以 Nginx 举例,如果需要其他案例或者购买等指导,请登录滴滴云官网帮助与支持查看。
- 登录 DC2,安装 Nginx:
sudo su
yum install –y nginx
systemctl start nginx
systemctl enable nginx
- 编辑测试页面:
cd /usr/share/nginx/html
mv index.html index.html.bak
vi index.html
This is hello from Didi!
- 本次测试域名
chaucerhe.com
,已在滴滴云进行转入备案,有关备案流程请参考以下链接:https://www.didiyun.com/icp.html。 - 小程序中应用的域名必须是 HTTPS 开头,因此要为网站服务添加安全证书。
本例中使用了滴滴云 Web 应用防火墙(WAF),并在滴滴云官网购买了安全证书,具体 WAF 的开通方式和安全证书购买流程请参考滴滴云官网。WAF 基本设置如下:
- 在WAF中添加域名
- 添加需要保护的域名
- 设置 HTTPS 并添加证书
- 设置源站 IP,源站 IP 为滴滴云主机的 EIP
- 添加完成后,将 WAF 的 CNAME 添加到域名供应商的 CNAME 记录中,本例中的域名是在阿里云购买,请参考以下设置:
微信小程序前端开发
打开微信开发者工具,以下为模板小程序的页面文件结构:
我们需要对 index.js
中的部分代码进行修改,以下为修改后的代码。注意将 URL 修改为滴滴云主机的域名。
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello world',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
const _this = this
wx.request({
url: 'https://chaucerhe.com',
success:function(res) {
_this.setData({
motto: res.data
})
}
})
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
需要注意的是要将 URL 修改为滴滴云主机的域名。
点击真机调试,弹出二维码,打开微信扫描二维码:
可以看到从滴滴云主机的web服务获取的内容: