? 騰訊視頻是一個(gè)讓我們都喜愛的視頻觀看平臺(tái)，用戶群體也相當(dāng)龐大峡继。小編也非常喜歡使用騰訊視頻播放軟件冗锁，在娛樂的時(shí)間之中蚜枢，也給本人來許多快樂顶燕。

前言

在學(xué)習(xí)了小程序之后，為了鞏固自身的學(xué)習(xí)知識(shí)和提高實(shí)戰(zhàn)能力码泛。小編也非常的喜歡寫一個(gè)屬于自己的小程序，而且也發(fā)現(xiàn)有些人寫的視頻類小程序不是很細(xì)節(jié)，所以小編選了‘騰訊視頻’小程序择膝，也開始走上一條“踩坑”的不歸路。寫下這邊文章也是為了紀(jì)念自己的痛苦之路检激，同時(shí)也希望給學(xué)習(xí)小程序的你帶來丁點(diǎn)幫助肴捉。

項(xiàng)目部分gif演示

1. 前期準(zhǔn)備

微信開發(fā)者工具(必須)

VScode編輯器(可選)

阿里巴巴矢量圖標(biāo)庫-提供一些圖標(biāo)icon

騰訊視頻-獲取視頻數(shù)據(jù)Vid

騰訊視頻插件-配置

2. tabBar設(shè)計(jì)

在設(shè)計(jì)小程序的tabBar時(shí)，直接使用微信小程序官方提供給我們的tabBar叔收。那如何使用微信小程序提供的tabBar來設(shè)計(jì)騰訊視頻小程序的tabBar呢齿穗？

a.首先，使用微信開發(fā)者工具(或者VScode)打開你新建的小程序項(xiàng)目,找到你的小程序中的app.json文件饺律。在app.json文件中的pages項(xiàng)窃页，新增如下配置：

>need-to-insert-img

b.接著，按（ctrl+s）進(jìn)行保存复濒。此時(shí)脖卖，微信開發(fā)者工具會(huì)幫你新建四個(gè)頁面文件夾，你在pages文件夾打開即可看到這四個(gè)文件夾芝薇。

c.然后胚嘲，在pages同級(jí)目錄下，新建images用來放置程序圖片資源洛二。緊接著我們?nèi)?a target="_blank">阿里巴巴矢量圖標(biāo)庫搜索自己需要的tabBar對(duì)應(yīng)的圖標(biāo)馋劈，把它們下載放置到imgages中去。

d.開始配置tabBar晾嘶，找到你的小程序中的app.json文件妓雾。在app.json文件中的tabBar項(xiàng)，新增如下配置：

"tabBar": {"color":"#000000","selectedColor":"#FF4500","list": [? ? ? {"pagePath":"pages/main/main","text":"首頁","iconPath":"images/shouye.png","selectedIconPath":"images/shouye-action.png"},? ? ? {"pagePath":"pages/shortVideo/index","text":"短視頻","iconPath":"images/duanshiping.png","selectedIconPath":"images/duanshiping-action.png"},? ? ? {"pagePath":"pages/brush/brush","text":"刷一刷","iconPath":"images/shuayishua.png","selectedIconPath":"images/shuayishua-action.png"},? ? ? {"pagePath":"pages/mine/mine","text":"我的","iconPath":"images/mine.png","selectedIconPath":"images/mine-action.png"}? ? ]? }復(fù)制代碼

? ?e.效果圖如下：

>need-to-insert-img

3. 數(shù)據(jù)請(qǐng)求

日常小程序開發(fā)過程中基本時(shí)通過微信小程序開發(fā)工具提供的wx.request來做數(shù)據(jù)請(qǐng)求垒迂，那么怎么可以讓自己定義的數(shù)據(jù)庫呢械姻？我們這里采用云開發(fā)的微信提供的免費(fèi)云數(shù)據(jù)庫，做數(shù)據(jù)請(qǐng)求机断。在項(xiàng)目的cloudfunctions文件夾下新建幾個(gè)自己需要的云函數(shù)請(qǐng)求響應(yīng)的數(shù)據(jù)請(qǐng)求楷拳。

以獲取搜索建議為例：

1. 云函數(shù)部分：

// 云函數(shù)入口文件const cloud = require('wx-server-sdk')const env ='dhyuan'cloud.init()// 獲取數(shù)據(jù)庫句柄suggestVideoconst db = cloud.database({ env })// 云函數(shù)入口函數(shù)exports.main = async (event, context) => {? // cloud.getWXContext()直接拿到用戶信息? console.log(event.key)? // 查詢建議的 模糊查詢? const _ = db.commandletsuggestVideo = await db.collection('suggestVideo').where(_.or([{? ? keyword: db.RegExp({? ? ? ? regexp:'.*'+ event.key,? ? ? ? options:'i',? ? ? })? ? }? ])).get({? ? success: res => {? ? ? console.log(res)? ? },? ? fail: err => {? ? ? console.log(err)? ? }? })letreturnResult = [];for(leti = 0; i < suggestVideo.data.length; i++) {returnResult.push(suggestVideo.data[i])? }returnreturnResult.sort((a,b) => a.createTime < b.createTime ? 1 : -1)}復(fù)制代碼

? ? ?2. 搜索頁中的 數(shù)據(jù)請(qǐng)求調(diào)用 與函數(shù)部分：

// 搜索建議searchSuggest() {? ? const self = this;? ? //展示標(biāo)題欄的loding? ? wx.showNavigationBarLoading();? ? //調(diào)用云函數(shù)? ? wx.cloud.callFunction({? ? ? name:'search',? ? ? data:{ key: self.data.searchKey },? ? ? success(res){? ? ? ? // console.log(res);? ? ? ? self.setData({? ? ? ? ? showvideoresult:true,? ? ? ? ? searchsuggest: res.result? ? ? ? })? ? ? },? ? ? fail(err){? ? ? ? // console.log(err);? ? ? ? self.setData({? ? ? ? ? showvideoresult:false})? ? ? },complete(){? ? ? ? //讓 loding消失? ? ? ? wx.hideNavigationBarLoading();? ? ? }? ? })? ? ? },復(fù)制代碼

