微信小程序-网络篇

前言

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

服务端

既然是网络请求，那自然就是要接口了。开发一个接口，有很多个方法，可以使用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 APIServernpm 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