微信小程序自定義組件的使用蜂筹，來自項目的總結(jié)
一直以來忙項目都沒有什么時間來寫博客，今天晚上刷了會兒csdn,知乎等平臺芦倒，發(fā)現(xiàn)有很多人再問小程序自定義組件怎么寫艺挪，如何編寫一個自己的自定義組件？當(dāng)然也有一些同行們對于這些問題都有解答兵扬。
今天就自己的項目經(jīng)驗給大家從構(gòu)建自定義組件麻裳，調(diào)用自定義組件，傳值給組件器钟，組件傳值出來津坑，給大家講解一下如何構(gòu)造一個自定義視頻組件
大家可能都刷過火山小視頻，本次講解的就是做的一款類似于火山小視頻的視頻播放效果的一款小程序軟件傲霸，效果如下圖所示
這個項目因為要用到視頻播放這個功能疆瑰，于是就用了小程序的video媒體播放。廢話不多說昙啄，直接進入正題吧穆役，首先微信小程序自定義組件出來這么長時間了，于是我在寫這個項目的時候就行運用一下自定義組件梳凛，看了一下官方文檔耿币，官方文檔有一些介紹但是都不怎么全，于是我就實驗了一把伶跷，在這個項目中自定義了一個視頻播放組件
要自定義一個組件掰读，首先要新建一個文件夾，如圖所示叭莫，我建了一個名為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) { // 沒有播放時播放視頻
? ? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? videoList: videoList,
? ? ? ? ? ? ? ? playIndex: index,
? ? ? ? ? ? ? ? playmid: id
? ? ? ? ? ? ? })
? ? ? ? ? ? ? var videoContext = wx.createVideoContext('myVideo' + id, this)
? ? ? ? ? ? ? videoContext.play()
? ? ? ? ? ? } else {? ? ? ? ? ? ? ? ? ? // 有播放時先將prev暫停到0s雇初，再播放當(dāng)前點擊的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對象拢肆，提供給事件監(jiān)聽函數(shù)
? ? ? ? ? ? var myEventOption = {
? ? ? ? ? ? } // 觸發(fā)事件的選項
? ? ? ? ? ? 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ā)事件的選項
? ? ? ? } 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)我們新建一個組件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是一樣的票渠，但是這個在對組件傳值時有很大幫助
/**
? * 組件的初始數(shù)據(jù)
? */? data: {
? ? playIndex: null,
? ? showPlay: false,
? ? showShare: true? },
這里是data數(shù)據(jù)?
組件也和page一樣有生命周期函數(shù)?
這里就不做詳細(xì)解釋，官方文檔里面都有?
組件有一個組件方法對象李根，如下所示
/**
? * 組件的方法列表
? */? 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) { // 沒有播放時播放視頻? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? videoList: videoList,
? ? ? ? ? ? ? playIndex: index,
? ? ? ? ? ? ? playmid: id
? ? ? ? ? ? })
? ? ? ? ? ? var videoContext = wx.createVideoContext('myVideo' + id, this)
? ? ? ? ? ? videoContext.play()
? ? ? ? ? } else {? ? ? ? ? ? ? ? ? ? // 有播放時先將prev暫停到0s攒庵，再播放當(dāng)前點擊的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對象嘴纺，提供給事件監(jiān)聽函數(shù)? ? ? ? ? var myEventOption = {
? ? ? ? ? } // 觸發(fā)事件的選項? ? ? ? ? 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)在的重點來了，組件的wxml浓冒，wxss樣式文件也有了栽渴，組件的方法也有了，那么怎么用組件呢?
我在首頁運用了這個組件稳懒，即index闲擦，具體如下?
index.wxml文件
index.js文件
// pages/index/index.js
var app = getApp();
var page = 1;
const config = require('../../utils/config.js')
Page({
? /**
? * 頁面的初始數(shù)據(jù)
? */
? data: {
? ? nodata: false,
? ? hotWord: [],
? ? videoList: [],
? ? playIndex: null,
? ? mask: false,
? ? isSubscibe: true,
? ? page: 'index',
? ? moretype: '上拉查看更多哦~'
? },
? /**
? * 生命周期函數(shù)--監(jiān)聽頁面加載
? */
? 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)聽頁面初次渲染完成
? */
? onReady: function () {
? },
? /**
? * 生命周期函數(shù)--監(jiān)聽頁面顯示
? */
? 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)聽頁面隱藏
? */
? onHide: function () {
? },
? /**
? * 生命周期函數(shù)--監(jiān)聽頁面卸載
? */
? onUnload: function () {
? },
? /**
? * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
? */
? 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
? ? })
? },
? /**
? * 頁面上拉觸底事件的處理函數(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) => {
? ? })
? },
? /**
? * 用戶點擊右上角分享
? */
? 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運用它?
即
那么傳值的方法怎么傳呢墅冷？怎么向組件里傳自己的數(shù)據(jù)?
之前我們在組件里的js自定義了屬性，每一個屬性都是一個對象辙谜，對象里包括這個屬性的類型和屬性的默認(rèn)值?
當(dāng)想要向自定義組件傳值的時候直接在組件上把想要傳的數(shù)據(jù)直接通過自定義屬性向里面?zhèn)骶涂梢粤税秤埽热鐅ideoList是我獲取的是視頻列表，我將videoList傳入了自定義組件的videoList屬性装哆，于是自定義視頻組件就直接能videoList數(shù)據(jù)了。這些在官方文檔和百度上幾乎都能知道定嗓，但凡有小程序基礎(chǔ)都能看明白蜕琴。?
但是怎么從組件里面把值傳出來呢，我們知道宵溅，當(dāng)我操作播放視頻的時候我可能需要進行一些處理凌简，怎么辦呢？?
通過閱讀小程序的官方文檔恃逻，我發(fā)現(xiàn)小程序自定義組件的這個
var myEventDetail = {
? ? ? ? ? ? playIndex: this.data.playIndex,
? ? ? ? ? ? playmid: this.data.playmid,
? ? ? ? ? ? videoContextCurrent: videoContextCurrent,
? ? ? ? ? ? videoContext: videoContext
? ? ? ? ? } // detail對象雏搂，提供給事件監(jiān)聽函數(shù)? ? ? ? ? var myEventOption = {
? ? ? ? ? } // 觸發(fā)事件的選項 this.triggerEvent('videoPlay', myEventDetail, myEventOption)
在運用組件的時候
//這里有一個bind:videoPlay="myvideoPlay"
前一個videoPlay是自定義組件里的那個自定義事件名字?
后面的’myvideoPlay’是在我組件外的方法，這個方法在index.js里調(diào)用而這個方法寇损，調(diào)用這個方法就能拿到自定義組件傳出來的值?
如下拿值
myvideoPlay: function(e){ console.log(e)
? },
基本內(nèi)容就這些了凸郑，我會將源碼放在git和碼云上，歡迎大家留言與提問?
碼云地址:https://gitee.com/Q_Augly/custom_component_demo.git?
github地址:https://github.com/Augly/demo.git?
