微信小程序公共模板template与公共js数据utils的引用实例

2019-05-2217:40:44APP与小程序开发Comments2,928 views字数 679阅读模式

小程序项目开发中,经常会遇到公共模板与公共js数据的调用,这里结合自己的项目为这一需求做一简单介绍文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html

目录截图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html

微信小程序公共模板template与公共js数据utils的引用实例文章源自菜鸟学院-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

微信小程序公共模板template与公共js数据utils的引用实例文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html

红色箭头的地方为自定义字段,他将对应下图中红色下划线文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html

微信小程序公共模板template与公共js数据utils的引用实例文章源自菜鸟学院-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

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/12779.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/12779.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定