小程序项目开发中,经常会遇到公共模板与公共js数据的调用,这里结合自己的项目为这一需求做一简单介绍文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
目录截图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
现在是有一个评论版块需要在几个页面里共用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
先将评论版块的wxml剔出来放在template里面,把评论js数据放在utils里面以便后面调用,css可以直接放在里面即可文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
先不考虑css,公共模板与数据调用将会涉及到4个文件,, , ,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
中代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
红色箭头的地方为自定义字段,他将对应下图中红色下划线文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
黑色下划线就是对应array_pl这个wx:for循环出来里面的数据,那么这个array_pl数组是写在里面的,大概是这样文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
const array_pl= [文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
imgurl: "/images/",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
title: "张女士",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
time: "半小时前",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
content: "吾问无为谓喂喂喂。"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
imgurl: "/images/",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
title: "王女士",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
time: "1小时前",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
content: "亲亲亲亲亲亲亲亲亲亲亲。"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
imgurl: "/images/",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
title: "李先生",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
time: "2小时前",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
content: "鹅鹅鹅饿饿。"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
]文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
module.exports = {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
array_pl: array_pl,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
然后将数据传送到里面进行接收文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
const utils = require('../../utils/')文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
//在onload函数里面申明变量接收数据再发送到文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
onLoad: function () {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
//加载评论文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
var array_pl = utils.array_pl文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
this.setData({文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
array_pl文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
然后一个简单静态的公共数据传送与模板公共引用大概就这样完成了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html