云上部署微信小程序，需要首先购买云主机及 EIP、安全证书等资源，并且完成域名备案。（滴滴云提供免费备案服务，协助用户完成域名备案）

相关资源准备妥当以后，即可开始部署相关服务了。部署任务的第一步需要在滴滴云主机上完成 Nginx 等 Web 服务部署。本文以 Nginx 举例，如果需要其他案例或者购买等指导，请登录滴滴云官网帮助与支持查看。

sudo su
yum install –y nginx
systemctl start nginx
systemctl enable 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!

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 记录中，本例中的域名是在阿里云购买，请参考以下设置：

微信小程序前端开发

访问微信公众平台，注册并登录。
参照链接完善小程序信息，先在微信开发者工具创建项目。
本例是针对微信自带模板小程序“hello world”的修改，获取第一部分中滴滴云主机的网页内容。

打开微信开发者工具，以下为模板小程序的页面文件结构：

我们需要对 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
    })
  }
})

//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服务获取的内容：

本文作者：贺子一

滴滴云微信小程序部署指导

微信小程序前端开发