可到我的github賬號上去copy文件

先展示一下我實現(xiàn)了的功能吧

?

?提示，如果有出現(xiàn)無法加載域名之類問題的的，可以在“設置”-“項目設置”-打鉤“不校驗合法域名……”；

?或者直接登錄自己的微信小程序后臺設置域名信息

首頁部分：

1、首頁的資源都是通過免費開放接口API獲取的，選擇的是

?

var API_URL = 'https://api.apiopen.top/videoCategoryDetails?id=14'; //發(fā)送請求，獲得數(shù)據(jù) wx.request({url: API_URL,data:{},header:{'Content-Type':'application/json'},success:function(res){wx.hideToast();var dataA=res.data;that.setData({title:"今日社區(qū)精選",movies:dataA.result})console.log(res.data);// console.log(dataA[1].data.content.data.cover.detail)}});

可以爬取到的數(shù)據(jù)有10組，保存到movie[]數(shù)組中

然后在wxml中排版這些獲取到的資源

<navigator wx:for="{{movies}}" url="../movie/movie?id={{item.data.content.data.id}}"> //注意上面url中“？”后面的id，當你在首頁點擊某個視頻時，他會發(fā)送“？”后面的id給新打開的movie頁面，即 //id會保存在新頁面onload：function（params）的params中，用于區(qū)分你點加開的是哪個視頻<view class="item"><image src="{{item.data.content.data.cover.feed}}" class='cover'></image><view class="meta"><view class="bottom"><view class="Classify">{{item.data.header.description}} | {{item.data.content.data.duration}}s</view><text class="intro">{{item.data.content.data.title}}</text></view></view></view></navigator>

視頻詳情部分

使用的API為

var API_URL = 'http://baobab.kaiyanapp.com/api/v1/video/'; onLoad: function (params) {this.videoCtx = wx.createVideoContext('myVideo');this.videoCtx.requestFullScreen({direction:90});var that=this;//console.log(params);wx.request({url: API_URL+params.id,data:{},header:{'Content-Type':'application/json'},success:function(res){console.log(res.data);that.setData({movie:res.data,src: res.data.playUrl}),console.log("Url=" + res.data.playUrl);},});},

爬取到的資源如下

?排版這些資源

<scroll-view class="page-body" scroll-y="true"><view><!--如果視頻src播放不了,請在“ 設置 ”中找到“ 項目設置 ”，在“ 調試基礎庫 ”上設成“ 2.3.2 ”即可。不要問我為什么…… --><video id='myVideo' src="{{src}}" controls="true" duration='{{movie.duration}}' binderror="listenerVideo" class="video" poster='{{movie.coverForDetail}}' objectFit='fill' page-gesture='true' direction='0'></video><text class='infro'>{{movie.title}}</text><text>————</text><text>{{movie.category}} / {{movie.duration}}s</text><text class='detail'>{{movie.description}}</text></view> </scroll-view>

?

?

先到這里啦，如果有什么意見可以在評論區(qū)留言哦，我會耐心改正的！

好的，接下來要介紹搜索部分了……，可以到微信小程序模仿開眼視頻app（二）哦

總結

以上是生活随笔為你收集整理的微信小程序模仿开眼视频app（一）——视频首页、视频详情、分类的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。