一、引言與準(zhǔn)備

17年微信小程序正式發(fā)布后，憑借其無需安裝、觸手可及、用完即走的優(yōu)勢(shì)爆火。至今依舊處于火熱狀態(tài)，不僅如此，小程序生態(tài)圈也在不斷擴(kuò)大，除了微信，各大主流app都安排上了自己的小程序，比如百度、支付寶、淘寶等。

據(jù)統(tǒng)計(jì)，至20年上半年，微信小程序數(shù)量已超320萬，是所有平臺(tái)中占比最高的；全網(wǎng)小程序累積已超500萬個(gè)，并依舊呈上升趨勢(shì)。

在這樣的背景下，誰不想跟一波風(fēng)，寫幾個(gè)小程序的bug呢。

本教程分為上下兩章。第一章主要介紹本地開發(fā)與聯(lián)調(diào)，你將了解到：

• 基本的全棧開發(fā)過程

• • 數(shù)據(jù)庫設(shè)計(jì)
  • 小程序開發(fā)
  • 服務(wù)端開發(fā)
  • 本地聯(lián)調(diào)

第二章主要介紹上線，你將了解到：

• 小程序與服務(wù)端的上線
• 域名與https配置

整個(gè)過程中最重要的是：

• 擴(kuò)寬知識(shí)面（知道有這些工具可以用來做這些事情）
• 解決問題能力
• 閱讀第一手資料的能力
• 學(xué)習(xí)總結(jié)能力

這是小程序+服務(wù)端的代碼地址。

準(zhǔn)備

小程序代碼跟前端類似，所以有前端基礎(chǔ)的朋友會(huì)更容易上手和理解。

開始閱讀之前，確保你本地電腦已有Node.js + Git 環(huán)境。

請(qǐng)使用以下方式檢測(cè)，如果沒有顯示版本號(hào)，建議閱讀Windows-Node.js安裝與配置 、Git安裝與配置先進(jìn)行安裝與配置。

其次，編譯器準(zhǔn)備：

• 小程序：微信開發(fā)者工具 （下載完就先放著，第三章會(huì)用到）
• Node.js：VS Code / WebStorm ...

最后，先讓大家有個(gè)了解，本教程將會(huì)使用的技術(shù)棧如下：

• 微信小程序原生語法 + weui-wess
• 后端 Node.js （express）
• 數(shù)據(jù)庫 MySQL
• 線上數(shù)據(jù)庫 phpMyadmin

如果你糾結(jié)先寫后端還是先實(shí)現(xiàn)頁面，那就按照本文步驟來吧。再簡(jiǎn)單的全棧開發(fā)，也是需要踩坑的~

二、數(shù)據(jù)庫設(shè)計(jì)-MySQL

為什么第一步是設(shè)計(jì)數(shù)據(jù)庫呢？

因?yàn)閿?shù)據(jù)庫設(shè)計(jì)要求我們了解自己的產(chǎn)品，讓我們知道在做什么。

比如頁面的數(shù)據(jù)從哪兒來，到哪兒去；哪些數(shù)據(jù)需要抽象成事物存儲(chǔ)到數(shù)據(jù)庫，每個(gè)事物使用哪些信息去描述，這些都是在編碼之前要設(shè)計(jì)好的東西，否則很有可能帶來頻繁修改代碼的后果。

環(huán)境準(zhǔn)備

我使用的本地?cái)?shù)據(jù)庫是MySQL，它有個(gè)可視化工作區(qū)叫MySQLWorkbench，長(zhǎng)這樣，使用起來很方便。

如果你沒使用過MySQL，那就繼續(xù)閱讀，接下來將會(huì)說明如何使用它創(chuàng)建數(shù)據(jù)庫。如果你會(huì)使用并且已經(jīng)設(shè)計(jì)創(chuàng)建好自己的數(shù)據(jù)庫了，那就開始閱讀下一章吧。

如果你還沒有這些環(huán)境，就進(jìn)入上面的鏈接先去下載吧，有不清楚的自行搜索教程。

創(chuàng)建數(shù)據(jù)庫

當(dāng)你下載完MySQL并且出現(xiàn)以上界面的時(shí)候，就可以繼續(xù)跟著我的步驟走了。

