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

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

组件开发可以使代码的可复用性强,是指一些设计为通用性的,用来构建较大型应用程序。在小程序中,目前也支持简单的组件化编程,可以把页面通用功能模块抽象成自定义组件,以以便在不同的页面中复用,提供代码可读性,降低维护成本,这篇文章主要讲解小程序实现组件开发的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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

腾讯出品的微信小程序有哪些?

腾讯wifi一键连;识花君;企鹅医典;vgo微海报;腾讯AI体验中心;食物健康测评;腾讯地图+;微信辟谣助手;腾讯文档;多媒体AI平台;微云;微信发票助手

微信小程序与h5的区别

小程序面世以来,尽管微信团队做了很多关于小程序的普及功课,但是还是有很多人不太理解,最多的误解就是把它等同于H5。小程序由于刚推出来时开放的能力十分有限,所以在功能展示上会让普通用户感觉和H5一样,并没有什么特别之处

微信小程序中清除定时器

在微信小程序的开发过程中,经常会遇到使用倒计时的情况,但是小程序的页面跳转经常会遇到跳转的下一个页面后,前一个页面的倒计时还在运行。这时候需要我们在关闭或者离开当前页面的时候清除掉当前的倒计时,但是传统的方式在小程序中无法使用,在小程序中我采用的是赋值然后清除的方法。

微信小程序跳转小程序

以前小程序跳小程序直接通过api调用跳转即可,但在2018.11.1下午微信公众平台通知需做navigateToMiniProgramAppIdList配置,否则无法提交审核,配置要跳转的微信小程序id ,最多不能超过10个。

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

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

小程序多余文本省略号显示

如何在 wxml 页面中截取数据?取数据想必大家都会,不就是 substring 吗?但是这种方法在 wxml 页面中是无效的。那还有 css 啊,不一样可以做到吗?但是个人觉得 css 复用性太差,暂不考虑。

在小程序中实现 Mixins 方案

在原生开发小程序的过程中,发现有多个页面都使用了几乎完全一样的逻辑。由于小程序官方并没有提供 Mixins 这种代码复用机制,所以只能采用非常不优雅的复制粘贴的方式去“复用”代码

把微信小程序异步API为Promise,简化异步编程

把微信小程序异步API转化为Promise。用Promise处理异步操作有多方便,谁用谁知道。微信官方没有给出Promise API来处理异步操作,而官方API异步的又非常多.

在微信小程序中保存网络图片

在小程序的文档中我们得知,wx.saveImageToPhotosAlbum 是用来保存图片到相册的。 但是仔细一看会发现这个接口的filePath参数只接受临时文件路径或永久文件路径,不支持网络图片路径,意味着我们不能直接调用这个接口。

微信小程序之程序、页面注册及生命周期

微信小程序生命周期函数:onLoad: 页面加载。onShow: 页面显示每次打开页面都会调用一次。onReady: 页面初次渲染完成,onHide: 页面隐藏,onUnload: 页面卸载。在小程序中所有页面的路由全部由框架进行管理

点击更多...

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