一、创建小程序项目

mock.js 从 https://github.com/nuysoft/Mock/blob/refactoring/dist/mock.js 下载
api.js:配置模拟数据和后台接口数据,通过DEBUG = true;//切换数据入口
- let API_HOST = "http://xxx.com/xxx";
- let DEBUG = true;//切换数据入口
- var Mock = require('mock.js')
- function ajax(data = '', fn, method = "get", header = {}) {
- if (!DEBUG) {
- wx.request({
- url: config.API_HOST + data,
- method: method ? method : 'get',
- data: {},
- header: header ? header : { "Content-Type": "application/json" },
- success: function (res) {
- fn(res);
- }
- });
- } else {
- // 模拟数据
- var res = Mock.mock({
- 'error_code': '',
- 'error_msg': '',
- 'data|10': [{
- 'id|+1': 1,
- 'img': "@image('200x100', '#4A7BF7','#fff','pic')",
- 'title': '@ctitle(3,8)',
- 'city': "@county(true)",
- 'stock_num': '@integer(0,100)',//库存数量
- 'marketing_start': '@datetime()',
- 'marketing_stop': '@now()',
- 'price': '@integer(100,2000)',//现价,单位:分
- 'original_price': '@integer(100,3000)'
- }]
- })
- // 输出结果
- // console.log(JSON.stringify(res, null, 2))
- fn(res);
- }
- }
- module.exports = {
- ajax: ajax
- }
index.js页面
- //index.js
- //获取应用实例
- var app = getApp()
- var API = require('../../utils/api.js')
- Page({
- data: {
- },
- onLoad: function () {
- console.log('onLoad')
- var that = this
- // 使用 Mock
- API.ajax('', function (res) {
- //这里既可以获取模拟的res
- console.log(res)
- that.setData({
- list:res.data
- })
- });
-
- console.log(this.data.list)
- }
- })
index.wxml
- <!--index.wxml-->
- <block wx:for="{{list}}" wx:key="name">
- <view>{{item.title}}</view>
- <text>{{item.city}}</text>
- <view>
- <text>{{item.marketing_start}}</text>
- </view>
- <image src='{{item.img}}'></image>
- </block>
页面显示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。