• \1. 新建數(shù)據(jù)庫 在SCHEMAS區(qū)域右鍵，選擇Create Schema
• \2. 為你的schema起一個(gè)名字
• \3. Apply 執(zhí)行對(duì)應(yīng)的SQL語句

創(chuàng)建表格

普通表格

這時(shí)可以看到左側(cè)的SCHEMAS中多了我們新建的數(shù)據(jù)庫

• \4. 雙擊選擇到該數(shù)據(jù)庫，這一步不要漏掉，否則后面執(zhí)行SQL語句會(huì)報(bào)錯(cuò)
• \5. Tables區(qū)域右鍵，選擇Create Table

此時(shí)彈出new_table的表格，你需要

• \6. 為你的表起一個(gè)名字
• \7. 為你的表添加描述信息

這里我添加了一張用戶表user，用來存儲(chǔ)用戶信息，包括了id（PK表示主鍵primary key，NN表示不允許為空not null，AI表示自增auto increasement，其余自行搜索）、openid（openid是微信向開發(fā)人員提供的用戶標(biāo)識(shí)，這里知道即可）、createTime 創(chuàng)建時(shí)間。因?yàn)閮H做demo，所以只存儲(chǔ)2個(gè)字段了，你可以根據(jù)自己的想法進(jìn)行設(shè)計(jì)。

• \8. Apply 執(zhí)行創(chuàng)建user表

帶有外鍵的表格

• \9. 創(chuàng)建一張帶有外鍵的表格

與普通表一樣，先創(chuàng)建完所有字段。這里我創(chuàng)建了advice的表格，包含id、content和userId三個(gè)字段，其中userId為外鍵，關(guān)聯(lián)user表中的id字段。

• • 9.1 選擇Foreign Keys
  • 9.2 為你的外鍵起一個(gè)名字
  • 9.3 選擇需要外鍵的關(guān)聯(lián)表
  • 9.4 選擇需要本表中的外鍵字段
  • 9.5 選擇關(guān)聯(lián)表中的被關(guān)聯(lián)的字段
  • 9.6 當(dāng)被關(guān)聯(lián)字段更新或刪除的時(shí)候，關(guān)聯(lián)表中字段如何處理。CASCADE表示級(jí)聯(lián)，SET NULL表示設(shè)置為空。這里的意思就是當(dāng)user表中的某個(gè)id變化的時(shí)候，關(guān)聯(lián)它的外鍵也一起變化，id被刪除的時(shí)候，關(guān)聯(lián)它的外鍵就會(huì)變成null。

創(chuàng)建完畢

此時(shí)，我己經(jīng)創(chuàng)建完了我的數(shù)據(jù)庫mini_demo，有兩張表格，advice和user，其中advice的userId為外鍵，關(guān)聯(lián)user表中的id。

如果你還沒完成，就先創(chuàng)建完吧；如果你已經(jīng)完成，開始閱讀下一章吧。

三、小程序注冊(cè)與編碼

注冊(cè)賬號(hào)

小程序與公眾號(hào)類似，需要使用賬號(hào)管理。如果沒有賬號(hào)，先去平臺(tái)申請(qǐng)一個(gè)，然后登錄。

1. 需要使用郵箱登錄，一個(gè)郵箱只能綁定一個(gè)小程序。

1. 登錄到郵箱，點(diǎn)擊鏈接以激活

1. 填寫信息，需登記本人真實(shí)信息。一個(gè)身份證號(hào)目前可以綁定五個(gè)小程序。

1. 然后，很自然得跳轉(zhuǎn)到這個(gè)頁面。按照頁面提示的流程，填寫小程序信息，填寫完后將顯示如下界面。

1. 在菜單開發(fā)-開發(fā)設(shè)置里可以看到我們的小程序id，跟身份證一樣，AppID是小程序的唯一標(biāo)識(shí)。之后很多地方都會(huì)用到。

新建項(xiàng)目

這時(shí)候打開前一章下載完的微信開發(fā)者工具，微信掃碼登錄后，就會(huì)出現(xiàn)此頁面，讓我們新建一個(gè)小程序項(xiàng)目吧。你需要

1. 起一個(gè)項(xiàng)目名字
2. 選擇存放目錄
3. 輸入剛剛的AppID
4. 點(diǎn)擊不使用云服務(wù)，我們使用自己搭建的后端服務(wù)。

