精华内容
下载资源
问答
  • 微信自定义组件

    2020-03-17 15:44:09
    2.组件间通信与事件 this.triggerEvent('myevent', myEventDetail) 1.父组件 <i-card card-title="标题" bindmyevent="myEventListener"></i-card> Page({ data: { }, onLoad: fun...

    官网文档

    1.Component 构造器

    Component({
    	behaviors: [],
    	properties: { // 这个properties 是接受父组件传递下来的数据字段
    		myProperty: {
    			type: String,
    			value: ''
    		},
    		name: String
    	},
    	data: {
            obj:[{"id":"1","name":"小一"}]
        },
    	// 组件内部的数据
    	observers: {
    		//组件数据字段监听器,用于监听 properties 和 data 的变化
    		'cardTitle': function(val) {
    			console.log('cardTitle:', val)
    		},
    	},
    	lifetimes: {
    		// 生命周期函数
    		created: function() {
    			//在组件实例刚刚被创建时执行  此时还不能调用 setData
    		},
    		attached: function() {
    			//数据的初始化在这边设置 这边可以接受到父组件传递过来的值
                console.log(this.data.name)
    		},
    		moved: function() {
    			//在组件实例被移动到节点树另一个位置时执行
    		},
    		detached: function() {
    			//在组件实例被从页面节点树移除时执行
    		},
    	},
    	pageLifetimes: {
    		// 组件所在页面的生命周期函数
    		show: function() {
    			// 页面被展示
    		},
    		hide: function() {
    			// 页面被隐藏
    		},
    		resize: function(size) {
    			// 页面尺寸变化
    		}
    	},
    	methods: {
    		onMyButtonTap: function() {
    			this.setData({
    				// 更新属性和数据的方法与更新页面数据的方法类似
    			})
    		},
    		// 内部方法建议以下划线开头
    		_myPrivateMethod: function() {
    			// 这里将 obj[0].name 设为 '王艺颖'
    			this.setData({
    				'obj[0].name': '王艺颖'
    			})
    		},
    		_propertyChange: function(newVal, oldVal) {
    
    		}
    	}
    
    })

    2.组件间通信与事件

    this.triggerEvent('myevent', myEventDetail)

    1.父组件
    	<i-card card-title="标题"  bindmyevent="myEventListener"></i-card>
    Page({
    	data: {
    		
    	},
    	onLoad: function () {
    		
    	},
    	myEventListener: function (e) {
    		console.log('点击事件', e.detail)// 哪个按钮点击的时候,就会获取该按钮改变数据的值
    	}
    })
    
    2.组件
    <view class="com-card">
    	<view class="head">{{cardTitle}}</view>
    	<button bindtap="onTap2"  name="cnt">编辑2</button>
    	<button bindtap="onTap"  name="cnt">编辑</button>
    </view>
    Component({
    	options: {
    		multipleSlots: true  // 在组件中支持多slot子节点的支持
    	},
    	properties: {
    		cardTitle: {
    			type: String,
                value:''
    		}
    	},
    	data:{
    		name:"sss",
    		age:21
    	},
    	observers: {
    		'cardTitle': function (val) {
    			console.log('cardTitle:',val+11)
    		},
    		'name': function (val) {
    			console.log('name:', val + 11)
    		},
    	},
    	methods: {
    		onTap: function (e) {
    			this.setData({
    				name:"王天一"
    			})
    		},
    		onTap2: function (e) {
    			let myEventDetail={
    				age:111
    			}
    			this.triggerEvent('myevent', myEventDetail)
    		}
    	}
    })
    

    3.behaviors 是用于组件间代码共享的特性,类似于一些编程语言中的“mixins”或“traits”。

    每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behavior ,behavior 也可以引用其他 behavior 

    // my-behavior.js
    module.exports = Behavior({
    	behaviors: [],
    	properties: {
    		myBehaviorProperty: {
    			type: String
    		}
    	},
    	data: {
    		myBehaviorData: {}
    	},
    	attached: function() {},
    	methods: {
    		myBehaviorMethod: function() {}
    	}
    })
    
    // my-component.js
    var myBehavior = require('my-behavior')
    Component({
    	behaviors: [myBehavior],
    	properties: {
    		myProperty: {
    			type: String
    		}
    	},
    	data: {
    		myData: {}
    	},
    	attached: function() {},
    	methods: {
    		myMethod: function() {}
    	}
    })
    
    在上例中, my-component 组件定义中加入了 my-behavior ,而 my-behavior 中包含有 myBehaviorProperty 属性、 myBehaviorData 数据字段、 myBehaviorMethod 方法和一个 attached 生命周期函数。这将使得 my-component 中最终包含 myBehaviorProperty 、 myProperty 两个属性, myBehaviorData 、 myData 两个数据字段,和 myBehaviorMethod 、 myMethod 两个方法。当组件触发 attached 生命周期时,会依次触发 my-behavior 中的 attached 生命周期函数和 my-component 中的 attached 生命周期函数。

    definitionFilter自定义组件扩展 

    4.relations组件间关系

    5.lifetimes

    组件的的生命周期也可以在 lifetimes 字段内进行声明。是2.2.3版本之后支持的,而之前的放在外面的生命周期,是低于2.2.3版本前支持的。

    Component({
      lifetimes: {
        attached: function() {
          // 在组件实例进入页面节点树时执行
        },
        detached: function() {
          // 在组件实例被从页面节点树移除时执行
        },
      },
      // 以下是旧式的定义方式,可以保持对 <2.2.3 版本基础库的兼容
      attached: function() {
        // 在组件实例进入页面节点树时执行
      },
      detached: function() {
        // 在组件实例被从页面节点树移除时执行
      },
      // ...
    })

    特殊的生命周期

    Component({
      pageLifetimes: {
        show: function() {
          // 页面被展示
        },
        hide: function() {
          // 页面被隐藏
        },
        resize: function(size) {
          // 页面尺寸变化
        }
      }
    })

    二、案例

    自定义组件:card

    <view class="com-card">
    	<view class="head">{{cardTitle}}</view>
    	<button bindtap="onTap2"  name="cnt">编辑2</button>
    	<button bindtap="onTap"  name="cnt">编辑</button>
    </view>
    
    
    json:
    
    {
    	"component": true
    }
    
    js:
    
    Component({
    	options: {
    		multipleSlots: true  // 在组件中支持多slot子节点的支持
    	},
    	properties: {
    		cardTitle: {
    			type: String,
                value:''
    		}
    	},
    	data:{
    		name:"sss",
    		age:21
    	},
    	observers: {
    		'cardTitle': function (val) {
    			console.log('cardTitle:',val+11)
    		},
    		'name': function (val) {
    			console.log('name:', val + 11)
    		},
    	},
    	lifetimes: {
    		// 生命周期函数
    		created: function () {
    			//在组件实例刚刚被创建时执行  此时还不能调用 setData
    		},
    		attached: function () {
    			//数据的初始化在这边设置
    			console.log(this.data.cardTitle, '数据')
    		},
    		moved: function () {
    			//在组件实例被移动到节点树另一个位置时执行
    		},
    		detached: function () {
    			//在组件实例被从页面节点树移除时执行
    		},
    	},
    	pageLifetimes: {
    		// 组件所在页面的生命周期函数
    		show: function () {
    			// 页面被展示
    		},
    		hide: function () {
    			// 页面被隐藏
    		},
    		resize: function (size) {
    			// 页面尺寸变化
    		}
    	},
    	methods: {
    		onTap: function (e) {
    			this.setData({
    				name:"王天一"
    			})
    		},
    		onTap2: function (e) {
    			let myEventDetail={
    				age:111
    			}
    			this.triggerEvent('myevent', myEventDetail)
    		}
    	}
    })
    

    父组件

    <view class="intro">
    <view>当前日期:{{date}}</view>
    	<i-card card-title="标题"  bindmyevent="myEventListener"></i-card>
    </view>
    
    json:
    
    {
      "usingComponents": {
    	  "i-card":"../../components/card/card"
      }
    }
    
    js:
    
    const app = getApp();
    import _ from '../../utils/underscore.js
    import moment from '../../utils/moment.min.js'
    Page({
    	data: {
    		obj: [{
    			"id":122,
    			"name":"小样"
    		}],
    		date:""
    	},
    	onLoad: function () {
    		_.map(this.data.obj, function (el) {
    			console.log(el)
    		})
    		//日期插件
    		this.setData({
    			date: moment().format("YYYY-MM-DD")
    		})
    	},
    	myEventListener: function (e) {
    		console.log('点击事件', e.detail)//这个都可以读到组件的按钮,只要加了这个this.triggerEvent('myevent', myEventDetail)。就可以读取到数据的改变
    	}
    })
    

     

    展开全文
  • 学习微信自定义组件

    2020-12-04 20:47:29
    微信自定义组件 开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用。 类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成 1、配置自定义组件 在json文件中写入代码:...

    微信自定义组件

    开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用。

    类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成

    1、配置自定义组件

    在json文件中写入代码:“component”: true 表示自定义组件声明,代码如下所示。

    {
      "component": true
    }
    

    同时,js文件中也需要写成这种格式,其代码如下:

    Component({
    
      properties: {
        paramA: Number,
        paramB: String,
      },
    
      methods: {
        onLoad: function() {
          this.data.paramA // 页面参数 paramA 的值
          this.data.paramB // 页面参数 paramB 的值
        },
        clickEventc: function(e) {
          this.triggerEvent('clickEventcNmae', e.data)
        }
      }
    
    })
    

    properties是组件的对外属性。
    methods是组件的方法。
    this.clickEventcNmae是触发事件。
    更多参数请参考 Component文档

    2、使用组件

    使用自定义组件前,在需要引入组件的页面的json文件中配置:

    {
      "usingComponents": {
        "componentName": "/component/componentName"
      }
    }
    

    需要注意的是:组件的对外属性名是驼峰命名法,wxml引用组件属性时则对应使用连字符。如属性名:abcAbc,引用时则是abc-abc。

    3、组件间通信

    下文称自定义组件为:子组件
    引用组件为:父组件

    1、子组件触发事件。

    子组件使用triggerEvent方法触发事件,向父组件传递数据,示例代码:

    Component({
      methods: {
        onTap: function(){
          this.triggerEvent('myevent', myEventDetail, myEventOption)
        }
      }
    })
    

    父组件监听事件

    <!-- 当子组件触发“myevent”事件时,父组件调用“onMyEvent”方法 -->
    <component-tag-name bind:myevent="onMyEvent" />
    

    2、父组件WXML 数据绑定

    用于父组件向子组件的指定属性设置数据,示例代码:

    <!-- 父组件 -->
    <view>
      <!--设置子组件prop-a、prop-b属性的值 -->
      <component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">
      </component-tag-name>
    </view>
    

    4、子组件 wxml 的 slot

    子组件 slot 节点,用于承载父组件提供的 wxml 结构。

    默认情况下,一个组件的 wxml 中只能有一个 slot 。使用多 slot 时,需要在组件 js 中声明启用。如下:

    Component({
      options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
      },
    })
    

    子组件的 wxml 中使用多个 slot ,以不同的 name 来区分。如下:

    <!-- 子组件模板 -->
    <view class="wrapper">
      <slot name="before"></slot>
      <view>这里是组件的内部细节</view>
      <slot name="after"></slot>
    </view>
    

    父组件使用时,用 slot 属性来将节点插入到不同的 slot 上。如下:

    <!-- 父组件的页面模板 -->
    <view>
      <component-tag-name>
        <view slot="before">这里是插入到组件slot name="before"中的内容</view>
        <view slot="after">这里是插入到组件slot name="after"中的内容</view>
      </component-tag-name>
    </view>
    
    展开全文
  • 微信小程序的自定义组件,支持自行定义item元素样式,横向滚动并且能够隐藏滚动条,监听item点击事件。
  • 关于微信自定义组件的使用过程以及第三方常用组件的使用过程! 首选: 我们来介绍一下在进行微信小程序开发的过程中能够用到的自我感觉良好的第三方组件: 第一:vant-Weapp这个组件库;其是youzan旗下的一个组件库...

    关于微信自定义组件的使用过程以及第三方常用组件的使用过程!

    首选:
    我们来介绍一下在进行微信小程序开发的过程中能够用到的自我感觉良好的第三方组件:
    第一:vant-Weapp这个组件库;其是youzan旗下的一个组件库;
    网址为:https://youzan.github.io/vant-weapp/#/quickstart;
    第二:lodash这个组件库;
    网址为:https://www.lodashjs.com/
    具体使用过程我们可以详见其官网相应的教程;但是在进行小程序开发过程中我们注意
    直接上图:
    在这里插入图片描述
    此时;我们点击上方的详情;然后会弹出如上图的复选框;我们勾上使用npm模块以及不校验合法域名,web-view。。。。;
    因为这些组件是我们拿取其他组织封装好的;因此我们需要安装和引入;当我们采取npm进行安装的时候;就需要勾选上去,不然将会报错;
    做完这一步后;我们进行下一步;
    安装我们要用到的组件库就是vant-Weapp和lodash;
    通过npm i vant-weapp -S --production安装这个组件库;但是我们好应该注意就是我们在安装这个组件库之前还需要初始化一下生成package.json这个文件;(这个文件里面包含了项目的配置信息,包括名称、版本、许可证等元数据,也会记录所需的各种模块,包括 执行依赖,和开发依赖,)
    通过npm init -y来初始化这个文件;
    安装完第三方组件库后我们就要进行下一步;
    即:如下图:
    在这里插入图片描述
    点击“工具“这个按钮会弹出一系列后续操作,我们点击这个操作命令;即构建npm;将会自动生成我们安装好的第三方组件库;此时第三方组件库的相应操作和注意事项已经结束;下面让我们来介绍自定义组件的如何创建以及使用过程;

    自定义组件的使用操作步骤:
    首选:我们可以参照微信小程序官网:
    网址如下:
    https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
    你们可以参照官网的使用步骤来进行使用;
    下面这是我看过官网后整理的使用步骤;
    首选第一步;
    我们选创建一个文件夹名为:components;然后再右击这个文件夹会出来新建什么什么;我们选择新建component;然后取一个名字例如取名为h;那么他就会自动为我们生成.js文件,.json文件,.wxml文件,.wxss文件;
    第一:我们打开.json文件;输入

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

    第二:进入.wxml文件;
    填充我们自定义组件的内容;
    在这里我填充的内容为:

    <view class="inner">
      {{innerText}}
    </view>
    <slot></slot>
    

    第三:进入.wxss文件书写我们想要的样式;

    .inner {
      color: red;
    }
    

    第四:进入.js文件进行属性值的绑定;(提供组件的属性定义、内部数据和自定义方法)

    Component({
      properties: {
        // 这里定义了innerText属性,属性值可以在组件使用时指定
        innerText: {
          type: String,
          value: 'default value',
        }
      },
      data: {
        // 这里是一些组件内部数据
        someData: {}
      },
      methods: {
        // 这里是一个自定义方法
        customMethod() {}
      }
    })
    

    此时我们已经把我们创建的自定义组件弄好了接下来就是调用我们这个自定义组件;
    那么如何调用我们的自定义组件呢?
    第一:
    在我们要使用自定义组件的页面打开.json文件;进行声明引入;

    {
      "usingComponents": {
        "component-tag-name": "path/to/the/custom/component"
      }
    }
    

    第二步:使用我们这个自定义组件把他放在我们想要放入的相应位置;

    <view>
      <!-- 以下是对一个自定义组件的引用 -->
      <component-tag-name inner-text="Some text"></component-tag-name>
    </view>
    

    就此结束;

    展开全文
  • 微信自定义播放组件

    2019-03-20 16:14:25
    仿照微信视频播放的组件,支持视频和图片切换等功能。
  • 基于微信视频号自定义交易组件开发, 搭配小程序, 实现直播变现的流程以及心得
  • 微信左右拨的小开关组件用法,可自定义颜色的微信小程序自定义 Switch 开关组件模板,用于程序参数设置,打开或关闭某项功能,现在这种开关在手机中比较常见了,这个例子挺简单,好用易懂,样子也很漂亮,开关效果如...
  • 基于微信的Component自定义组件封装,简洁的组件化编程,关于Component自定义组件参考 。 注意需要开启微信开发者工具中的ES6转ES5功能,请使用大于1.6.3版本的小程序基础库,并将微信更新到最新版本。 如果你需要...
  • 本文实例为大家分享了微信小程序自定义tabBar组件的具体代码,供大家参考,具体内容如下先看一看目录template文件夹里存放tabbar模板。template/template.wxml{{item.text}}template.css.icon{width:54rpx;height: ...

    本文实例为大家分享了微信小程序自定义tabBar组件的具体代码,供大家参考,具体内容如下

    先看一看目录

    e2303e19d5666ca070dcad543bcf2438.png

    template文件夹里存放tabbar模板。

    template/template.wxml

    {{item.text}}

    template.css

    .icon{

    width:54rpx;

    height: 54rpx;

    }

    .tabBar{

    width:100%;

    position: fixed;

    bottom:0;

    padding:10rpx;

    margin-left:-4rpx;

    background:#F7F7FA;

    font-size:20rpx;

    color:#8A8A8A;

    box-shadow: 6rpx 6rpx 6rpx 6rpx #aaa;

    }

    .tabBar-item{

    float:left;

    width:25%;

    text-align: center;

    overflow: hidden;

    }

    /*当前字体颜色*/

    .tabBartext{

    color:red;

    }

    template.js

    //初始化数据

    function tabbarinit() {

    return [

    { "current":0,

    "pagePath": "/pages/index/index",

    "iconPath": "/imgs/home.png",

    "selectedIconPath": "/imgs/home_on.png",

    "text": "主页"

    },

    {

    "current": 0,

    "pagePath": "/pages/news/news",

    "iconPath": "/imgs/message.png",

    "selectedIconPath": "/imgs/message_on.png",

    "text": "资讯"

    },

    {

    "current": 0,

    "pagePath": "/pages/category/category",

    "iconPath": "/imgs/category.png",

    "selectedIconPath": "/imgs/category_on.png",

    "text": "分类"

    },

    {

    "current": 0,

    "pagePath": "/pages/buy/buy",

    "iconPath": "/imgs/buy.png",

    "selectedIconPath": "/imgs/buy_on.png",

    "text": "购物"

    }

    ]

    }

    //tabbar 主入口

    function tabbarmain(bindName = "tabdata", id, target) {

    var that = target;

    var bindData = {};

    var otabbar = tabbarinit();

    otabbar[id]['iconPath'] = otabbar[id]['selectedIconPath']//换当前的icon

    otabbar[id]['current'] = 1;

    bindData[bindName] = otabbar

    that.setData({ bindData });

    }

    module.exports = {

    tabbar: tabbarmain

    }

    到此改组件完成,然后讲解一下使用方法。

    我们先把样式载入到app.wxss

    @import "/template/template.wxss";

    在index文件夹

    index.wxml

    index.js

    const app = getApp()

    var template = require('../../template/template.js');

    Page({

    data: {

    },

    onLoad: function () {

    template.tabbar("tabBar", 0, this)//0表示第一个tabbar

    },

    })

    news.wxml与index.wxml一样

    news.js如下

    const app = getApp()

    var template = require('../../template/template.js');

    Page({

    data: { },

    onLoad: function () {

    template.tabbar("tabBar", 1, this)//1表示第二个tabbar

    },

    })

    效果如图

    dc4440bd54fbe791ba645c515838d363.png

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • 本场 Chat 主要是对微信小程序中如何自定义组件来进行说明,在其中简单的 Vue ...本场 Chat 通过将两者对比来和小伙伴分享下如何简单的实现一个微信自定义组件。 适宜人群: 刚接触小程序的小伙伴; Vue 小伙伴。 ...
  • 背景:在微信小程序的实际开发过程中,有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色,以满足项目需求解决方案:方式一:通过tabBar组件自带的 borderStyle 属性来控制边框的颜色,将边框的颜色...
  • 主要介绍了微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递 ,需要的朋友可以参考下
  • 一定的需求情况下,无法使用小程序原生的tabbar的时候,需要自行实现一个和tabbar功能一模一样的自制组件。查阅了海量的博客和文档之后,亲自踩坑。总结了三种在不使用微信小程序原生tabbar的情况下自制tabbar的方法...
  • 获取微信调取接口统一凭证,并进行缓存, 有效时长2小时 微信官方文档: 获取全局调用凭证文档 全局凭证, 有效时长为2小时, 所以定时每两小时请求一次 def get_access_token(): """ """ payload = { 'grant_type...
  • 本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下微信小程序自定义组件官方教程环形进度条的组件已经放在github上环形进度条效果图创建步骤1、在根目录创建名为components的...
  • 微信自定义弹窗登录

    2019-03-12 15:21:05
    1.自定义组件 component/dialog html &lt;view class='dialog-container' hidden="{{!isShow}}"&gt; &lt;view class='dialog-mask'&gt;&lt;/view&gt; &lt;view class='...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,184
精华内容 1,673
关键字:

微信自定义组件