騰訊云搭建微信小程序流程介紹

　　在騰訊云上搭建小程序服務(wù)器是小程序開發(fā)商基本的技能之一，以下是騰訊云搭建小程序的流程介紹。

　　準(zhǔn)備域名和證書

　　任務(wù)時(shí)間：20min ~ 40min

　　小程序后臺(tái)服務(wù)需要通過(guò) HTTPS 訪問(wèn)，在實(shí)驗(yàn)開始之前，我們要準(zhǔn)備域名和 SSL 證書。

　　域名注冊(cè)

　　如果您還沒有域名，可以在騰訊云上選購(gòu)，過(guò)程可以參考下面的視頻：

　　視頻 - 在騰訊云上購(gòu)買域名

　　域名解析

　　域名購(gòu)買完成后, 需要將域名解析到實(shí)驗(yàn)云主機(jī)上，實(shí)驗(yàn)云主機(jī)的 IP 為：

　　<您的 CVM IP 地址>

　　在騰訊云購(gòu)買的域名，可以到控制臺(tái)添加解析記錄，過(guò)程可參考下面的視頻：

　　視頻 - 如何在騰訊云上解析域名

　　域名設(shè)置解析后需要過(guò)一段時(shí)間才會(huì)生效，通過(guò) ping 命令檢查域名是否生效 [?]，如：

　　ping www.yourmpdomain.com

　　如果 ping 命令返回的信息中含有你設(shè)置的解析的 IP 地址，說(shuō)明解析成功。

　　注意替換下面命令中的 www.yourmpdomain.com 為您自己的注冊(cè)的域名

　　申請(qǐng) SSL 證書

　　騰訊云提供了 SSL 證書的免費(fèi)申請(qǐng)，申請(qǐng)方式可參考下面視頻：

　　視頻 - 在騰訊云上申請(qǐng) SSL 證書

　　申請(qǐng)?zhí)峤缓?，審批結(jié)果會(huì)以短信的形式通知。審批通過(guò)后，可以到 SSL 控制臺(tái)下載您的證書文件，可參考下面的視頻：

　　視頻 - 在騰訊云上下載 SSL 證書

　　搭建小程序開發(fā)環(huán)境

　　任務(wù)時(shí)間：15min ~ 30min

　　在開始搭建我們的小程序服務(wù)器之前，需要先完成客戶端小程序開發(fā)環(huán)境的搭建。

　　注冊(cè)開發(fā)者賬號(hào)

　　如果你還不是小程序開發(fā)者，請(qǐng)先在微信公眾平臺(tái)并注冊(cè)：

　　具體注冊(cè)流程可參考如下視頻：

　　視頻 - 注冊(cè)開發(fā)者賬號(hào)

　　若您已注冊(cè)，請(qǐng)點(diǎn)擊下一步。

　　配置小程序服務(wù)器信息

　　登錄微信公眾平臺(tái)后，依次進(jìn)入 設(shè)置 - 開發(fā)設(shè)置 - 服務(wù)器域名 - 修改。

　　掃碼完成身份校驗(yàn)后，request 合法域名和 socket 合法域名均填寫在上一步準(zhǔn)備好的域名地址。

　　配置完成后，點(diǎn)擊 保存并提交。您可以點(diǎn)擊如下視頻查看如何進(jìn)行配置：

　　視頻 - 配置小程序服務(wù)器信息

　　運(yùn)行配套小程序代碼

　　要運(yùn)行本實(shí)驗(yàn)配套的小程序代碼，請(qǐng)下載下列資源：

　　實(shí)驗(yàn)配套源碼

　　微信小程序開發(fā)工具

　　源碼下載后，請(qǐng)解壓到本地工作目錄。

　　開發(fā)工具下載后，請(qǐng)安裝并啟動(dòng)，然后用微信掃碼登錄。

　　登錄后，選擇 本地小程序項(xiàng)目 - 添加項(xiàng)目，使用以下配置：

　　AppID：填寫小程序的 AppID，請(qǐng)登錄公眾平臺(tái)后在 設(shè)置 - 開發(fā)設(shè)置 - 開發(fā)者 ID 中查看

　　項(xiàng)目名稱：填寫任意您喜歡的名稱

　　項(xiàng)目目錄：選擇剛才解壓的配套源碼目錄(目錄包含 app.js)

　　填寫完成后，點(diǎn)擊 添加項(xiàng)目。具體操作可查看如下視頻：

　　視頻 - 運(yùn)行配套小程序代碼

　　設(shè)置實(shí)驗(yàn)域名

　　在開發(fā)工具的 編輯 面板中，選中 app.js 進(jìn)行編輯，需要修改小程序通信域名[?]，請(qǐng)參考下面的配置：

　　App({

　　config: {

　　host: 'www.yourdomain.com' // 這個(gè)地方填寫你的域名

　　},

　　onLaunch () {

　　console.log('App.onLaunch()');

　　}

　　});

　　當(dāng)然，這步操作也錄制了對(duì)應(yīng)的視頻：

　　視頻 - 設(shè)置實(shí)驗(yàn)域名