如果僅是為了完成小程序功能，可以選擇更快捷的方式。這里是為了學(xué)習(xí)如何上線后端服務(wù)及云存儲(chǔ)。

1. 新建

稍等片刻，我們的第一個(gè)小程序便誕生了！如下圖所示。

熟悉項(xiàng)目

先介紹一下常用的界面區(qū)域和按鈕，見圖。（不理解也沒關(guān)系，這些都是熟能生巧的，現(xiàn)在做到心中有數(shù)就行。）

相信這時(shí)你已經(jīng)在模擬器上都點(diǎn)過一遍了，這里再給大家梳理一下。

• 初始頁面，有一個(gè)按鈕和歡迎語。
• 點(diǎn)擊獲取頭像昵稱后，跳出一個(gè)授權(quán)彈窗。
• 允許之后，初始頁面的按鈕變?yōu)榱擞脩粜畔ⅰ?/li>
• 點(diǎn)擊頭像跳轉(zhuǎn)到另一個(gè)頁面，可以查看啟動(dòng)日志。

接下來，思考這兩個(gè)問題。

既然有兩個(gè)頁面，為什么初始頁面是第一個(gè)呢，在哪控制？

每個(gè)類型文件是干嘛用的，數(shù)據(jù)如何展示？

如果你存在疑惑，請(qǐng)先閱讀官文-小程序代碼構(gòu)成，開始編碼前，我們務(wù)必先了解這些東西。

初始化頁面分析

這時(shí)你對(duì)小程序代碼構(gòu)成有了初步了解，甚至已經(jīng)動(dòng)手改過代碼了，很棒。

接下里分析一下兩個(gè)頁面的邏輯及實(shí)現(xiàn)。

回到剛才的問題，為什么初始頁面是第一個(gè)呢。

其實(shí)是由app.json的pages決定的，第一行就是要初始化展示的界面。

小程序初始化后，會(huì)首先觸發(fā)app.js的onLaunch 方法，會(huì)在小程序啟動(dòng)時(shí)觸發(fā)

這里面做了三步操作：

1. 記錄本次啟動(dòng)時(shí)間，存入本地storage的logs 變量，該數(shù)據(jù)是logs頁面的數(shù)據(jù)來源
2. 登錄，這里需要自己補(bǔ)充
3. 獲取用戶信息。如果用戶已授權(quán)過用戶信息，那么這些信息可以直接通過wx.getUserInfo獲取到，獲取成功后保存到全局變量userInfo 中

然后，啟動(dòng)初始化頁面，也就是index。 index.js中有個(gè)onLoad方法 (該方法會(huì)在頁面加載時(shí)觸發(fā)，詳見頁面生命周期) ，主要就是判斷是否已獲取到用戶信息，有的話就賦值給當(dāng)前頁面的data，沒有就設(shè)置回調(diào)，等有了之后再賦值。最后一個(gè)else是沒有“獲取用戶按鈕”的兼容處理。

另外兩個(gè)函數(shù)bindViewTap和getUserInfo是事件綁定函數(shù)，分別是點(diǎn)擊頭像和點(diǎn)擊按鈕的回調(diào)。

bindViewTap` 就做了一件事，讓頁面跳轉(zhuǎn)到`logs
復(fù)制代碼

getUserInfo 將獲取到的用戶信息存儲(chǔ)到全局變量和當(dāng)前頁面data中。e是通過參數(shù)透?jìng)鲗?shí)現(xiàn)的，由小程序API返回。

logs頁面很簡(jiǎn)單，就是把啟動(dòng)信息從本地storage中取出來展示。

編碼

看到這兒，你或許對(duì)小程序代碼有大概了解了，那么接下來就照葫蘆畫瓢，去寫自己的頁面吧（登錄會(huì)在下一章講，不著急實(shí)現(xiàn)）

編碼過程中，可以預(yù)先定義好接口，變量結(jié)構(gòu)和名稱就根據(jù)前一章設(shè)計(jì)好的數(shù)據(jù)庫來寫，避免重復(fù)修改。

頁面中涉及到的很多小程序API，不清楚的就去微信小程序API文檔查，大家要有看第一手資料的意識(shí)和能力。

這是我的小程序代碼地址（下面有頁面截圖），僅供參考。

四、服務(wù)端搭建-Koa

接口準(zhǔn)備

