效果圖
在小程序內(nèi)容管理后臺只要在編輯器中直接輸入騰訊視頻的<iframe>分享代碼即可，如圖：
內(nèi)容管理后臺界面
小程序的文章內(nèi)容頁是用wxParse解析html網(wǎng)頁內(nèi)容的涯保。主要做以下2件事：
第一诉濒，在小程序管理平臺https://mp.weixin.qq.com，在第三方設(shè)置中夕春，添加插件“騰訊視頻”未荒，如下圖：
小程序管理平臺
按插件“詳情”的使用說明，處理相關(guān)頁面及志。
使用說明
app.json代碼段
文章內(nèi)容頁.json代碼段
第二片排，修改wxparse的源碼過程：
1.支持iframe的轉(zhuǎn)化
首先在html2json.js文件中支持iframe的轉(zhuǎn)化，因為小程序默認(rèn)就不支持iframe所以在源碼中并沒有iframe的轉(zhuǎn)化速侈，需要我們自己添加
可以看到之前源碼對于img標(biāo)簽的處理率寡，我們就照貓畫虎對于iframe進(jìn)行處理
并取出有效的vid以便之后的程序視頻插件使用。
html2json.js文件修改：
function html2json(html, bindName) {
HTMLParser(html, {
start: function (tag, attrs, unary) {
...
//對img添加額外數(shù)據(jù)
if (node.tag === 'img') {
node.imgIndex = results.images.length;
var imgUrl = node.attr.src;
if(!imgUrl) {
return
}
if (imgUrl[0] == '') {
imgUrl.splice(0, 1);
}
imgUrl = wxDiscode.urlToHttpUrl(imgUrl, __placeImgeUrlHttps);
node.attr.src = imgUrl;
node.from = bindName;
results.images.push(node);
results.imageUrls.push(imgUrl);
}
// 下面是需要我們添加的代碼
// 處理iframe的地址倚搬，取出vid并放入數(shù)據(jù)中冶共，
if(node.tag === 'iframe') {
// safeGetValue 只是一個取值的函數(shù)，可自行編寫自己的取值函數(shù)每界。
node.vid = safeGetValue([1], node.attr.src.match(/https:\/\/v\.qq\.com.*vid=(\w*)/))
}
.....
};
// 此函數(shù)作用類似于ramda的path和pathOr捅僵，用于安全取值。
function safeGetValue() {
const argsLength = arguments.length
if (argsLength !== 2 && argsLength !== 3) {
throw '必須為兩個或者三個參數(shù)'
}
var defaultValue
if (argsLength === 3) {
var [_defaultValue, keys, item] = arguments
defaultValue = _defaultValue
} else {
var [keys, item] = arguments
}
if (!Array.isArray(keys)) {
throw '參數(shù)有誤眨层，取值的keys必須為數(shù)組'
}
try {
keys.forEach(key => {
item = item[key]
})
} catch (e) {
return defaultValue
}
return item
}
2.在wxParse.wxml添加騰訊視頻插件的模板
在html2json中保存的vid屬性庙楚，在這時有了用處
<template name="wxPraseIframe2TencentVideoPlugin">
<view style="margin: 20rpx 0">
<txv-video
width="100%"
height="600rpx"
playerid="txv1"
vid="{{item.vid}}"
autoplay="{{false}}"
>
</txv-video>
</view>
</template>
3.修改wxParse.wxml的循環(huán)模板,添加視頻插件的模板
中間的騰訊視頻插件正是我們需要添加的。
ps: 循環(huán)模板在源碼中有10個趴樱，甚至更多馒闷，所以需要我們把每一個循環(huán)模板中都添加插件酪捡，這樣才能保證你的視頻能夠正常播放。
<template name="wxParse0">
<!--video類型-->
<block wx:elif="{{item.tag == 'video'}}">
<template is="wxParseVideo" data="{{item}}" />
</block>
<!--騰訊視頻插件-->
<block wx:elif="{{item.tag == 'iframe'}}">
<template is="wxPraseIframe2TencentVideoPlugin" data="{{item}}" />
</block>
<!--img類型-->
<block wx:elif="{{item.tag == 'img'}}">
<template is="wxParseImg" data="{{item}}" />
</block>
</template>
當(dāng)這些都配置完成后纳账，就可以在詳情頁面播放騰訊視頻了
（注：第二逛薇，引用自http://www.reibang.com/p/074d6f8e6083）
