E企盈营销工具技术服务商 热线:4006-838-530

弋江区E企盈小程序微信小程序自定义组件的使用

开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。

微信小程序项目越写越大,页面也越来越多,所以将相同作用的模块写成组件是非常必要也方便开发维护的事。比如,一个弹出框写起来很简单,但是每个页面都需要用一个弹出框,如果每个页面都写一个弹出框的话,这就很麻烦,而且没有意义,所以,就弹出框写成组件,就是一个非常好的选择。下面就以弹出框来举例,了解一下微信小程序的组件系统。创建自定义组件

类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true 可这一组文件设为自定义组件):

 项目目录 json文件:{  "component": true}

 wxml文件:<view wx:if="{{show}}" class='iosTip-mask iosTip-animate-fade-in'>  <view c开通Hyperdunk小程序电话:4006-838-530lass='iosTip-dialog'>    <view class='iosTip-dialog-box'>      <view class='iosTip-close' bindtap='close'></view>      <view class='iosTip-title'>特别说明</view>      <view class='iosTip-con'>受《Apple Developer Program 许可协议》《App Store 审核指南》 等终端设备系统、应用程序商店、市场等的协议规范的影响,自2018年8月17日起,小程序内苹果(Apple)手机用户将暂不支持直接购买。</view>      <button open-type='contact' class="service-button" session-from="{{3}}">        <view class='iosTip-bottom'>联系在线客服获得更多帮助</view>      </button>    </开通起亚小程序电话:4006-838-530view>  </view></view>

 js文件:// component/iosTip/iosTip.jsComponent({    /**   * 组件的初始数据   */  data: {    show: true  },  /**   * 组件的方法列表   */  methods: {    close: function() {      var myShow = {        myShow: false      }      this.triggerEvent('myevent', myShow) //myevent自定义名称事件,父组件中使用    }  }})

wxss文件:.iosTip-mask {  width: 100%;  position: fixed;  z-index: 1000;  top: 0;  right: 0;  left: 0;  bottom: 0;  background: rgba(0, 0, 0, 0.4);}.iosTip-animate-fade-in {  -webkit-animation: fadeIn ease 0.3s forwards;  animation: fadeIn ease 0.3s forwards;}.iosTip-dialog {  position: absolute;  width: 80%;  max-width: 300px;  top: 40%;  left: 50%;  -webkit-transform: translate(-50%, -50%);  transform: translate(-50%, -50%);  background-color: rgba(255, 255, 255, 0.3);  text-align: center;  border-radius: 8px;  overflow: hidden;  padding: 12rpx;}.iosTip-dialog-box {  background-color: #fff;  width: 100%;  height: auto;  border-radius: 8px;  position: relative;}.iosTip-close {  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNC4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDQzMzYzKSAgLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB2ZXJzaW9uPSIx开通复古眼镜小程序电话:4006-838-530LjEiIGlkPSLlm77lsYJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIxOC45NDRweCIgaGVpZ2h0PSIxOC45ODZweCIgdmlld0JveD0iMCAwIDE4Ljk0NCAxOC45ODYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE4Ljk0NCAxOC45ODYiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNDQ0NDQ0MiIGQ9Ik0xOC4wNTUsMTguMDk2Yy0xLjE4OCwxLjE4OC0zLjExMSwxLjE4OC00LjI5OCwwbC00LjI5OC00LjMwMg0KCWwtNC4yOTYsNC4zMDJjLTEuMTg4LDEuMTg4LTMuMTExLDEuMTg4LTQuMjk4LDBjLTEuMTg2LTEuMTg4LTEuMTg2LTMuMTEzLDAtNC4zMDJsNC4yOTgtNC4zMDFMMC44NjUsNS4xOTINCgljLTEuMTg2LTEuMTg4LTEuMTg2LTMuMTEzLDAtNC4zMDFjMS4xODctMS4xODgsMy4xMS0xLjE4OCw0LjI5OCwwbDQuMjk2LDQuMzAxbDQuMjk4LTQuMzAxYzEuMTg3LTEuMTg4LDMuMTEtMS4xODgsNC4yOTgsMA0KCWMxLjE4NiwxLjE4OCwxLjE4NiwzLjExMywwLDQuMzAxbC00LjI5OCw0LjMwMWw0LjI5OCw0LjMwMUMxOS4yNCwxNC45ODIsMTkuMjQsMTYuOTA4LDE4LjA1NSwxOC4wOTZ6Ii8+DQo8L3N2Zz4NCg==");  width: 60rpx;  height: 60rpx;  position: absolute;  right: 12rpx;  top: 12rpx;  background-size: 20rpx;  background-repeat: no-repeat;  background-position: center;}.iosTip-title{  font-weight: bold;  padding: 60rpx 0 20rpx;  font-size: 40rpx;}.iosTip-con{  font-size: 26rpx;  color: #888888;  line-height: 48rpx;  padding: 40rpx;  text-align: left;}.iosTip-bottom{  color: #62759c;  font-size: 24rpx;  margin-top: 80rpx;  padding-bottom: 70rpx;}.service-button{  background: white;  margin: 0;  padding: 0;}

 以上代码就定义了一个完整的组件,下面需要在页面中去使用它页面index的json文件需要引用组件:{  "usingComponents": {    "iosTip": "/components/iosTip/iosTip"  }}

页面index的wxml文件使用组件:<iosTip bind:myevent="onGetShow" wx:if="{{IsIosShow}}" />

页面index的js文件书写逻辑: onGetShow: function (e) {    console.log(e.detail.myShow)    this.setData({      IsIosShow: e.detail.myShow    })  },

这样,一个完整的组件就写好了,每个页面都可以引用弹出框了微信小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 弋江区E企盈小程序微信小程序自定义组件的使用
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

模王系统开发

联系我们升级日志

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