看這節(jié)之前，你應(yīng)該實(shí)現(xiàn)了自己的靜態(tài)頁面了。這是我當(dāng)前的兩個(gè)頁面，很簡(jiǎn)單。

總共涉及兩個(gè)接口，登錄和提交建議。

在寫服務(wù)端之前，先約定好接口，如路徑、請(qǐng)求方法、參數(shù)。

• 登錄 get /login?js_code
• 提交建議 post /addAdvice body={openid, advice}

hello world

明確接口之后，開始編寫服務(wù)端，我使用的是Node.js框架Koa。

首先，創(chuàng)建一個(gè)空文件夾，從終端進(jìn)入目錄，執(zhí)行下面兩個(gè)命令

npm init 初始化npm信息，生成package.json

npm i koa 下載koa框架

這時(shí)我們的目錄下有三個(gè)文件：node_modules、package.json、package-lock.json

根據(jù)Koa文檔，我們先寫一個(gè)最簡(jiǎn)單的demo

// index.js

const Koa = require('koa')
const app = new Koa()

app.use(async ctx => {
  ctx.body = 'hello zhaji'
})

app.listen(3000)
復(fù)制代碼

然后命令行執(zhí)行這個(gè)文件node index 仿佛什么都沒有，但實(shí)際上項(xiàng)目已經(jīng)啟動(dòng)起來了，http://localhost:3000/ 就能訪問到。

所以我們可以在相應(yīng)的地方加上提示。

// index.js

// ...
app.listen(3000)
console.log(`項(xiàng)目已啟動(dòng)，地址為 http://127.0.0.1:3000`);
復(fù)制代碼

到此為止，我們已經(jīng)能夠啟動(dòng)Koa項(xiàng)目了，接下來就是寫接口以及對(duì)接數(shù)據(jù)庫。

提供接口

也就是上面定義的兩個(gè)接口，登錄和提交建議

接口需要路徑，我們使用koa-router

先寫一個(gè)koa-router的hello world，甚至直接從文檔拷下來就行。

const Koa = require("koa");
const app = new Koa();

const Router = require("koa-router");
const router = new Router();

// app.use(async ctx => {
//   ctx.body = 'hello zhaji'
// })

router.get("/", async (ctx) => {
  ctx.body = "hello zhaji";
});
app.use(router.routes()).use(router.allowedMethods());

app.listen(3000);
console.log(`項(xiàng)目已啟動(dòng)，地址為 http://127.0.0.1:3000`);
復(fù)制代碼

get請(qǐng)求

接下來，實(shí)現(xiàn)自己的接口。先講一下登錄，也就是根據(jù)jscode獲取用戶唯一標(biāo)識(shí)。

官網(wǎng)是這樣描述的：

登錄憑證校驗(yàn)。通過 wx.login 接口獲得臨時(shí)登錄憑證 code 后傳到開發(fā)者服務(wù)器調(diào)用此接口完成登錄流程。更多使用方法詳見 小程序登錄。

請(qǐng)求地址 GET

api.weixin.qq.com/sns/jscode2…

我們要做的其實(shí)很簡(jiǎn)單，在后臺(tái)向這個(gè)地址發(fā)送請(qǐng)求，攜帶三個(gè)參數(shù)，然后保存返回信息即可。

三個(gè)參數(shù)分別是appid 之前新建小程序項(xiàng)目也用到過的那個(gè)、secret 需要下載的密鑰下載鏈接、js_code 小程序登錄接口wx.login返回信息之一

通過這個(gè)方法得到三個(gè)值后，我們可以先測(cè)試一下。復(fù)制已經(jīng)修改為你自己的信息的鏈接到瀏覽器，能看到返回的信息，說明接口沒問題。

node-fetch可以幫助我們?cè)趎ode.js下發(fā)起請(qǐng)求。為了符合關(guān)注點(diǎn)分離，我們將接口和數(shù)據(jù)庫操作分離。

在index.js下新增/login接口

// index.js

// 登錄
router.get('/login', async ctx => {
  const {js_code} = ctx.query
  const res = await api.login(js_code)
  ctx.body = res
})
復(fù)制代碼

