微信小程序-網絡篇

前言

最近,個人一直想做一個線上微信小程序,奈何自己前端知識有限,不能一次全部完成所有功能,所以只能一步步來。接下來只是來說下微信小程序裏面的網絡請求功能。

服務端

既然是網絡請求,那自然就是要接口了。開發一個接口,有很多個方法,可以使用java+mysql實現,也可使用node+express+mongoDB實現。這裏我使用第二種方式來實現,爲了簡化接口開發的實現,這裏就不使用mongoDB數據庫連接實現了。直接寫死數據。

首先我們得安裝nodeJS,上文也提到過,這裏就不在重複說了。然後使用npm模塊安裝express框架

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

安裝好後,cmd打開doc使用命令創建一個項目

  cd E:\JS\NodeJS\WorkSpace
  express APIServer

這裏我的工作目錄是E:\JS\NodeJS\WorkSpace,然後項目名字爲APIServer。命令執行完後,再安裝依賴

cd APIServer //進入項目根目錄
npm install  //安裝依賴

安裝好後,打開工作目錄,可以看到APIServer這個項目,再用Sublime打開。
得到的目錄結構如下

項目目錄.png

  • bin 啓動服務器
  • node_modules 提供依賴模塊
  • public 存放靜態資源目錄
  • routes 對應客戶端接口的端點
  • views 存放jade的目錄,jade相當於javajsp
  • app.js 服務器啓動的入口
  • package.json 一些全局的配置

簡單開發一個接口

routes目錄下創建一個item.js,接口的一些字段

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

routes目錄下創建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=`生化湯的好處,根據古書記載,作用爲養血活血,產婦產後補血及去除惡露,生下寶寶後,既要喝生化湯,  `+
    `無論是剖腹產或是自然生產,在寶寶出生後的第一週內,每天毒藥飲用生化湯,一天分六次喝,順產喝七天,剖腹產喝14天。有助於子宮內污血排出體外,和防止血蹦,恢復子宮功能極有幫助。`;
    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=`由於肝臟是動物體內的解毒器官。使用前請用清水浸泡一小時以上,再用清水衝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,可消除浮腫,幫助多餘的水分排出體外,不必擔心尿不出來,還可強化腸胃道機能,增進消化吸收能力`;
    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 = "養肝湯";
    item4.des=`可中和或去除因手術麻醉藥,殘留於體內的餘毒。順產的也要吃,可以幫助肝臟解毒。每天300毫升,湯裏的紅棗可以用零食吃。湯每天分幾次喝,可以當飲料喝口渴時不想喝米酒就喝這個吧,`+
    `可以加適量紅糖。最好在預產期前一週開始喝,幫助肝臟解毒。無論自然產還是剖腹產,均應於生產前一週開始飲用養肝湯。`;
    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=`腎調養食譜,氣血補食譜,補虛養生食譜,貧血食譜`;
    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);

接口代碼寫好後,接下來就是啓動服務器編譯代碼,然後測試接口。

cd APIServer
npm start

然後在瀏覽器我們訪問接口http://localhost:3000/days/getList就會得到接口數據,如下

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

小程序開發

這裏只說請求接口的頁面開發
項目根目錄創建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)
  }
}

然後再相應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)
  }
}

最後運行結果如下

列表.gif

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

發佈了56 篇原創文章 · 獲贊 50 · 訪問量 18萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章