微信小程序自定义组件的使用，来自项目的总结
一直以来忙项目都没有什么时间来写博客，今天晚上刷了会儿csdn,知乎等平台，发现有很多人再问小程序自定义组件怎么写，如何编写一个自己的自定义组件？当然也有一些同行们对于这些问题都有解答。
今天就自己的项目经验给大家从构建自定义组件，调用自定义组件，传值给组件，组件传值出来，给大家讲解一下如何构造一个自定义视频组件
大家可能都刷过火山小视频，本次讲解的就是做的一款类似于火山小视频的视频播放效果的一款小程序软件，效果如下图所示
示例
这个项目因为要用到视频播放这个功能，于是就用了小程序的video媒体播放。废话不多说，直接进入正题吧，首先微信小程序自定义组件出来这么长时间了，于是我在写这个项目的时候就行运用一下自定义组件，看了一下官方文档，官方文档有一些介绍但是都不怎么全，于是我就实验了一把，在这个项目中自定义了一个视频播放组件
要自定义一个组件，首先要新建一个文件夹，如图所示，我建了一个名为Component的文件夹
在文件夹里点击右键新建了一个Component名为‘AuglyVideo’的自定义组件，组件的组成跟正常的页面文件接口一样。
这是AuglyVideo.wxml文件
AuglyVideo.wxml
这是js文件
// Component/AuglyVideo.js
const config = require('../utils/config.js')
let app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
videoList: {
type: Array,
value: []
},
aps: {
type: Object,
value: {
isShow: null
}
},
playIndex: {
type: null,
value: null
},
page: {
type: String,
value: 'index'
}
},
/**
* 组件的初始数据
*/
data: {
playIndex: null,
showPlay: false,
showShare: true
},
created: function () {
},
/**
* 组件的方法列表
*/
methods: {
//播放视频相关方法
videoPlay: function (e) {
if (this.data.page == 'shareone') {
var videoList = this.data.videoList
var index = e.currentTarget.dataset.index
var id = e.currentTarget.id
config.ajax('POST', {
id: id
}, config.videoPlay, (res) => {
if (res.data.statusMsg == "success") {
videoList[index].videoUrl = res.data.data
if (!this.data.playIndex) { // 没有播放时播放视频
this.setData({
videoList: videoList,
playIndex: index,
playmid: id
})
var videoContext = wx.createVideoContext('myVideo' + id, this)
videoContext.play()
} else { // 有播放时先将prev暂停到0s，再播放当前点击的current
var videoContextPrev = wx.createVideoContext('myVideo' + this.data.playmid, this)
videoContextPrev.seek(0)
videoContextPrev.pause()
this.setData({
videoList: videoList,
playIndex: index,
playmid: id
})
var videoContextCurrent = wx.createVideoContext('myVideo' + this.data.playmid, this)
videoContextCurrent.play()
}
var myEventDetail = {
playIndex: this.data.playIndex,
playmid: this.data.playmid,
videoContextCurrent: videoContextCurrent,
videoContext: videoContext
} // detail对象，提供给事件监听函数
var myEventOption = {
} // 触发事件的选项
this.triggerEvent('videoPlay', myEventDetail, myEventOption)
}
}, (res) => {
})
} else {
var alldata = {
id: e.currentTarget.dataset.id,
title: e.currentTarget.dataset.title,
cover: e.currentTarget.dataset.cover,
duration: e.currentTarget.dataset.duration,
allnum: e.currentTarget.dataset.allnum
}
if (this.data.page == 'share') {
var myEventDetail = {
alldata: JSON.stringify(alldata),
index: e.currentTarget.dataset.index
} //
var myEventOption = {
} // 触发事件的选项
} else {
wx.navigateTo({
url: '/pages/share/share?alldata=' + JSON.stringify(alldata),
success: function (res) {
},
fail: function (res) { },
complete: function (res) { },
})
}
this.triggerEvent('videoPlay', myEventDetail, myEventOption)
// return {
// title: alldata.title,
// path: '/pages/share/share?alldata=' + JSON.stringify(alldata),
// imageUrl: alldata.cover
// }
}
},
submitInfo(e) {
if (!app.globalData.isSubscibe) {
var params = {
openId: app.globalData.openid,
formId: e.detail.formId,
status: 't'
}
} else {
var params = {
openId: app.globalData.openid,
formId: e.detail.formId
}
}
config.ajax('POST', params, config.wxformId, (res) => {
console.log(res)
app.globalData.isSubscibe = true
}, (res) => {
})
}
}
})
json文件
{
"component": true,
"usingComponents": {}
}
wxml和wxss在这里就不做讲解了，都是小程序最基本的东西，着重给大家讲一下自定义组件的js文件
当我们新建一个组件Component的时候，会自动生成4个文件，在新建的js文件里
properties: {videoList: {
type: Array,
value: []
},
aps: {type: Object,
value: {
isShow: null
}
},
playIndex: {type: null,
value: null
},
page: {type:String, value:'index'}
},
定义的是自定义组件的一些属性，效果同data是一样的，但是这个在对组件传值时有很大帮助
/**
* 组件的初始数据
*/ data: {
playIndex: null,
showPlay: false,
showShare: true },
这里是data数据
组件也和page一样有生命周期函数
这里就不做详细解释，官方文档里面都有
组件有一个组件方法对象，如下所示
/**
* 组件的方法列表
*/ methods: {
//播放视频相关方法 videoPlay: function (e) {
// if (this.data.page=='share'){ var videoList = this.data.videoList
var index = e.currentTarget.dataset.index
var id = e.currentTarget.id
config.ajax('POST', {
id: id
}, config.videoPlay, (res) => {
if (res.data.statusMsg == "success") {
videoList[index].videoUrl = res.data.data
if (!this.data.playIndex) { // 没有播放时播放视频 this.setData({
videoList: videoList,
playIndex: index,
playmid: id
})
var videoContext = wx.createVideoContext('myVideo' + id, this)
videoContext.play()
} else { // 有播放时先将prev暂停到0s，再播放当前点击的current var videoContextPrev = wx.createVideoContext('myVideo' + this.data.playmid, this)
videoContextPrev.seek(0)
videoContextPrev.pause()
this.setData({
videoList: videoList,
playIndex: index,
playmid: id
})
var videoContextCurrent = wx.createVideoContext('myVideo' + this.data.playmid, this)
videoContextCurrent.play()
}
var myEventDetail = {
playIndex: this.data.playIndex,
playmid: this.data.playmid,
videoContextCurrent: videoContextCurrent,
videoContext: videoContext
} // detail对象，提供给事件监听函数 var myEventOption = {
} // 触发事件的选项 this.triggerEvent('videoPlay', myEventDetail, myEventOption)
}
}, (res) => {
})
// }else{ // var alldata = { // id: e.currentTarget.dataset.id, // title: e.currentTarget.dataset.title, // cover: e.currentTarget.dataset.cover, // duration: e.currentTarget.dataset.duration, // allnum: e.currentTarget.dataset.allnum // } // wx.redirectTo({ // url: '/pages/share/share?alldata=' + JSON.stringify(alldata), // success: function(res) { // }, // fail: function(res) {}, // complete: function(res) {}, // }) // } },
submitInfo(e) {
if (app.globalData.isSubscibe) {
var params = {
openId: app.globalData.openid,
formId: e.detail.formId,
status: 't' }
} else {
var params = {
openId: app.globalData.openid,
formId: e.detail.formId
}
}
config.ajax('POST', params, config.wxformId, (res) => {
console.log(res)
app.globalData.isSubscibe = true }, (res) => {
})
}
}
那么现在的重点来了，组件的wxml，wxss样式文件也有了，组件的方法也有了，那么怎么用组件呢
我在首页运用了这个组件，即index，具体如下
index.wxml文件
index.wxml文件
index.js文件
// pages/index/index.js
var app = getApp();
var page = 1;
const config = require('../../utils/config.js')
Page({
/**
* 页面的初始数据
*/
data: {
nodata: false,
hotWord: [],
videoList: [],
playIndex: null,
mask: false,
isSubscibe: true,
page: 'index',
moretype: '上拉查看更多哦~'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this
wx.login({
success: (res) => {
config.ajax('POST', {
wxcode: res.code
}, config.wxLogin, (res) => {
app.globalData.openid = res.data.data.openId
config.ajax('POST', {
openId: res.data.data.openId
}, config.isSubscibe, (res) => {
that.setData({
isSubscibe: res.data.data
})
app.globalData.isSubscibe = res.data.data
}, (res) => {
})
}, (res) => {
})
},
fail: function (res) { },
complete: function (res) { },
})
page = 1;
wx.showLoading({
title: '数据加载中...',
mask: true,
})
this.videoGroup = this.selectComponent("#videoGroup");
// this.getlistHot()
this.getvideoList()
this.getHotword()
this.getAps()
},
/**
* 获取热词
*/
getHotword() {
var params = {}
config.ajax('POST', params, config.hotWord, (res) => {
for (var i = 0; i < res.data.data.length; i++) {
if ((i + 4) % 4 == 0) {
if (res.data.data[i] != undefined) {
res.data.data[i].bgsrc = 'http://www.kiss-me.top/video/a.png';
res.data.data[i].Bgsrc = 'http://www.kiss-me.top/video/aa.png';
res.data.data[i].ph = 'http://www.kiss-me.top/video/1.png';
}
if (res.data.data[i + 1] != undefined) {
res.data.data[i + 1].bgsrc = 'http://www.kiss-me.top/video/b.png';
res.data.data[i + 1].Bgsrc = 'http://www.kiss-me.top/video/bb.png';
res.data.data[i + 1].ph = 'http://www.kiss-me.top/video/2.png';
}
if (res.data.data[i + 2] != undefined) {
res.data.data[i + 2].bgsrc = 'http://www.kiss-me.top/video/c.png';
res.data.data[i + 2].Bgsrc = 'http://www.kiss-me.top/video/cc.png';
res.data.data[i + 2].ph = 'http://www.kiss-me.top/video/3.png';
}
if (res.data.data[i + 3] != undefined) {
res.data.data[i + 3].bgsrc = 'http://www.kiss-me.top/video/d.png';
res.data.data[i + 3].Bgsrc = 'http://www.kiss-me.top/video/dd.png';
res.data.data[i + 3].ph = 'http://www.kiss-me.top/video/4.png';
}
}
if (i > 3) {
res.data.data[i].ph = 'http://www.kiss-me.top/video/4.png';
}
res.data.data[i].name = '#' + res.data.data[i].name + '#';
}
this.setData({
hotWord: res.data.data
})
}, (res) => {
})
},
/**
* 获取视频列表
*/
getvideoList(art) {
if (art == undefined || art == null || art == '') {
var hotWordsId = ''
} else {
var hotWordsId = art
}
var params = {
hotWordsId: hotWordsId,
page: page,
limit: config.limit
}
config.ajax('POST', params, config.videoList, (res) => {
if (this.data.videoList.length != 0) {
if (page == 1) {
this.setData({
videoList: res.data.data.list
})
} else {
this.setData({
videoList: this.data.videoList.concat(res.data.data.list)
})
}
} else {
this.setData({
videoList: res.data.data.list,
mask: true
})
}
if (res.data.data.list.length < config.limit) {
this.setData({
nodata: true,
allnum: res.data.data.totalCount
})
}
wx.hideLoading()
}, (res) => {
})
},
/**
* 获取是否显示广告
*/
getAps() {
var params = {
location: 'index'
}
config.ajax('POST', params, config.aps, (res) => {
this.setData({
aps: res.data.data
})
}, (res) => {
})
},
/**
* 播放事件
*/
myvideoPlay: function (e) {
console.log(e)
},
/**
* 跳到detail列表
*/
tolist(e) {
var alldata = {
id: e.currentTarget.dataset.id,
bg: e.currentTarget.dataset.bg,
name: e.currentTarget.dataset.name,
ph: e.currentTarget.dataset.ph,
num: e.currentTarget.dataset.num,
}
wx.navigateTo({
url: '/pages/detail/detail?alldata=' + JSON.stringify(alldata),
success: function (res) { },
fail: function (res) { },
complete: function (res) { },
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var that = this;
wx.login({
success: (res) => {
config.ajax('POST', {
wxcode: res.code
}, config.wxLogin, (res) => {
app.globalData.openid = res.data.data.openId
config.ajax('POST', {
openId: res.data.data.openId
}, config.isSubscibe, (res) => {
console.log(res.data.data)
that.setData({
isSubscibe: res.data.data
})
app.globalData.isSubscibe = res.data.data
}, (res) => {
})
}, (res) => {
})
},
fail: function (res) { },
complete: function (res) { },
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
// wx.showNavigationBarLoading()
page = 1;
wx.showLoading({
title: '数据加载中...',
mask: true,
})
this.videoGroup = this.selectComponent("#videoGroup");
this.getvideoList()
// this.getlistHot()
this.getHotword()
this.getAps()
// wx.hideNavigationBarLoading()
wx.stopPullDownRefresh()
this.setData({
playIndex: null
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
var that = this
page++
that.setData({
moretype: '正在加载中~'
})
setTimeout(function () {
that.getvideoList()
that.setData({
playIndex: null,
})
}, 2000)
},
submittwo(e) {
console.log(1)
console.log(app.globalData.isSubscibe)
if (!app.globalData.isSubscibe) {
var params = {
openId: app.globalData.openid,
formId: e.detail.formId,
status: 't'
}
} else {
var params = {
openId: app.globalData.openid,
formId: e.detail.formId
}
}
config.ajax('POST', params, config.wxformId, (res) => {
this.setData({
isSubscibe: true
})
app.globalData.isSubscibe = true
}, (res) => {
})
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (res) {
if (res.from === 'button') {
if (res.target.dataset.id == '分享好友') {
return {
title: '追踪每周热点劲爆视频',
path: '/pages/index/index'
}
} else {
config.ajax('POST', {
id: res.target.dataset.id,
openid: app.globalData.openid
}, config.videoShare, (res) => {
}, (res) => {
})
var alldata = {
id: res.target.dataset.id,
title: res.target.dataset.title,
cover: res.target.dataset.cover,
duration: res.target.dataset.duration,
allnum: res.target.dataset.allnum
}
return {
title: alldata.title,
path: '/pages/share/share?alldata=' + JSON.stringify(alldata),
imageUrl: alldata.cover
}
}
} else {
return {
title: '追踪每周热点劲爆视频',
path: '/pages/index/index'
}
}
}
})
index.json文件
{
"navigationBarTitleText": "葫芦热点",
"usingComponents": { "videoGroup":"/Component/AuglyVideo"},
"enablePullDownRefresh":true
}
第一步我们需要在index.json里引入这个自定义组件
"usingComponents": {
"videoGroup": "/Component/AuglyVideo"
},
第二步，我们需要在index.wxml运用它
即
第二步，我们需要在index.wxml运用它
即
那么传值的方法怎么传呢？怎么向组件里传自己的数据
之前我们在组件里的js自定义了属性，每一个属性都是一个对象，对象里包括这个属性的类型和属性的默认值
当想要向自定义组件传值的时候直接在组件上把想要传的数据直接通过自定义属性向里面传就可以了，比如videoList是我获取的是视频列表，我将videoList传入了自定义组件的videoList属性，于是自定义视频组件就直接能videoList数据了。这些在官方文档和百度上几乎都能知道，但凡有小程序基础都能看明白。
但是怎么从组件里面把值传出来呢，我们知道，当我操作播放视频的时候我可能需要进行一些处理，怎么办呢？
通过阅读小程序的官方文档，我发现小程序自定义组件的这个
var myEventDetail = {
playIndex: this.data.playIndex,
playmid: this.data.playmid,
videoContextCurrent: videoContextCurrent,
videoContext: videoContext
} // detail对象，提供给事件监听函数 var myEventOption = {
} // 触发事件的选项 this.triggerEvent('videoPlay', myEventDetail, myEventOption)
在运用组件的时候
//这里有一个bind:videoPlay="myvideoPlay"
前一个videoPlay是自定义组件里的那个自定义事件名字
后面的’myvideoPlay’是在我组件外的方法，这个方法在index.js里调用而这个方法，调用这个方法就能拿到自定义组件传出来的值
如下拿值
myvideoPlay: function(e){ console.log(e)
},
基本内容就这些了，我会将源码放在git和码云上，欢迎大家留言与提问
码云地址:https://gitee.com/Q_Augly/custom_component_demo.git
github地址:https://github.com/Augly/demo.git
网友评论