　　實(shí)驗(yàn)配套源碼所用通信域名都會(huì)使用該設(shè)置，為了您順利進(jìn)行實(shí)驗(yàn)，請(qǐng)把域名修改為之前步驟準(zhǔn)備的域名

　　搭建 HTTP 服務(wù)

　　任務(wù)時(shí)間：15min ~ 30min

　　下面的步驟，將帶大家在服務(wù)器上使用 Node 和 Express 搭建一個(gè) HTTP 服務(wù)器

　　安裝 NodeJS

　　使用下面的命令安裝 NodeJS

　　sudo apt-get update

　　sudo wget https://mc.qcloudimg.com/static/archive/262420521a966befe17dfa0070ddb272/node-v6.11.0.tar.gz

　　sudo tar xvf node-v6.11.0.tar.gz

　　cd node-v6.11.0

　　sudo ./configure

　　sudo make

　　sudo make install

　　sudo cp /usr/local/bin/node /usr/sbin/

　　安裝完成后，使用下面的命令測(cè)試安裝結(jié)果

　　node -v

　　編寫 HTTP Server 源碼

　　使用下面的命令在服務(wù)器創(chuàng)建一個(gè)工作目錄：

　　sudo mkdir -p /data/release/webapp

　　進(jìn)入此工作目錄

　　cd /data/release/webapp

　　在工作目錄創(chuàng)建 package.json 文件，并修改文件的訪問(wèn)權(quán)限。

　　sudo touch package.json

　　sudo chmod a+r+w package.json

　　修改 package.json 添加我們服務(wù)器包的名稱和版本號(hào)，可參考下面的示例。

　　示例代碼：/data/release/webapp/package.json

　　{

　　"name": "webapp",

　　"version": "1.0.0"

　　}

　　完成后，使用 Ctrl + S 保存文件

　　在工作目錄創(chuàng)建 app.js

　　cd /data/release/webapp

　　sudo touch app.js

　　sudo chmod a+rw app.js

　　修改 app.js 文件，使用 Express.js 來(lái)監(jiān)聽 8765 端口[?]，app.js文件可參考下面的示例代碼。

　　示例代碼：/data/release/webapp/app.js

　　// 引用 express 來(lái)支持 HTTP Server 的實(shí)現(xiàn)

　　const express = require('express');

　　// 創(chuàng)建一個(gè) express 實(shí)例

　　const app = express();

　　// 實(shí)現(xiàn)唯一的一個(gè)中間件，對(duì)于所有請(qǐng)求，都輸出 "Response from express"

　　app.use((request, response, next) => {

　　response.write('Response from express');

　　response.end();

　　});

　　// 監(jiān)聽端口，等待連接

　　const port = 8765;

　　app.listen(port);

　　// 輸出服務(wù)器啟動(dòng)日志

　　console.log(`Server listening at http://127.0.0.1:${port}`);

　　本實(shí)驗(yàn)會(huì)以 8765 端口的打開作為實(shí)驗(yàn)步驟完成的依據(jù)，為了后面的實(shí)驗(yàn)步驟順利進(jìn)行，請(qǐng)不要使用其它端口號(hào)

　　運(yùn)行 HTTP 服務(wù)

　　在開始之前，我們先來(lái)安裝 [PM2]

　　sudo apt-get install npm

　　sudo npm install -g pm2

　　PM2 安裝時(shí)間可能稍長(zhǎng)，請(qǐng)耐心等候 [?]

　　我們的服務(wù)器源碼里使用到了 Express 模塊，下面的命令使用 NPM 來(lái)安裝 Express

　　cd /data/release/webapp

　　sudo npm install express --save

　　安裝完成后，使用 PM2 來(lái)啟動(dòng) HTTP 服務(wù)

　　cd /data/release/webapp

　　pm2 start app.js

　　現(xiàn)在，您的 HTTP 服務(wù)已經(jīng)在 http://<您的 CVM IP 地址>:8765 運(yùn)行

　　要查看服務(wù)輸出的日志，可以使用下面的命令：

　　pm2 logs

　　如果要重啟服務(wù)，可以使用下面的命令：

　　pm2 restart app

　　我們使用 PM2 來(lái)進(jìn)行 Node 進(jìn)程的運(yùn)行、監(jiān)控和管理

　　NPM 倉(cāng)庫(kù)在國(guó)內(nèi)訪問(wèn)速度可能不太理想，如果實(shí)在太慢可以嘗試使用 CNPM 的 Registry 進(jìn)行安裝：npm install pm2 -g --registry=https://r.cnpmjs.org/

　　搭建 HTTPS 服務(wù)

　　任務(wù)時(shí)間：15min ~ 30min

　　微信小程序要求和服務(wù)器的通信都通過(guò) HTTPS 進(jìn)行

　　安裝 Nginx

　　在 Ubuntu 上，可直接使用 apt-get 來(lái)安裝 Nginx

　　sudo apt-get install nginx -y

　　安裝完成后，使用 nginx 命令啟動(dòng) Nginx：

　　sudo /etc/init.d/nginx start

　　此時(shí)訪問(wèn) http://<您的域名> 可以看到 Nginx 測(cè)試頁(yè)面

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面，所看即所得，只需要美工就能做出精美商城。