小程序demo项目实践
今天开始做一个简单的小程序，做的过程中势必会有一些知识经验需要记录
项目初始化
首先创建好一个小程序项目，在app.wxss里面将自带的css样式统统去除，加上自己写的初始化样式
小程序目前不支持*号通配符
page,view,image,swiper,swiper-item,navigator,video{
box-sizing: border-box;
}
将app.js中的原始逻辑去除一下，然后输入app+回车，会自动列出一个初始化的js结构
之后，再清理一下首页中的index.wxml、index.wxss、index.js中的内容；
同样的在index.js中输入Page+回车，初始化一下代码结构
编辑头部组件
首先在跟目录建立components文件夹，然后建立MyTitle文件夹，再在这个文件夹上右键建立component，名字叫MyTitle
然后我们先让这个title组件在首页汇总显示出来，在index.json中设置一下
{
"usingComponents": {
"MyTitle":"../../components/MyTitle/MyTitle"
},
"navigationBarTitleText": "bilibili"
}
然后在index.wxml中引入
<view class='main'>
<!-- 头部公共标签 -->
<MyTitle></MyTitle>
</view>
然后将myTitle的结构和样式写一下，可以复习一些flex布局
MyTitle.wxml:
<view class='my_title'>
<!-- logo -->
<navigator class='logo'>
<image class='logo_img' style='width:140rpx;height:60rpx;' src='../../icons/logo.png'></image>
</navigator>
<!-- 搜索 -->
<view class='search_icon'>
<image style='width:44rpx;height:44rpx;' src='../../icons/search.png'></image>
</view>
<!-- 用户 -->
<view class='user_icon'>
<image style='width:54rpx;height:60rpx;' src='../../icons/user.png'></image>
</view>
<!-- 下载按钮 -->
<view class='down_app'>
下载 App
</view>
</view>
MyTitle.wxss:
.my_title{
display: flex;
align-items: center;
padding: 10rpx;
background-color: #ffffff;
}
.logo{
flex:;
}
.search_icon{
flex:;
display: flex;
justify-content: center;
align-items: center;
}
.user_icon{
flex:;
display: flex;
justify-content: center;
align-items: center;
}
.down_app{
flex:;
display: flex;
justify-content: center;
align-items: center;
font-size:30rpx;
background-color:pink;
color:#fff;
border-radius: 10rpx;
padding:10rpx;
}
编辑头部导航
我们的导航数据是通过接口拿到的，所以要先请求接口拿到数据再写
index.js:
Page({
/**
* 页面的初始数据
*/
data: {
// 被点击首页导航栏的索引 默认是第一个
currentIndexNav:0,
// 首页导航数据
navList:[//放置请求数据失败 出此下策
{ text: '首页', id: 0 },
{ text: '动画', id: 1 },
{ text: '番剧', id: 2 },
{ text: '国创', id: 3 },
{ text: '音乐', id: 4 },
{ text: '舞蹈', id: 5 },
{ text: '科技', id: 6 },
{ text: '游戏', id: 7 },
{ text: '娱乐', id: 8 },
{ text: '鬼畜', id: 9 },
{ text: '电影', id: 10 },
{ text: '电视剧', id: 11 },
{ text: '纪录片', id: 12 },
{ text: '影视', id: 13 },
{ text: '时尚', id: 14 },
{ text: '生活', id: 15 },
{ text: '广告', id: 16 },
{ text: '直播', id: 17 },
{ text: '相簿', id: 18 }
]
},
// 点击首页导航按钮
activeNav(e){
// console.log(123)
this.setData({
currentIndexNav:e.target.dataset.index
})
},
// 获取首页导航数据
getNavlist(){
var self=this;
// 利用小程序内置的发送请求的方法
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList',
success(res){
console.log(res)
if(res.data.code===0){//如果请求成功
self.setData({
navList:res.data.data.navList
});
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//获取首页导航数据
this.getNavlist();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
上面是请求b站上的一个接口，如果是临时调试用的可以在开发者工具中的 详情 按钮下，将下图选项勾选上
另一种方法，如果要长时间用，不想这样临时设置，需要登录自己的小程序，在开发中的开发设置下的服务器域名下设置，文档上面介绍的很详细（如果设置端口，请求时一定要带上端口）
然后来写一下顶部导航的结构与样式
index.wxml:
<view class='main'>
<!-- 头部公共标签 -->
<MyTitle></MyTitle>
<!-- 首页导航 -->
<view class='nav_wrap'>
<scroll-view class='nav' scroll-x>
<view bindtap="activeNav" data-index="{{index}}" class="nav_item {{index===currentIndexNav?'active':''}}" wx:for="{{navList}}" wx:key="{{index}}">{{item.text}}</view>
</scroll-view>
</view>
</view>
index.wxss:
/* 改变整个页面的样式 相当于body */
page{
color:#666;
}
/* 首页导航 */
.nav_wrap{ }
.nav{
white-space: nowrap;
padding:5rpx 0;
}
.nav_item{
padding: 20rpx 45rpx;
font-size: 30rpx;
display: inline-block;
}
/* .nav_item中的.active类 */
.nav_item.active{
border-bottom: 5rpx solid #de688b;
}
效果：
写轮播图
首先请求到数据，因为接口不稳定，所以定义变量时给了默认值
index.js
Page({
/**
* 页面的初始数据
*/
data: {
// 被点击首页导航栏的索引 默认是第一个
currentIndexNav:0,
// 首页导航数据
navList:[//放置请求数据失败 出此下策
{ text: '首页', id: 0 },
{ text: '动画', id: 1 },
{ text: '番剧', id: 2 },
{ text: '国创', id: 3 },
{ text: '音乐', id: 4 },
{ text: '舞蹈', id: 5 },
{ text: '科技', id: 6 },
{ text: '游戏', id: 7 },
{ text: '娱乐', id: 8 },
{ text: '鬼畜', id: 9 },
{ text: '电影', id: 10 },
{ text: '电视剧', id: 11 },
{ text: '纪录片', id: 12 },
{ text: '影视', id: 13 },
{ text: '时尚', id: 14 },
{ text: '生活', id: 15 },
{ text: '广告', id: 16 },
{ text: '直播', id: 17 },
{ text: '相簿', id: 18 }
],
// 轮播数据
swiperList:[//防止请求数据失败，出此下策
{"link":"","imgSrc":"https://i0.hdslb.com/bfs/archive/bf2aa1f18ccae9ecae4cb666417f75da951ee2f4.jpg@480w_300h.webp"},
{ "link": "", "imgSrc": "https://i0.hdslb.com/bfs/archive/8860d7a57a9b1992c112ee56a35444cfc445108b.jpg@480w_300h.webp" },
{ "link": "", "imgSrc": "https://i0.hdslb.com/bfs/archive/82232bca677f06d69734159653cf29db82ff5d9c.png@480w_300h.webp" },
{ "link": "", "imgSrc": "https://i0.hdslb.com/bfs/archive/28d93d03968baa475a2c3982640736a66b4405c3.jpg@480w_300h.webp" }
]
},
// 点击首页导航按钮
activeNav(e){
// console.log(123)
this.setData({
currentIndexNav:e.target.dataset.index
})
},
// 获取首页导航数据
getNavlist(){
var self=this;
// 利用小程序内置的发送请求的方法
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList',
success(res){
console.log(res)
if(res.data.code===0){//如果请求成功
self.setData({
navList:res.data.data.navList
});
}
}
})
},
// 获取轮播图数据
getSwiperList(){
var self = this;
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/swiperList',
success(res){
console.log(res);
if(res.data.code===0){
self.setData({
swiperList:res.data.data.swiperList
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//获取首页导航数据
this.getNavlist();
//获取轮播图数据
this.getSwiperList();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
index.wxml
<view class='main'>
<!-- 头部公共标签 -->
<MyTitle></MyTitle>
<!-- 首页导航 -->
<view class='nav_wrap'>
<scroll-view class='nav' scroll-x>
<view bindtap="activeNav" data-index="{{index}}" class="nav_item {{index===currentIndexNav?'active':''}}" wx:for="{{navList}}" wx:key="{{index}}">{{item.text}}</view>
</scroll-view>
</view>
<!-- 轮播图 -->
<view class='slides'>
<swiper autoplay indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="{{index}}">
<navigator>
<image mode='widthFix' src='{{item.imgSrc}}'></image>
</navigator>
</swiper-item>
</swiper>
</view>
</view>
index.wxss
/* 改变整个页面的样式 相当于body */
page{
color:#666;
padding: 10rpx;
}
/* 首页导航 */
.nav_wrap{ }
.nav{
white-space: nowrap;
padding:5rpx 0;
}
.nav_item{
padding: 20rpx 45rpx;
font-size: 30rpx;
display: inline-block;
}
/* .nav_item中的.active类 */
.nav_item.active{
border-bottom: 5rpx solid #de688b;
}
/* 轮播图 */
.slides{
margin-top:10rpx;
}
.slides swiper{
height:220rpx;
border:1px solid red;
}
.slides navigator{
width:100%;
height:100%;
}
.slides image{
width:100%;
height:100%;
}
视频列表
首先获取到视频列表数据：index.js
Page({
/**
* 页面的初始数据
*/
data: {
// 被点击首页导航栏的索引 默认是第一个
currentIndexNav:0,
// 首页导航数据
navList:[//放置请求数据失败 出此下策
{ text: '首页', id: 0 },
{ text: '动画', id: 1 },
{ text: '番剧', id: 2 },
{ text: '国创', id: 3 },
{ text: '音乐', id: 4 },
{ text: '舞蹈', id: 5 },
{ text: '科技', id: 6 },
{ text: '游戏', id: 7 },
{ text: '娱乐', id: 8 },
{ text: '鬼畜', id: 9 },
{ text: '电影', id: 10 },
{ text: '电视剧', id: 11 },
{ text: '纪录片', id: 12 },
{ text: '影视', id: 13 },
{ text: '时尚', id: 14 },
{ text: '生活', id: 15 },
{ text: '广告', id: 16 },
{ text: '直播', id: 17 },
{ text: '相簿', id: 18 }
],
// 轮播数据
swiperList:[//防止请求数据失败，出此下策
{"link":"","imgSrc":"https://i0.hdslb.com/bfs/archive/bf2aa1f18ccae9ecae4cb666417f75da951ee2f4.jpg@480w_300h.webp"},
{ "link": "", "imgSrc": "https://i0.hdslb.com/bfs/archive/8860d7a57a9b1992c112ee56a35444cfc445108b.jpg@480w_300h.webp" },
{ "link": "", "imgSrc": "https://i0.hdslb.com/bfs/archive/82232bca677f06d69734159653cf29db82ff5d9c.png@480w_300h.webp" },
{ "link": "", "imgSrc": "https://i0.hdslb.com/bfs/archive/28d93d03968baa475a2c3982640736a66b4405c3.jpg@480w_300h.webp" }
],
//视频列表数据
videosList:[
{
commentCount:"1345",
desc:"世界上广告最多的网站判定！真的有10000条广告！【暗物质#2】",
id:0,
imgSrc:"https://i0.hdslb.com/bfs/archive/0563c3df12637178e8b08858e5fd11e4a6906acc.jpg@320w_200h.webp",
link:"",
playCount:"24.9万",
videoSrc:"http://files.ak48.xyz/2018120195458.mp4"
},
{
commentCount: "7825",
desc: "【圣地亚哥金曲】藏，超好听的中国风电音鬼畜！",
id: 1,
imgSrc: "https://i0.hdslb.com/bfs/archive/b08463bc1257b6294bad1e1646a3203f9f3a0c60.jpg@320w_200h.webp",
link: "",
playCount: "63.8万",
videoSrc: "http://files.ak48.xyz/20181219211856.mp4"
},
{
commentCount: "7825",
desc: "迈克尔杰克逊封神的12秒，无人能做到",
id: 2,
imgSrc: "https://i0.hdslb.com/bfs/archive/02cf0e3a1fd52f80763fd51ee7fae69e51cf173c.jpg@320w_200h.webp",
link: "",
playCount: "63.8万",
videoSrc: "http://files.ak48.xyz/20181219211920.mp4"
},
{
commentCount: "1066",
desc: "【2018】年度影视混剪 Ready Story 2018【混剪】",
id: 3,
imgSrc: "https://i0.hdslb.com/bfs/archive/dc7147ffa4e11a2fffa84b295b2f2bdbbfe3e6d7.jpg@320w_200h.webp",
link: "",
playCount: "40.0万",
videoSrc: "http://files.ak48.xyz/20181219211910.mp4"
},
{
commentCount: "719",
desc: "当你觉得扛不住的时候来看看这段视频",
id: 4,
imgSrc: "https://i2.hdslb.com/bfs/archive/2cc604557cab1f6fd79591981891467f7b825010.jpg@320w_200h.webp",
link: "",
playCount: "82.7万",
videoSrc: ""
},{
commentCount: "817",
desc: "【1080/漫威/衔接踩点向】前方高能！带你体验完美流畅的衔接踩点视觉盛宴！",
id: 5,
imgSrc: "https://i1.hdslb.com/bfs/archive/0fc171eaa7bf6b81cf5427fc57db104a4ef719d7.jpg@320w_200h.webp",
link: "",
playCount: "28.9万",
videoSrc: ""
},{
commentCount: "7149",
desc: "【木鱼微剧场】诺兰作品《星际穿越》，严谨的科学精神与深刻人文关怀（Re:C）",
id: 6,
imgSrc: "https://i0.hdslb.com/bfs/archive/0bf251d3f3b2cb589532aa24eaea140b312f7765.jpg@320w_200h.webp",
link: "",
playCount: "44.6万",
videoSrc: ""
},{
commentCount: "7825",
desc: "【嘻咦啊看】其实很多人一辈子都不懂得怎样道歉",
id: 7,
imgSrc: "https://i1.hdslb.com/bfs/archive/4a4155cf25b38da958e64b531709bca37927c82b.jpg@320w_200h.webp",
link: "",
playCount: "63.8万",
videoSrc: ""
},{
commentCount: "373",
desc: "【改革春风吹满地】【漫威/香港电影/赵本山】和斧头帮一起吹满地吧~",
id: 8,
imgSrc: "https://i1.hdslb.com/bfs/archive/54cd74a9bfd187fb795724c7bb51272e7c07a2e5.jpg@320w_200h.webp",
link: "",
playCount: "30.4万",
videoSrc: ""
},{
commentCount: "1066",
desc: "一家永远没有回头客的店《自杀专卖店》",
id: 9,
imgSrc: "https://i0.hdslb.com/bfs/archive/9046c3db8d6cddf56287fa1ead4e406baf4747f3.jpg@320w_200h.webp",
link: "",
playCount: "40.0万",
videoSrc: ""
},{
commentCount: "3083",
desc: "【演技】吃饭同样是吃空气，为什么演技差距如此之大！",
id: 10,
imgSrc: "https://i1.hdslb.com/bfs/archive/67e474f4fa31d5a2a8a6241a28cdf67be898eed4.png@320w_200h.webp",
link: "",
playCount: "65.7万",
videoSrc: ""
},{
commentCount: "2090",
desc: "【盘点火影真人版】我叫王大锤，是个忍者！这次参加了一个高成本火影忍者大电影！！",
id: 11,
imgSrc: "https://i1.hdslb.com/bfs/archive/67be0fadbe5eec5b967132c38fba65913cac7f43.jpg@320w_200h.webp",
link: "",
playCount: "46.1万",
videoSrc: ""
},{
commentCount: "663",
desc: "女部落奇怪规定，女人怀孕后必须吃男人补身体，还好这只是电影",
id: 12,
imgSrc: "https://i1.hdslb.com/bfs/archive/332b9cf87e30331277c84dcc47b1d53c2cb3fdfb.jpg@320w_200h.webp",
link: "",
playCount: "56.6万",
videoSrc: ""
},{
commentCount: "543",
desc: "《爱情公寓》令人窒息的骚操作！让人笑出猪叫声的神操作盘点！ 第十九弹",
id: 13,
imgSrc: "https://i2.hdslb.com/bfs/archive/2e30177ef42ea0a420cd9926870d1463ed0be11c.jpg@320w_200h.webp",
link: "",
playCount: "53.9万",
videoSrc: ""
},{
commentCount: "2425",
desc: "【全程高能】一个角色的三观到底能够正到什么地步【世间清流】",
id: 14,
imgSrc: "https://i0.hdslb.com/bfs/archive/cab6d4254e4b97a0edf4d2393f5e8aed4a90201c.jpg@320w_200h.webp",
link: "",
playCount: "32.6万",
videoSrc: ""
},{
commentCount: "2770",
desc: "明星20年后再次演绎自己的经典角色，谁变化最小",
id: 15,
imgSrc: "https://i0.hdslb.com/bfs/archive/396dfc33b8c3f426606760f9614759d7cf29c28d.png@320w_200h.webp",
link: "",
playCount: "46.6万",
videoSrc: ""
},{
commentCount: "1658",
desc: "一部拷问社会和人性的电影，极度真实，中国版的《东京物语》！",
id: 16,
imgSrc: "https://i2.hdslb.com/bfs/archive/f03f82e14ee380f8e44c0b62924438f0ccc93750.jpg@320w_200h.webp",
link: "",
playCount: "37.9万",
videoSrc: ""
},{
commentCount: "5165",
desc: "【公开处刑】演技炸裂与演技尴尬到底是什么样子：我是谢晓飞，我走路拽起来都是演技？",
id: 17,
imgSrc: "https://i0.hdslb.com/bfs/archive/7ea04d86d345d109df15fd8fae5a1a12eca14b88.jpg@320w_200h.webp",
link: "",
playCount: "42.4万",
videoSrc: ""
},{
commentCount: "2027",
desc: "爆笑沙雕剧《我是大哥大》 全集，不看你后悔，沙雕青年快乐多，万恶之源，笑出腹肌",
id: 18,
imgSrc: "https://i0.hdslb.com/bfs/archive/39a366506c68e612bf07443deff25a6bfe55e08b.jpg@320w_200h.webp",
link: "",
playCount: "26.6万",
videoSrc: ""
},{
commentCount: "652",
desc: "恶婆婆故意用蜂蜜试探品如 结果自己的孙子却被送去了医院!",
id: 19,
imgSrc: "https://i1.hdslb.com/bfs/archive/45eeee2d1eb67237e255652f5ed682edf70d137a.jpg@320w_200h.webp",
link: "",
playCount: "41.0万",
videoSrc: ""
},
{
commentCount: "613",
desc: "【极度舒适系列】那些惊艳至极的服化道！视觉盛宴！【第8期】",
id: 20,
imgSrc: "https://i1.hdslb.com/bfs/archive/3e7a75efe33f7391bb73ef3dcbc762f3d7d15136.png@320w_200h.webp",
link: "",
playCount: "16.6万",
videoSrc: ""
},{
commentCount: "822",
desc: "姐姐们为了阻止唯一的弟弟谈恋爱，真是花样百出",
id: 21,
imgSrc: "https://i0.hdslb.com/bfs/archive/1f0159497cac9ebfe7ac2a96aae2c5df32273d27.jpg@320w_200h.webp",
link: "",
playCount: "29.6万",
videoSrc: ""
},{
commentCount: "190",
desc: "500名副导演联合封杀胖嫂，本人回应：“我不演了，你们不用封杀我”",
id: 22,
imgSrc: "https://i1.hdslb.com/bfs/archive/2d0e5ece82827a666f38e7e12fc06eefe70ddbe7.jpg@320w_200h.webp",
link: "",
playCount: "32.3万",
videoSrc: ""
},{
commentCount: "1216",
desc: "《2019上半年即将上映的科幻大片》九部即将上映的科幻巨制，总有一部是你期待的！",
id: 23,
imgSrc: "https://i2.hdslb.com/bfs/archive/6b4f86491290565e8d41b04a1a649051c6419d06.jpg@320w_200h.webp",
link: "",
playCount: "20.1万",
videoSrc: ""
}
]
},
// 点击首页导航按钮
activeNav(e){
// console.log(123)
this.setData({
currentIndexNav:e.target.dataset.index
})
},
// 获取首页导航数据
getNavlist(){
var self=this;
// 利用小程序内置的发送请求的方法
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList',
success(res){
console.log(res)
if(res.data.code===0){//如果请求成功
self.setData({
navList:res.data.data.navList
});
}
}
})
},
// 获取轮播图数据
getSwiperList(){
var self = this;
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/swiperList',
success(res){
console.log(res);
if(res.data.code===0){
self.setData({
swiperList:res.data.data.swiperList
})
}
}
})
},
/**
* 获取视频列表
*/
getVideosList(){
var self=this;
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videosList',
success(res){
console.log(res);
if(res.data.code===0){
self.setData({
videosList: res.data.data.videosList
});
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//获取首页导航数据
this.getNavlist();
//获取轮播图数据
this.getSwiperList();
// 获取视频列表
this.getVideosList();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
index.wxml
<view class='main'>
<!-- 头部公共标签 -->
<MyTitle></MyTitle>
<!-- 首页导航 -->
<view class='nav_wrap'>
<scroll-view class='nav' scroll-x>
<view bindtap="activeNav" data-index="{{index}}" class="nav_item {{index===currentIndexNav?'active':''}}" wx:for="{{navList}}" wx:key="{{index}}">{{item.text}}</view>
</scroll-view>
</view>
<!-- 轮播图 -->
<view class='slides'>
<swiper autoplay indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="{{index}}">
<navigator url='javascript:'>
<image mode='widthFix' src='{{item.imgSrc}}'></image>
</navigator>
</swiper-item>
</swiper>
</view>
<!-- 视频列表 -->
<view class='video_wrap'>
<navigator class='video_item' wx:for="{{videosList}}" wx:key="{{index}}">
<!-- 图片容器 -->
<view class='video_img'>
<!-- 图片 -->
<image mode='widthFix' src='{{item.imgSrc}}'></image>
<!-- 播放量 -->
<view class='video_info'>
<!-- 播放量 -->
<view class='play_count_wrap'>
<!-- 图标 -->
<text class='fa fa-play-circle-o'></text>
<!-- 数值 -->
<text class='play_count'>{{item.playCount}}</text>
</view>
<!-- 评论量 -->
<view class='comment_count_row'>
<!-- 图标 -->
<text class='fa fa-commenting-o'></text>
<!-- 数值 -->
<text class='comment_count'>{{item.commentCount}}</text>
</view>
</view>
</view>
<!-- 标题 -->
<view class='video_title'>
{{item.desc}}
</view>
</navigator>
</view>
</view>
index.wxss
/* 改变整个页面的样式 相当于body */
page{
color:#666;
padding: 10rpx;
}
/* 首页导航 */
.nav_wrap{ }
.nav{
white-space: nowrap;
padding:5rpx 0;
}
.nav_item{
padding: 20rpx 45rpx;
font-size: 30rpx;
display: inline-block;
}
/* .nav_item中的.active类 */
.nav_item.active{
border-bottom: 5rpx solid #de688b;
}
/* 轮播图 */
.slides{
margin-top:10rpx;
}
.slides swiper{
height:220rpx;
}
.slides navigator{
width:100%;
height:100%;
}
.slides image{
width:100%;
height:100%;
}
/* 视频列表 */
.video_wrap{
display: flex;
flex-wrap: wrap;
padding:5rpx;
justify-content: space-between;
}
.video_item{
width:48%;
margin-bottom: 20rpx;
}
.video_img{
position: relative;
}
.video_img image{
width:100%;
border-radius: 15rpx;
}
.video_img .video_info{
position: absolute;
bottom:10rpx;
left:;
width:100%;
display: flex;
justify-content: space-around;
color:#fff;
font-size: 24rpx;
}
.video_title{
font-size: 28rpx; display: -webkit-box;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp:;
-webkit-box-orient: vertical;
}
效果：
详情页面
我们先建立一个详情页
app.json
{
"pages": [
"pages/index/index",
"pages/detial/detial"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json"
}
我们先做一个点击跳转的行为，可以跳转到详情页
<navigator url='../detial/detial?id={{item.id}}' class='video_item' wx:for="{{videosList}}" wx:key="{{index}}">
然后再把公共头部组件引进详情页面
detial.json:
{
"usingComponents": {
"MyTitle": "../../components/MyTitle/MyTitle"
},
"navigationBarTitleText": "详情页面"
}
detial.wxml
<view class='main'>
<!-- 公共的头部 -->
<MyTitle></MyTitle>
</view>
效果：
视频详情模块：
detail.js
// pages/detial/detial.js
Page({ /**
* 页面的初始数据
*/
data: {
// 视频信息 防止后台出错 给个默认值
videoInfo:{
author:"牧草君1",
commentCount:1345,
date:"12-15",
id:1,
playCount:"24.9万",
// videoSrc:"http://files.ak48.xyz/2018120195458.mp4",
videoSrc:"http://47.90.213.237/youtube/JU3AL8S3zyE.mp4",
videoTitle:"世界上广告最多的网站判定！真的有10000条广告！【暗物质#2】"
}
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options);
// 获取当前视频id
let videoId=options.id;
this.getCurrentVideo(videoId);
},
/**
* 获得当前视频
*/
getCurrentVideo(videoId){
var self =this;
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videoDetail?id=' + videoId,
success(res){
console.log(res);
if(res.data.code===0){
self.setData({
videoInfo: res.data.data.videoInfo
})
}
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})
detial.wxml:
<view class='main'>
<!-- 公共的头部 -->
<MyTitle></MyTitle> <!-- 视频详情 -->
<view class='video_info'>
<!-- 视频标签 -->
<video src='{{videoInfo.videoSrc}}' controls></video>
<!-- 视频标题 -->
<view class='video_title'>
<text>{{videoInfo.videoTitle}}</text>
<text class='fa fa-angle-down'></text>
</view>
<!-- 视频作者 -->
<view class='video_detail'>
<!-- 作者 -->
<text class='author'>{{videoInfo.author}}</text>
<!-- 播放量 -->
<text class='play_count'>{{videoInfo.playCount}}</text>
<!-- 评论量 -->
<text class='comment_count'>{{videoInfo.commentCount}}弹幕</text>
<!-- 时间 -->
<text class='date'>{{videoInfo.date}}</text>
</view>
</view>
</view>
detial.wxss
/* pages/detial/detial.wxss */
.main{
padding:10rpx;
color:#666;
}
/* 视频 */
.video_info{
margin-top:10rpx;
}
.video_info video{
width:100%;
}
.video_title{
display: flex;
justify-content: space-between;
font-size: 35rpx;
}
.video_detail{
margin-top:5rpx;
font-size: 28rpx;
}
.video_detail .author{
color:#000;
}
.video_detail text{
margin-left:10rpx;
}
效果：
推荐视频模块：
detial.js
// pages/detial/detial.js
Page({ /**
* 页面的初始数据
*/
data: {
// 视频信息 防止后台出错 给个默认值
videoInfo:{
author:"牧草君1",
commentCount:1345,
date:"12-15",
id:1,
playCount:"24.9万",
// videoSrc:"http://files.ak48.xyz/2018120195458.mp4",
videoSrc:"http://47.90.213.237/youtube/JU3AL8S3zyE.mp4",
videoTitle:"世界上广告最多的网站判定！真的有10000条广告！【暗物质#2】"
},
// 推荐列表 防止服务器出错 给一组默认值
othersList:[
{
"imgSrc": "https://i0.hdslb.com/bfs/archive/cb93f69df4a4b9216d5149dc58d9a2ce9436b697.jpg@320w_200h.webp",
"duration": "00:06:28",
"title": "世界上最小的网站！小到只有0.4KB，你信么？【暗物质#1】",
"playMsg": "20.6",
"commentCount": " 445"
},
{
"imgSrc": "https://i1.hdslb.com/bfs/archive/412d5a027a2d4adcd61816e8ce676911c92e7974.jpg@320w_200h.webp",
"duration": "00:02:11",
"title": "改革春风吹满地",
"playMsg": "52.1",
"commentCount": " 564"
},
{
"imgSrc": "https://i0.hdslb.com/bfs/archive/945293f72fdec1eb6228afe9a3f1b9c433544ae5.jpg@320w_200h.webp",
"duration": "00:01:39",
"title": "呲哩呲哩？是不是我大破站太火了！！！",
"playMsg": "27.0",
"commentCount": " 1179"
},
{
"imgSrc": "https://i1.hdslb.com/bfs/archive/2f1c5bd88f39c2a489ce1a7b2f715a102c2edf15.jpg@320w_200h.webp",
"duration": "00:01:03",
"title": "当B站被腾讯收购！会发生什么？",
"playMsg": "117.8",
"commentCount": " 4348"
},
{
"imgSrc": "https://i2.hdslb.com/bfs/archive/873c62e7ab58f5f9f4f890fc66eef1efb62e2fb3.jpg@320w_200h.webp",
"duration": "00:01:01",
"title": "雷锋的故事里就这配音就tm值一个亿",
"playMsg": "163.2",
"commentCount": " 4668"
},
{
"imgSrc": "https://i2.hdslb.com/bfs/archive/a4b08a069be32e489a48094ff62f413571d59d4d.jpg@320w_200h.webp",
"duration": "00:00:16",
"title": "往鲍鱼抹上芥末会发生什么",
"playMsg": "116.5",
"commentCount": " 1135"
},
{
"imgSrc": "https://i0.hdslb.com/bfs/archive/e1acedadb5f51a49f1d74f4540162693010b2e2d.jpg@320w_200h.webp",
"duration": "00:01:42",
"title": "猜猜黑板上画的是什么？绝对不是你们看的那样《学校霸王》",
"playMsg": "99.6",
"commentCount": " 1770"
},
{
"imgSrc": "https://i1.hdslb.com/bfs/archive/f05855bdfc400cd910a4f8e0fee652444bb6ef00.jpg@320w_200h.webp",
"duration": "00:03:53",
"title": "肯德基内部员工才知道，用这几句“暗语”点餐，能让你吃到撑！",
"playMsg": "27.7",
"commentCount": " 436"
},
{
"imgSrc": "https://i0.hdslb.com/bfs/archive/0d3b1e699a2e84260ef5a8a71f102d4982f7a596.jpg@320w_200h.webp",
"duration": "00:00:41",
"title": "bilibili播放量最多的视频？！！",
"playMsg": "35.6",
"commentCount": " 246"
},
{
"imgSrc": "https://i2.hdslb.com/bfs/archive/9a6e89134d6cbead10765950f0ec12fee482a15a.jpg@320w_200h.webp",
"duration": "00:08:58",
"title": "淘宝上最侮辱智商的商品！真是花钱买了个教训",
"playMsg": "4.7",
"commentCount": " 363"
},
{
"imgSrc": "https://i1.hdslb.com/bfs/archive/5052636563f803ef1a5a4c397dce8fd274621c3f.jpg@320w_200h.webp",
"duration": "00:03:48",
"title": "男子醉驾被查扬言“我爷爷是搞原子弹的” 交警一查还真是",
"playMsg": "75.8",
"commentCount": " 931"
},
{
"imgSrc": "https://i0.hdslb.com/bfs/archive/c2c60b08d4ecb10736f54f514c83767aaec1e880.jpg@320w_200h.webp",
"duration": "00:02:53",
"title": "万恶之源:我信你个鬼，你个糟老头子坏的很",
"playMsg": "223.7",
"commentCount": " 3439"
},
{
"imgSrc": "https://i1.hdslb.com/bfs/archive/fe317a18cba364c62becf478f04d835c1b4708f3.jpg@320w_200h.webp",
"duration": "00:02:43",
"title": "打劫遇上一车特警，笨贼视频在youtube上，世界网友都笑死了！",
"playMsg": "209.7",
"commentCount": " 2431"
},
{
"imgSrc": "https://i2.hdslb.com/bfs/archive/f0252c692931a8605d33aa8b4f0471100b24c7c5.jpg@320w_200h.webp",
"duration": "00:01:59",
"title": "B站恐怖事件！明明声音已经关掉却还能听到声音？？？",
"playMsg": "57.8",
"commentCount": " 1099"
},
{
"imgSrc": "https://i1.hdslb.com/bfs/archive/98714070087b590dfb0d0150013c4a0c8da8b8e3.jpg@320w_200h.webp",
"duration": "00:15:31",
"title": "不小心受伤怎么办？教你23个生活的必备技巧@油兔不二字幕组",
"playMsg": "118.8",
"commentCount": " 3425"
},
{
"imgSrc": "https://i0.hdslb.com/bfs/archive/9a4e9d3682e8f930d5ece87c24203105bc09fa1f.jpg@320w_200h.webp",
"duration": "00:01:44",
"title": "女朋友逛完漫展在酒店累趴了，该怎么办呢",
"playMsg": "62.4",
"commentCount": " 966"
},
{
"imgSrc": "https://i0.hdslb.com/bfs/archive/d8bcdd8555027ad27896186da479d21a53218f8b.png@320w_200h.webp",
"duration": "00:01:32",
"title": "能让鲍鱼跳舞！遇到醋就饥忍难耐了吗？还是本能反应？",
"playMsg": "5.7",
"commentCount": " 77"
},
{
"imgSrc": "https://i2.hdslb.com/bfs/archive/0970d603df54320610156a06d2ce8a5a4097b0c6.jpg@320w_200h.webp",
"duration": "00:02:12",
"title": "拘留所里出人才 惊呆了！",
"playMsg": "20.2",
"commentCount": " 363"
},
{
"imgSrc": "https://i1.hdslb.com/bfs/archive/aa27ae344fc81d1f1be2ac4c691a27b43334e553.jpg@320w_200h.webp",
"duration": "00:01:20",
"title": "本以为小情侣在车库约会，8秒后，荒唐画面发生了",
"playMsg": "33.6",
"commentCount": " 326"
},
{
"imgSrc": "https://i1.hdslb.com/bfs/archive/45a3a1258f7e473cc45ab0823729ac0b5618eee6.png@320w_200h.webp",
"duration": "00:02:46",
"title": "朱广权：自信=手拿30米长刀，先让你跑29米。",
"playMsg": "48.2",
"commentCount": " 852"
}
]
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options);
// 获取当前视频id
let videoId=options.id;
// 获取当前视频
this.getCurrentVideo(videoId);
// 获取推荐列表
this.getOthersList(videoId);
},
/**
* 获得当前视频
*/
getCurrentVideo(videoId){
var self =this;
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videoDetail?id=' + videoId,
success(res){
console.log(res);
if(res.data.code===0){
self.setData({
videoInfo: res.data.data.videoInfo
})
}
}
})
},
/**
* 获取推荐视频
*/
getOthersList(videoId){
var self=this;
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/othersList?id=' + videoId,
success(res){
console.log(res)
if(res.data.code===0){
self.setData({
othersList: res.data.data.othersList
})
}
}
}) },
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})
detial.wxml
<view class='main'>
<!-- 公共的头部 -->
<MyTitle></MyTitle> <!-- 视频详情 -->
<view class='video_info'>
<!-- 视频标签 -->
<video src='{{videoInfo.videoSrc}}' controls></video>
<!-- 视频标题 -->
<view class='video_title'>
<text>{{videoInfo.videoTitle}}</text>
<text class='fa fa-angle-down'></text>
</view>
<!-- 视频作者 -->
<view class='video_detail'>
<!-- 作者 -->
<text class='author'>{{videoInfo.author}}</text>
<!-- 播放量 -->
<text class='play_count'>{{videoInfo.playCount}}</text>
<!-- 评论量 -->
<text class='comment_count'>{{videoInfo.commentCount}}弹幕</text>
<!-- 时间 -->
<text class='date'>{{videoInfo.date}}</text>
</view>
</view> <!-- 推荐视频 -->
<view class='other_list'>
<navigator class='item_other' wx:for="{{othersList}}" wx:key="{{index}}">
<!-- 图片容器 -->
<view class='other_img_wrap'>
<image mode='widthFix' src='{{item.imgSrc}}'></image>
</view>
<!-- 视频详情 -->
<view class='other_info'>
<!-- 标题 -->
<view class='other_title'>{{item.title}}</view>
<!-- 播放量 -->
<view class='other_detail'>
<!-- 播放量 -->
<text class='play_count'>{{item.playMsg}}次观看</text>
<!-- 评论量 -->
<text class='comment_count'>{{item.commentCount}}弹幕</text>
</view>
</view>
</navigator>
</view>
</view>
detial.wxss
/* pages/detial/detial.wxss */
.main{
padding:10rpx;
color:#666;
}
/* 视频 */
.video_info{
margin-top:10rpx;
}
.video_info video{
width:100%;
}
.video_title{
display: flex;
justify-content: space-between;
font-size: 35rpx;
}
.video_detail{
margin-top:5rpx;
font-size: 28rpx;
}
.video_detail .author{
color:#000;
}
.video_detail text{
margin-left:10rpx;
} /* 推荐视频 */
.other_list{
margin-top:20rpx;
}
.item_other{
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
}
.item_other .other_img_wrap{
width:38%;
display: flex;
justify-content: center;
align-items: center;
}
.other_img_wrap image{
width:90%;
border-radius: 15rpx;
}
.item_other .other_info{
width:60%;
display: flex;
flex-direction: column;
justify-content: space-around; }
.other_info .other_title{
font-size: 30rpx;
color:#e06f93;
}
.other_info .other_detail{
font-size: 26rpx;
color:#666;
}
评论模块：
detail.js
// pages/detial/detial.js
Page({ /**
* 页面的初始数据
*/
data: {
// 视频信息 防止后台出错 给个默认值
videoInfo:{
author:"牧草君1",
commentCount:1345,
date:"12-15",
id:1,
playCount:"24.9万",
// videoSrc:"http://files.ak48.xyz/2018120195458.mp4",
videoSrc:"http://47.90.213.237/youtube/JU3AL8S3zyE.mp4",
videoTitle:"世界上广告最多的网站判定！真的有10000条广告！【暗物质#2】"
},
// 推荐列表 防止服务器出错 给一组默认值
othersList:[
{
"imgSrc": "https://i0.hdslb.com/bfs/archive/cb93f69df4a4b9216d5149dc58d9a2ce9436b697.jpg@320w_200h.webp",
"duration": "00:06:28",
"title": "世界上最小的网站！小到只有0.4KB，你信么？【暗物质#1】",
"playMsg": "20.6",
"commentCount": " 445"
},
{
"imgSrc": "https://i1.hdslb.com/bfs/archive/412d5a027a2d4adcd61816e8ce676911c92e7974.jpg@320w_200h.webp",
"duration": "00:02:11",
"title": "改革春风吹满地",
"playMsg": "52.1",
"commentCount": " 564"
},
{
"imgSrc": "https://i0.hdslb.com/bfs/archive/945293f72fdec1eb6228afe9a3f1b9c433544ae5.jpg@320w_200h.webp",
"duration": "00:01:39",
"title": "呲哩呲哩？是不是我大破站太火了！！！",
"playMsg": "27.0",
"commentCount": " 1179"
},
{
"imgSrc": "https://i1.hdslb.com/bfs/archive/2f1c5bd88f39c2a489ce1a7b2f715a102c2edf15.jpg@320w_200h.webp",
"duration": "00:01:03",
"title": "当B站被腾讯收购！会发生什么？",
"playMsg": "117.8",
"commentCount": " 4348"
},
{
"imgSrc": "https://i2.hdslb.com/bfs/archive/873c62e7ab58f5f9f4f890fc66eef1efb62e2fb3.jpg@320w_200h.webp",
"duration": "00:01:01",
"title": "雷锋的故事里就这配音就tm值一个亿",
"playMsg": "163.2",
"commentCount": " 4668"
},
{
"imgSrc": "https://i2.hdslb.com/bfs/archive/a4b08a069be32e489a48094ff62f413571d59d4d.jpg@320w_200h.webp",
"duration": "00:00:16",
"title": "往鲍鱼抹上芥末会发生什么",
"playMsg": "116.5",
"commentCount": " 1135"
},
{
"imgSrc": "https://i0.hdslb.com/bfs/archive/e1acedadb5f51a49f1d74f4540162693010b2e2d.jpg@320w_200h.webp",
"duration": "00:01:42",
"title": "猜猜黑板上画的是什么？绝对不是你们看的那样《学校霸王》",
"playMsg": "99.6",
"commentCount": " 1770"
},
{
"imgSrc": "https://i1.hdslb.com/bfs/archive/f05855bdfc400cd910a4f8e0fee652444bb6ef00.jpg@320w_200h.webp",
"duration": "00:03:53",
"title": "肯德基内部员工才知道，用这几句“暗语”点餐，能让你吃到撑！",
"playMsg": "27.7",
"commentCount": " 436"
},
{
"imgSrc": "https://i0.hdslb.com/bfs/archive/0d3b1e699a2e84260ef5a8a71f102d4982f7a596.jpg@320w_200h.webp",
"duration": "00:00:41",
"title": "bilibili播放量最多的视频？！！",
"playMsg": "35.6",
"commentCount": " 246"
},
{
"imgSrc": "https://i2.hdslb.com/bfs/archive/9a6e89134d6cbead10765950f0ec12fee482a15a.jpg@320w_200h.webp",
"duration": "00:08:58",
"title": "淘宝上最侮辱智商的商品！真是花钱买了个教训",
"playMsg": "4.7",
"commentCount": " 363"
},
{
"imgSrc": "https://i1.hdslb.com/bfs/archive/5052636563f803ef1a5a4c397dce8fd274621c3f.jpg@320w_200h.webp",
"duration": "00:03:48",
"title": "男子醉驾被查扬言“我爷爷是搞原子弹的” 交警一查还真是",
"playMsg": "75.8",
"commentCount": " 931"
},
{
"imgSrc": "https://i0.hdslb.com/bfs/archive/c2c60b08d4ecb10736f54f514c83767aaec1e880.jpg@320w_200h.webp",
"duration": "00:02:53",
"title": "万恶之源:我信你个鬼，你个糟老头子坏的很",
"playMsg": "223.7",
"commentCount": " 3439"
},
{
"imgSrc": "https://i1.hdslb.com/bfs/archive/fe317a18cba364c62becf478f04d835c1b4708f3.jpg@320w_200h.webp",
"duration": "00:02:43",
"title": "打劫遇上一车特警，笨贼视频在youtube上，世界网友都笑死了！",
"playMsg": "209.7",
"commentCount": " 2431"
},
{
"imgSrc": "https://i2.hdslb.com/bfs/archive/f0252c692931a8605d33aa8b4f0471100b24c7c5.jpg@320w_200h.webp",
"duration": "00:01:59",
"title": "B站恐怖事件！明明声音已经关掉却还能听到声音？？？",
"playMsg": "57.8",
"commentCount": " 1099"
},
{
"imgSrc": "https://i1.hdslb.com/bfs/archive/98714070087b590dfb0d0150013c4a0c8da8b8e3.jpg@320w_200h.webp",
"duration": "00:15:31",
"title": "不小心受伤怎么办？教你23个生活的必备技巧@油兔不二字幕组",
"playMsg": "118.8",
"commentCount": " 3425"
},
{
"imgSrc": "https://i0.hdslb.com/bfs/archive/9a4e9d3682e8f930d5ece87c24203105bc09fa1f.jpg@320w_200h.webp",
"duration": "00:01:44",
"title": "女朋友逛完漫展在酒店累趴了，该怎么办呢",
"playMsg": "62.4",
"commentCount": " 966"
},
{
"imgSrc": "https://i0.hdslb.com/bfs/archive/d8bcdd8555027ad27896186da479d21a53218f8b.png@320w_200h.webp",
"duration": "00:01:32",
"title": "能让鲍鱼跳舞！遇到醋就饥忍难耐了吗？还是本能反应？",
"playMsg": "5.7",
"commentCount": " 77"
},
{
"imgSrc": "https://i2.hdslb.com/bfs/archive/0970d603df54320610156a06d2ce8a5a4097b0c6.jpg@320w_200h.webp",
"duration": "00:02:12",
"title": "拘留所里出人才 惊呆了！",
"playMsg": "20.2",
"commentCount": " 363"
},
{
"imgSrc": "https://i1.hdslb.com/bfs/archive/aa27ae344fc81d1f1be2ac4c691a27b43334e553.jpg@320w_200h.webp",
"duration": "00:01:20",
"title": "本以为小情侣在车库约会，8秒后，荒唐画面发生了",
"playMsg": "33.6",
"commentCount": " 326"
},
{
"imgSrc": "https://i1.hdslb.com/bfs/archive/45a3a1258f7e473cc45ab0823729ac0b5618eee6.png@320w_200h.webp",
"duration": "00:02:46",
"title": "朱广权：自信=手拿30米长刀，先让你跑29米。",
"playMsg": "48.2",
"commentCount": " 852"
}
],
// 评论列表
commentData:{
commentTotalCount:454,
commentList: [
{
"userIconSrc": "https://i2.hdslb.com/bfs/face/fe81d93c5beb92557474f48551d3b4966eadeeef.jpg@60w_60h.webp",
"username": "峰岛达裕",
"commentInfo": "什么？居然不是某些网站的澳门皇家赌场？",
"commentDate": "12-15"
},
{
"userIconSrc": "https://i0.hdslb.com/bfs/face/54923922eea6532c2dff95e45743b6a1203c0230.jpg@60w_60h.webp",
"username": "黑狌白鸾",
"commentInfo": "鲁迅说过，如果你有一个苹果，我有一个苹果，我们交换，一人还是一个苹果，如果你有一个网站，我有一个网站，我们交换那我们双方就有两个网站",
"commentDate": "12-15"
},
{
"userIconSrc": "https://i1.hdslb.com/bfs/face/d2fa6637d952d176a13c706f5efd179f52a12367.jpg@60w_60h.webp",
"username": "马猴烧酒柊筱娅",
"commentInfo": "等等，那这样的话，牧草君岂不是一个视频打了1w多个广告[小电视_吃惊]",
"commentDate": "12-15"
},
{
"userIconSrc": "https://i1.hdslb.com/bfs/face/c605ce1a2f47b049ab7f271aa228bb8e96a43bf0.jpg@60w_60h.webp",
"username": "NAN某",
"commentInfo": "我经常逛的那些网站也有很多广告(｀・ω・´)",
"commentDate": "12-15"
},
{
"userIconSrc": "https://i0.hdslb.com/bfs/face/54923922eea6532c2dff95e45743b6a1203c0230.jpg@60w_60h.webp",
"username": "牧草君",
"commentInfo": "你们赶快去这个王网站了里面找找好玩的，我已经找到好几个(✪▽✪)好康的网站了[小电视_赞]",
"commentDate": "12-15"
}
]
} }, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options);
// 获取当前视频id
let videoId=options.id;
// 获取当前视频
this.getCurrentVideo(videoId);
// 获取推荐列表
this.getOthersList(videoId);
// 获取评论列表
this.getCommentList(videoId);
},
/**
* 获得当前视频
*/
getCurrentVideo(videoId){
var self =this;
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videoDetail?id=' + videoId,
success(res){
console.log(res);
if(res.data.code===0){
self.setData({
videoInfo: res.data.data.videoInfo
})
}
}
})
},
/**
* 获取推荐视频
*/
getOthersList(videoId){
var self=this;
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/othersList?id=' + videoId,
success(res){
console.log(res)
if(res.data.code===0){
self.setData({
othersList: res.data.data.othersList
})
}
}
}) },
/**
* 获取评论列表
*/
getCommentList(videoId){
var self=this;
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/commentsList?id=' + videoId,
success(res){
console.log(res)
if(res.data.code===0){
self.setData({
commentData: res.data.data.commentData
})
}
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})
detail.wxml
<view class='main'>
<!-- 公共的头部 -->
<MyTitle></MyTitle> <!-- 视频详情 -->
<view class='video_info'>
<!-- 视频标签 -->
<video src='{{videoInfo.videoSrc}}' controls></video>
<!-- 视频标题 -->
<view class='video_title'>
<text>{{videoInfo.videoTitle}}</text>
<text class='fa fa-angle-down'></text>
</view>
<!-- 视频作者 -->
<view class='video_detail'>
<!-- 作者 -->
<text class='author'>{{videoInfo.author}}</text>
<!-- 播放量 -->
<text class='play_count'>{{videoInfo.playCount}}</text>
<!-- 评论量 -->
<text class='comment_count'>{{videoInfo.commentCount}}弹幕</text>
<!-- 时间 -->
<text class='date'>{{videoInfo.date}}</text>
</view>
</view> <!-- 推荐视频 -->
<view class='other_list'>
<navigator class='item_other' wx:for="{{othersList}}" wx:key="{{index}}">
<!-- 图片容器 -->
<view class='other_img_wrap'>
<image mode='widthFix' src='{{item.imgSrc}}'></image>
</view>
<!-- 视频详情 -->
<view class='other_info'>
<!-- 标题 -->
<view class='other_title'>{{item.title}}</view>
<!-- 播放量 -->
<view class='other_detail'>
<!-- 播放量 -->
<text class='play_count'>{{item.playMsg}}次观看</text>
<!-- 评论量 -->
<text class='comment_count'>{{item.commentCount}}弹幕</text>
</view>
</view>
</navigator>
</view> <!-- 评论模块 -->
<view class='comment_wrap'>
<view class='comment_title'>
评论（{{commentData.commentTotalCount}}）
</view>
<view class='comment_list'>
<view class='comment_item' wx:for="{{commentData.commentList}}" wx:key="{{index}}">
<!-- 左侧 -->
<view class='comment_user'>
<image mode='widthFix' src='{{item.userIconSrc}}'></image>
</view>
<!-- 右侧 -->
<view class='comment_info'>
<view class='comment_detail'>
<text class='author'>{{item.username}}</text>
<text class='date'>{{item.commentDate}}</text>
</view>
<view class='comment_content'>{{item.commentInfo}}</view>
</view>
</view>
</view>
</view>
</view>
detail.wxss
/* pages/detial/detial.wxss */
.main{
padding:10rpx;
color:#666;
}
/* 视频 */
.video_info{
margin-top:10rpx;
}
.video_info video{
width:100%;
}
.video_title{
display: flex;
justify-content: space-between;
font-size: 35rpx;
}
.video_detail{
margin-top:5rpx;
font-size: 28rpx;
}
.video_detail .author{
color:#000;
}
.video_detail text{
margin-left:10rpx;
} /* 推荐视频 */
.other_list{
margin-top:20rpx;
}
.item_other{
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
}
.item_other .other_img_wrap{
width:38%;
display: flex;
justify-content: center;
align-items: center;
}
.other_img_wrap image{
width:90%;
border-radius: 15rpx;
}
.item_other .other_info{
width:60%;
display: flex;
flex-direction: column;
justify-content: space-around; }
.other_info .other_title{
font-size: 30rpx;
color:#e06f93;
}
.other_info .other_detail{
font-size: 26rpx;
color:#666;
} /* 评论列表 */ .comment_wrap{
margin-top:10rpx;
}
.comment_title{
padding: 10rpx;
font-size: 28rpx;
}
.comment_list{}
.comment_item{
margin-bottom: 10rpx;
padding: 10rpx;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #666;
}
.comment_item .comment_user{
flex:;
display: flex;
justify-content: center;
align-items: center;
}
.comment_user image{
width:60%;
}
.comment_item .comment_info{
flex:;
display: flex;
flex-direction:column;
justify-content: space-around;
}
.comment_info .comment_detail{
display: flex;
justify-content: space-between;
}
.comment_detail .author{
font-size: 28rpx;
color:#000;
}
.comment_detail .date{
font-size: 24rpx;
color:#666;
}
.comment_info .comment_content{
font-size: 28rpx;
color:#000000;
}
效果：
完！
小程序demo项目实践的更多相关文章
- 微信小程序demo
微信小程序demo github地址 去年小程序刚发布时特别火,赶潮流做了个demo.感觉小程序开发还是比较简单的,主要是官方文档写得比较好,遗憾的是很多API需要微信认证才能使用. 由于小程序包大小 ...
- 微信小程序demo－环球小镇
微信小程序-环球小镇说明:实现了环球小镇(huanqiuxiaozhen.com)移动端商城客户端部分功能,包括首页,分类,购物车,帐户,品牌列表,商品详情等功能. 项目下载:http://bb ...
- 微信小程序< 3 > ~ 微信小程序开源项目合集
简介 移动开发者想学习微信小程序需要学习一点HTML ,CSS和JS才能够比较快速的上手,参考自己学习Android学习过程,阅读源码是一个很好的方式,所以才收集了一些WeApp的开源项目. awes ...
- 番外篇！全球首个微信应用号开发教程！小程序 DEMO 视频奉上！
大家好,我是博卡君.经过国庆节的七天假期,相信很多朋友都已经研究出自己的小程序 demo 了吧?我最近也利用休息时间关注了一下网上关于小程序开发的讨论,今天就利用这个番外篇谈谈自己对小程序的一些想法吧 ...
- 微信小程序DEMO初体验
小程序虽然被炒的很热,但是绝大部分人却从未亲自体验过,在2017年的上班第一天,献上一个小程序DEMO,您可以体验! 注意:由于微信限制,只能使用扫一扫来体验下方小程序DEMO. DEMO首页截图如下 ...
- 近期热门微信小程序demo源码下载汇总
近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...
- 微信小程序mpvue项目使用WuxWeapp前端UI组件
前言:这是一篇简单粗暴的使用指南 在最近的小程序项目里前端UI框架最后选择使用WuxWeapp,这篇文章记录一下如何在小程序mpvue项目中使用该UI组件. 步骤一:下载源码 (地址在这里)主要是里面 ...
- 微信小程序学习二 微信小程序的项目结构
进来之后可以看到五个文件和两个文件夹,一般新建的小程序项目都是这种格式,但有些可能会不一样,不用担心,因为我们所要关注的文件是不会变的 pages 小程序的页面放置文件夹,每一个页面(page)包含四 ...
- 京东购物小程序 | Taro3 项目分包实践
背景 京东购物小程序作为京东小程序业务流量的主要入口,承载着许多的活动和页面,而很多的活动在小程序开展的同时,也会在京东 APP 端进行同步的 H5 端页面的投放.这时候,一个相同的活动,需要同时开发 ...
随机推荐
- 如何使用Cloud Foundry CLI把一个应用推送到MindSphere
一.登录MindSphere - Cloud Foundry 1. 安装Cloud Foundry CLI (Command Line Interface). 下载地址:https://github. ...
- 音视频入门-13-使用开源库生成PNG图片
* 音视频入门文章目录 * RGB-to-PNG 回顾 上一篇 [手动生成一张PNG图片] 根据 [PNG文件格式详解] 一步一步地手动实现了将 RGB 数据生成了一张 PNG 图片. 有许多开源的 ...
- ef core2.2 mysql迁移问题
前段时间,遇到的是ef core mysql迁移的时候,bool类型会自动yingsheweishort的问题,需要手动更正一下今天测试的时候,遇到了MySQL数据表修改后迁移的问题. 问题详情如下 ...
- 【转载】C#指定文件夹下面的所有内容复制到目标文件夹下面
在涉及到文件夹操作的过程中,有时候需要将文件夹下的所有内容复制拷贝到另一个文件夹,在C#的开发中有时候会遇到这个功能需求将指定文件夹下所有的内容复制到另一个文件夹,这个过程需要遍历所有的文件和目录.此 ...
- HTML的发展历史
HTML是Web统一语言,这些容纳在尖括号里的简单标签,构成了如今的Web,1991年,Tim Berners-Lee编写了一份叫做“HTML标签”的文档,里面包含了大约20个用来标记网页的HTML标 ...
- js 单引号和双引号相互替换的实现方法
1.双引号替换成单引号 var domo = JSON.stringify(address).replace(/\"/g,"'"); var a = {a:1,b:2}; ...
- EWA不能及时通过邮件接收
1. 确保EWA已经配置成功.可以通过SW_workcenter查看 2.确保EWA的邮箱设置成功 3. 检查EWAreport产生的时间 卫星系统:SDCCN 在tab"done" ...
- Python：GeoJson格式的多边形裁剪Tiff影像并计算栅格数值
JSON是通过键值对表示数据对象的一种格式,其全称为JavaScript Object Notation,它采用完全独立于编程语言的文本格式来存储和表示数据,轻量级.简洁清晰的层次结构.容易解析等特点 ...
- dubbo spring 的使用
1:项目的架构,本项目使用的maven,分为三个模块. api 为接口 , server 为服务端 consumer 为调用端 2:api的模块结构 该模块主要是定义接口和实体.没什么具体介绍的. ...
- Winserver-Exception from HRESULT: 0x800A03EC
Q: 程序在VS中手动执行没问题,但是排了JOB报异常:Exception from HRESULT: 0x800A03EC at Excel.WorkbookClass.SaveAs() A: ...