小程序公共模板template與公共js數據utils的引用實例


在小程序項目開發中,經常會遇到公共模板與公共js數據的調用,這里結合自己的項目為這一需求做一簡單介紹

 

目錄截圖

現在是有一個評論版塊需要在幾個頁面里共用

先將評論版塊的wxml剔出來放在template里面,把評論js數據放在utils里面以便后面調用,css可以直接放在app.wxss里面即可

先不考慮css,公共模板與數據調用將會涉及到4個文件,template.wxml,  index.wxml,   index.js,   util.js

template.wxml中代碼

紅色箭頭的地方為自定義字段,他將對應下圖index.wxml中紅色下划線

黑色下划線就是對應array_pl這個wx:for循環出來里面的數據,那么這個array_pl數組是寫在utli.js里面的,大概是這樣

const array_pl= [
{
imgurl: "/images/pinglun_1.jpg",
title: "張女士",
time: "半小時前",
content: "吾問無為謂喂喂喂。"
},
{
imgurl: "/images/pinglun_2.jpg",
title: "王女士",
time: "1小時前",
content: "親親親親親親親親親親親。"
},
{
imgurl: "/images/pinglun_6.jpg",
title: "李先生",
time: "2小時前",
content: "鵝鵝鵝餓餓。"
}
]

module.exports = {
array_pl: array_pl,
}

 

 

然后將數據傳送到index.js里面進行接收

const utils = require('../../utils/util.js')
//在onload函數里面申明變量接收數據再發送到index.wxml
onLoad: function () {
//加載評論
var array_pl = utils.array_pl
this.setData({
array_pl   
})
}
然后一個簡單靜態的公共數據傳送與模板公共引用大概就這樣完成了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM