(1)组件文件夹
components下 kf (.json、.js、.wxss、.wxml)
例如加一个客服组件:
components下kf
(1)kf.js
const APP=getApp(); Component({ data:{ kfUrl:APP.globalData.kfUrl } })
(2)kf.json
{ "component":true }
(3)kf.wxml
<navigator url="/pages/webView/index?url={{kfUrl}}" class="kf-component" hover-class="none"> <image src="/static/icon/kf-icon.png" mode="widthFix"></image> </navigator>
(4)kf.wxss
.kf-component{ width: 96rpx; height: 96rpx; } .kf-component image{ width: 100%; }
app.js
App({ // 全局数据 globalData: { kfUrl: encodeURIComponent("https://www26.53kf.com/webCompany.php?arg=10173200&kf_sign=TM5OTMTU4McyNTEwMjgyNzQ1MDkyMDEzNzIxNzMyMDA%253D&style=1"), //客服地址 } })
app.json
{ "usingComponents": { "kf-component": "../../components/kf/kf", }, }
index.wxml使用页
<!-- 客服组件 --> <kf-component class="kf-box"></kf-component>