微信小程序結合mock.js實現后臺模擬及調試

一、創建小程序項目

創新互聯長期為近1000家客戶提供的網站建設服務，團隊從業經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態環境。為涿州企業提供專業的成都網站設計、做網站、成都外貿網站建設公司，涿州網站改版等技術服務。擁有10多年豐富建站經驗和眾多成功案例,為您定制開發。

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>

頁面顯示

微信小程序結合mock.js實現后臺模擬及調試

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創新互聯。

當前題目：微信小程序結合mock.js實現后臺模擬及調試
標題網址：http://m.newbst.com/article6/pdsiig.html

成都網站建設公司_創新互聯，為您提供網站策劃、微信公眾號、Google、企業建站、定制網站、營銷型網站建設

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

微信小程序結合mock.js實現后臺模擬及調試