![](http://img.blog.itpub.net/blog/2019/01/02/027010e252d1118c.png?x-oss-process=style/bb)

雲上部署微信小程式，需要首先購買雲主機及 EIP、安全證書等資源，並且完成域名備案。（[滴滴雲](https://blog.didiyun.com)提供免費備案服務，協助使用者完成域名備案）

相關資源準備妥當以後，即可開始部署相關服務了。部署任務的第一步需要在[滴滴雲](https://blog.didiyun.com)主機上完成 Nginx 等 Web 服務部署。本文以 Nginx 舉例，如果需要其他案例或者購買等指導，請登入滴滴雲官網幫助與支援檢視。

1. 登入 DC2，安裝 Nginx：
```
sudo su
yum install –y nginx
systemctl start nginx
systemctl enable nginx
```
2.  編輯測試頁面：
```
cd /usr/share/nginx/html
mv index.html index.html.bak
vi index.html
This is hello from Didi!
```
3. 本次測試域名` chaucerhe.com`，已在滴滴雲進行轉入備案，有關備案流程請參考以下連結：[https://www.didiyun.com/icp.html](https://www.didiyun.com/icp.html "https://www.didiyun.com/icp.html")。
4. 小程式中應用的域名必須是 HTTPS 開頭，因此要為網站服務新增安全證書。

本例中使用了滴滴雲Web 應用防火牆（WAF），並在滴滴雲官網購買了安全證書，具體 WAF 的開通方式和安全證書購買流程請參考滴滴雲官網。WAF 基本設定如下：

1. 在WAF中新增域名
![](http://img.blog.itpub.net/blog/2019/01/02/a8004b0a67e6c4bb.png?x-oss-process=style/bb)
2. 新增需要保護的域名
![](http://img.blog.itpub.net/blog/2019/01/02/956f06e367b72eae.png?x-oss-process=style/bb)
3. 設定 HTTPS 並新增證書
![](http://img.blog.itpub.net/blog/2019/01/02/1ff8a1a70d255287.png?x-oss-process=style/bb)
4. 設定源站 IP，源站 IP 為滴滴雲主機的 EIP
![](http://img.blog.itpub.net/blog/2019/01/02/3d125c6b531b0ceb.png?x-oss-process=style/bb)
5. 新增完成後，將 WAF 的 CNAME 新增到域名供應商的 CNAME 記錄中，本例中的域名是在阿里雲購買，請參考以下設定：
![](http://img.blog.itpub.net/blog/2019/01/02/b3fbfb6621b2a190.png?x-oss-process=style/bb)

# 微信小程式前端開發

1.  訪問[微信公眾平臺](https://mp.weixin.qq.com/ "微信公眾平臺") ，註冊並登入。
2. 參照[連結](https://developers.weixin.qq.com/miniprogram/introduction/index.html "連結")完善小程式資訊，先在微信開發者工具建立專案。
3. 本例是針對微信自帶模板小程式“hello world”的修改，獲取第一部分中滴滴雲主機的網頁內容。

開啟微信開發者工具，以下為模板小程式的頁面檔案結構：
![](http://img.blog.itpub.net/blog/2019/01/02/a190661e3ad615ca.png?x-oss-process=style/bb)

我們需要對 `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 修改為滴滴雲主機的域名。

![](http://img.blog.itpub.net/blog/2019/01/02/19f6b243aef68d1a.png?x-oss-process=style/bb)

點選真機除錯，彈出二維碼，開啟微信掃描二維碼：
![](http://img.blog.itpub.net/blog/2019/01/02/08d5860bb6c41c1d.png?x-oss-process=style/bb)

可以看到滴滴雲主機的 web 服務獲取的內容：
![](http://img.blog.itpub.net/blog/2019/01/02/2d2a661f7ade8aaa.png?x-oss-process=style/bb)

滴滴雲微信小程式部署指導

相關文章