├── icon ├── logo.png ├── logo2.png ├── user.png └── search.png ├── components └── MyTitle │ ├── MyTitle.json │ ├── MyTitle.js │ ├── MyTitle.wxml │ └── MyTitle.wxss ├── app.wxss ├── pages ├── detail │ ├── detail.json │ ├── detail.wxml │ ├── detail.wxss │ └── detail.js └── index │ ├── index.json │ ├── index.wxss │ ├── index.js │ └── index.wxml ├── .gitignore ├── app.json ├── .gitattributes ├── app.js ├── utils └── util.js ├── project.config.json ├── LICENSE └── README.md /icon/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iMisty/WX-bilibili-Demo/HEAD/icon/logo.png -------------------------------------------------------------------------------- /icon/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iMisty/WX-bilibili-Demo/HEAD/icon/logo2.png -------------------------------------------------------------------------------- /icon/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iMisty/WX-bilibili-Demo/HEAD/icon/user.png -------------------------------------------------------------------------------- /components/MyTitle/MyTitle.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /icon/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iMisty/WX-bilibili-Demo/HEAD/icon/search.png -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | page, view, image, swiper, swiper-item, navigator, video { 2 | box-sizing: border-box; 3 | } -------------------------------------------------------------------------------- /pages/detail/detail.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "MyTitle": "../../components/MyTitle/MyTitle" 4 | }, 5 | "navigationBarTitleText": "视频详情" 6 | } -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": { 3 | "MyTitle": "../../components/MyTitle/MyTitle" 4 | }, 5 | "navigationBarTitleText": "Bilibili" 6 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index", 4 | "pages/detail/detail" 5 | ], 6 | "window":{ 7 | "backgroundTextStyle":"light", 8 | "navigationBarBackgroundColor": "#fff", 9 | "navigationBarTitleText": "WeChat", 10 | "navigationBarTextStyle":"black" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /components/MyTitle/MyTitle.js: -------------------------------------------------------------------------------- 1 | // components/MyTitle/MyTitle.js 2 | Component({ 3 | /** 4 | * 组件的属性列表 5 | */ 6 | properties: { 7 | 8 | }, 9 | 10 | /** 11 | * 组件的初始数据 12 | */ 13 | data: { 14 | 15 | }, 16 | 17 | /** 18 | * 组件的方法列表 19 | */ 20 | methods: { 21 | 22 | } 23 | }) 24 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /components/MyTitle/MyTitle.wxml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 下载APP 13 | 14 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | App({ 2 | 3 | /** 4 | * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） 5 | */ 6 | onLaunch: function () { 7 | 8 | }, 9 | 10 | /** 11 | * 当小程序启动，或从后台进入前台显示，会触发 onShow 12 | */ 13 | onShow: function (options) { 14 | 15 | }, 16 | 17 | /** 18 | * 当小程序从前台进入后台，会触发 onHide 19 | */ 20 | onHide: function () { 21 | 22 | }, 23 | 24 | /** 25 | * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息 26 | */ 27 | onError: function (msg) { 28 | 29 | } 30 | }) 31 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : '0' + n 15 | } 16 | 17 | module.exports = { 18 | formatTime: formatTime 19 | } 20 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": false, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true, 12 | "autoAudits": false 13 | }, 14 | "compileType": "miniprogram", 15 | "libVersion": "2.6.1", 16 | "appid": "wxfc4494e91efccb2f", 17 | "projectname": "Bilibili-Demo", 18 | "debugOptions": { 19 | "hidedInDevtools": [] 20 | }, 21 | "isGameTourist": false, 22 | "condition": { 23 | "search": { 24 | "current": -1, 25 | "list": [] 26 | }, 27 | "conversation": { 28 | "current": -1, 29 | "list": [] 30 | }, 31 | "game": { 32 | "currentL": -1, 33 | "list": [] 34 | }, 35 | "miniprogram": { 36 | "current": -1, 37 | "list": [] 38 | } 39 | } 40 | } -------------------------------------------------------------------------------- /components/MyTitle/MyTitle.wxss: -------------------------------------------------------------------------------- 1 | /* components/MyTitle/MyTitle.wxss */ 2 | 3 | .my-title { 4 | display: flex; 5 | align-items: center; 6 | padding: 10rpx; 7 | background-color: #fff; 8 | } 9 | 10 | .logo { 11 | flex: 7; 12 | } 13 | 14 | .logo-image { 15 | width: 140rpx; 16 | height: 60rpx; 17 | } 18 | 19 | .search-icon { 20 | display: flex; 21 | flex: 1; 22 | justify-content: center; 23 | align-items: center; 24 | } 25 | 26 | .search-image { 27 | width: 60rpx; 28 | height: 60rpx; 29 | } 30 | 31 | .user-icon { 32 | display: flex; 33 | flex: 2; 34 | justify-content: center; 35 | align-items: center; 36 | } 37 | 38 | .user-image { 39 | width: 54rpx; 40 | height: 60rpx; 41 | } 42 | 43 | .down-app { 44 | display: flex; 45 | flex: 3; 46 | font-size: 30rpx; 47 | justify-content: center; 48 | align-items: center; 49 | background-color: pink; 50 | color: #fff; 51 | border-radius: 10rpx; 52 | padding: 10rpx; 53 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Misty 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WX-bilibili-Demo 2 | 3 | ## 久 等 了 4 | 本Demo成品来自B站教程视频,如想看原视频,请移步:https://www.bilibili.com/video/av40455083/ 5 | 6 | ~~Readme摸了25天,反正现在才半夜12点~~ 7 | 8 | **5月1日之后由于接口的视频资源域名失效，所以点击进视频页后有加载不出来的情况，近日会更新新接口（咕咕咕咕咕咕咕）** 9 | 10 | # 新人一定要看使用须知,一定要看使用须知,一定要看使用须知,重要的事情要说三遍 11 | 12 | ## 使用须知及Q&A 13 | 14 | ## **如何解决视频中的font-awesome问题** 15 | - 使用CSS转wxss功能将整个font-awesome的文件打包成wxss格式(只使用两个图标但导入整个库有点不划算) 16 | - 使用SVG文件的图标,再通过阿里巴巴icon的项目下载功能打包到本地成为字体文件(有点麻烦) 17 | - 使用png图像,并使用image标签代替视频中的i标签或view标签(推荐,记得在wxss中限制大小) 18 | - 使用base64压缩功能将小图片文件转换为base64格式并使用image标签代替i标签或view标签引入(个人使用,优点是不用多放几张图,缺点是会增加wxml的大小以及降低代码可读性) 19 | - 跟黑马的老师py一下把文件要过来 20 | 21 | ### 如何引入到自己的项目中使用 22 | - 使用命令行,在命令行中输入以下命令将项目Clone至本机中,在微信开发者工具中导入项目即可 23 | > git clone https://github.com/iMisty/WX-bilibili-Demo.git 24 | 25 | - 点击项目右上角的 Clone or download ,选择 Download ZIP ,将文件下载到本地中,解压缩后使用微信开发者工具导入 26 | 27 | ### 如何在自己的手机上测试 28 | 没有任何文章比官方文档更权威了:https://developers.weixin.qq.com/miniprogram/dev/framework (傻X微信） 29 | 30 | ### 为什么接口数据非常缓慢 31 | 接口速度取决于你的网络速度,这个和接口服务器有关 32 | 33 | ### 为什么视频链接只能点开4个 34 | 可能是为了节省流量(?)吧,接口的视频链接那已经只能读取出4个了 35 | 36 | ### 我想要把这个小程序上线怎么弄? 37 | 微信小程序的审核麻烦得要死(3分钟内连续拿出5次手机扫码),我已经放弃了,如果你有兴趣和耐心的话可以试试 38 | 39 | ### 这些代码格式怎么看着怪怪的 40 | 如果你有Vue的基础的话,这个其实很简单就能看懂了的,关于Vue,可以点这里(官方文档):https://cn.vuejs.org 41 | 42 | ### 想要做小程序得要会什么 43 | HTML/CSS,JavaScript即可.其中JavaScript最好是会ES6的语法,而Vue的话如果打算使用mpvue之类的框架来写小程序的话可以了解,如果只想用原生的话那么看一下就行 44 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | color: #666; 3 | padding: 10rpx; 4 | } 5 | 6 | .nav-wrap {} 7 | 8 | .nav { 9 | white-space: nowrap; 10 | padding: 5rpx 0; 11 | } 12 | 13 | .nav-item { 14 | display: inline-block; 15 | padding: 20rpx 44rpx; 16 | font-size: 30rpx; 17 | } 18 | 19 | .active { 20 | border-bottom: 5rpx solid #de688b; 21 | } 22 | 23 | .slides { 24 | margin-top: 10rpx; 25 | } 26 | 27 | .slides swiper { 28 | height: 220rpx; 29 | } 30 | 31 | .slides navigator { 32 | width: 100%; 33 | height: 100%; 34 | } 35 | 36 | .slides image { 37 | width: 100%; 38 | height: 100%; 39 | } 40 | 41 | .video-wrap { 42 | display: flex; 43 | flex-wrap: wrap; 44 | padding: 5rpx; 45 | justify-content: space-between; 46 | } 47 | 48 | .video-item { 49 | width: 48%; 50 | margin-bottom: 20rpx; 51 | } 52 | 53 | .video-img { 54 | position: relative; 55 | } 56 | 57 | .video-img-image { 58 | width: 100%; 59 | border-radius: 16rpx; 60 | } 61 | 62 | .video-img .video-info { 63 | display: flex; 64 | justify-content: space-around; 65 | position: absolute; 66 | left: 0; 67 | bottom: 8rpx; 68 | width: 100%; 69 | color: #fff; 70 | font-size: 20rpx; 71 | } 72 | 73 | .count-image{ 74 | width: 24rpx; 75 | padding-right: 8rpx; 76 | } 77 | 78 | .video-title { 79 | display: -webkit-box; 80 | overflow: hidden; 81 | white-space: normal; 82 | text-overflow: ellipsis; 83 | word-wrap: break-word; 84 | -webkit-line-clamp: 2; 85 | -webkit-box-orient: vertical; 86 | font-size: 28rpx; 87 | } -------------------------------------------------------------------------------- /pages/detail/detail.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{videoInfo.videoTitle}} 7 | 8 | 9 | 10 | {{videoInfo.author}} 11 | {{videoInfo.playCount}}播放 12 | {{videoInfo.commentCount}}弹幕 13 | {{videoInfo.date}} 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | {{item.title}} 22 | 23 | {{item.playMsg}}次观看 24 | {{item.commentCount}}次评论 25 | 26 | 27 | 28 | 29 | 30 | 31 | 评论( {{commentData.commentTotalCount}} ) 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | {{item.username}} 41 | {{item.commentDate}} 42 | 43 | 44 | {{item.commentInfo}} 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /pages/detail/detail.wxss: -------------------------------------------------------------------------------- 1 | /* pages/detail/detail.wxss */ 2 | 3 | .main { 4 | padding: 10rpx; 5 | color: #666; 6 | } 7 | 8 | .video-info { 9 | margin-top: 10rpx; 10 | } 11 | 12 | .video-info video { 13 | width: 100%; 14 | } 15 | 16 | .video.title { 17 | display: flex; 18 | justify-content: space-between; 19 | font-size: 36rpx; 20 | } 21 | 22 | .video-detail { 23 | margin-top: 5rpx; 24 | font-size: 28rpx; 25 | } 26 | 27 | .video-detail text { 28 | margin-left: 12rpx; 29 | } 30 | 31 | .video-detail .author { 32 | color: #000; 33 | } 34 | 35 | .other-list { 36 | margin-top: 10rpx; 37 | } 38 | 39 | .item-other { 40 | display: flex; 41 | justify-content: space-between; 42 | margin-bottom: 20rpx; 43 | } 44 | 45 | .other-img-wrap { 46 | display: flex; 47 | justify-content: center; 48 | align-items: center; 49 | width: 30%; 50 | } 51 | 52 | .other-img-wrap image { 53 | width: 90%; 54 | border-radius: 15rpx; 55 | } 56 | 57 | .other-info { 58 | display: flex; 59 | flex-direction: column; 60 | justify-content: space-around; 61 | width: 60%; 62 | } 63 | 64 | .other-title { 65 | font-size: 30rpx; 66 | color: #e06f93; 67 | } 68 | 69 | .other-detail { 70 | font-size: 26rpx; 71 | color: #666; 72 | } 73 | 74 | .comment-wrap { 75 | margin-top: 10rpx; 76 | } 77 | 78 | .comment-title { 79 | padding: 10rpx; 80 | font-size: 28rpx; 81 | } 82 | 83 | .comment-list {} 84 | 85 | .comment-item { 86 | display: flex; 87 | justify-content: space-between; 88 | margin-bottom: 10rpx; 89 | padding: 10rpx; 90 | border-bottom: 1px solid #666; 91 | } 92 | 93 | .comment-user { 94 | display: flex; 95 | flex: 1; 96 | justify-content: center; 97 | align-items: center; 98 | } 99 | 100 | .comment-user image { 101 | width: 60%; 102 | border-radius: 50%; 103 | } 104 | 105 | .comment-info { 106 | display: flex; 107 | flex: 5; 108 | flex-direction: column; 109 | justify-content: space-around; 110 | } 111 | 112 | .comment-detail { 113 | display: flex; 114 | justify-content: space-between; 115 | } 116 | 117 | .comment-detail .author { 118 | font-size: 28rpx; 119 | color: #000; 120 | } 121 | 122 | .comment-detail .date { 123 | font-size: 24rpx; 124 | color: #666; 125 | } 126 | 127 | .comment-content { 128 | font-size: 28rpx; 129 | color: #000; 130 | } -------------------------------------------------------------------------------- /pages/detail/detail.js: -------------------------------------------------------------------------------- 1 | // pages/detail/detail.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | videoInfo: null, 9 | othersList: [], 10 | commentData: [] 11 | }, 12 | 13 | // 获取视频详情 14 | getCurrentVideo(videoId){ 15 | const _this = this; 16 | wx.request({ 17 | url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videoDetail?id='+videoId, 18 | success(res){ 19 | //console.log(res); 20 | if(res.data.code === 0) { 21 | _this.setData({ 22 | videoInfo: res.data.data.videoInfo 23 | }); 24 | } 25 | } 26 | }) 27 | }, 28 | 29 | // 获取推荐视频 30 | getOthersList(videoId){ 31 | const _this = this; 32 | wx.request({ 33 | url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/othersList?id='+videoId, 34 | success(res){ 35 | if(res.data.code === 0) { 36 | _this.setData({ 37 | othersList: res.data.data.othersList 38 | }); 39 | } 40 | } 41 | }); 42 | }, 43 | 44 | // 获取评论数据 45 | getCommentList(videoId){ 46 | const _this = this; 47 | wx.request({ 48 | url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/commentsList?id='+videoId, 49 | success(res){ 50 | if(res.data.code === 0) { 51 | _this.setData({ 52 | commentData: res.data.data.commentData 53 | }); 54 | } 55 | } 56 | }); 57 | }, 58 | 59 | /** 60 | * 生命周期函数--监听页面加载 61 | */ 62 | onLoad: function (options) { 63 | let videoId = options.id; 64 | this.getCurrentVideo(videoId); 65 | this.getOthersList(videoId); 66 | this.getCommentList(videoId); 67 | }, 68 | 69 | /** 70 | * 生命周期函数--监听页面初次渲染完成 71 | */ 72 | onReady: function () { 73 | 74 | }, 75 | 76 | /** 77 | * 生命周期函数--监听页面显示 78 | */ 79 | onShow: function () { 80 | 81 | }, 82 | 83 | /** 84 | * 生命周期函数--监听页面隐藏 85 | */ 86 | onHide: function () { 87 | 88 | }, 89 | 90 | /** 91 | * 生命周期函数--监听页面卸载 92 | */ 93 | onUnload: function () { 94 | 95 | }, 96 | 97 | /** 98 | * 页面相关事件处理函数--监听用户下拉动作 99 | */ 100 | onPullDownRefresh: function () { 101 | 102 | }, 103 | 104 | /** 105 | * 页面上拉触底事件的处理函数 106 | */ 107 | onReachBottom: function () { 108 | 109 | }, 110 | 111 | /** 112 | * 用户点击右上角分享 113 | */ 114 | onShareAppMessage: function () { 115 | 116 | } 117 | }) -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | 3 | /** 4 | * 页面的初始数据 5 | */ 6 | data: { 7 | // 被点击的导航菜单索引 8 | currentIndexNav: 0, 9 | // 导航 10 | navList: [], 11 | // 轮播图数据 12 | swiperList: [], 13 | // 视频列表数据 14 | videosList: [] 15 | }, 16 | 17 | // 获取首页导航数据 18 | getNavList(){ 19 | const _this = this; 20 | // 利用小程序内置API发送请求 21 | wx.request({ 22 | url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList', 23 | success(res){ 24 | //console.log(res); 25 | if(res.data.code === 0) { 26 | _this.setData({ 27 | navList: res.data.data.navList 28 | }) 29 | } 30 | } 31 | }); 32 | }, 33 | 34 | // 获取轮播图数据 35 | getSwiperList(){ 36 | const _this = this; 37 | wx.request({ 38 | url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/swiperList', 39 | success(res){ 40 | if(res.data.code === 0) { 41 | _this.setData({ 42 | swiperList: res.data.data.swiperList 43 | }) 44 | } 45 | } 46 | }); 47 | }, 48 | 49 | // 获取视频数据 50 | getVideosList(){ 51 | const _this = this; 52 | wx.request({ 53 | url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videosList', 54 | success(res){ 55 | if(res.data.code === 0) { 56 | _this.setData({ 57 | videosList: res.data.data.videosList 58 | }); 59 | } 60 | } 61 | }); 62 | }, 63 | 64 | // 点击首页导航按钮 65 | activeNav(e){ 66 | //console.log(123); 67 | this.setData({ 68 | currentIndexNav: e.target.dataset.index 69 | }) 70 | }, 71 | 72 | /** 73 | * 生命周期函数--监听页面加载 74 | */ 75 | onLoad: function (options) { 76 | this.getNavList(); 77 | this.getSwiperList(); 78 | this.getVideosList(); 79 | }, 80 | 81 | /** 82 | * 生命周期函数--监听页面初次渲染完成 83 | */ 84 | onReady: function () { 85 | 86 | }, 87 | 88 | /** 89 | * 生命周期函数--监听页面显示 90 | */ 91 | onShow: function () { 92 | 93 | }, 94 | 95 | /** 96 | * 生命周期函数--监听页面隐藏 97 | */ 98 | onHide: function () { 99 | 100 | }, 101 | 102 | /** 103 | * 生命周期函数--监听页面卸载 104 | */ 105 | onUnload: function () { 106 | 107 | }, 108 | 109 | /** 110 | * 页面相关事件处理函数--监听用户下拉动作 111 | */ 112 | onPullDownRefresh: function () { 113 | 114 | }, 115 | 116 | /** 117 | * 页面上拉触底事件的处理函数 118 | */ 119 | onReachBottom: function () { 120 | 121 | }, 122 | 123 | /** 124 | * 用户点击右上角分享 125 | */ 126 | onShareAppMessage: function () { 127 | 128 | } 129 | }) -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | {{item.text}} 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | {{item.playCount}} 34 | 35 | 36 | 37 | {{item.commentCount}} 38 | 39 | 40 | 41 | {{item.desc}} 42 | 43 | 44 | --------------------------------------------------------------------------------