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

 

(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>

 

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

 

 

 

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

 

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

上一篇:小程序城市列表根据字母排序


下一篇:实战:云开发-实现奶茶店小程序(一)