在api/index.js做具體實(shí)現(xiàn)。說明一下第6行const { APPID, SECRET } = process.env 這樣寫的目的是可以從命令行中獲取項(xiàng)目的私密信息，避免把信息暴露在項(xiàng)目中。啟動(dòng)格式export APPID="xxx" && export SECRET="xxx" && node index.js

之后的數(shù)據(jù)庫名和密碼也可以用這樣的方式啟動(dòng)。

// api/index.js

const fetch = require("node-fetch");

function getOpenId(JSCODE ) {
  const { APPID, SECRET } = process.env;
  console.log(APPID, SECRET);
  const api = `https://api.weixin.qq.com/sns/jscode2session?appid=${APPID}&secret=${SECRET}&js_code=${JSCODE}&grant_type=authorization_code`;
  return fetch(api)
    .then((res) => res.json())
    .then((json) => json);
}

module.exports = {
  async login(JSCODE) {
    // 1. 獲取openid
    const openid = await getOpenId(JSCODE)
    return openids

    // 2. 根據(jù)openid讀取數(shù)據(jù)庫，返回用戶信息

  }
};
復(fù)制代碼

重啟項(xiàng)目后，用瀏覽器測(cè)試一下接口好用不。

雖然返回的是錯(cuò)誤碼說明js_code無效，但也已經(jīng)說明我們的login接口可以使用了。

post請(qǐng)求

post請(qǐng)求的數(shù)據(jù)通常放在body里，但如果直接ctx.request.body讀取其實(shí)為空，所以需要借助koa-bodyparser庫，像這樣使用。

const bodyParser = require("koa-bodyparser");
app.use(bodyParser());

router.post('/addAdvice', async ctx => {
  const data = http://www.wxapp-union.com/ctx.request.body
  console.log(data)
  ...
})
復(fù)制代碼

連接數(shù)據(jù)庫

使用sequelize進(jìn)行數(shù)據(jù)庫連接。我們連接本地?cái)?shù)據(jù)庫進(jìn)行調(diào)試，先確保本地?cái)?shù)據(jù)庫已啟動(dòng)。

然后進(jìn)行數(shù)據(jù)庫配置，新建config.js文件，配置數(shù)據(jù)庫名稱、用戶名和密碼。其余配置大同小異，基本上也不需要修改，代碼倉庫里詳細(xì)說明，感興趣同學(xué)可以看看。

// config.js

module.exports = {
  // 數(shù)據(jù)庫名稱
  database: process.env.DATABASE,
  // 用戶名
  username: process.env.USER,
  // 密碼
  password: process.env.PWD,
  // 地址
  host: '127.0.0.1',
  // 使用什么數(shù)據(jù)庫
  dialect: 'mysql',

  ...
  
}
復(fù)制代碼

然后新建mysql/index.js 主要作用就是聲明表格、表格屬性以及表格之前的關(guān)系。數(shù)據(jù)庫有幾張表格，就應(yīng)該有多少個(gè)類。（應(yīng)該支持導(dǎo)入導(dǎo)出操作避免手工勞動(dòng)力，有興趣的朋友的研究下。）

// mysql/index.js

const Sequelize = require("sequelize");
const mysqlConfig = require("../config");

const sequelize = new Sequelize(mysqlConfig);

const Model = Sequelize.Model;

class User extends Model {}
class Advice extends Model {}

User.init(
  {
    // 屬性
    id: {
      type: Sequelize.INTEGER, // 要與數(shù)據(jù)庫聲明的類型匹配
      autoIncrementIdentity: true, // 自增
      primaryKey: true, // 主鍵
    },
    openid: {
      type: Sequelize.STRING,
      allowNull: true,
    },
    createTime: {
      type: Sequelize.DATE,
      allowNull: true,
    }
  },
  {
    sequelize,
    modelName: "user",
    // 參數(shù)
  }
);
Advice.init(
  {
    id: {
      type: Sequelize.INTEGER,
      autoIncrementIdentity: true,
      primaryKey: true,
    },
    content:{
      type: Sequelize.TEXT,
      allowNull: true
    },
    userId: {
      type: Sequelize.INTEGER,
      references: { // 外鍵聲明
        model: "user",
        key: "id",
      }
    }
  },
  {
    sequelize,
    modelName: "advice",
  }
)
module.exports = {
  User,
  Advice,
};
復(fù)制代碼

