前言

最近，個(gè)人一直想做一個(gè)線上微信小程序，奈何自己前端知識(shí)有限，不能一次全部完成所有功能，所以只能一步步來。接下來只是來說下微信小程序里面的網(wǎng)絡(luò)請求功能。

服務(wù)端

既然是網(wǎng)絡(luò)請求，那自然就是要接口了。開發(fā)一個(gè)接口，有很多個(gè)方法，可以使用java+mysql實(shí)現(xiàn)，也可使用node+express+mongoDB實(shí)現(xiàn)。這里我使用第二種方式來實(shí)現(xiàn)，為了簡化接口開發(fā)的實(shí)現(xiàn)，這里就不使用mongoDB數(shù)據(jù)庫連接實(shí)現(xiàn)了。直接寫死數(shù)據(jù)。

首先我們得安裝nodeJS，上文也提到過，這里就不在重復(fù)說了。然后使用npm模塊安裝express框架

 npm install express -g
 npm install express-generator -g

安裝好后，cmd打開DOS使用命令創(chuàng)建一個(gè)項(xiàng)目

  cd E:\JS\NodeJS\WorkSpace
  express APIServer

這里我的工作目錄是E:\JS\NodeJS\WorkSpace,然后項(xiàng)目名字為APIServer。命令執(zhí)行完后，再安裝依賴

cd APIServer //進(jìn)入項(xiàng)目根目錄
npm install  //安裝依賴

安裝好后，打開工作目錄，可以看到APIServer這個(gè)項(xiàng)目，再用Sublime打開。
得到的目錄結(jié)構(gòu)如下

項(xiàng)目目錄.png

• bin 啟動(dòng)服務(wù)器
• node_modules 提供依賴模塊
• public 存放靜態(tài)資源目錄
• routes 對(duì)應(yīng)客戶端接口的端點(diǎn)
• views 存放jade的目錄，jade相當(dāng)于java的jsp
• app.js 服務(wù)器啟動(dòng)的入口
• package.json 一些全局的配置

簡單開發(fā)一個(gè)接口

routes目錄下創(chuàng)建一個(gè)item.js，接口的一些字段

function Item(){
    this.title;
    this.des;
    this.image;
    this.type;
}
module.exports = Item;

routes目錄下創(chuàng)建days.js

var express = require('express');
var Item = require('./item');
var router = express.Router();

router.get('/getList',function(req,res,next){
    var arrays = new Array();
    var item1 = new Item();
    item1.title = "生化湯";
    item1.des=`生化湯的好處，根據(jù)古書記載，作用為養(yǎng)血活血，產(chǎn)婦產(chǎn)后補(bǔ)血及去除惡露，生下寶寶后，既要喝生化湯,  `+
    `無論是剖腹產(chǎn)或是自然生產(chǎn)，在寶寶出生后的第一周內(nèi)，每天毒藥飲用生化湯，一天分六次喝，順產(chǎn)喝七天，剖腹產(chǎn)喝14天。有助于子宮內(nèi)污血排出體外，和防止血蹦，恢復(fù)子宮功能極有幫助。`;
    item1.image = `http://img.39yst.com/uploads/2015/0902/1441181493658.jpg`;
    item1.type = 1;
    arrays.push(item1);
    var item2 = new Item();
    item2.title = "麻油豬肝";
    item2.des=`由于肝臟是動(dòng)物體內(nèi)的解毒器官。使用前請用清水浸泡一小時(shí)以上，再用清水沖5分鐘左右`;
    item2.image = `http://e.hiphotos.baidu.com/baike/w%3D268%3Bg%3D0/sign=d48fc03fb53eb13544c7b0bd9e25cfee/58ee3d6d55fbb2fb1793b4c5464a20a44723dca9.jpg`;
    item2.type = 1;
    arrays.push(item2);
    var item3 = new Item();
    item3.title = "薏仁飯";
    item3.des=`薏仁含豐富淀粉，維生素B1，可消除浮腫，幫助多余的水分排出體外，不必?fù)?dān)心尿不出來，還可強(qiáng)化腸胃道機(jī)能，增進(jìn)消化吸收能力`;
    item3.image = `https://img01.mmbang.info/7iyaya_group3_M00_B1_38_wKgAB1DdCITI0q0sAABcW9F57Zg82.jpeg`;
    item3.type = 2;
    arrays.push(item3);
    var item4 = new Item();
    item4.title = "養(yǎng)肝湯";
    item4.des=`可中和或去除因手術(shù)麻醉藥，殘留于體內(nèi)的余毒。順產(chǎn)的也要吃，可以幫助肝臟解毒。每天300毫升，湯里的紅棗可以用零食吃。湯每天分幾次喝，可以當(dāng)飲料喝口渴時(shí)不想喝米酒就喝這個(gè)吧，`+
    `可以加適量紅糖。最好在預(yù)產(chǎn)期前一周開始喝，幫助肝臟解毒。無論自然產(chǎn)還是剖腹產(chǎn)，均應(yīng)于生產(chǎn)前一周開始飲用養(yǎng)肝湯。`;
    item4.image = `http://img01.mmbang.info/7iyaya_group6_M04_79_D2_CggaDVh1-nCAQWu8AAKtgW3nvyM42.jpeg`;
    item4.type = 2;
    arrays.push(item4);
    var item5 = new Item();
    item5.title = "黑米湯";
    item5.des=`腎調(diào)養(yǎng)食譜，氣血補(bǔ)食譜，補(bǔ)虛養(yǎng)生食譜，貧血食譜`;
    item5.image = `http://images.meishij.net/p/20100714/397f7641163928ece0e29d6c8b8a1cbd.jpg`;
    item5.type = 3;
    arrays.push(item5);
    var response = {status:200,data:arrays};
    res.send(JSON.stringify(response));

});

