关闭

小程序组件开发_小程序实现自定义组件的多种方式

时间: 2018-07-16阅读: 2046标签: 小程序

组件开发可以使代码的可复用性强,是指一些设计为通用性的,用来构建较大型应用程序。在小程序中,目前也支持简单的组件化编程,可以把页面通用功能模块抽象成自定义组件,以以便在不同的页面中复用,提供代码可读性,降低维护成本,这篇文章主要讲解小程序实现组件开发的2种方式


首先需要在根目录下新建一个文件夹components,用于存放组件模块。下面就以实现图片查看器来进行说明,效果图如下:



方式一:

在components目录下新建picture文件夹,生成对应jsjson、wxml、wxss文件。然后里面的内容分别是:

picture.wxml文件:

<view class="picture" wx:if="{{ishow_pic}}">
  <swiper indicator-dots="true" duration="500" current="{{index_pic}}" indicator-active-color="#FF7D7D" indicator-color="#fff">
    <block wx:for="{{list}}" wx:key="{{key}}">
      <swiper-item>
        <image src='{{item}}' mode="aspectFit"></image>
      </swiper-item>
    </block>
  </swiper>
  <view>
    <image src="/images/icon_Closecall@3x.png"  bindtap="tap_closepic" class="tap_close"></image>
  </view>
</view>

picture.js文件:

Component({
  options: {
    multipleSlots: true
  },
  properties: {
    list: {//图片列表
      type: Array,
      value:[]
    },
    index_pic: {//显示当前下标
      type: Number,
      value: 0      
    }
  },
  data: {
    ishow_pic:false,//是否显示
  },
  methods: {
    tap_closepic:function(){//显示或隐藏
      this.setData({
        ishow_pic: !this.data.ishow_pic
      })
    },
  }
})

说明:小程序中组件是由Component 构造器生成的,调用 Component 构造器时可以用来指定自定义组件的属性、数据、方法等。

picture. wxss文件:  

.picture{
  position: fixed;
  height: 100%;
  width: 100%;
  background: #000;
  top:0;
  left: 0;
  z-index: 99;
}
.picture swiper{
  height: 100%;
  width: 100%;
}
.picture swiper image{
  width: 100%;
  height: 100%;
}
.picture .tap_close{
  width: 80rpx;
  height: 80rpx;
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  z-index: 99999;
}

 picture. json文件

{
  "component": true,
  "usingComponents": {} 
}

说明:

 "component": true, // 自定义组件声明 
 "usingComponents": {} // 可选项,用于引用别的组件


在index页面中调用:

index.wxml文件中引入如下:

<picture id='picture'  list="{{list}}" index_pic="{{index_pic}}"></picture>

json中需要配置使用的组件名称,已经路径:

{
  "usingComponents": {
    "picture": "/components/picture/picture"
  }
}

在js中使用:

onLoad: function (options) {
    this.picture = this.selectComponent("#picture") //组件的Id
},
tap_img:function(e){/**点击图片 */
    this.setData({
      index_pic:e.currentTarget.dataset.index,
    }) 
    this.picture.tap_closepic()
},


方式二:

在picture文件夹,只使用wxml、wxss这2个文件  

picture.wxml文件中使用<template>标签来声明为组件。如下:

<template name="picture">
    <!--里面为方式一的代码-->
</template>

picture.wxss文件不变。


在index页面中的调用:

index.wxml文件中引入如下,需要import引入文件

<import src="../../components/picture/picture.wxml"></import>
<template is="picture" data="{{list,ishow_pic,index_pic}}"/>

在index.wxss头部需要引入组件的样式文件:

@import "../../components/picture/picture.wxss";

在index.js中需要定义组件中的方法以及变量

data: {
    list:[],
    index_pic:0, 
    ishow_pic:false,
    //...
},

tap_img:function(e){/**点击图片 */
this.setData({
index_pic:e.currentTarget.dataset.index,
})
},

tap_closepic:function(){//显示或隐藏
this.setData({
ishow_pic: !this.data.ishow_pic
})
},



方式三:

第三方模块实现,比如使用wepy,引入如下:

mport wepy from 'wepy'

wepy对组件的支持非常接近vue.js 2.x,比如computed、watcher属性。这里就不做说明,有兴趣的可以去看文档哦。



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/931

Remax:使用真正的 React 构建小程序

Remax 是基于真正 React 的小程序构建工具,本文由 Ant Design 团队的 Mack 执笔,让我们跟随作者一起了解 Remax。因为 React 是我们最熟悉的技术。小程序糟糕的 API 设计已经有很多文章吐槽

小程序跨页面交互的作用与方法

微信小程序的分包大小已经到达了 12M 大小,一方面说明小程序的确逐步为开发者放开更大的权限,另一方面也说明了对于某些小程序 8M 的大小已经不够用了

小程序自定义tabbar占位问题

针对于小程序中自定义tabbar问题,有多种自定义方式。其中之一就是需要将原先系统自带的tabbar隐藏,调用,就是在小程序底部原先放置tabbar的内容会出现空白,仍然会出现占位问题。

微信小程序推广方式_最有效的小程序推广模式

当小程序开发完成后,就需要进行推广操作。当然推广的前提是核心功能是否能够满足用户需求,下面总结一些具体的运作方式。和大多数APP的搜索个性一样,用户搜索小程序名称就能进入小程序界面。我们需要做好关键词优化,通过搜索-微信指数

如何微信小程序禁止下拉_解决小程序下拉出现空白的情况

在微信小程序中,用力往下拉动,页面顶部会出现一段空白的地方。 产品的需求不太允许这么做,会影响用户体验,查看文档发现可以使用enablePullDownRefresh这属性来实现,但是在部分ios端仍然可以下拉出现空白。那么该如何解决呢?

小程序插件怎么玩?有赞和千万级用户的“群里有事”做了一次示范

小程序插件让大的公司赋能外部开发者变得非常方便,极大降低了中小开发者开发丰富的小程序应用的门槛,未来的发展是很值得期待的。尤其是国庆节前夕,微信公布的关于小程序跳小程序的新政策,极大地限制了不同主体之间小程序互跳的自由度

微信小程序开发早知道

小程序没有跳转公众号、跳转公众号图文素材的能力。除非用户通过扫描二维码进入小程序的情景,可以显示关注公众号组件。公众号菜单、公众号图文素材可以打开小程序,网页无法直接打开小程序。

小程序的节流与防抖

在屏幕滚动与拖拽的时候,经常会用到一些持续触发的事件,而这类事件不可控触发频率非常高,大大影响了性能,而我们想要让其变得可控,就可以用到节流和防抖两种方案。

小程序多端框架全面测评

最近前端届多端框架频出,相信很多有代码多端运行需求的开发者都会产生一些疑惑:这些框架都有什么优缺点?到底应该用哪个?作为 Taro 开发团队一员,笔者想在本文尽量站在一个客观公正的角度去评价各个框架的选型和优劣。

小程序开发注意事项_我的第一个小程序

业余时间学习了下小程序开发,整理一篇关于小程序开发需要注意的事项:后端接口域名必须使用https、不能直接进行dom节点操作、尽量使用es6的箭头函数、原生的组件层级是最高的等

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!