?4. 視頻搜索

在小程序開發(fā)中，搜索功能是一個(gè)比較難實(shí)現(xiàn)的功能吏奸，尤其涉及數(shù)據(jù)求以及動(dòng)態(tài)化的實(shí)時(shí)搜索欢揖。下面小編進(jìn)行一步一步搜索功能的解析

? ? ? 搜索的樣式設(shè)計(jì)

以頭部查詢?yōu)槔?其他樣式請(qǐng)見github：?傳送門)

在設(shè)計(jì)搜索欄的頭部時(shí)，我們采用原生的樣式渲染方式奋蔚，這樣大家也可以理解其實(shí)現(xiàn)的原理她混，所以就不采用UI框架了烈钞，當(dāng)然如果你想使用UI小編也可以推薦你使用WeUI(微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫)。

不多說廢話啦坤按，開始動(dòng)手了毯欣。

1.? 實(shí)現(xiàn)樣式設(shè)計(jì)思路：使用view包裹search的icon和input,讓包裹的view邊框角變成圓角，在使用行內(nèi)塊級(jí)元素使其在一行顯示臭脓，并使用vertical-align: middle;居中對(duì)齊酗钞；

? ? ?2.? 搜索頭部基本結(jié)構(gòu)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 取消? ? ? 復(fù)制代碼

3. 樣式渲染

