騰訊云搭建微信小程序流程介紹
在騰訊云上搭建小程序服務器是小程序開發(fā)商基本的技能之一,以下是騰訊云搭建小程序的流程介紹。
準備域名和證書
任務時間:20min ~ 40min
小程序后臺服務需要通過 HTTPS 訪問,在實驗開始之前,我們要準備域名和 SSL 證書。
域名注冊
如果您還沒有域名,可以在騰訊云上選購,過程可以參考下面的視頻:
視頻 - 在騰訊云上購買域名
域名解析
域名購買完成后, 需要將域名解析到實驗云主機上,實驗云主機的 IP 為:
<您的 CVM IP 地址>
在騰訊云購買的域名,可以到控制臺添加解析記錄,過程可參考下面的視頻:
視頻 - 如何在騰訊云上解析域名
域名設置解析后需要過一段時間才會生效,通過 ping 命令檢查域名是否生效 [?],如:
ping www.yourmpdomain.com
如果 ping 命令返回的信息中含有你設置的解析的 IP 地址,說明解析成功。
注意替換下面命令中的 www.yourmpdomain.com 為您自己的注冊的域名
申請 SSL 證書
騰訊云提供了 SSL 證書的免費申請,申請方式可參考下面視頻:
視頻 - 在騰訊云上申請 SSL 證書
申請?zhí)峤缓螅瑢徟Y果會以短信的形式通知。審批通過后,可以到 SSL 控制臺下載您的證書文件,可參考下面的視頻:
視頻 - 在騰訊云上下載 SSL 證書
搭建小程序開發(fā)環(huán)境
任務時間:15min ~ 30min
在開始搭建我們的小程序服務器之前,需要先完成客戶端小程序開發(fā)環(huán)境的搭建。
注冊開發(fā)者賬號
如果你還不是小程序開發(fā)者,請先在微信公眾平臺并注冊:
具體注冊流程可參考如下視頻:
視頻 - 注冊開發(fā)者賬號
若您已注冊,請點擊下一步。
配置小程序服務器信息
登錄微信公眾平臺后,依次進入 設置 - 開發(fā)設置 - 服務器域名 - 修改。
掃碼完成身份校驗后,request 合法域名和 socket 合法域名均填寫在上一步準備好的域名地址。
配置完成后,點擊 保存并提交。您可以點擊如下視頻查看如何進行配置:
視頻 - 配置小程序服務器信息
運行配套小程序代碼
要運行本實驗配套的小程序代碼,請下載下列資源:
實驗配套源碼
微信小程序開發(fā)工具
源碼下載后,請解壓到本地工作目錄。
開發(fā)工具下載后,請安裝并啟動,然后用微信掃碼登錄。
登錄后,選擇 本地小程序項目 - 添加項目,使用以下配置:
AppID:填寫小程序的 AppID,請登錄公眾平臺后在 設置 - 開發(fā)設置 - 開發(fā)者 ID 中查看
項目名稱:填寫任意您喜歡的名稱
項目目錄:選擇剛才解壓的配套源碼目錄(目錄包含 app.js)
填寫完成后,點擊 添加項目。具體操作可查看如下視頻:
視頻 - 運行配套小程序代碼
設置實驗域名
在開發(fā)工具的 編輯 面板中,選中 app.js 進行編輯,需要修改小程序通信域名[?],請參考下面的配置:
App({
config: {
host: 'www.yourdomain.com' // 這個地方填寫你的域名
},
onLaunch () {
console.log('App.onLaunch()');
}
});
當然,這步操作也錄制了對應的視頻:
視頻 - 設置實驗域名
實驗配套源碼所用通信域名都會使用該設置,為了您順利進行實驗,請把域名修改為之前步驟準備的域名
搭建 HTTP 服務
任務時間:15min ~ 30min
下面的步驟,將帶大家在服務器上使用 Node 和 Express 搭建一個 HTTP 服務器
安裝 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/
安裝完成后,使用下面的命令測試安裝結果
node -v
編寫 HTTP Server 源碼
使用下面的命令在服務器創(chuàng)建一個工作目錄:
sudo mkdir -p /data/release/webapp
進入此工作目錄
cd /data/release/webapp
在工作目錄創(chuàng)建 package.json 文件,并修改文件的訪問權限。
sudo touch package.json
sudo chmod a+r+w package.json
修改 package.json 添加我們服務器包的名稱和版本號,可參考下面的示例。
示例代碼:/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 來監(jiān)聽 8765 端口[?],app.js文件可參考下面的示例代碼。
示例代碼:/data/release/webapp/app.js
// 引用 express 來支持 HTTP Server 的實現
const express = require('express');
// 創(chuàng)建一個 express 實例
const app = express();
// 實現唯一的一個中間件,對于所有請求,都輸出 "Response from express"
app.use((request, response, next) => {
response.write('Response from express');
response.end();
});
// 監(jiān)聽端口,等待連接
const port = 8765;
app.listen(port);
// 輸出服務器啟動日志
console.log(`Server listening at http://127.0.0.1:${port}`);
本實驗會以 8765 端口的打開作為實驗步驟完成的依據,為了后面的實驗步驟順利進行,請不要使用其它端口號
運行 HTTP 服務
在開始之前,我們先來安裝 [PM2]
sudo apt-get install npm
sudo npm install -g pm2
PM2 安裝時間可能稍長,請耐心等候 [?]
我們的服務器源碼里使用到了 Express 模塊,下面的命令使用 NPM 來安裝 Express
cd /data/release/webapp
sudo npm install express --save
安裝完成后,使用 PM2 來啟動 HTTP 服務
cd /data/release/webapp
pm2 start app.js
現在,您的 HTTP 服務已經在 http://<您的 CVM IP 地址>:8765 運行
要查看服務輸出的日志,可以使用下面的命令:
pm2 logs
如果要重啟服務,可以使用下面的命令:
pm2 restart app
我們使用 PM2 來進行 Node 進程的運行、監(jiān)控和管理
NPM 倉庫在國內訪問速度可能不太理想,如果實在太慢可以嘗試使用 CNPM 的 Registry 進行安裝:npm install pm2 -g --registry=https://r.cnpmjs.org/
搭建 HTTPS 服務
任務時間:15min ~ 30min
微信小程序要求和服務器的通信都通過 HTTPS 進行
安裝 Nginx
在 Ubuntu 上,可直接使用 apt-get 來安裝 Nginx
sudo apt-get install nginx -y
安裝完成后,使用 nginx 命令啟動 Nginx:
sudo /etc/init.d/nginx start
此時訪問 http://<您的域名> 可以看到 Nginx 測試頁面
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。