微信小程序自定義組件的使用，來(lái)自項(xiàng)目的總結(jié)
一直以來(lái)忙項(xiàng)目都沒(méi)有什么時(shí)間來(lái)寫(xiě)博客，今天晚上刷了會(huì)兒csdn,知乎等平臺(tái)，發(fā)現(xiàn)有很多人再問(wèn)小程序自定義組件怎么寫(xiě)，如何編寫(xiě)一個(gè)自己的自定義組件？當(dāng)然也有一些同行們對(duì)于這些問(wèn)題都有解答。
今天就自己的項(xiàng)目經(jīng)驗(yàn)給大家從構(gòu)建自定義組件，調(diào)用自定義組件，傳值給組件，組件傳值出來(lái)，給大家講解一下如何構(gòu)造一個(gè)自定義視頻組件
大家可能都刷過(guò)火山小視頻，本次講解的就是做的一款類(lèi)似于火山小視頻的視頻播放效果的一款小程序軟件，效果如下圖所示
這個(gè)項(xiàng)目因?yàn)橐玫揭曨l播放這個(gè)功能，于是就用了小程序的video媒體播放。廢話(huà)不多說(shuō)，直接進(jìn)入正題吧，首先微信小程序自定義組件出來(lái)這么長(zhǎng)時(shí)間了，于是我在寫(xiě)這個(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)聽(tīng)函數(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ì)解釋?zhuān)俜轿臋n里面都有?
組件有一個(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)聽(tīng)函數(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)聽(tīng)頁(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)聽(tīng)頁(yè)面初次渲染完成
? */
? onReady: function () {
? },
? /**
? * 生命周期函數(shù)--監(jiān)聽(tīng)頁(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)聽(tīng)頁(yè)面隱藏
? */
? onHide: function () {
? },
? /**
? * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
? */
? onUnload: function () {
? },
? /**
? * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(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) => {
? ? })
? },
? /**
? * 用戶(hù)點(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è)屬性的類(lèi)型和屬性的默認(rèn)值?
當(dāng)想要向自定義組件傳值的時(shí)候直接在組件上把想要傳的數(shù)據(jù)直接通過(guò)自定義屬性向里面?zhèn)骶涂梢粤耍热鐅ideoList是我獲取的是視頻列表，我將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)聽(tīng)函數(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?