/* 搜索bar */.page__bd {? position: fixed;? top:0;? width:100%;? background-color:#FF4500;z-index:1;}.search-bar {? width:100%;? display: flex;? background-color:#FF4500;border: 1px? solid#DC4238;}.search-bar__box{? vertical-align: middle;? height: 65.52rpx;? margin: 20rpx 10rpx 20rpx 25rpx;? background-color:#DE655C;border-radius: 20rpx;? width: 75%;? padding-left: 30rpx;? padding-right: 30rpx;? display: inline-block;? align-items: center;}.icon-search_in-box{? width: 32.76rpx;? height: 32.76rpx;? vertical-align: middle;? display: inline-block;}.icon-clear{? width: 32.76rpx;? height: 32px 0.76rpx;? vertical-align: middle;? display: inline-block;? margin-left: 80rpx;}.search-bar__input{? vertical-align: middle;? display: inline-block;}.search-bar__cancel-btn {? color:#ffffff;display: inline-block;? font-size:32rpx;}復(fù)制代碼

? ? ?搜索功能部分

1. 實(shí)現(xiàn)思路：a. 關(guān)鍵字搜索建議：綁定input輸入框使其每輸入一個(gè)值觸發(fā)關(guān)鍵字搜索建議操作，并展示給用戶觀看谢鹊，此時(shí)展示你的搜索建議view設(shè)置z-index算吩；b. 關(guān)鍵字搜索結(jié)果：當(dāng)你輸完關(guān)鍵字回車時(shí)留凭，觸發(fā)搜索結(jié)果操作佃扼，云函數(shù)去查詢云數(shù)據(jù)庫并放回相關(guān)數(shù)據(jù)；c.取消：當(dāng)你點(diǎn)擊取消時(shí)蔼夜，此時(shí)小程序會(huì)放回到首頁兼耀；d.搜索歷史：當(dāng)你每次輸完關(guān)鍵字點(diǎn)擊回車時(shí)，使用wx.setStorageSync保存數(shù)據(jù)到本地求冷，當(dāng)回到搜索主頁時(shí)瘤运，從本次內(nèi)存取出你查詢過的關(guān)鍵字即可。

2. 實(shí)現(xiàn)關(guān)鍵字搜索建議

? ? 頁面js求

searchResult() {? ? // console.log(this.data.searchKey)? ? const self = this;? ? //展示標(biāo)題欄的loding? ? wx.showNavigationBarLoading();? ? //調(diào)用云函數(shù)? ? wx.cloud.callFunction({? ? ? name:'searchResult',? ? ? data:{ key: self.data.searchKey },? ? ? success(res){? ? ? ? // console.log(res);? ? ? ? self.setData({? ? ? ? ? showvideoresult:false,? ? ? ? ? searchresult: res.result? ? ? ? })? ? ? },? ? ? fail(err){? ? ? ? // console.log(err);? ? ? ? self.setData({? ? ? ? ? showvideoresult:false})? ? ? },complete(){? ? ? ? //讓 loding消失? ? ? ? wx.hideNavigationBarLoading();? ? ? }? ? })? }復(fù)制代碼

? ? 云函數(shù)：

// 云函數(shù)入口文件const cloud = require('wx-server-sdk')const env ='dhyuan'cloud.init()// 獲取數(shù)據(jù)庫句柄suggestVideoconst db = cloud.database({ env })// 云函數(shù)入口函數(shù)exports.main = async (event, context) => {? // cloud.getWXContext()直接拿到用戶信息? console.log(event.key)? // 查詢建議的 模糊查詢? const _ = db.commandletsuggestVideo = await db.collection('suggestVideo').where(_.or([{? ? keyword: db.RegExp({? ? ? ? regexp:'.*'+ event.key,? ? ? ? options:'i',? ? ? })? ? }? ])).get({? ? success: res => {? ? ? console.log(res)? ? },? ? fail: err => {? ? ? console.log(err)? ? }? })letreturnResult = [];for(leti = 0; i < suggestVideo.data.length; i++) {returnResult.push(suggestVideo.data[i])? }returnreturnResult.sort((a,b) => a.createTime < b.createTime ? 1 : -1)}復(fù)制代碼

3. 關(guān)鍵字搜索結(jié)果

? ? ? js請(qǐng)求

// 搜索結(jié)果searchResult() {? ? // console.log(this.data.searchKey)? ? const self = this;? ? //展示標(biāo)題欄的loding? ? wx.showNavigationBarLoading();? ? //調(diào)用云函數(shù)? ? wx.cloud.callFunction({? ? ? name:'searchResult',? ? ? data:{ key: self.data.searchKey },? ? ? success(res){? ? ? ? // console.log(res);? ? ? ? self.setData({? ? ? ? ? showvideoresult:false,? ? ? ? ? searchresult: res.result? ? ? ? })? ? ? },? ? ? fail(err){? ? ? ? // console.log(err);? ? ? ? self.setData({? ? ? ? ? showvideoresult:false})? ? ? },complete(){? ? ? ? //讓 loding消失? ? ? ? wx.hideNavigationBarLoading();? ? ? }? ? })? }復(fù)制代碼

? ? 云函數(shù)

// 云函數(shù)入口文件const cloud = require('wx-server-sdk')const env ='dhyuan'cloud.init()// 獲取數(shù)據(jù)庫句柄suggestVideoconst db = cloud.database({ env })// 云函數(shù)入口函數(shù)exports.main = async (event, context) => {? // cloud.getWXContext()直接拿到用戶信息? console.log(event.key)? // 查詢建議的 模糊查詢? const _ = db.commandletserultVideo = await db.collection('searchResult').where(_.or([{? ? title: db.RegExp({? ? ? ? regexp:'.*'+ event.key,? ? ? ? options:'i',? ? ? })? ? },{? ? ? artists: db.RegExp({? ? ? ? regexp:'.*'+ event.key,? ? ? ? options:'i',? ? ? })? ? }? ])).get({? ? success: res => {? ? ? console.log(res)? ? },? ? fail: err => {? ? ? console.log(err)? ? }? })letreturnResult = [];for(leti = 0; i < serultVideo.data.length; i++) {returnResult.push(serultVideo.data[i])? }returnreturnResult.sort((a,b) => a.createTime < b.createTime ? 1 : -1)}復(fù)制代碼

特別注意：

? ? 搜索中有可能出現(xiàn)“抖動(dòng)現(xiàn)象”匠题，那么如何解決該現(xiàn)象呢拯坟？此時(shí)，你需要采用debounce來解決韭山，防止用戶多次輸入抖動(dòng)觸發(fā)搜索郁季，從而導(dǎo)致多次不必要的數(shù)據(jù)請(qǐng)求。

具體解決如下：

//獲取input文本并且實(shí)時(shí)搜索,動(dòng)態(tài)隱藏組件? getsearchKey:function(e) {? ? // console.log(e.detail.value) //打印出輸入框的值letthat = this;if(e.detail.cursor != that.data.cursor) { //實(shí)時(shí)獲取輸入框的值? ? ? that.setData({? ? ? ? searchKey: e.detail.value? ? ? })? ? }if(e.value !="") { //組件的顯示與隱藏? ? ? that.setData({? ? ? ? showView:false,? ? ? ? share:true})? ? }else{? ? ? that.setData({? ? ? ? showView:""})? ? }if(e.detail.value !="") { //解決 如果輸入框的值為空時(shí)钱磅，傳值給搜索建議梦裂，會(huì)報(bào)錯(cuò)的bug? ? ? that.debounce(that.searchSuggest(), 300)? ? }? },? // 去除輸入抖動(dòng)? debounce (func, delay) {lettimerletself = thisreturnfunction(...args) {if(timer) {? ? ? ? clearTimeout(timer)? ? ? }? ? ? timer =setTimeout(() => {? ? ? ? func.apply(self, args)? ? ? }, delay)? ? }? },復(fù)制代碼

4. 取消

js操作

//實(shí)現(xiàn)取消功能，停止搜索盖淡，返回首頁? cancel:function() {? ? wx.switchTab({? ? ? url:'/pages/main/main'})? },復(fù)制代碼

5.?搜索歷史

? ? ? js操作

routeSearchResPage:function(e) {? ? // console.log(e.detail.value)? ? // 將數(shù)據(jù)存入本地if(this.data.searchKey) {lethistory= wx.getStorageSync("history") || [];? ? ? history.push(this.data.searchKey)? ? ? wx.setStorageSync("history",history);? ? }? },//每次顯示變動(dòng)就去獲取緩存年柠，給history，并for出來褪迟。? onShow:function() {? ? this.setData({history: wx.getStorageSync("history") || []? ? })? }復(fù)制代碼

? ? ?wxml對(duì)應(yīng)部分

? ? ? 搜索歷史? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{item}}? ? ? ? ? ? ? ? ? ? 復(fù)制代碼

5. 首頁部分

? ? 首頁基本是結(jié)構(gòu)的設(shè)計(jì)冗恨，以及輪播和菜單切換，主要時(shí)考驗(yàn)我們wxss的功底和js交互功底味赃。

? ? ?1.樣式結(jié)構(gòu)設(shè)計(jì)

結(jié)構(gòu)設(shè)計(jì)基本沒什么大的難度掀抹，小編就不多廢話了，詳情見github項(xiàng)目(傳送門)洁桌。結(jié)果如下圖：

? ? ?2.滑動(dòng)菜單切換&輪播

?a. 對(duì)于菜單的滑動(dòng)切換渴丸，其實(shí)實(shí)現(xiàn)非常簡單。

在實(shí)現(xiàn)之前，你需要了解的幾個(gè)標(biāo)簽：swiper,swiper-item,scroll-view;滑塊視圖容器谱轨。swiper:其中只可放置swiper-item組件戒幔，否則會(huì)導(dǎo)致未定義的行為;scroll-view可滾動(dòng)視圖區(qū)域。使用豎向滾動(dòng)時(shí)土童，需要給scroll-view一個(gè)固定高度诗茎，通過 WXSS 設(shè)置 height。組件屬性的長度單位默認(rèn)為px献汗，2.4.0起支持傳入單位(rpx/px)敢订。

b. 菜單滑動(dòng)切換實(shí)現(xiàn)思路：給swiper綁定一個(gè)bindchange='swiperChange'事件，每當(dāng)用戶滑動(dòng)頁面時(shí)罢吃，觸發(fā)'swiperChange'事件楚午，并且在js中定義一個(gè)數(shù)據(jù)變量為curentIndex，通過監(jiān)聽if(e.detail.source == 'touch')其中的touch事件尿招，從而讓curentIndex用來記錄每次滑動(dòng)切換的swiper-item矾柜，并通過wx:if="{{curentIndex == 0}}來判斷當(dāng)前的swiper-item是否顯示，從而達(dá)到滑動(dòng)切換菜單的效果就谜。并且怪蔑，菜單欄的index也與curentIndex進(jìn)行判斷，從而讓指定的菜單高亮顯示丧荐。

c. 實(shí)現(xiàn)過程

1. wxml部分：

? ? ? ? ? ? {{item.name}}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 復(fù)制代碼

?2. js 部分

//改變swiper? swiperChange:function(e) {//切換if(e.detail.source =='touch') {letcurentIndex = e.detail.current;? ? ? this.setData({? ? ? ? curentIndex? ? ? })? ? }? },? switchTab(e){? ? this.setData({? ? ? curentIndex:e.currentTarget.dataset.index,? ? ? toView: e.currentTarget.dataset.id? ? })? }復(fù)制代碼

?d. 你可能會(huì)踩的“坑”

在你使用 swiper 和scroll-view時(shí)缆瓣，會(huì)出現(xiàn)swiper-item中的內(nèi)容超出可視范圍時(shí)，無法上下滑動(dòng)問題虹统。這是你要第一時(shí)間想到“swiper高度自適應(yīng)”這個(gè)關(guān)鍵詞弓坞。小編在這提供幾種解決方式。

方案一：

swiper高度固定窟却，swiper-item默認(rèn)絕對(duì)定位且寬高100%昼丑，每個(gè)swiper-item中內(nèi)容由固定高度的child組成，然后根據(jù)child數(shù)量動(dòng)態(tài)計(jì)算swiper高度夸赫，初始方案（由于rpx針對(duì)屏幕寬度進(jìn)行自適應(yīng)菩帝，child_height使用rpx方便child正方形情況下自適應(yīng)）：

swiper_height = child_height * child_num

屏幕效果僅在寬度375的設(shè)備（ip6、ipⅩ）完美契合茬腿，其他設(shè)備都底部會(huì)出現(xiàn)多余空隙呼奢，并且在上拉加載過程中，隨著內(nèi)容增加切平，底部空隙也逐漸變大握础。

? ? ?方案二：

swiper_height = child_height * child_num * ( window_width / 750 )復(fù)制代碼

然后并無變化，我們可以看到child_height在不同寬度屏幕下悴品，顯示的寬高尺寸是不一樣的（px單位）禀综，那就嘗試使用box在各個(gè)屏幕的實(shí)際高度進(jìn)行計(jì)算swiper高度简烘，box的高度可以單獨(dú)在頁面中增加一個(gè)固定標(biāo)簽，該標(biāo)簽樣式和box寬高保持一致并且隱藏起來定枷，然后在page的onload中通過wx.createSelectorQuery()獲取標(biāo)簽實(shí)際高度baseItemHeight（px單位）：

swiper_height = baseItemHeight * child_num復(fù)制代碼

結(jié)果顯示原本的ip6孤澎、ipⅩ沒有問題，另外寬帶小于375的ip5上也ok欠窒，但是在大于375的設(shè)備上還是出現(xiàn)空隙覆旭，比如ip的plus系列

? ? ?方案三：

swiper底部有一個(gè)load標(biāo)簽顯示“加載更多”，該標(biāo)簽緊貼box其后岖妄，通過wx.createSelectorQuery()來獲取bottom型将，然而你會(huì)發(fā)現(xiàn)bottom是標(biāo)簽的height加top的和。計(jì)算底部空隙（暫時(shí)忽略“加載更多”標(biāo)簽高度）space_height = swiper_height - load_top剛計(jì)算完可以看到在靜止?fàn)顟B(tài)下荐虐，計(jì)算出space_height拿去修改swiper_height顯示空隙剛好被清掉了七兜，但是接著就發(fā)現(xiàn)在動(dòng)過程中獲取到的bottom是不固定的，也就是說數(shù)值可能不準(zhǔn)確導(dǎo)致space_height計(jì)算錯(cuò)誤缚俏，顯示效果達(dá)不到要求

?小編采用的是方案一

思路：給swiper一個(gè)外部view裝載swiper惊搏，并給它設(shè)置style="height:{{ch}}rpx;"贮乳，這里的ch為js中的數(shù)據(jù)變量方便動(dòng)態(tài)修改view的高度忧换。并且在js中的鉤子函數(shù)中的onLoad函數(shù)中編寫如下代碼：

onLoad:function(options) {? ? wx.getSystemInfo({? ? ? success: res => {? ? ? ? //轉(zhuǎn)為rpxletch = (750 / res.screenWidth) * res.windowHeight - 180;? ? ? ? this.setData({? ? ? ? ? ch? ? ? ? })? ? ? },? ? })}復(fù)制代碼

式子中減?180 ，是小編自己調(diào)試的數(shù)據(jù)向拆，具體減多少亚茬，可以根據(jù)具體情況而定。其實(shí)說白了梢夯，該方案的設(shè)計(jì)，基本是與better-scoll的滑動(dòng)策略基本雷同颂砸。

6. 視頻播放

1. 主體設(shè)計(jì)

?a. 主體結(jié)構(gòu)設(shè)計(jì)

? ? {{showModalStatus ==true?'stopScroll':''}}? ? ? ? ? ? ? ? ? ? ? ? ? ? {{entitie.duration}}? ? ? ? ? ? -->? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{entitie.header}}? ? ? ? ? ? 簡介? ? ? ? ? ? ? ? ? ? ? ? ? ? 8.6分·VIP·視頻·全36集·8.8億? ? ? ? ? ? ? ?

b. js交互

// pages/videoDetail/index.jsconst entities = require('../../data/entities.js')const txvContext = requirePlugin("tencentvideo")const config = require('../../modules/config')const episodes = require('../../data/episodes.js')letcurrentVideo;Page({? /**? * 頁面的初始數(shù)據(jù)? */? data: {? ? entitie: null,? ? id: null,? ? entities,? ? clips: null,? ? currentVid:null,? ? episodes: null,? ? tvphide:false,? ? vid: null,? ? title:"電視劇",? ? defn:"超清",? ? changingvid:'',? ? controls: !!config.get('controls'),? ? autoplay: !!config.get('autoplay'),? ? playState:'',? ? showProgress1:true,? ? width:"100%",? ? height:"auto",? ? showModalStatus:false,? ? car:{},? ? detailOn:true,? ? ch: 0,? ? currentIndex: 0,? ? top: 0,? ? currVideo:{}? },? play(event){? ? const target = event.target;? ? const currentVid = target.dataset.vid;if(this.data.currentVid!=null){? ? ? currentVideo.pause();? ? }if(currentVid){? ? ? currentVideo = wx.createVideoContext(`${currentVid}`);? ? ? this.txvContext.pause();? ? ? currentVideo.play();? ? }? ? this.setData({? ? ? currentVid? ? })? },? select(e){? ? const target = e.target;? ? const currentVid = target.dataset.vid;? ? const num = target.dataset.num;? ? console.log(currentVid, num);? ? this.setData({? ? ? vid: currentVid,? ? ? clips: this.data.episodes[num-1].clips? ? })? ? this.txvContext = txvContext.getTxvContext('txv0');? ? this.txvContext.play();? },? /**? * 生命周期函數(shù)--監(jiān)聽頁面加載? */? onLoad:function(options) {? ? //動(dòng)態(tài)設(shè)置 詳情的高度? 防止滑動(dòng)失效? ? wx.getSystemInfo({? ? ? success: res => {? ? ? ? //轉(zhuǎn)為rpxletch = (750 / res.screenWidth) * res.windowHeight -478;? ? ? ? this.setData({? ? ? ? ? ch? ? ? ? })? ? ? },? ? })? ? const id= options.id;? ? console.log('id', id);letepisode = episodes.find(function(item){returnitem.id == id;? ? })letentitie = entities.find(function(item){returnitem.id == id;? ? })? ? this.setData({? ? ? entitie? ? })? ? //改變page里面的data? ? this.setData({? ? ? id: id,? ? ? episodes: episode.episodes,? ? ? vid: episode.episodes[0].vid,? ? ? clips: episode.episodes[0].clips? ? })? ? // console.log('vid', this.data.vid);? ? this.setData({? ? ? controls: !!config.get('controls'),? ? ? autoplay: !!config.get('autoplay')? ? })? ? this.txvContext = txvContext.getTxvContext('txv0');? ? this.txvContext.play();? ? this.videoContext = wx.createVideoContext('tvp');? },? onTvpPlay:function() {? ? // console.log('play')? },? onStateChange:function(e) {? ? this.setData({? ? ? playState: e.detail.newstate? ? })? },? onTvpContentChange:function() {? },? onTimeUpdate:function(e) {? },? requestFullScreen:function() {? ? this.txvContext.requestFullScreen();? },? onFullScreenChange:function() {? ? // console.log('onFullScreenChange!!!')? },? onTvpTimeupdate:function(){? },? onTvpPause:function() {? },? onTvpStateChanage:function() {? },? onPicClick(e) {letdataset = e.currentTarget.dataset;? ? this.currIndex=dataset.index? ? this.setData({"currVideo.vid":dataset.vid? ? })? ? // console.log(this.data.currVideo)? ? this.getTop()? },getTop(){letquery = this.createSelectorQuery();? ? ? query.selectViewport().scrollOffset();? ? ? query? ? ? ? ? .selectAll(`.mod_poster`)? ? ? ? ? .boundingClientRect()? ? ? ? ? .exec(res => {letoriginTop = 0;? ? ? ? ? ? this.setData({? ? ? ? ? ? ? ? top: originTop + this.currIndex * 224.5? ? ? ? ? ? })? ? ? ? ? });? },? /**? * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成? */? onReady:function() {? },? /**? * 生命周期函數(shù)--監(jiān)聽頁面顯示? */? onShow:function() {? ? ? },? /**? * 生命周期函數(shù)--監(jiān)聽頁面隱藏? */? onHide:function() {? },? /**? * 生命周期函數(shù)--監(jiān)聽頁面卸載? */? onUnload:function() {? },? /**? * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作? */? onPullDownRefresh:function() {? },? /**? * 頁面上拉觸底事件的處理函數(shù)? */? onReachBottom:function() {? },? /**? * 用戶點(diǎn)擊右上角分享? */? onShareAppMessage:function() {? ? console.log('share success!')? },? //顯示對(duì)話框? showModal:function() {? ? // 顯示遮罩層? ? var animation = wx.createAnimation({? ? ? duration: 200,? ? ? timingFunction:"linear",? ? ? delay: 0? ? })? ? this.animation = animation? ? animation.translateY(300).step()? ? this.setData({? ? ? animationData: animation.export(),? ? ? showModalStatus:true,? ? ? detailOn:false})setTimeout(function() {? ? ? animation.translateY(0).step()? ? ? this.setData({? ? ? ? animationData: animation.export()? ? ? })? ? }.bind(this), 200)? },? //隱藏對(duì)話框? hideModal:function() {? ? // 隱藏遮罩層? ? var animation = wx.createAnimation({? ? ? duration: 200,? ? ? timingFunction:"linear",? ? ? delay: 0? ? })? ? this.animation = animation;? ? animation.translateY(300).step();? ? this.setData({? ? ? animationData: animation.export(),? ? })setTimeout(function() {? ? ? animation.translateY(0).step()? ? ? this.setData({? ? ? ? animationData: animation.export(),? ? ? ? showModalStatus:false,? ? ? ? detailOn:true})? ? }.bind(this), 200)? },? // 默認(rèn)阻止?jié)L動(dòng)stopScroll() {returnfalse;? }})復(fù)制代碼

?c. 你可能會(huì)遇到的‘坑’

當(dāng)你在設(shè)計(jì)簡介的時(shí)候，你會(huì)發(fā)現(xiàn)自己設(shè)計(jì)的彈出框的內(nèi)部滑動(dòng)事件與 當(dāng)前頁的滑動(dòng)事件一起觸發(fā)了统捶，那這是為啥呢喘鸟？仔細(xì)想一下，你會(huì)發(fā)現(xiàn)是冒泡和捕獲(詳解參考該博文)在搞鬼愕把，相信寫過web項(xiàng)目的人對(duì)冒泡和捕獲非常的熟悉。那么在小程序中也是有的橘蜜，所以這里你就需要了解滑動(dòng)穿透這個(gè)東西了。那么如何來解決這個(gè)問題吶象颖？

解決辦法：在簡介中需要滑動(dòng)的view中 加上catchtouchmove="stopScroll"，并且在js中定義stopScroll方法并放回false即可解決克蚂。具體如下：

1. wxml:

? ? ? ? ? ? ? ? ? ? ? ? {{entitie.header}}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 每周一二三20點(diǎn)更新2集，會(huì)員多看6集? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{entitie.score}}分·VIP·{{entitie.type}}·全{{entitie.universe}}集·8.8億? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ?2. js部分

// 默認(rèn)阻止?jié)L動(dòng)stopScroll() {returnfalse;? }復(fù)制代碼

2.切換電視劇劇集

a. 實(shí)現(xiàn)電視劇的劇集切換思路：拿到需要播放視頻的vid立镶，將vid替換掉當(dāng)前的vid，然后執(zhí)行播放操作缭召。

b.實(shí)現(xiàn)步驟：

1. 在.json文件中，配置騰訊視頻插件組件搪哪。如下：

{"usingComponents": {"txv-video":"plugin://tencentvideo/video"}}復(fù)制代碼

? 2. 在wxml中使用，如下：

? ? ? ? 復(fù)制代碼

其中，在txv-video中的屬性配置含義：

vid: 騰訊視頻的vid垛耳，用于拿到該視頻資源(必須)

playerid：playerid必須要全局唯一护奈，可以設(shè)置為vid，否則導(dǎo)致視頻播放錯(cuò)亂(必須)

autoplay：是否自動(dòng)播放厌秒；true|false

controls: 是否顯示控制欄（播放，暫停蚌讼，全屏的按鈕顯示）

title：視頻標(biāo)題

defn：視頻清晰度辟灰，默認(rèn)auto，可選值：流暢篡石，標(biāo)清凰萨，高清继控，超清，藍(lán)光，4K，杜比

其他屬性見：騰訊視頻插件官方文檔

3. js交互

select(e){? ? const target = e.target;? ? const currentVid = target.dataset.vid;? ? const num = target.dataset.num;? ? console.log(currentVid, num);? ? this.setData({? ? ? vid: currentVid,? ? ? clips: this.data.episodes[num-1].clips? ? })? ? this.txvContext = txvContext.getTxvContext('txv0');? ? this.txvContext.play();? }復(fù)制代碼

? ? 3. 簡介實(shí)現(xiàn)

a. 簡介部分主要是wxcss的渲染憔儿，沒有什么邏輯朝刊，需要注意的時(shí)，點(diǎn)擊下拉可以使簡介下拉隱藏蜈缤，并有下拉的過程出現(xiàn)咙鞍。

b. 主要代碼如下：

1. wxml部分：

? ? ? ? ? ? ? ? ? ? {{entitie.header}}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 每周一二三20點(diǎn)更新2集，會(huì)員多看6集? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{entitie.score}}分·VIP·{{entitie.type}}·全{{entitie.universe}}集·8.8億? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

2. wxss部分:

.commodity_attr_box {? width: 100%;? height: 100%;? color:#fff;? overflow: hidden;? position: fixed;? bottom: 0;? top: 420rpx;? left: 0;? z-index: 998;? background-color: #1f1e1e;? padding-top: 20rpx;}.commodity_movableView{? width: 100%;? height: 2024rpx;}.commodity_hide{? position: relative;? height: 50rpx;}.commodity_hide .title{? margin-left: 30rpx;? font-size: 35rpx;? line-height: 35rpx;? font-weight: 40;}.commodity_hide .commodity_hide__on{? width: 50rpx;? height: 50rpx;? position: absolute;? display: inline-block;? right: 20rpx;}.commodity_hide .commodity_hide__on::after{? position: absolute;? top: 10rpx;? content: '';? color: #fff;? width: 20rpx;? height: 20rpx;? border-top: 4rpx solid #ece3e3;? border-right: 4rpx solid #ece3e3;? -webkit-transform: rotate(135deg);? transform: rotate(135deg);}.commodity_attr_box .hightDataView{? width: 100%;}.commodity_attr_box .hightDataView .top{? background-color:#1f1e1e;? color: #fff;? height: 140rpx;? box-sizing: border-box;? border-bottom: 4rpx solid #8b8989;}.commodity_attr_box .hightDataView .top .top-text{? font-size: 12px;? margin-top: 35rpx;? margin-left: 30rpx;? margin-right: 50rpx;? color: #C0C0C0;? line-height: 25px;}.commodity_attr_box .hightDataView .top .top-descrese{? margin-left: 30rpx;? font-size: 12px;? line-height: 25px;? color: #C0C0C0;}.commodity_attr_box .hightDataView .center{? border-bottom: 4rpx solid #8b8989;}.commodity_attr_box .hightDataView .center .star-list {? width: 100%;? margin-top: 30rpx;? margin-left: 20rpx;? margin-bottom: 50rpx;? white-space: nowrap;? box-sizing: border-box;}.commodity_attr_box .hightDataView .center .star-list .item{? text-align: center;? display: inline-block;? padding:4rpx;}.commodity_attr_box .hightDataView .center .star-list .item image{? width: 80rpx;? height: 80rpx;? border-radius: 50%;? margin: 10rpx;}.commodity_attr_box .hightDataView .center .star-list .item .name{? font-size: 10px;? font-weight: normal;}.commodity_attr_box .hightDataView .bottom{? width: 100%;}.commodity_attr_box .hightDataView .bottom .title{? margin-left: 30rpx;? font-size: 35rpx;? line-height: 35rpx;? font-weight: 40;? margin-top: 30rpx;}.commodity_attr_box .hightDataView .bottom .text{? font-size: 12px;? font-weight: normal;? text-indent: 34rpx;? margin-top: 20rpx;? color: #C0C0C0;? margin-left: 30rpx;}復(fù)制代碼

? ? 4. 片花部分

? ?在設(shè)計(jì)片花部分趾徽，最主要的是采用什么方式去解決续滋，一次頁面渲染加載多個(gè)視頻問題，很多人直接用for循環(huán)放置孵奶，多個(gè)視頻video標(biāo)簽疲酌；其實(shí)這是非常笨拙的辦法；小編在這做了一個(gè)比較高級(jí)的辦法拒课，那就是：頁面放置的都是view來存放該視頻的vid徐勃，當(dāng)點(diǎn)擊相應(yīng)圖片時(shí)事示，觸發(fā)一個(gè)onPicClick事件，此時(shí)拿到需要播放的vid僻肖，并通知頁面我需要播放某個(gè)視頻了肖爵，請(qǐng)給我一個(gè)video去播放視頻；

? ?此外臀脏，你需要注意的是劝堪，你這個(gè)video出現(xiàn)的位置，必須是你點(diǎn)擊的圖標(biāo)位置揉稚，這樣就不會(huì)造成頁面圖片與視頻位置不符的問題了秒啦。而且，采用這種辦法搀玖，頁可以減緩你的手機(jī)的cpu消耗余境，該辦法算是非常高明的手法了。下面來看下怎么具體實(shí)現(xiàn)這種高明的手法吧灌诅。

??a. wxml部分

? ? ? ? ? ? ? ? ? ? ? ? 精彩片花? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

?b.js交互部分

onPicClick(e) {letdataset = e.currentTarget.dataset;? ? this.currIndex=dataset.index? ? this.setData({"currVideo.vid":dataset.vid? ? })? ? // console.log(this.data.currVideo)? ? this.getTop()? },getTop(){letquery = this.createSelectorQuery();? ? ? query.selectViewport().scrollOffset();? ? ? query? ? ? ? ? .selectAll(`.mod_poster`)? ? ? ? ? .boundingClientRect()? ? ? ? ? .exec(res => {letoriginTop = 0;? ? ? ? ? ? this.setData({? ? ? ? ? ? ? ? top: originTop + this.currIndex * 224.5? ? ? ? ? ? })? ? ? ? ? });? }復(fù)制代碼

c. 特別注意：

在getTop()方法中的邏輯芳来，此處有些費(fèi)解，為啥要去設(shè)置top值猜拾。其目的就是即舌，為去矯正你點(diǎn)擊某個(gè)圖片之后，視頻可以在相應(yīng)位置出現(xiàn)挎袜，也就達(dá)到點(diǎn)擊圖片播放的效果顽聂。

7. 短視頻

該模塊實(shí)現(xiàn)邏輯，基本與首頁差不多盯仪，直接看源碼即可復(fù)制代碼

實(shí)現(xiàn)基本思路：使用swiper,scroll-view實(shí)現(xiàn)左右滑動(dòng)菜單聯(lián)動(dòng)紊搪，播放視頻思路與播放片花思路基本一致。

?1. json配置

為啥要配置磨总，因?yàn)槲覀冞@里使用了騰訊視頻插件嗦明，以及自己定義的視頻尾部的組件，該尾部用于視頻分享操作蚪燕，以及評(píng)論操作。配置如下：

{"usingComponents": {"txv-video":"plugin://tencentvideo/video","footer":"/components/footer/footer"}}復(fù)制代碼

?2. wxml部分

? ? ? ? ? ? {{item.name}}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

3. js部分

// pages/shortVideo/index.jsconst config = require('../../modules/config')const txvContext = requirePlugin("tencentvideo");const sysInfo =wx.getSystemInfoSync()const shortCategory = require('../../data/shortCategory.js')const videoUrl = require('../../data/videoUrl.js')Page({? /**? * 頁面的初始數(shù)據(jù)? */? data: {? ? curentIndex: 0,? ? shortCategory: shortCategory,? ? videos: videoUrl,? ? ch: 0,? ? top: 0,? ? currVideo:{}? },? //改變swiper? swiperChange:function(e) {//切換if(e.detail.source =='touch') {letcurentIndex = e.detail.current;? ? ? this.setData({? ? ? ? curentIndex? ? ? })? ? }? },? switchTab(e){? ? this.setData({? ? ? curentIndex:e.currentTarget.dataset.index,? ? ? toView: e.currentTarget.dataset.id? ? })? },? onTvpTimeupdate:function(){? },? onTvpPlay:function() {? },? onTvpPause:function() {? },? onTvpContentChange:function() {? },? onTvpStateChanage:function() {? },? onPicClick(e) {letdataset = e.currentTarget.dataset;? ? this.currIndex=dataset.index? ? this.setData({"currVideo.vid":dataset.vid? ? })? ? console.log(this.data.currVideo)? ? this.getTop()? },getTop(){letquery = this.createSelectorQuery();? ? ? query.selectViewport().scrollOffset();? ? ? query? ? ? ? ? .selectAll(`.mod_poster`)? ? ? ? ? .boundingClientRect()? ? ? ? ? .exec(res => {? ? ? ? ? ? console.log(res)? ? ? ? ? ? console.log(res[0].scrollTop, res[1][this.currIndex].top)letoriginTop = res[0].scrollTop;? ? ? ? ? ? this.setData({? ? ? ? ? ? ? ? top: originTop + this.currIndex * 224.5? ? ? ? ? ? })? ? ? ? ? });? },? /**? * 生命周期函數(shù)--監(jiān)聽頁面加載? */? onLoad:function(options) {? ? wx.getSystemInfo({? ? ? success: res => {? ? ? ? //轉(zhuǎn)為rpxletch = (750 / res.screenWidth) * res.windowHeight - 80;? ? ? ? this.setData({? ? ? ? ? ch? ? ? ? })? ? ? },? ? })? ? this.videoContext = wx.createVideoContext('tvp');? },? /**? * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成? */? onReady:function() {? },? /**? * 生命周期函數(shù)--監(jiān)聽頁面顯示? */? onShow:function() {? },? /**? * 生命周期函數(shù)--監(jiān)聽頁面隱藏? */? onHide:function() {? },? /**? * 生命周期函數(shù)--監(jiān)聽頁面卸載? */? onUnload:function() {? },? /**? * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作? */? onPullDownRefresh:function() {? },? /**? * 頁面上拉觸底事件的處理函數(shù)? */? onReachBottom:function() {? },? /**? * 用戶點(diǎn)擊右上角分享? */? onShareAppMessage:function() {? },? // 默認(rèn)阻止?jié)L動(dòng)stopScroll() {returnfalse;? }})復(fù)制代碼

?8. 我的

關(guān)于奔浅，我的部分實(shí)現(xiàn)基本內(nèi)容是展示用戶頭像馆纳、姓名，顯示是否開通了會(huì)員汹桦，觀看歷史鲁驶，我的看單和設(shè)置功能，由于時(shí)間關(guān)系舞骆，小編只實(shí)現(xiàn)設(shè)置的部分功能

1.wxml部分

? ?

?2. js 部分

// miniprogram/pages/mine/mine.jsconst utils = require('../../utils/utils.js')//獲取應(yīng)用實(shí)例const app = getApp()Page({? /**? * 頁面的初始數(shù)據(jù)? */? data: {? ? userInfo: {}? },? navigatItem(e) {returnutils.navigatItem(e)? },? getUserInfo:function(e) {? ? app.globalData.userInfo = e.detail.userInfo? ? this.setData({? ? ? userInfo: e.detail.userInfo? ? })? },? ? lookBans:function() {? ? const that = this;? ? wx.showModal({? ? ? content:'暫時(shí)未開發(fā)钥弯！',? ? ? showCancel:false,? ? ? confirmColor:'#FF4500',? ? ? success(res) {? ? ? }? ? })? },? /**? * 生命周期函數(shù)--監(jiān)聽頁面加載? */? onLoad:function(options) {if(app.globalData.userInfo) {? ? ? this.setData({? ? ? ? userInfo: app.globalData.userInfo? ? ? })? ? }else{? ? ? // 在沒有 open-type=getUserInfo 版本的兼容處理? ? ? wx.getUserInfo({? ? ? ? success: res => {? ? ? ? ? app.globalData.userInfo = res.userInfo;? ? ? ? ? console.log(res.userInfo)? ? ? ? ? this.setData({? ? ? ? ? ? userInfo: res.userInfo? ? ? ? ? })? ? ? ? }? ? ? })? ? }? ? ? },? /**? * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成? */? onReady:function() {? },? /**? * 生命周期函數(shù)--監(jiān)聽頁面顯示? */? onShow:function() {? },? /**? * 生命周期函數(shù)--監(jiān)聽頁面隱藏? */? onHide:function() {? },? /**? * 生命周期函數(shù)--監(jiān)聽頁面卸載? */? onUnload:function() {? },? /**? * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作? */? onPullDownRefresh:function() {? },? /**? * 頁面上拉觸底事件的處理函數(shù)? */? onReachBottom:function() {? },? /**? * 用戶點(diǎn)擊右上角分享? */? onShareAppMessage:function() {? }})復(fù)制代碼

?3. 你需要注意的地方

? ?在實(shí)現(xiàn) 設(shè)置功能部分時(shí)径荔，這個(gè)小編在utils中寫一個(gè)共有的 工具函數(shù)，用于頁面跳轉(zhuǎn)等操作脆霎。utils.js源碼如下：

letnavigatItem = (e) => {? const url = e.currentTarget.dataset.url ||'/pages/main/main'const open = e.currentTarget.dataset.open? const toUrl = () => {? ? wx.navigateTo({? ? ? url,? ? })? }if(open) {? ? toUrl()? }else{if(ifLogined()) {? ? ? toUrl()? ? }else{? ? ? wx.navigateTo({? ? ? ? url:'/pages/mine/mine'})? ? }? }}module.exports = {? navigatItem}復(fù)制代碼

項(xiàng)目完整源碼：

github.com/hongdeyuan/…

9. 結(jié)語

小編在寫該項(xiàng)目時(shí)总处，踩了不少的坑，這里只寫出了幾個(gè)睛蛛。雖然有些地方用框架的話會(huì)更方便鹦马，但是我覺得徒手寫項(xiàng)目自己的能力才會(huì)得到進(jìn)階；最后忆肾，感謝大家來學(xué)習(xí)該文章荸频，感謝你們的支持，歡迎各位來學(xué)習(xí)討論客冈。

如果你喜歡這篇文章或者可以幫到你旭从，不妨點(diǎn)個(gè)贊吧！

原文：

https://juejin.im/post/5dd401c9f265da0bc8031459