module.exports = router;

然后回到app.js，添加代碼

var days = require('./routes/days');
app.use('/days', days);

接口代碼寫好后，接下來就是啟動(dòng)服務(wù)器編譯代碼，然后測試接口。

cd APIServer
npm start

然后在瀏覽器我們訪問接口http://localhost:3000/days/getList就會(huì)得到接口數(shù)據(jù)，如下

{
    "status": 200,
    "data": [
        {
            "title": "生化湯",
            "des": "生化湯的好處，根據(jù)古書記載，作用為養(yǎng)血活血，產(chǎn)婦產(chǎn)后補(bǔ)血及去除惡露，生下寶寶后，既要喝生化湯,\t無論是剖腹產(chǎn)或是自然生產(chǎn)，在寶寶出生后的第一周內(nèi)，每天毒藥飲用生化湯，一天分六次喝，順產(chǎn)喝七天，剖腹產(chǎn)喝14天。有助于子宮內(nèi)污血排出體外，和防止血蹦，恢復(fù)子宮功能極有幫助。",
            "image": "http://img.39yst.com/uploads/2015/0902/1441181493658.jpg",
            "type": 1
        },
        {
            "title": "麻油豬肝",
            "des": "由于肝臟是動(dòng)物體內(nèi)的解毒器官。使用前請用清水浸泡一小時(shí)以上，再用清水沖5分鐘左右",
            "image": "http://e.hiphotos.baidu.com/baike/w%3D268%3Bg%3D0/sign=d48fc03fb53eb13544c7b0bd9e25cfee/58ee3d6d55fbb2fb1793b4c5464a20a44723dca9.jpg",
            "type": 1
        },
        {
            "title": "薏仁飯",
            "des": "薏仁含豐富淀粉，維生素B1，可消除浮腫，幫助多余的水分排出體外，不必?fù)?dān)心尿不出來，還可強(qiáng)化腸胃道機(jī)能，增進(jìn)消化吸收能力",
            "image": "https://img01.mmbang.info/7iyaya_group3_M00_B1_38_wKgAB1DdCITI0q0sAABcW9F57Zg82.jpeg",
            "type": 2
        },
        {
            "title": "養(yǎng)肝湯",
            "des": "可中和或去除因手術(shù)麻醉藥，殘留于體內(nèi)的余毒。順產(chǎn)的也要吃，可以幫助肝臟解毒。每天300毫升，湯里的紅棗可以用零食吃。湯每天分幾次喝，可以當(dāng)飲料喝口渴時(shí)不想喝米酒就喝這個(gè)吧，可以加適量紅糖。最好在預(yù)產(chǎn)期前一周開始喝，幫助肝臟解毒。無論自然產(chǎn)還是剖腹產(chǎn)，均應(yīng)于生產(chǎn)前一周開始飲用養(yǎng)肝湯。",
            "image": "http://img01.mmbang.info/7iyaya_group6_M04_79_D2_CggaDVh1-nCAQWu8AAKtgW3nvyM42.jpeg",
            "type": 2
        },
        {
            "title": "黑米湯",
            "des": "腎調(diào)養(yǎng)食譜，氣血補(bǔ)食譜，補(bǔ)虛養(yǎng)生食譜，貧血食譜",
            "image": "http://images.meishij.net/p/20100714/397f7641163928ece0e29d6c8b8a1cbd.jpg",
            "type": 3
        }
    ]
}

小程序開發(fā)

這里只說請求接口的頁面開發(fā)
項(xiàng)目根目錄創(chuàng)建net.js

const BASE_URL = `http://localhost:3000`;

function NetAPI(url, params) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: `${BASE_URL}${url}`,
      data: Object.assign({}, params),
      header: { 'Content-Type': "application/json" },
      success: resolve,
      fail: reject
    })
  })
}
module.exports = {
  request(url, page = 1, count = 20) {
    const params = { start: (page - 1) * count, count: count }
    return NetAPI(url, params).then(res => res.data)
  }
}

然后再相應(yīng)list頁面請求接口

const BASE_URL = `http://localhost:3000`;

function NetAPI(url, params) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: `${BASE_URL}${url}`,
      data: Object.assign({}, params),
      header: { 'Content-Type': "application/json" },
      success: resolve,
      fail: reject
    })
  })
}
module.exports = {
  request(url, page = 1, count = 20) {
    const params = { start: (page - 1) * count, count: count }
    return NetAPI(url, params).then(res => res.data)
  }
}

最后運(yùn)行結(jié)果如下

列表.gif

詳情頁面布局和其他代碼
https://github.com/Goach/YueZiMeal