那么，如何操作放佛已經(jīng)被對(duì)象化的表格呢？這就是sequelize 特色之處，它讓開發(fā)者能夠像寫中文一樣去操作數(shù)據(jù)庫。比如，新增和查找，分別是create和findOne

// api/index.js

const { User, Advice } = require("./mysql/index.js");

// 新增用戶
async function addUser(openid) {
  await User.create({ openid, createTime: new Date().toLocaleString() });
}

// 查找用戶
async function getUser(openid) {
  const user = await User.findOne({ where: { openid } });
  // 用戶不存在，新增用戶
  // ...
  return user;
}
復(fù)制代碼

一些報(bào)錯(cuò)

在執(zhí)行過程中，項(xiàng)目總會(huì)報(bào)錯(cuò)的。報(bào)錯(cuò)不要緊，要緊的是我們解決它的能力。剛開始學(xué)的時(shí)候，項(xiàng)目一報(bào)錯(cuò)我就復(fù)制到度娘下，甚至嫌麻煩都懶得看一眼。漸漸的發(fā)現(xiàn)，其實(shí)很多問題自己就能看明白，不要太依賴搜索等，盡量先嘗試自己解決，只有這樣才能熟能生巧。沒錯(cuò)，寫代碼就是一個(gè)熟能生巧的過程。

比如這里，寫完增刪改查后，準(zhǔn)備啟動(dòng)項(xiàng)目，卻發(fā)現(xiàn)報(bào)了個(gè)這樣錯(cuò)。

很明顯引入的路徑有問題，應(yīng)該是../mysql/index.js

再啟動(dòng)，又報(bào)錯(cuò)。

讓我們下載mysql2依賴包，那就下唄。下完之后再啟動(dòng)，ok了。其實(shí)這種自己慢慢把一個(gè)個(gè)bug干掉的過程，很爽的。

調(diào)試接口

到這里我們寫好了接口并成功啟動(dòng)項(xiàng)目，接下來就是調(diào)試階段，看看接口是否可用。

調(diào)試方法有很多種，最簡(jiǎn)單的可以直接用瀏覽器調(diào)試，get請(qǐng)求直接瀏覽器打開，post請(qǐng)求可以寫一個(gè)xhr腳本；

也使用postman工具，專門用來測(cè)接口的。

我們選用postman測(cè)試，如果沒有該工具，可以點(diǎn)擊上面的超鏈接進(jìn)行下載并登錄。

同樣，從最簡(jiǎn)單的開始。

沒問題后，開始測(cè)登錄接口，是否與預(yù)料中一致，若存在問題，看報(bào)錯(cuò)解決。（前面說過，js_code在小程序項(xiàng)目里登錄wx.login時(shí)輸出res.code一下就可以得到）

沒問題后，打開數(shù)據(jù)庫確認(rèn)。

確保每個(gè)接口都沒問題后，就可以跟小程序聯(lián)調(diào)了！

這是我的服務(wù)端代碼地址

五、本地聯(lián)調(diào)

小程序接口請(qǐng)求

如果之前沒在小程序里寫接口，那就在這一步寫吧。

根據(jù)文檔，我們使用wx.request 發(fā)送請(qǐng)求，下面是一個(gè)調(diào)用login接口的示例。

 wx.request({
   url: `${this.globalData.baseUrl}/login`, // 在全局變量里定義baseUrl，方便之后修改
   method: 'GET',
   data: {
     js_code: res.code
   },
   success: res => {
     console.log(res);
   }
 })
復(fù)制代碼

如果出現(xiàn)了這樣的報(bào)錯(cuò)，只需要點(diǎn)擊右上角詳情，勾選不校驗(yàn)...即可。但如果小程序發(fā)布，其規(guī)定為了安全還是需要使用https，現(xiàn)在取消校驗(yàn)是為了本地聯(lián)調(diào)。

聯(lián)調(diào)

再次點(diǎn)擊編譯，接口正常運(yùn)行并輸出，同時(shí)可以再去數(shù)據(jù)庫查看數(shù)據(jù)是否符合預(yù)期。

挨個(gè)把所有的接口都調(diào)試一遍。

最后

過了好一會(huì)兒，終于調(diào)試完了所有接口。恭喜你，離小程序上線又近了一大步！

為了保證服務(wù)端接口能夠被非本地訪問（如使用其他電腦訪問），下一步我們需要把它放到云上