2.小程序：后台提供接口前端获取接口数据

后台过程详见：前端传入数字后台生成二维码，后台使用mockjs生成数据 一.后台的代码//详见：d:/style/node var qr = require('qr-image'); var fs = require('fs') var express = require('express') var app = express() var mock = require('mockjs') let typeList = mock.mock({ 'list|10': [ { 'id|+1': 1, name: "@cword(2,4)", } ] }) //模拟后台建接口 req请求消息 res响应消息 app.get('/typeList', (req, res) => { // let id = req.query.id//筛选数据：前端传入id后太筛选数据给前端 // if (id) userList = userList.find(r => r.id === id) res.json(typeList) }) //前端传入数据，后台添加 req请求消息 res响应消息 // app.get("/adduser", (req, res) => { // userList.push({ // id: req.query.id, // name: req.query.name, // city: req.query.city, // }) // res.json(true) // }) //启动接口 成功打印："程序已启动" app.listen(8989, () => { console.log("程序已启动"); }) 二.前端：详见小程序demo1 1.data里要有数组接收 data: { menu: [], } 2.需要引入utils/index,修改页面的开头 import Router from '../../utils/index' Router({ 3.在onLoad里面调用函数 /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getTypeList() }, 4.编写函数：getTypeList async getTypeList() { let { list } = await this.$get('http://localhost:8989/typeList') this.$set('menu', list) }, 5.$get的来源 在utils下建立index.js，内代码： import qs from "qs" //引入qs function request(methods, url, data) { let start = +new Date() //.getTime return new Promise((resolve, reject) => { wx.showLoading({ //页面提示：加载中 title: '加载中', }) if (!url.startsWith('http')) url = "https://simbajs.com:996" + url wx.request({ methods, url, // url: "http://simbajs.com:89" + url, data, success: res => { //加载成功 console.log(`${methods}了${url},参数是 ${qs.stringify(data)}耗时${+new Date - start}毫秒`); resolve(res.data) }, complete() { //加载完成，失败，成功都会走 wx.hideLoading({}) //关闭页面提示：加载中 console.log(`耗时${+new Date - start}毫秒`); } }) }) } export function $get(url, data) { return request("GET", url, data) } export function $post(url, data) { return request("POST", url, data) } export function $d(e, key) { let res = e.currentTarget.dataset return key ? res[key] : res } export function $msg(msg) { wx.showToast({ title: msg, icon: 'none' //不要图标 }) } export function $set(key, val) { this.setData({ [key]: val }) } export function $setVal(e) { let { key } = this.$d(e); this.$set(key, e.detail) } export function $confirm(title) { return new Promise((resolve, reject) => { wx.showModal({ title, success: (res) => { resolve(res.confirm) } }) }) } /** *统一页面对象，封装了Page,添加了自定义方法 *@param{*}option 同原本的Page参数 */ export default function Router(option) { option.$setVal = $setVal option.$get = $get option.$post = $post option.$d = $d option.$msg = $msg option.$set = $set option.$confirm = $confirm return Page(option) }