騰訊云搭建微信小程序流程介紹
在騰訊云上搭建小程序服務(wù)器是小程序開(kāi)發(fā)商基本的技能之一,以下是騰訊云搭建小程序的流程介紹。
準(zhǔn)備域名和證書(shū)
任務(wù)時(shí)間:20min ~ 40min
小程序后臺(tái)服務(wù)需要通過(guò) HTTPS 訪問(wèn),在實(shí)驗(yàn)開(kāi)始之前,我們要準(zhǔn)備域名和 SSL 證書(shū)。
域名注冊(cè)
如果您還沒(méi)有域名,可以在騰訊云上選購(gòu),過(guò)程可以參考下面的視頻:
視頻 - 在騰訊云上購(gòu)買(mǎi)域名
域名解析
域名購(gòu)買(mǎi)完成后, 需要將域名解析到實(shí)驗(yàn)云主機(jī)上,實(shí)驗(yàn)云主機(jī)的 IP 為:
<您的 CVM IP 地址>
在騰訊云購(gòu)買(mǎi)的域名,可以到控制臺(tái)添加解析記錄,過(guò)程可參考下面的視頻:
視頻 - 如何在騰訊云上解析域名
域名設(shè)置解析后需要過(guò)一段時(shí)間才會(huì)生效,通過(guò) ping 命令檢查域名是否生效 [?],如:
ping www.yourmpdomain.com
如果 ping 命令返回的信息中含有你設(shè)置的解析的 IP 地址,說(shuō)明解析成功。
注意替換下面命令中的 www.yourmpdomain.com 為您自己的注冊(cè)的域名
申請(qǐng) SSL 證書(shū)
騰訊云提供了 SSL 證書(shū)的免費(fèi)申請(qǐng),申請(qǐng)方式可參考下面視頻:
視頻 - 在騰訊云上申請(qǐng) SSL 證書(shū)
申請(qǐng)?zhí)峤缓?,審批結(jié)果會(huì)以短信的形式通知。審批通過(guò)后,可以到 SSL 控制臺(tái)下載您的證書(shū)文件,可參考下面的視頻:
視頻 - 在騰訊云上下載 SSL 證書(shū)
搭建小程序開(kāi)發(fā)環(huán)境
任務(wù)時(shí)間:15min ~ 30min
在開(kāi)始搭建我們的小程序服務(wù)器之前,需要先完成客戶端小程序開(kāi)發(fā)環(huán)境的搭建。
注冊(cè)開(kāi)發(fā)者賬號(hào)
如果你還不是小程序開(kāi)發(fā)者,請(qǐng)先在微信公眾平臺(tái)并注冊(cè):
具體注冊(cè)流程可參考如下視頻:
視頻 - 注冊(cè)開(kāi)發(fā)者賬號(hào)
若您已注冊(cè),請(qǐng)點(diǎn)擊下一步。
配置小程序服務(wù)器信息
登錄微信公眾平臺(tái)后,依次進(jìn)入 設(shè)置 - 開(kāi)發(fā)設(shè)置 - 服務(wù)器域名 - 修改。
掃碼完成身份校驗(yàn)后,request 合法域名和 socket 合法域名均填寫(xiě)在上一步準(zhǔn)備好的域名地址。
配置完成后,點(diǎn)擊 保存并提交。您可以點(diǎn)擊如下視頻查看如何進(jìn)行配置:
視頻 - 配置小程序服務(wù)器信息
運(yùn)行配套小程序代碼
要運(yùn)行本實(shí)驗(yàn)配套的小程序代碼,請(qǐng)下載下列資源:
實(shí)驗(yàn)配套源碼
微信小程序開(kāi)發(fā)工具
源碼下載后,請(qǐng)解壓到本地工作目錄。
開(kāi)發(fā)工具下載后,請(qǐng)安裝并啟動(dòng),然后用微信掃碼登錄。
登錄后,選擇 本地小程序項(xiàng)目 - 添加項(xiàng)目,使用以下配置:
AppID:填寫(xiě)小程序的 AppID,請(qǐng)登錄公眾平臺(tái)后在 設(shè)置 - 開(kāi)發(fā)設(shè)置 - 開(kāi)發(fā)者 ID 中查看
項(xiàng)目名稱(chēng):填寫(xiě)任意您喜歡的名稱(chēng)
項(xiàng)目目錄:選擇剛才解壓的配套源碼目錄(目錄包含 app.js)
填寫(xiě)完成后,點(diǎn)擊 添加項(xiàng)目。具體操作可查看如下視頻:
視頻 - 運(yùn)行配套小程序代碼
設(shè)置實(shí)驗(yàn)域名
在開(kāi)發(fā)工具的 編輯 面板中,選中 app.js 進(jìn)行編輯,需要修改小程序通信域名[?],請(qǐng)參考下面的配置:
App({
config: {
host: 'www.yourdomain.com' // 這個(gè)地方填寫(xiě)你的域名
},
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
編寫(xiě) 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ù)器包的名稱(chēng)和版本號(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)聽(tīng) 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)聽(tīng)端口,等待連接
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 端口的打開(kāi)作為實(shí)驗(yàn)步驟完成的依據(jù),為了后面的實(shí)驗(yàn)步驟順利進(jìn)行,請(qǐng)不要使用其它端口號(hào)
運(yùn)行 HTTP 服務(wù)
在開(kāi)始之前,我們先來(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小程序工具提供多類(lèi)型商城/門(mén)店小程序制作,可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面,所看即所得,只需要美工就能做出精美商城。