小程序如何创建一个组件使用

（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{
   96rpx;
  height: 96rpx;
}
.kf-component image{
   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>

小程序如何创建一个组件使用

小程序如何创建一个组件使用

相关推荐