前言

最近，个人一直想做一个线上微信小程序，奈何自己前端知识有限，不能一次全部完成所有功能，所以只能一步步来。接下来只是来说下微信小程序里面的网络请求功能。

服务端

既然是网络请求，那自然就是要接口了。开发一个接口，有很多个方法，可以使用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打开。
得到的目录结构如下

• bin 启动服务器
• node_modules 提供依赖模块
• public 存放静态资源目录
• routes 对应客户端接口的端点
• views 存放jade的目录，jade相当于java的jsp
• 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)
  }
}

最后运行结果如下

详情页面布局和其他代码
https://github.com/Goach/YueZiMeal