Shulou(Shulou.com)06/01 Report--

The editor of this article introduces in detail "how to develop the function of iqiyi Video Mini Program system". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to develop the function of iqiyi Video Mini Program system" can help you solve your doubts. Let's follow the editor's ideas slowly and deeply, together to learn new knowledge.

1. The broadcast picture of the home page.

What is used here is the slider view container swiper component of Mini Program, which is used to make a webcast picture, which is called a simple and convenient one.

Friends who have used iqiyi Mini Program will find that the rotation picture with a brief introduction of the video information on the home page is laid out in the middle of the page and each picture is not connected, so it is very concise and generous when sliding. At first, I simply used the swiper to set the width and height and center it, and the result was as follows: only the middle content was sliding, not the desired effect.

It seems that even if the swiper component looks simple, we should study it carefully. After reading the document, I found that the swiper component is actually swiper-item sliding, and it can only be placed in the swiper component, and the width and height are automatically set to 100%. In that case, set the width of the swiper-item.

Swiper {width:100%;} swiper-item {width:80%;}

Emmm doesn't seem to be very good. It seems that every swiper-item is always inseparable, so set the style of the content in it.

.info-box {width: 100%; margin: 0 60rpx;}

Only in this way can we achieve the desired effect. Scatter flowers ~

two。 The promotional map changes with the rowing picture.

In this case, swiper's bindchange method is used. It will trigger as soon as it slips, and there is a current that represents the number to which it slides at that time. Think of it this way, swiper is like an array that contains a lot of swiper-item

So we can get the current value in the js section, iterate through the corresponding image resource array and take out the address, and replace it with the address of the promotional image.

/ / index.js moviepicChange (e) {const imgsUrlList = this.data.imgsUrlList; / / Picture Resources let bigImg = this.data.bigImg; let video_id = this.data.video_id; for (let I = 0; I

< imgsUrlList.length; i++) { if (i == e.detail.current) { //如果current值与图片数组索引值匹配到了，则 bigImg = imgsUrlList[i].thumbnail; //换掉宣传图片地址 video_id = imgsUrlList[i].video_id; } } this.setData({ bigImg: bigImg, video_id }) }3.任意点击视频缩略图即可跳转到相关页面 在这个功能里头，数据处理是我碰到的一大难题了，因为没有后端，我就想试图模拟一下点击一个图片就发送视频id,并由后端返回响应数据的操作，大致思路就是就是通过了一个"中间站"去处理。emmm 可能有一点笨笨的= =。 首先准备好来自Easy-Mock的数据接口 然后在视频缩略图上绑定一下事件，用data-传递想要用于查询的参数 视频详情页面获取到传过来的id之后就可以发起请求，因为wx.request是个异步操作，需要一点时间，此处我对wx.request进行了封装，返回一个promise的办法就可以把异步操作变成了同步的啦ヾ(◍°∇°◍)ﾉﾞ //video-detail.js requestVideo: function(num = 0) { util.request({ //封装的util.request方法 url: `https://www.easy-mock.com/mock/5b0c37bed0e51c310ce24ab0/iqiyi/media#!method=get`, //请求地址 data: { // 请求参数 id: this.data.video_id, tag: 'dramas', langs: 'en' } }) .then(res =>

{/ / res is the returned data / / A pair of data is processed, and then the response content can be displayed on the page through data binding})}

Create a util tools folder to provide tool methods. This is where I simulate the response data sent back from the backend. First, get all the data in util.js, then process the obtained data according to the parameters sent from the video details page, and obtain the data processed by util.js on the video details page by returning promise,.then.

/ / util.js let util = {request (opt) {let options = Object.assign ({}, opt); / / curly braces are the target object, followed by opt is the source object. Object merging: add the attributes in the source object to the target object. If the two attribute names conflict, the latter will overwrite the previous let {url, data} = options. / / these two variables return new Promise ((resolve, reject) = > {/ / return a promise wx.request to the request initiating page ({/ / send request url, data, success (res) {/ / process the data after the request is received let returnRes = [] If (data.hasOwnProperty ('tag')) {let arr = res.data [data.tag] If (data.hasOwnProperty ('id')) {/ / if there is tag in the request parameters Id matches console.log (arr) for (let i in arr) {if (arr [I] .video _ id = data.id) {returnRes = arr [I] / / get the video resource}} resolve (returnRes) return;} returnRes = arr corresponding to the thumbnail clicked } resolve (returnRes)}, fail (err) {reject (err)}})}} 4. Keyword search

First, the keywords are obtained on the search page, and then as request parameters, the above encapsulated util.request is used for request and data processing.

After all the data is obtained in util.js, the traversal matching of keywords is realized through RegExpObject.test (string) among the many data.

/ / util.js if (data.hasOwnProperty ('key')) {/ / if the request parameter is key const media = res.data; for (let i in media) {/ / traversal matches the movie name for (let j in media [I]) {var re = new RegExp (data.key); if (re.test [I] [j] .title) {returnRes.push (Media [I] [j])) / / get a matching movie} resolve (returnRes) return;} resolve (returnRes)

After the search page uses util.request to get the data, the list of search results can be displayed. The point is (knock on the blackboard). Generally speaking, which item is clicked will be at the top of the search results page, so I want to create an array of query results with the clicked item as the first item. Store it locally and then take it out and display it on the next page!

/ / search.js clickResult: function (e) {let index = e.currentTarget.dataset.numn; / / clicked on the items let searchVal = this.data.searchVal; / / keywords let StorageResult = []; / / used for the local array let temp = []; const result = this.data.result; for (let I = 0; I)

< result.length; i++) { if (i == index) { temp = result.splice(i, 1); //取出点击的那一项 } } StorageResult = temp; for (let i in result) { StorageResult = [...StorageResult, result[i]] //将点击的那一项作为数组首位，其他搜索结果再依次放入 } wx.setStorage({ //在本地缓存搜索结果 key: 'searchResult', data: StorageResult, success: function(res) { wx.navigateTo({ url: `search-result/search-result?key=${searchVal}` //跳转到下一个页面 }) } }) } 另外，搜索结果会顺带把集数罗列出来，那就需要实现点哪集就在视频详情页定位到哪集的功能 先在wxml里通过data-把id、集数、标题传到下一个页面，在onload里头获取集数 //video-detail.js onLoad: function(option) { this.setData({ video_id: option.id, mediaList: null, }) wx.setNavigationBarTitle({ //设置导航条名称 title: option.title }) if (option.hasOwnProperty('num')) { //调用请求资源方法传入集数 this.requestVideo(option.num); } else { this.requestVideo(); } } 请求所有视频资源之后并遍历，把当前播放地址设为选中的那集 requestVideo: function(num = 0) { //没有选择集数，则集数默认是0 util.request({ ...(略) }) .then(res =>

{this.setData ({mediaList: res, isLoading: false, playerUrl: res.drama_ Num [num] .video _ url / / modify playback address}) this.pickNum (num); / / change the number of sets selection status})}

Used to change the number of sets selection state

PickNum: function (num) {for (let i of mediaList.drama_num) {i.selected = parseInt (i.drama_id) = parseInt (num) + 1 / / if the number of selected sets is the same as the id of the video resource, change the selected state of the set if (i.selected) {playerUrl = i.video_url}} this.setData ({mediaList, playerUrl})} read here This article "how to develop the function of iqiyi Video Mini Program system" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.