微信小程序自定義組件的使用，來(lái)自項(xiàng)目的總結(jié)
一直以來(lái)忙項(xiàng)目都沒(méi)有什么時(shí)間來(lái)寫博客，今天晚上刷了會(huì)兒csdn,知乎等平臺(tái)，發(fā)現(xiàn)有很多人再問(wèn)小程序自定義組件怎么寫，如何編寫一個(gè)自己的自定義組件？當(dāng)然也有一些同行們對(duì)于這些問(wèn)題都有解答。
今天就自己的項(xiàng)目經(jīng)驗(yàn)給大家從構(gòu)建自定義組件，調(diào)用自定義組件，傳值給組件，組件傳值出來(lái)，給大家講解一下如何構(gòu)造一個(gè)自定義視頻組件
大家可能都刷過(guò)火山小視頻，本次講解的就是做的一款類似于火山小視頻的視頻播放效果的一款小程序軟件，效果如下圖所示
這個(gè)項(xiàng)目因?yàn)橐玫揭曨l播放這個(gè)功能，于是就用了小程序的video媒體播放。廢話不多說(shuō)，直接進(jìn)入正題吧，首先微信小程序自定義組件出來(lái)這么長(zhǎng)時(shí)間了，于是我在寫這個(gè)項(xiàng)目的時(shí)候就行運(yùn)用一下自定義組件，看了一下官方文檔，官方文檔有一些介紹但是都不怎么全，于是我就實(shí)驗(yàn)了一把，在這個(gè)項(xiàng)目中自定義了一個(gè)視頻播放組件
要自定義一個(gè)組件，首先要新建一個(gè)文件夾，如圖所示，我建了一個(gè)名為Component的文件夾
這是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'
? ? }
? },
? /**
? * 組件的初始數(shù)據(jù)
? */
? data: {
? ? playIndex: null,
? ? showPlay: false,
? ? showShare: true
? },
? created: function () {
? },
? /**
? * 組件的方法列表
? */
? methods: {
? ? //播放視頻相關(guān)方法
? ? 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) { // 沒(méi)有播放時(shí)播放視頻
? ? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? videoList: videoList,
? ? ? ? ? ? ? ? playIndex: index,
? ? ? ? ? ? ? ? playmid: id
? ? ? ? ? ? ? })
? ? ? ? ? ? ? var videoContext = wx.createVideoContext('myVideo' + id, this)
? ? ? ? ? ? ? videoContext.play()
? ? ? ? ? ? } else {? ? ? ? ? ? ? ? ? ? // 有播放時(shí)先將prev暫停到0s，再播放當(dāng)前點(diǎn)擊的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對(duì)象，提供給事件監(jiān)聽函數(shù)
? ? ? ? ? ? var myEventOption = {
? ? ? ? ? ? } // 觸發(fā)事件的選項(xiàng)
? ? ? ? ? ? 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 = {
? ? ? ? ? } // 觸發(fā)事件的選項(xiàng)
? ? ? ? } 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文件?
當(dāng)我們新建一個(gè)組件Component的時(shí)候，會(huì)自動(dòng)生成4個(gè)文件，在新建的js文件里
properties: {videoList: {
? ? ? type: Array,
? ? ? value: []
? ? },
? ? aps: {type: Object,
? ? ? value: {
? ? ? ? isShow: null
? ? ? }
? ? },
? ? playIndex: {type: null,
? ? ? value: null
? ? },
? ? page: {type:String,? ? ? value:'index'}
? },
定義的是自定義組件的一些屬性，效果同data是一樣的，但是這個(gè)在對(duì)組件傳值時(shí)有很大幫助
/**
? * 組件的初始數(shù)據(jù)
? */? data: {
? ? playIndex: null,
? ? showPlay: false,
? ? showShare: true? },
這里是data數(shù)據(jù)?
組件也和page一樣有生命周期函數(shù)?
這里就不做詳細(xì)解釋，官方文檔里面都有?
組件有一個(gè)組件方法對(duì)象，如下所示
/**
? * 組件的方法列表
? */? methods: {
? ? //播放視頻相關(guān)方法? ? 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) { // 沒(méi)有播放時(shí)播放視頻? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? videoList: videoList,
? ? ? ? ? ? ? playIndex: index,
? ? ? ? ? ? ? playmid: id
? ? ? ? ? ? })
? ? ? ? ? ? var videoContext = wx.createVideoContext('myVideo' + id, this)
? ? ? ? ? ? videoContext.play()
? ? ? ? ? } else {? ? ? ? ? ? ? ? ? ? // 有播放時(shí)先將prev暫停到0s，再播放當(dāng)前點(diǎn)擊的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對(duì)象，提供給事件監(jiān)聽函數(shù)? ? ? ? ? var myEventOption = {
? ? ? ? ? } // 觸發(fā)事件的選項(xiàng)? ? ? ? ? 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) => {
? ? ? })
? ? }
? }
那么現(xiàn)在的重點(diǎn)來(lái)了，組件的wxml，wxss樣式文件也有了，組件的方法也有了，那么怎么用組件呢?
我在首頁(yè)運(yùn)用了這個(gè)組件，即index，具體如下?
index.wxml文件
index.js文件
// pages/index/index.js
var app = getApp();
var page = 1;
const config = require('../../utils/config.js')
Page({
? /**
? * 頁(yè)面的初始數(shù)據(jù)
? */
? data: {
? ? nodata: false,
? ? hotWord: [],
? ? videoList: [],
? ? playIndex: null,
? ? mask: false,
? ? isSubscibe: true,
? ? page: 'index',
? ? moretype: '上拉查看更多哦~'
? },
? /**
? * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
? */
? 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: '數(shù)據(jù)加載中...',
? ? ? 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) { },
? ? })
? },
? /**
? * 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
? */
? onReady: function () {
? },
? /**
? * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
? */
? 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) { },
? ? })
? },
? /**
? * 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
? */
? onHide: function () {
? },
? /**
? * 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
? */
? onUnload: function () {
? },
? /**
? * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
? */
? onPullDownRefresh: function () {
? ? // wx.showNavigationBarLoading()
? ? page = 1;
? ? wx.showLoading({
? ? ? title: '數(shù)據(jù)加載中...',
? ? ? mask: true,
? ? })
? ? this.videoGroup = this.selectComponent("#videoGroup");
? ? this.getvideoList()
? ? // this.getlistHot()
? ? this.getHotword()
? ? this.getAps()
? ? // wx.hideNavigationBarLoading()
? ? wx.stopPullDownRefresh()
? ? this.setData({
? ? ? playIndex: null
? ? })
? },
? /**
? * 頁(yè)面上拉觸底事件的處理函數(shù)
? */
? 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) => {
? ? })
? },
? /**
? * 用戶點(diǎn)擊右上角分享
? */
? onShareAppMessage: function (res) {
? ? if (res.from === 'button') {
? ? ? if (res.target.dataset.id == '分享好友') {
? ? ? ? return {
? ? ? ? ? title: '追蹤每周熱點(diǎn)勁爆視頻',
? ? ? ? ? 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: '追蹤每周熱點(diǎn)勁爆視頻',
? ? ? ? path: '/pages/index/index'
? ? ? }
? ? }
? }
})
index.json文件
{
? "navigationBarTitleText": "葫蘆熱點(diǎn)",
? "usingComponents": {? ? "videoGroup":"/Component/AuglyVideo"},
? "enablePullDownRefresh":true
}
第一步我們需要在index.json里引入這個(gè)自定義組件
"usingComponents": {
? ? "videoGroup": "/Component/AuglyVideo"??
},
第二步，我們需要在index.wxml運(yùn)用它?
即
那么傳值的方法怎么傳呢？怎么向組件里傳自己的數(shù)據(jù)?
之前我們?cè)诮M件里的js自定義了屬性，每一個(gè)屬性都是一個(gè)對(duì)象，對(duì)象里包括這個(gè)屬性的類型和屬性的默認(rèn)值?
當(dāng)想要向自定義組件傳值的時(shí)候直接在組件上把想要傳的數(shù)據(jù)直接通過(guò)自定義屬性向里面?zhèn)骶涂梢粤?，比如videoList是我獲取的是視頻列表，我將videoList傳入了自定義組件的videoList屬性，于是自定義視頻組件就直接能videoList數(shù)據(jù)了。這些在官方文檔和百度上幾乎都能知道，但凡有小程序基礎(chǔ)都能看明白。?
但是怎么從組件里面把值傳出來(lái)呢，我們知道，當(dāng)我操作播放視頻的時(shí)候我可能需要進(jìn)行一些處理，怎么辦呢？?
通過(guò)閱讀小程序的官方文檔，我發(fā)現(xiàn)小程序自定義組件的這個(gè)
var myEventDetail = {
? ? ? ? ? ? playIndex: this.data.playIndex,
? ? ? ? ? ? playmid: this.data.playmid,
? ? ? ? ? ? videoContextCurrent: videoContextCurrent,
? ? ? ? ? ? videoContext: videoContext
? ? ? ? ? } // detail對(duì)象，提供給事件監(jiān)聽函數(shù)? ? ? ? ? var myEventOption = {
? ? ? ? ? } // 觸發(fā)事件的選項(xiàng) this.triggerEvent('videoPlay', myEventDetail, myEventOption)
在運(yùn)用組件的時(shí)候
//這里有一個(gè)bind:videoPlay="myvideoPlay"
前一個(gè)videoPlay是自定義組件里的那個(gè)自定義事件名字?
后面的’myvideoPlay’是在我組件外的方法，這個(gè)方法在index.js里調(diào)用而這個(gè)方法，調(diào)用這個(gè)方法就能拿到自定義組件傳出來(lái)的值?
如下拿值
myvideoPlay: function(e){ console.log(e)
? },
基本內(nèi)容就這些了，我會(huì)將源碼放在git和碼云上，歡迎大家留言與提問(wèn)?
碼云地址:https://gitee.com/Q_Augly/custom_component_demo.git?
github地址:https://github.com/Augly/demo.git?
