小程序如何mock数据（终结）

一、小程序实现自定义组件

从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程

第一步：创建一个components文件夹

  内部创建要复用的组件,例如：Dialog

  右键新建Dialog目录->右键新建component并生成四个文件

第二步：如何在其他页面引入刚才创建的Dialog组件

参考资料：
https://www.jianshu.com/p/8a2a730d9e60/

二、在小程序中如何mock数据

（一）在小程序中使用mock数据的步骤：

第一步：下载文件：mock.js,wxmock.js并引入到utils目录中

第二步：创建接口文件，即要请求的模拟数据接口 例如：user.js

在utils下创建一个user.js文件，生成要用的模拟数据，例如：

     //引入基于小程序的wxmock
     var Mock = require('../WxMock.js')


     //基于ajax请求地址的模拟数据

     //格式： Mock.mock('请求地址',数据模板)


     var users=Mock.mock('https://1608A.com/users', {
     "codeText":"成功返回",
     "code": 200,
     "data|1-20": [
        {
           "name": function () {
           return Mock.Random.cname()
           },
           "lastLogin": function () {
           return Mock.Random.datetime()
           }
        }
     ]
     })
     var del=Mock.mock('https://xxx.com/user/delete', {
     "code": 200,
     "message": "s删除成功"
     })

     //请求文章列表
     var article=Mock.mock('http://www.baidu.com/getArticle',{

        "code":666,
        "successText":"成功返回",
        "content":[
           {"id":1001,"name":"文章标题","content":"文章内容"},
           {"id":1002,"name":"文章标题222","content":"文章内容222"}
        ]

     })

     export default {
        users,
        del,
        article
     }

第三步：使用接口渲染数据（即：在需要请求的页面中用wx.request()来请求需要的数据）

     wx.request({
        url:'http://www.baidu.com/getArticle',
        success:function(res) {
              console.log('我在购物车页面我得到的数据：',res)
        }

     })

（二）如何生成mock数据

  1.生成序列

  Mock.mock({
  "number|+1": 202
  })

参考资料：

mock.js官网：http://mockjs.com/examples.html

微信小程序 - 模拟数据工具 WxMock
https://github.com/webx32/WxMock