关闭

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

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

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

关闭

微信小程序更新机制_微信小程序的2种更新方式

小程序的启动方式:冷启动和热启动,小程序冷启动时,会检查小程序是否有最新版本。如果有则将异步下载最新版本,但是仍将运行当前版本等到下一次冷启动时再运行最新版本。

微信小程序wx.getUserInfo授权获取用户信息

这个接口只能获得一些非敏感信息,例如用户昵称,用户头像,经过用户授权允许获取的情况下即可获得用户信息,至于openid这些,需要调取wx.login来获取。

小程序如何改变onLoad 的执行时机?

也许在小程序所有生命周期里,我们用的最多的就是 onLoad,一大堆代码都要在初始化的时候执行。很多时候,初始化的代码是每个页面共用的,比如获取用户信息、获取定位等:

小程序超过2M限制的方法_分包加载

起初小程序上线时,微信限制了代码包不能超过1MB,后来功能变大变成了2M了,限制大小是出于对小程序启动速度的考虑,<br>希望用户在使用任何一款小程序时,都能获得一种“秒开”体验

小程序开发的一些细节,你有注意吗?

我认为小程序是一个没有什么技术含量的东西,特别是现在有了组件库,而且小程序生态不断完善的情况下,只要对着文档慢慢写就好,就是时间的问题。然后这里也不是教大家怎么去写程序之类的,而是本人在经历过后的一些小建议

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

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

通过反编译小程序来学习前端

小程序开发时,会有4种文件:.wxss .json .wxs .wxml。正式上传到腾讯时,目录会被打包,使用时再发放给客户端。这个文件包后缀是 .wxapkg。只要手机用过这个小程序,文件包就会缓存在手机内

小程序保存图片到相册功能实现

先检查用户请求过的权限中是否允许保存到相册权限,如果没有请求过这个权限,应该向用户发起授权请求(弹窗授权),如果请求过这个权限,并且授权了,那就保存图片,显示保存成功;如果请求过,但是是拒绝的,就跳到设置页,重新授权。

支付宝小程序个人开发者,但暂未开放支付接口

支付宝小程序今日正式面向个人开发者开放公测。这是继微信之后,业内第2家面向个人开发者开放的小程序平台。有开发能力的个人用户可访问支付宝小程序平台,扫码验证个人身份以后即可开始支付宝小程序账号申请并进行代码开发。

微信小程序分包加载

开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必须包含一个主包,所谓的主包,即放置默认启动页/TabBar 页面

点击更多...

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