一、小程序实现自定义组件
从小程序基础库版本 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