今天开始做一个简单的小程序,做的过程中势必会有一些知识经验需要记录

项目初始化

首先创建好一个小程序项目,在app.wxss里面将自带的css样式统统去除,加上自己写的初始化样式

小程序目前不支持*号通配符

  1. page,view,image,swiper,swiper-item,navigator,video{
  2. box-sizing: border-box;
  3. }

将app.js中的原始逻辑去除一下,然后输入app+回车,会自动列出一个初始化的js结构

之后,再清理一下首页中的index.wxml、index.wxss、index.js中的内容;

同样的在index.js中输入Page+回车,初始化一下代码结构

编辑头部组件

首先在跟目录建立components文件夹,然后建立MyTitle文件夹,再在这个文件夹上右键建立component,名字叫MyTitle

然后我们先让这个title组件在首页汇总显示出来,在index.json中设置一下

  1. {
  2. "usingComponents": {
  3. "MyTitle":"../../components/MyTitle/MyTitle"
  4. },
  5. "navigationBarTitleText": "bilibili"
  6. }

然后在index.wxml中引入

  1. <view class='main'>
  2. <!-- 头部公共标签 -->
  3. <MyTitle></MyTitle>
  4. </view>

然后将myTitle的结构和样式写一下,可以复习一些flex布局

MyTitle.wxml:

  1. <view class='my_title'>
  2. <!-- logo -->
  3. <navigator class='logo'>
  4. <image class='logo_img' style='width:140rpx;height:60rpx;' src='../../icons/logo.png'></image>
  5. </navigator>
  6. <!-- 搜索 -->
  7. <view class='search_icon'>
  8. <image style='width:44rpx;height:44rpx;' src='../../icons/search.png'></image>
  9. </view>
  10. <!-- 用户 -->
  11. <view class='user_icon'>
  12. <image style='width:54rpx;height:60rpx;' src='../../icons/user.png'></image>
  13. </view>
  14. <!-- 下载按钮 -->
  15. <view class='down_app'>
  16. 下载 App
  17. </view>
  18. </view>

MyTitle.wxss:

  1. .my_title{
  2. display: flex;
  3. align-items: center;
  4. padding: 10rpx;
  5. background-color: #ffffff;
  6. }
  7. .logo{
  8. flex:;
  9. }
  10. .search_icon{
  11. flex:;
  12. display: flex;
  13. justify-content: center;
  14. align-items: center;
  15.  
  16. }
  17. .user_icon{
  18. flex:;
  19. display: flex;
  20. justify-content: center;
  21. align-items: center;
  22. }
  23.  
  24. .down_app{
  25. flex:;
  26. display: flex;
  27. justify-content: center;
  28. align-items: center;
  29. font-size:30rpx;
  30. background-color:pink;
  31. color:#fff;
  32. border-radius: 10rpx;
  33. padding:10rpx;
  34. }

编辑头部导航

我们的导航数据是通过接口拿到的,所以要先请求接口拿到数据再写

index.js:

  1. Page({
  2.  
  3. /**
  4. * 页面的初始数据
  5. */
  6. data: {
  7. // 被点击首页导航栏的索引 默认是第一个
  8. currentIndexNav:0,
  9. // 首页导航数据
  10. navList:[//放置请求数据失败 出此下策
  11. { text: '首页', id: 0 },
  12. { text: '动画', id: 1 },
  13. { text: '番剧', id: 2 },
  14. { text: '国创', id: 3 },
  15. { text: '音乐', id: 4 },
  16. { text: '舞蹈', id: 5 },
  17. { text: '科技', id: 6 },
  18. { text: '游戏', id: 7 },
  19. { text: '娱乐', id: 8 },
  20. { text: '鬼畜', id: 9 },
  21. { text: '电影', id: 10 },
  22. { text: '电视剧', id: 11 },
  23. { text: '纪录片', id: 12 },
  24. { text: '影视', id: 13 },
  25. { text: '时尚', id: 14 },
  26. { text: '生活', id: 15 },
  27. { text: '广告', id: 16 },
  28. { text: '直播', id: 17 },
  29. { text: '相簿', id: 18 }
  30. ]
  31.  
  32. },
  33. // 点击首页导航按钮
  34. activeNav(e){
  35. // console.log(123)
  36. this.setData({
  37. currentIndexNav:e.target.dataset.index
  38. })
  39. },
  40. // 获取首页导航数据
  41. getNavlist(){
  42. var self=this;
  43. // 利用小程序内置的发送请求的方法
  44. wx.request({
  45. url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList',
  46. success(res){
  47. console.log(res)
  48. if(res.data.code===0){//如果请求成功
  49. self.setData({
  50. navList:res.data.data.navList
  51. });
  52. }
  53. }
  54. })
  55. },
  56. /**
  57. * 生命周期函数--监听页面加载
  58. */
  59. onLoad: function (options) {
  60. //获取首页导航数据
  61. this.getNavlist();
  62. },
  63.  
  64. /**
  65. * 生命周期函数--监听页面初次渲染完成
  66. */
  67. onReady: function () {
  68.  
  69. },
  70.  
  71. /**
  72. * 生命周期函数--监听页面显示
  73. */
  74. onShow: function () {
  75.  
  76. },
  77.  
  78. /**
  79. * 生命周期函数--监听页面隐藏
  80. */
  81. onHide: function () {
  82.  
  83. },
  84.  
  85. /**
  86. * 生命周期函数--监听页面卸载
  87. */
  88. onUnload: function () {
  89.  
  90. },
  91.  
  92. /**
  93. * 页面相关事件处理函数--监听用户下拉动作
  94. */
  95. onPullDownRefresh: function () {
  96.  
  97. },
  98.  
  99. /**
  100. * 页面上拉触底事件的处理函数
  101. */
  102. onReachBottom: function () {
  103.  
  104. },
  105.  
  106. /**
  107. * 用户点击右上角分享
  108. */
  109. onShareAppMessage: function () {
  110.  
  111. }
  112. })

上面是请求b站上的一个接口,如果是临时调试用的可以在开发者工具中的 详情 按钮下,将下图选项勾选上

另一种方法,如果要长时间用,不想这样临时设置,需要登录自己的小程序,在开发中的开发设置下的服务器域名下设置,文档上面介绍的很详细(如果设置端口,请求时一定要带上端口)

然后来写一下顶部导航的结构与样式

index.wxml:

  1. <view class='main'>
  2. <!-- 头部公共标签 -->
  3. <MyTitle></MyTitle>
  4. <!-- 首页导航 -->
  5. <view class='nav_wrap'>
  6. <scroll-view class='nav' scroll-x>
  7. <view bindtap="activeNav" data-index="{{index}}" class="nav_item {{index===currentIndexNav?'active':''}}" wx:for="{{navList}}" wx:key="{{index}}">{{item.text}}</view>
  8. </scroll-view>
  9. </view>
  10. </view>

index.wxss:

  1. /* 改变整个页面的样式 相当于body */
  2. page{
  3. color:#666;
  4. }
  5. /* 首页导航 */
  6. .nav_wrap{
  7.  
  8. }
  9. .nav{
  10. white-space: nowrap;
  11. padding:5rpx 0;
  12. }
  13. .nav_item{
  14. padding: 20rpx 45rpx;
  15. font-size: 30rpx;
  16. display: inline-block;
  17. }
  18. /* .nav_item中的.active类 */
  19. .nav_item.active{
  20. border-bottom: 5rpx solid #de688b;
  21. }

效果:

写轮播图

首先请求到数据,因为接口不稳定,所以定义变量时给了默认值

index.js

  1. Page({
  2.  
  3. /**
  4. * 页面的初始数据
  5. */
  6. data: {
  7. // 被点击首页导航栏的索引 默认是第一个
  8. currentIndexNav:0,
  9. // 首页导航数据
  10. navList:[//放置请求数据失败 出此下策
  11. { text: '首页', id: 0 },
  12. { text: '动画', id: 1 },
  13. { text: '番剧', id: 2 },
  14. { text: '国创', id: 3 },
  15. { text: '音乐', id: 4 },
  16. { text: '舞蹈', id: 5 },
  17. { text: '科技', id: 6 },
  18. { text: '游戏', id: 7 },
  19. { text: '娱乐', id: 8 },
  20. { text: '鬼畜', id: 9 },
  21. { text: '电影', id: 10 },
  22. { text: '电视剧', id: 11 },
  23. { text: '纪录片', id: 12 },
  24. { text: '影视', id: 13 },
  25. { text: '时尚', id: 14 },
  26. { text: '生活', id: 15 },
  27. { text: '广告', id: 16 },
  28. { text: '直播', id: 17 },
  29. { text: '相簿', id: 18 }
  30. ],
  31. // 轮播数据
  32. swiperList:[//防止请求数据失败,出此下策
  33. {"link":"","imgSrc":"https://i0.hdslb.com/bfs/archive/bf2aa1f18ccae9ecae4cb666417f75da951ee2f4.jpg@480w_300h.webp"},
  34. { "link": "", "imgSrc": "https://i0.hdslb.com/bfs/archive/8860d7a57a9b1992c112ee56a35444cfc445108b.jpg@480w_300h.webp" },
  35. { "link": "", "imgSrc": "https://i0.hdslb.com/bfs/archive/82232bca677f06d69734159653cf29db82ff5d9c.png@480w_300h.webp" },
  36. { "link": "", "imgSrc": "https://i0.hdslb.com/bfs/archive/28d93d03968baa475a2c3982640736a66b4405c3.jpg@480w_300h.webp" }
  37. ]
  38.  
  39. },
  40. // 点击首页导航按钮
  41. activeNav(e){
  42. // console.log(123)
  43. this.setData({
  44. currentIndexNav:e.target.dataset.index
  45. })
  46. },
  47. // 获取首页导航数据
  48. getNavlist(){
  49. var self=this;
  50. // 利用小程序内置的发送请求的方法
  51. wx.request({
  52. url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList',
  53. success(res){
  54. console.log(res)
  55. if(res.data.code===0){//如果请求成功
  56. self.setData({
  57. navList:res.data.data.navList
  58. });
  59. }
  60. }
  61. })
  62. },
  63. // 获取轮播图数据
  64. getSwiperList(){
  65. var self = this;
  66. wx.request({
  67. url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/swiperList',
  68. success(res){
  69. console.log(res);
  70. if(res.data.code===0){
  71. self.setData({
  72. swiperList:res.data.data.swiperList
  73. })
  74. }
  75. }
  76. })
  77. },
  78. /**
  79. * 生命周期函数--监听页面加载
  80. */
  81. onLoad: function (options) {
  82. //获取首页导航数据
  83. this.getNavlist();
  84. //获取轮播图数据
  85. this.getSwiperList();
  86. },
  87.  
  88. /**
  89. * 生命周期函数--监听页面初次渲染完成
  90. */
  91. onReady: function () {
  92.  
  93. },
  94.  
  95. /**
  96. * 生命周期函数--监听页面显示
  97. */
  98. onShow: function () {
  99.  
  100. },
  101.  
  102. /**
  103. * 生命周期函数--监听页面隐藏
  104. */
  105. onHide: function () {
  106.  
  107. },
  108.  
  109. /**
  110. * 生命周期函数--监听页面卸载
  111. */
  112. onUnload: function () {
  113.  
  114. },
  115.  
  116. /**
  117. * 页面相关事件处理函数--监听用户下拉动作
  118. */
  119. onPullDownRefresh: function () {
  120.  
  121. },
  122.  
  123. /**
  124. * 页面上拉触底事件的处理函数
  125. */
  126. onReachBottom: function () {
  127.  
  128. },
  129.  
  130. /**
  131. * 用户点击右上角分享
  132. */
  133. onShareAppMessage: function () {
  134.  
  135. }
  136. })

index.wxml

  1. <view class='main'>
  2. <!-- 头部公共标签 -->
  3. <MyTitle></MyTitle>
  4. <!-- 首页导航 -->
  5. <view class='nav_wrap'>
  6. <scroll-view class='nav' scroll-x>
  7. <view bindtap="activeNav" data-index="{{index}}" class="nav_item {{index===currentIndexNav?'active':''}}" wx:for="{{navList}}" wx:key="{{index}}">{{item.text}}</view>
  8. </scroll-view>
  9. </view>
  10. <!-- 轮播图 -->
  11. <view class='slides'>
  12. <swiper autoplay indicator-dots circular>
  13. <swiper-item wx:for="{{swiperList}}" wx:key="{{index}}">
  14. <navigator>
  15. <image mode='widthFix' src='{{item.imgSrc}}'></image>
  16. </navigator>
  17. </swiper-item>
  18. </swiper>
  19. </view>
  20. </view>

index.wxss

  1. /* 改变整个页面的样式 相当于body */
  2. page{
  3. color:#666;
  4. padding: 10rpx;
  5. }
  6. /* 首页导航 */
  7. .nav_wrap{
  8.  
  9. }
  10. .nav{
  11. white-space: nowrap;
  12. padding:5rpx 0;
  13. }
  14. .nav_item{
  15. padding: 20rpx 45rpx;
  16. font-size: 30rpx;
  17. display: inline-block;
  18. }
  19. /* .nav_item中的.active类 */
  20. .nav_item.active{
  21. border-bottom: 5rpx solid #de688b;
  22. }
  23. /* 轮播图 */
  24. .slides{
  25. margin-top:10rpx;
  26. }
  27. .slides swiper{
  28. height:220rpx;
  29. border:1px solid red;
  30. }
  31. .slides navigator{
  32. width:100%;
  33. height:100%;
  34. }
  35. .slides image{
  36. width:100%;
  37. height:100%;
  38. }

视频列表

首先获取到视频列表数据:index.js

  1. Page({
  2.  
  3. /**
  4. * 页面的初始数据
  5. */
  6. data: {
  7. // 被点击首页导航栏的索引 默认是第一个
  8. currentIndexNav:0,
  9. // 首页导航数据
  10. navList:[//放置请求数据失败 出此下策
  11. { text: '首页', id: 0 },
  12. { text: '动画', id: 1 },
  13. { text: '番剧', id: 2 },
  14. { text: '国创', id: 3 },
  15. { text: '音乐', id: 4 },
  16. { text: '舞蹈', id: 5 },
  17. { text: '科技', id: 6 },
  18. { text: '游戏', id: 7 },
  19. { text: '娱乐', id: 8 },
  20. { text: '鬼畜', id: 9 },
  21. { text: '电影', id: 10 },
  22. { text: '电视剧', id: 11 },
  23. { text: '纪录片', id: 12 },
  24. { text: '影视', id: 13 },
  25. { text: '时尚', id: 14 },
  26. { text: '生活', id: 15 },
  27. { text: '广告', id: 16 },
  28. { text: '直播', id: 17 },
  29. { text: '相簿', id: 18 }
  30. ],
  31. // 轮播数据
  32. swiperList:[//防止请求数据失败,出此下策
  33. {"link":"","imgSrc":"https://i0.hdslb.com/bfs/archive/bf2aa1f18ccae9ecae4cb666417f75da951ee2f4.jpg@480w_300h.webp"},
  34. { "link": "", "imgSrc": "https://i0.hdslb.com/bfs/archive/8860d7a57a9b1992c112ee56a35444cfc445108b.jpg@480w_300h.webp" },
  35. { "link": "", "imgSrc": "https://i0.hdslb.com/bfs/archive/82232bca677f06d69734159653cf29db82ff5d9c.png@480w_300h.webp" },
  36. { "link": "", "imgSrc": "https://i0.hdslb.com/bfs/archive/28d93d03968baa475a2c3982640736a66b4405c3.jpg@480w_300h.webp" }
  37. ],
  38. //视频列表数据
  39. videosList:[
  40. {
  41. commentCount:"1345",
  42. desc:"世界上广告最多的网站判定!真的有10000条广告!【暗物质#2】",
  43. id:0,
  44. imgSrc:"https://i0.hdslb.com/bfs/archive/0563c3df12637178e8b08858e5fd11e4a6906acc.jpg@320w_200h.webp",
  45. link:"",
  46. playCount:"24.9万",
  47. videoSrc:"http://files.ak48.xyz/2018120195458.mp4"
  48. },
  49. {
  50. commentCount: "7825",
  51. desc: "【圣地亚哥金曲】藏,超好听的中国风电音鬼畜!",
  52. id: 1,
  53. imgSrc: "https://i0.hdslb.com/bfs/archive/b08463bc1257b6294bad1e1646a3203f9f3a0c60.jpg@320w_200h.webp",
  54. link: "",
  55. playCount: "63.8万",
  56. videoSrc: "http://files.ak48.xyz/20181219211856.mp4"
  57. },
  58. {
  59. commentCount: "7825",
  60. desc: "迈克尔杰克逊封神的12秒,无人能做到",
  61. id: 2,
  62. imgSrc: "https://i0.hdslb.com/bfs/archive/02cf0e3a1fd52f80763fd51ee7fae69e51cf173c.jpg@320w_200h.webp",
  63. link: "",
  64. playCount: "63.8万",
  65. videoSrc: "http://files.ak48.xyz/20181219211920.mp4"
  66. },
  67. {
  68. commentCount: "1066",
  69. desc: "【2018】年度影视混剪 Ready Story 2018【混剪】",
  70. id: 3,
  71. imgSrc: "https://i0.hdslb.com/bfs/archive/dc7147ffa4e11a2fffa84b295b2f2bdbbfe3e6d7.jpg@320w_200h.webp",
  72. link: "",
  73. playCount: "40.0万",
  74. videoSrc: "http://files.ak48.xyz/20181219211910.mp4"
  75. },
  76. {
  77. commentCount: "719",
  78. desc: "当你觉得扛不住的时候来看看这段视频",
  79. id: 4,
  80. imgSrc: "https://i2.hdslb.com/bfs/archive/2cc604557cab1f6fd79591981891467f7b825010.jpg@320w_200h.webp",
  81. link: "",
  82. playCount: "82.7万",
  83. videoSrc: ""
  84. },{
  85. commentCount: "817",
  86. desc: "【1080/漫威/衔接踩点向】前方高能!带你体验完美流畅的衔接踩点视觉盛宴!",
  87. id: 5,
  88. imgSrc: "https://i1.hdslb.com/bfs/archive/0fc171eaa7bf6b81cf5427fc57db104a4ef719d7.jpg@320w_200h.webp",
  89. link: "",
  90. playCount: "28.9万",
  91. videoSrc: ""
  92. },{
  93. commentCount: "7149",
  94. desc: "【木鱼微剧场】诺兰作品《星际穿越》,严谨的科学精神与深刻人文关怀(Re:C)",
  95. id: 6,
  96. imgSrc: "https://i0.hdslb.com/bfs/archive/0bf251d3f3b2cb589532aa24eaea140b312f7765.jpg@320w_200h.webp",
  97. link: "",
  98. playCount: "44.6万",
  99. videoSrc: ""
  100. },{
  101. commentCount: "7825",
  102. desc: "【嘻咦啊看】其实很多人一辈子都不懂得怎样道歉",
  103. id: 7,
  104. imgSrc: "https://i1.hdslb.com/bfs/archive/4a4155cf25b38da958e64b531709bca37927c82b.jpg@320w_200h.webp",
  105. link: "",
  106. playCount: "63.8万",
  107. videoSrc: ""
  108. },{
  109. commentCount: "373",
  110. desc: "【改革春风吹满地】【漫威/香港电影/赵本山】和斧头帮一起吹满地吧~",
  111. id: 8,
  112. imgSrc: "https://i1.hdslb.com/bfs/archive/54cd74a9bfd187fb795724c7bb51272e7c07a2e5.jpg@320w_200h.webp",
  113. link: "",
  114. playCount: "30.4万",
  115. videoSrc: ""
  116. },{
  117. commentCount: "1066",
  118. desc: "一家永远没有回头客的店《自杀专卖店》",
  119. id: 9,
  120. imgSrc: "https://i0.hdslb.com/bfs/archive/9046c3db8d6cddf56287fa1ead4e406baf4747f3.jpg@320w_200h.webp",
  121. link: "",
  122. playCount: "40.0万",
  123. videoSrc: ""
  124. },{
  125. commentCount: "3083",
  126. desc: "【演技】吃饭同样是吃空气,为什么演技差距如此之大!",
  127. id: 10,
  128. imgSrc: "https://i1.hdslb.com/bfs/archive/67e474f4fa31d5a2a8a6241a28cdf67be898eed4.png@320w_200h.webp",
  129. link: "",
  130. playCount: "65.7万",
  131. videoSrc: ""
  132. },{
  133. commentCount: "2090",
  134. desc: "【盘点火影真人版】我叫王大锤,是个忍者!这次参加了一个高成本火影忍者大电影!!",
  135. id: 11,
  136. imgSrc: "https://i1.hdslb.com/bfs/archive/67be0fadbe5eec5b967132c38fba65913cac7f43.jpg@320w_200h.webp",
  137. link: "",
  138. playCount: "46.1万",
  139. videoSrc: ""
  140. },{
  141. commentCount: "663",
  142. desc: "女部落奇怪规定,女人怀孕后必须吃男人补身体,还好这只是电影",
  143. id: 12,
  144. imgSrc: "https://i1.hdslb.com/bfs/archive/332b9cf87e30331277c84dcc47b1d53c2cb3fdfb.jpg@320w_200h.webp",
  145. link: "",
  146. playCount: "56.6万",
  147. videoSrc: ""
  148. },{
  149. commentCount: "543",
  150. desc: "《爱情公寓》令人窒息的骚操作!让人笑出猪叫声的神操作盘点! 第十九弹",
  151. id: 13,
  152. imgSrc: "https://i2.hdslb.com/bfs/archive/2e30177ef42ea0a420cd9926870d1463ed0be11c.jpg@320w_200h.webp",
  153. link: "",
  154. playCount: "53.9万",
  155. videoSrc: ""
  156. },{
  157. commentCount: "2425",
  158. desc: "【全程高能】一个角色的三观到底能够正到什么地步【世间清流】",
  159. id: 14,
  160. imgSrc: "https://i0.hdslb.com/bfs/archive/cab6d4254e4b97a0edf4d2393f5e8aed4a90201c.jpg@320w_200h.webp",
  161. link: "",
  162. playCount: "32.6万",
  163. videoSrc: ""
  164. },{
  165. commentCount: "2770",
  166. desc: "明星20年后再次演绎自己的经典角色,谁变化最小",
  167. id: 15,
  168. imgSrc: "https://i0.hdslb.com/bfs/archive/396dfc33b8c3f426606760f9614759d7cf29c28d.png@320w_200h.webp",
  169. link: "",
  170. playCount: "46.6万",
  171. videoSrc: ""
  172. },{
  173. commentCount: "1658",
  174. desc: "一部拷问社会和人性的电影,极度真实,中国版的《东京物语》!",
  175. id: 16,
  176. imgSrc: "https://i2.hdslb.com/bfs/archive/f03f82e14ee380f8e44c0b62924438f0ccc93750.jpg@320w_200h.webp",
  177. link: "",
  178. playCount: "37.9万",
  179. videoSrc: ""
  180. },{
  181. commentCount: "5165",
  182. desc: "【公开处刑】演技炸裂与演技尴尬到底是什么样子:我是谢晓飞,我走路拽起来都是演技?",
  183. id: 17,
  184. imgSrc: "https://i0.hdslb.com/bfs/archive/7ea04d86d345d109df15fd8fae5a1a12eca14b88.jpg@320w_200h.webp",
  185. link: "",
  186. playCount: "42.4万",
  187. videoSrc: ""
  188. },{
  189. commentCount: "2027",
  190. desc: "爆笑沙雕剧《我是大哥大》 全集,不看你后悔,沙雕青年快乐多,万恶之源,笑出腹肌",
  191. id: 18,
  192. imgSrc: "https://i0.hdslb.com/bfs/archive/39a366506c68e612bf07443deff25a6bfe55e08b.jpg@320w_200h.webp",
  193. link: "",
  194. playCount: "26.6万",
  195. videoSrc: ""
  196. },{
  197. commentCount: "652",
  198. desc: "恶婆婆故意用蜂蜜试探品如 结果自己的孙子却被送去了医院!",
  199. id: 19,
  200. imgSrc: "https://i1.hdslb.com/bfs/archive/45eeee2d1eb67237e255652f5ed682edf70d137a.jpg@320w_200h.webp",
  201. link: "",
  202. playCount: "41.0万",
  203. videoSrc: ""
  204. },
  205. {
  206. commentCount: "613",
  207. desc: "【极度舒适系列】那些惊艳至极的服化道!视觉盛宴!【第8期】",
  208. id: 20,
  209. imgSrc: "https://i1.hdslb.com/bfs/archive/3e7a75efe33f7391bb73ef3dcbc762f3d7d15136.png@320w_200h.webp",
  210. link: "",
  211. playCount: "16.6万",
  212. videoSrc: ""
  213. },{
  214. commentCount: "822",
  215. desc: "姐姐们为了阻止唯一的弟弟谈恋爱,真是花样百出",
  216. id: 21,
  217. imgSrc: "https://i0.hdslb.com/bfs/archive/1f0159497cac9ebfe7ac2a96aae2c5df32273d27.jpg@320w_200h.webp",
  218. link: "",
  219. playCount: "29.6万",
  220. videoSrc: ""
  221. },{
  222. commentCount: "190",
  223. desc: "500名副导演联合封杀胖嫂,本人回应:“我不演了,你们不用封杀我”",
  224. id: 22,
  225. imgSrc: "https://i1.hdslb.com/bfs/archive/2d0e5ece82827a666f38e7e12fc06eefe70ddbe7.jpg@320w_200h.webp",
  226. link: "",
  227. playCount: "32.3万",
  228. videoSrc: ""
  229. },{
  230. commentCount: "1216",
  231. desc: "《2019上半年即将上映的科幻大片》九部即将上映的科幻巨制,总有一部是你期待的!",
  232. id: 23,
  233. imgSrc: "https://i2.hdslb.com/bfs/archive/6b4f86491290565e8d41b04a1a649051c6419d06.jpg@320w_200h.webp",
  234. link: "",
  235. playCount: "20.1万",
  236. videoSrc: ""
  237. }
  238. ]
  239.  
  240. },
  241. // 点击首页导航按钮
  242. activeNav(e){
  243. // console.log(123)
  244. this.setData({
  245. currentIndexNav:e.target.dataset.index
  246. })
  247. },
  248. // 获取首页导航数据
  249. getNavlist(){
  250. var self=this;
  251. // 利用小程序内置的发送请求的方法
  252. wx.request({
  253. url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList',
  254. success(res){
  255. console.log(res)
  256. if(res.data.code===0){//如果请求成功
  257. self.setData({
  258. navList:res.data.data.navList
  259. });
  260. }
  261. }
  262. })
  263. },
  264. // 获取轮播图数据
  265. getSwiperList(){
  266. var self = this;
  267. wx.request({
  268. url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/swiperList',
  269. success(res){
  270. console.log(res);
  271. if(res.data.code===0){
  272. self.setData({
  273. swiperList:res.data.data.swiperList
  274. })
  275. }
  276. }
  277. })
  278. },
  279. /**
  280. * 获取视频列表
  281. */
  282. getVideosList(){
  283. var self=this;
  284. wx.request({
  285. url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videosList',
  286. success(res){
  287. console.log(res);
  288. if(res.data.code===0){
  289. self.setData({
  290. videosList: res.data.data.videosList
  291. });
  292. }
  293. }
  294. })
  295. },
  296. /**
  297. * 生命周期函数--监听页面加载
  298. */
  299. onLoad: function (options) {
  300. //获取首页导航数据
  301. this.getNavlist();
  302. //获取轮播图数据
  303. this.getSwiperList();
  304. // 获取视频列表
  305. this.getVideosList();
  306. },
  307.  
  308. /**
  309. * 生命周期函数--监听页面初次渲染完成
  310. */
  311. onReady: function () {
  312.  
  313. },
  314.  
  315. /**
  316. * 生命周期函数--监听页面显示
  317. */
  318. onShow: function () {
  319.  
  320. },
  321.  
  322. /**
  323. * 生命周期函数--监听页面隐藏
  324. */
  325. onHide: function () {
  326.  
  327. },
  328.  
  329. /**
  330. * 生命周期函数--监听页面卸载
  331. */
  332. onUnload: function () {
  333.  
  334. },
  335.  
  336. /**
  337. * 页面相关事件处理函数--监听用户下拉动作
  338. */
  339. onPullDownRefresh: function () {
  340.  
  341. },
  342.  
  343. /**
  344. * 页面上拉触底事件的处理函数
  345. */
  346. onReachBottom: function () {
  347.  
  348. },
  349.  
  350. /**
  351. * 用户点击右上角分享
  352. */
  353. onShareAppMessage: function () {
  354.  
  355. }
  356. })

index.wxml

  1. <view class='main'>
  2. <!-- 头部公共标签 -->
  3. <MyTitle></MyTitle>
  4. <!-- 首页导航 -->
  5. <view class='nav_wrap'>
  6. <scroll-view class='nav' scroll-x>
  7. <view bindtap="activeNav" data-index="{{index}}" class="nav_item {{index===currentIndexNav?'active':''}}" wx:for="{{navList}}" wx:key="{{index}}">{{item.text}}</view>
  8. </scroll-view>
  9. </view>
  10. <!-- 轮播图 -->
  11. <view class='slides'>
  12. <swiper autoplay indicator-dots circular>
  13. <swiper-item wx:for="{{swiperList}}" wx:key="{{index}}">
  14. <navigator url='javascript:'>
  15. <image mode='widthFix' src='{{item.imgSrc}}'></image>
  16. </navigator>
  17. </swiper-item>
  18. </swiper>
  19. </view>
  20. <!-- 视频列表 -->
  21. <view class='video_wrap'>
  22. <navigator class='video_item' wx:for="{{videosList}}" wx:key="{{index}}">
  23. <!-- 图片容器 -->
  24. <view class='video_img'>
  25. <!-- 图片 -->
  26. <image mode='widthFix' src='{{item.imgSrc}}'></image>
  27. <!-- 播放量 -->
  28. <view class='video_info'>
  29. <!-- 播放量 -->
  30. <view class='play_count_wrap'>
  31. <!-- 图标 -->
  32. <text class='fa fa-play-circle-o'></text>
  33. <!-- 数值 -->
  34. <text class='play_count'>{{item.playCount}}</text>
  35. </view>
  36. <!-- 评论量 -->
  37. <view class='comment_count_row'>
  38. <!-- 图标 -->
  39. <text class='fa fa-commenting-o'></text>
  40. <!-- 数值 -->
  41. <text class='comment_count'>{{item.commentCount}}</text>
  42. </view>
  43. </view>
  44. </view>
  45. <!-- 标题 -->
  46. <view class='video_title'>
  47. {{item.desc}}
  48. </view>
  49. </navigator>
  50. </view>
  51. </view>

index.wxss

  1. /* 改变整个页面的样式 相当于body */
  2. page{
  3. color:#666;
  4. padding: 10rpx;
  5. }
  6. /* 首页导航 */
  7. .nav_wrap{
  8.  
  9. }
  10. .nav{
  11. white-space: nowrap;
  12. padding:5rpx 0;
  13. }
  14. .nav_item{
  15. padding: 20rpx 45rpx;
  16. font-size: 30rpx;
  17. display: inline-block;
  18. }
  19. /* .nav_item中的.active类 */
  20. .nav_item.active{
  21. border-bottom: 5rpx solid #de688b;
  22. }
  23. /* 轮播图 */
  24. .slides{
  25. margin-top:10rpx;
  26. }
  27. .slides swiper{
  28. height:220rpx;
  29. }
  30. .slides navigator{
  31. width:100%;
  32. height:100%;
  33. }
  34. .slides image{
  35. width:100%;
  36. height:100%;
  37. }
  38. /* 视频列表 */
  39. .video_wrap{
  40. display: flex;
  41. flex-wrap: wrap;
  42. padding:5rpx;
  43. justify-content: space-between;
  44. }
  45. .video_item{
  46. width:48%;
  47. margin-bottom: 20rpx;
  48. }
  49. .video_img{
  50. position: relative;
  51. }
  52. .video_img image{
  53. width:100%;
  54. border-radius: 15rpx;
  55. }
  56. .video_img .video_info{
  57. position: absolute;
  58. bottom:10rpx;
  59. left:;
  60. width:100%;
  61. display: flex;
  62. justify-content: space-around;
  63. color:#fff;
  64. font-size: 24rpx;
  65. }
  66. .video_title{
  67. font-size: 28rpx;
  68.  
  69. display: -webkit-box;
  70. overflow: hidden;
  71. white-space: normal;
  72. text-overflow: ellipsis;
  73. word-wrap: break-word;
  74. -webkit-line-clamp:;
  75. -webkit-box-orient: vertical;
  76. }

效果:

详情页面

我们先建立一个详情页

app.json

  1. {
  2. "pages": [
  3. "pages/index/index",
  4. "pages/detial/detial"
  5. ],
  6. "window": {
  7. "backgroundTextStyle": "light",
  8. "navigationBarBackgroundColor": "#fff",
  9. "navigationBarTitleText": "WeChat",
  10. "navigationBarTextStyle": "black"
  11. },
  12. "sitemapLocation": "sitemap.json"
  13. }

我们先做一个点击跳转的行为,可以跳转到详情页

  1. <navigator url='../detial/detial?id={{item.id}}' class='video_item' wx:for="{{videosList}}" wx:key="{{index}}">

然后再把公共头部组件引进详情页面

detial.json:

  1. {
  2. "usingComponents": {
  3. "MyTitle": "../../components/MyTitle/MyTitle"
  4. },
  5. "navigationBarTitleText": "详情页面"
  6. }

detial.wxml

  1. <view class='main'>
  2. <!-- 公共的头部 -->
  3. <MyTitle></MyTitle>
  4. </view>

效果:

视频详情模块:

detail.js

  1. // pages/detial/detial.js
  2. Page({
  3.  
  4. /**
  5. * 页面的初始数据
  6. */
  7. data: {
  8. // 视频信息 防止后台出错 给个默认值
  9. videoInfo:{
  10. author:"牧草君1",
  11. commentCount:1345,
  12. date:"12-15",
  13. id:1,
  14. playCount:"24.9万",
  15. // videoSrc:"http://files.ak48.xyz/2018120195458.mp4",
  16. videoSrc:"http://47.90.213.237/youtube/JU3AL8S3zyE.mp4",
  17. videoTitle:"世界上广告最多的网站判定!真的有10000条广告!【暗物质#2】"
  18. }
  19. },
  20.  
  21. /**
  22. * 生命周期函数--监听页面加载
  23. */
  24. onLoad: function (options) {
  25. console.log(options);
  26. // 获取当前视频id
  27. let videoId=options.id;
  28. this.getCurrentVideo(videoId);
  29. },
  30. /**
  31. * 获得当前视频
  32. */
  33. getCurrentVideo(videoId){
  34. var self =this;
  35. wx.request({
  36. url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videoDetail?id=' + videoId,
  37. success(res){
  38. console.log(res);
  39. if(res.data.code===0){
  40. self.setData({
  41. videoInfo: res.data.data.videoInfo
  42. })
  43. }
  44. }
  45. })
  46. },
  47. /**
  48. * 生命周期函数--监听页面初次渲染完成
  49. */
  50. onReady: function () {
  51.  
  52. },
  53.  
  54. /**
  55. * 生命周期函数--监听页面显示
  56. */
  57. onShow: function () {
  58.  
  59. },
  60.  
  61. /**
  62. * 生命周期函数--监听页面隐藏
  63. */
  64. onHide: function () {
  65.  
  66. },
  67.  
  68. /**
  69. * 生命周期函数--监听页面卸载
  70. */
  71. onUnload: function () {
  72.  
  73. },
  74.  
  75. /**
  76. * 页面相关事件处理函数--监听用户下拉动作
  77. */
  78. onPullDownRefresh: function () {
  79.  
  80. },
  81.  
  82. /**
  83. * 页面上拉触底事件的处理函数
  84. */
  85. onReachBottom: function () {
  86.  
  87. },
  88.  
  89. /**
  90. * 用户点击右上角分享
  91. */
  92. onShareAppMessage: function () {
  93.  
  94. }
  95. })

detial.wxml:

  1. <view class='main'>
  2. <!-- 公共的头部 -->
  3. <MyTitle></MyTitle>
  4.  
  5. <!-- 视频详情 -->
  6. <view class='video_info'>
  7. <!-- 视频标签 -->
  8. <video src='{{videoInfo.videoSrc}}' controls></video>
  9. <!-- 视频标题 -->
  10. <view class='video_title'>
  11. <text>{{videoInfo.videoTitle}}</text>
  12. <text class='fa fa-angle-down'></text>
  13. </view>
  14. <!-- 视频作者 -->
  15. <view class='video_detail'>
  16. <!-- 作者 -->
  17. <text class='author'>{{videoInfo.author}}</text>
  18. <!-- 播放量 -->
  19. <text class='play_count'>{{videoInfo.playCount}}</text>
  20. <!-- 评论量 -->
  21. <text class='comment_count'>{{videoInfo.commentCount}}弹幕</text>
  22. <!-- 时间 -->
  23. <text class='date'>{{videoInfo.date}}</text>
  24. </view>
  25. </view>
  26. </view>

detial.wxss

  1. /* pages/detial/detial.wxss */
  2. .main{
  3. padding:10rpx;
  4. color:#666;
  5. }
  6. /* 视频 */
  7. .video_info{
  8. margin-top:10rpx;
  9. }
  10. .video_info video{
  11. width:100%;
  12. }
  13. .video_title{
  14. display: flex;
  15. justify-content: space-between;
  16. font-size: 35rpx;
  17. }
  18. .video_detail{
  19. margin-top:5rpx;
  20. font-size: 28rpx;
  21. }
  22. .video_detail .author{
  23. color:#000;
  24. }
  25. .video_detail text{
  26. margin-left:10rpx;
  27. }

效果:

推荐视频模块:

detial.js

  1. // pages/detial/detial.js
  2. Page({
  3.  
  4. /**
  5. * 页面的初始数据
  6. */
  7. data: {
  8. // 视频信息 防止后台出错 给个默认值
  9. videoInfo:{
  10. author:"牧草君1",
  11. commentCount:1345,
  12. date:"12-15",
  13. id:1,
  14. playCount:"24.9万",
  15. // videoSrc:"http://files.ak48.xyz/2018120195458.mp4",
  16. videoSrc:"http://47.90.213.237/youtube/JU3AL8S3zyE.mp4",
  17. videoTitle:"世界上广告最多的网站判定!真的有10000条广告!【暗物质#2】"
  18. },
  19. // 推荐列表 防止服务器出错 给一组默认值
  20. othersList:[
  21. {
  22. "imgSrc": "https://i0.hdslb.com/bfs/archive/cb93f69df4a4b9216d5149dc58d9a2ce9436b697.jpg@320w_200h.webp",
  23. "duration": "00:06:28",
  24. "title": "世界上最小的网站!小到只有0.4KB,你信么?【暗物质#1】",
  25. "playMsg": "20.6",
  26. "commentCount": " 445"
  27. },
  28. {
  29. "imgSrc": "https://i1.hdslb.com/bfs/archive/412d5a027a2d4adcd61816e8ce676911c92e7974.jpg@320w_200h.webp",
  30. "duration": "00:02:11",
  31. "title": "改革春风吹满地",
  32. "playMsg": "52.1",
  33. "commentCount": " 564"
  34. },
  35. {
  36. "imgSrc": "https://i0.hdslb.com/bfs/archive/945293f72fdec1eb6228afe9a3f1b9c433544ae5.jpg@320w_200h.webp",
  37. "duration": "00:01:39",
  38. "title": "呲哩呲哩?是不是我大破站太火了!!!",
  39. "playMsg": "27.0",
  40. "commentCount": " 1179"
  41. },
  42. {
  43. "imgSrc": "https://i1.hdslb.com/bfs/archive/2f1c5bd88f39c2a489ce1a7b2f715a102c2edf15.jpg@320w_200h.webp",
  44. "duration": "00:01:03",
  45. "title": "当B站被腾讯收购!会发生什么?",
  46. "playMsg": "117.8",
  47. "commentCount": " 4348"
  48. },
  49. {
  50. "imgSrc": "https://i2.hdslb.com/bfs/archive/873c62e7ab58f5f9f4f890fc66eef1efb62e2fb3.jpg@320w_200h.webp",
  51. "duration": "00:01:01",
  52. "title": "雷锋的故事里就这配音就tm值一个亿",
  53. "playMsg": "163.2",
  54. "commentCount": " 4668"
  55. },
  56. {
  57. "imgSrc": "https://i2.hdslb.com/bfs/archive/a4b08a069be32e489a48094ff62f413571d59d4d.jpg@320w_200h.webp",
  58. "duration": "00:00:16",
  59. "title": "往鲍鱼抹上芥末会发生什么",
  60. "playMsg": "116.5",
  61. "commentCount": " 1135"
  62. },
  63. {
  64. "imgSrc": "https://i0.hdslb.com/bfs/archive/e1acedadb5f51a49f1d74f4540162693010b2e2d.jpg@320w_200h.webp",
  65. "duration": "00:01:42",
  66. "title": "猜猜黑板上画的是什么?绝对不是你们看的那样《学校霸王》",
  67. "playMsg": "99.6",
  68. "commentCount": " 1770"
  69. },
  70. {
  71. "imgSrc": "https://i1.hdslb.com/bfs/archive/f05855bdfc400cd910a4f8e0fee652444bb6ef00.jpg@320w_200h.webp",
  72. "duration": "00:03:53",
  73. "title": "肯德基内部员工才知道,用这几句“暗语”点餐,能让你吃到撑!",
  74. "playMsg": "27.7",
  75. "commentCount": " 436"
  76. },
  77. {
  78. "imgSrc": "https://i0.hdslb.com/bfs/archive/0d3b1e699a2e84260ef5a8a71f102d4982f7a596.jpg@320w_200h.webp",
  79. "duration": "00:00:41",
  80. "title": "bilibili播放量最多的视频?!!",
  81. "playMsg": "35.6",
  82. "commentCount": " 246"
  83. },
  84. {
  85. "imgSrc": "https://i2.hdslb.com/bfs/archive/9a6e89134d6cbead10765950f0ec12fee482a15a.jpg@320w_200h.webp",
  86. "duration": "00:08:58",
  87. "title": "淘宝上最侮辱智商的商品!真是花钱买了个教训",
  88. "playMsg": "4.7",
  89. "commentCount": " 363"
  90. },
  91. {
  92. "imgSrc": "https://i1.hdslb.com/bfs/archive/5052636563f803ef1a5a4c397dce8fd274621c3f.jpg@320w_200h.webp",
  93. "duration": "00:03:48",
  94. "title": "男子醉驾被查扬言“我爷爷是搞原子弹的” 交警一查还真是",
  95. "playMsg": "75.8",
  96. "commentCount": " 931"
  97. },
  98. {
  99. "imgSrc": "https://i0.hdslb.com/bfs/archive/c2c60b08d4ecb10736f54f514c83767aaec1e880.jpg@320w_200h.webp",
  100. "duration": "00:02:53",
  101. "title": "万恶之源:我信你个鬼,你个糟老头子坏的很",
  102. "playMsg": "223.7",
  103. "commentCount": " 3439"
  104. },
  105. {
  106. "imgSrc": "https://i1.hdslb.com/bfs/archive/fe317a18cba364c62becf478f04d835c1b4708f3.jpg@320w_200h.webp",
  107. "duration": "00:02:43",
  108. "title": "打劫遇上一车特警,笨贼视频在youtube上,世界网友都笑死了!",
  109. "playMsg": "209.7",
  110. "commentCount": " 2431"
  111. },
  112. {
  113. "imgSrc": "https://i2.hdslb.com/bfs/archive/f0252c692931a8605d33aa8b4f0471100b24c7c5.jpg@320w_200h.webp",
  114. "duration": "00:01:59",
  115. "title": "B站恐怖事件!明明声音已经关掉却还能听到声音???",
  116. "playMsg": "57.8",
  117. "commentCount": " 1099"
  118. },
  119. {
  120. "imgSrc": "https://i1.hdslb.com/bfs/archive/98714070087b590dfb0d0150013c4a0c8da8b8e3.jpg@320w_200h.webp",
  121. "duration": "00:15:31",
  122. "title": "不小心受伤怎么办?教你23个生活的必备技巧@油兔不二字幕组",
  123. "playMsg": "118.8",
  124. "commentCount": " 3425"
  125. },
  126. {
  127. "imgSrc": "https://i0.hdslb.com/bfs/archive/9a4e9d3682e8f930d5ece87c24203105bc09fa1f.jpg@320w_200h.webp",
  128. "duration": "00:01:44",
  129. "title": "女朋友逛完漫展在酒店累趴了,该怎么办呢",
  130. "playMsg": "62.4",
  131. "commentCount": " 966"
  132. },
  133. {
  134. "imgSrc": "https://i0.hdslb.com/bfs/archive/d8bcdd8555027ad27896186da479d21a53218f8b.png@320w_200h.webp",
  135. "duration": "00:01:32",
  136. "title": "能让鲍鱼跳舞!遇到醋就饥忍难耐了吗?还是本能反应?",
  137. "playMsg": "5.7",
  138. "commentCount": " 77"
  139. },
  140. {
  141. "imgSrc": "https://i2.hdslb.com/bfs/archive/0970d603df54320610156a06d2ce8a5a4097b0c6.jpg@320w_200h.webp",
  142. "duration": "00:02:12",
  143. "title": "拘留所里出人才 惊呆了!",
  144. "playMsg": "20.2",
  145. "commentCount": " 363"
  146. },
  147. {
  148. "imgSrc": "https://i1.hdslb.com/bfs/archive/aa27ae344fc81d1f1be2ac4c691a27b43334e553.jpg@320w_200h.webp",
  149. "duration": "00:01:20",
  150. "title": "本以为小情侣在车库约会,8秒后,荒唐画面发生了",
  151. "playMsg": "33.6",
  152. "commentCount": " 326"
  153. },
  154. {
  155. "imgSrc": "https://i1.hdslb.com/bfs/archive/45a3a1258f7e473cc45ab0823729ac0b5618eee6.png@320w_200h.webp",
  156. "duration": "00:02:46",
  157. "title": "朱广权:自信=手拿30米长刀,先让你跑29米。",
  158. "playMsg": "48.2",
  159. "commentCount": " 852"
  160. }
  161. ]
  162. },
  163.  
  164. /**
  165. * 生命周期函数--监听页面加载
  166. */
  167. onLoad: function (options) {
  168. console.log(options);
  169. // 获取当前视频id
  170. let videoId=options.id;
  171. // 获取当前视频
  172. this.getCurrentVideo(videoId);
  173. // 获取推荐列表
  174. this.getOthersList(videoId);
  175. },
  176. /**
  177. * 获得当前视频
  178. */
  179. getCurrentVideo(videoId){
  180. var self =this;
  181. wx.request({
  182. url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videoDetail?id=' + videoId,
  183. success(res){
  184. console.log(res);
  185. if(res.data.code===0){
  186. self.setData({
  187. videoInfo: res.data.data.videoInfo
  188. })
  189. }
  190. }
  191. })
  192. },
  193. /**
  194. * 获取推荐视频
  195. */
  196. getOthersList(videoId){
  197. var self=this;
  198. wx.request({
  199. url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/othersList?id=' + videoId,
  200. success(res){
  201. console.log(res)
  202. if(res.data.code===0){
  203. self.setData({
  204. othersList: res.data.data.othersList
  205. })
  206. }
  207. }
  208. })
  209.  
  210. },
  211. /**
  212. * 生命周期函数--监听页面初次渲染完成
  213. */
  214. onReady: function () {
  215.  
  216. },
  217.  
  218. /**
  219. * 生命周期函数--监听页面显示
  220. */
  221. onShow: function () {
  222.  
  223. },
  224.  
  225. /**
  226. * 生命周期函数--监听页面隐藏
  227. */
  228. onHide: function () {
  229.  
  230. },
  231.  
  232. /**
  233. * 生命周期函数--监听页面卸载
  234. */
  235. onUnload: function () {
  236.  
  237. },
  238.  
  239. /**
  240. * 页面相关事件处理函数--监听用户下拉动作
  241. */
  242. onPullDownRefresh: function () {
  243.  
  244. },
  245.  
  246. /**
  247. * 页面上拉触底事件的处理函数
  248. */
  249. onReachBottom: function () {
  250.  
  251. },
  252.  
  253. /**
  254. * 用户点击右上角分享
  255. */
  256. onShareAppMessage: function () {
  257.  
  258. }
  259. })

detial.wxml

  1. <view class='main'>
  2. <!-- 公共的头部 -->
  3. <MyTitle></MyTitle>
  4.  
  5. <!-- 视频详情 -->
  6. <view class='video_info'>
  7. <!-- 视频标签 -->
  8. <video src='{{videoInfo.videoSrc}}' controls></video>
  9. <!-- 视频标题 -->
  10. <view class='video_title'>
  11. <text>{{videoInfo.videoTitle}}</text>
  12. <text class='fa fa-angle-down'></text>
  13. </view>
  14. <!-- 视频作者 -->
  15. <view class='video_detail'>
  16. <!-- 作者 -->
  17. <text class='author'>{{videoInfo.author}}</text>
  18. <!-- 播放量 -->
  19. <text class='play_count'>{{videoInfo.playCount}}</text>
  20. <!-- 评论量 -->
  21. <text class='comment_count'>{{videoInfo.commentCount}}弹幕</text>
  22. <!-- 时间 -->
  23. <text class='date'>{{videoInfo.date}}</text>
  24. </view>
  25. </view>
  26.  
  27. <!-- 推荐视频 -->
  28. <view class='other_list'>
  29. <navigator class='item_other' wx:for="{{othersList}}" wx:key="{{index}}">
  30. <!-- 图片容器 -->
  31. <view class='other_img_wrap'>
  32. <image mode='widthFix' src='{{item.imgSrc}}'></image>
  33. </view>
  34. <!-- 视频详情 -->
  35. <view class='other_info'>
  36. <!-- 标题 -->
  37. <view class='other_title'>{{item.title}}</view>
  38. <!-- 播放量 -->
  39. <view class='other_detail'>
  40. <!-- 播放量 -->
  41. <text class='play_count'>{{item.playMsg}}次观看</text>
  42. <!-- 评论量 -->
  43. <text class='comment_count'>{{item.commentCount}}弹幕</text>
  44. </view>
  45. </view>
  46. </navigator>
  47. </view>
  48. </view>

detial.wxss

  1. /* pages/detial/detial.wxss */
  2. .main{
  3. padding:10rpx;
  4. color:#666;
  5. }
  6. /* 视频 */
  7. .video_info{
  8. margin-top:10rpx;
  9. }
  10. .video_info video{
  11. width:100%;
  12. }
  13. .video_title{
  14. display: flex;
  15. justify-content: space-between;
  16. font-size: 35rpx;
  17. }
  18. .video_detail{
  19. margin-top:5rpx;
  20. font-size: 28rpx;
  21. }
  22. .video_detail .author{
  23. color:#000;
  24. }
  25. .video_detail text{
  26. margin-left:10rpx;
  27. }
  28.  
  29. /* 推荐视频 */
  30. .other_list{
  31. margin-top:20rpx;
  32. }
  33. .item_other{
  34. display: flex;
  35. justify-content: space-between;
  36. margin-bottom: 20rpx;
  37. }
  38. .item_other .other_img_wrap{
  39. width:38%;
  40. display: flex;
  41. justify-content: center;
  42. align-items: center;
  43. }
  44. .other_img_wrap image{
  45. width:90%;
  46. border-radius: 15rpx;
  47. }
  48. .item_other .other_info{
  49. width:60%;
  50. display: flex;
  51. flex-direction: column;
  52. justify-content: space-around;
  53.  
  54. }
  55. .other_info .other_title{
  56. font-size: 30rpx;
  57. color:#e06f93;
  58. }
  59. .other_info .other_detail{
  60. font-size: 26rpx;
  61. color:#666;
  62. }

评论模块:

detail.js

  1. // pages/detial/detial.js
  2. Page({
  3.  
  4. /**
  5. * 页面的初始数据
  6. */
  7. data: {
  8. // 视频信息 防止后台出错 给个默认值
  9. videoInfo:{
  10. author:"牧草君1",
  11. commentCount:1345,
  12. date:"12-15",
  13. id:1,
  14. playCount:"24.9万",
  15. // videoSrc:"http://files.ak48.xyz/2018120195458.mp4",
  16. videoSrc:"http://47.90.213.237/youtube/JU3AL8S3zyE.mp4",
  17. videoTitle:"世界上广告最多的网站判定!真的有10000条广告!【暗物质#2】"
  18. },
  19. // 推荐列表 防止服务器出错 给一组默认值
  20. othersList:[
  21. {
  22. "imgSrc": "https://i0.hdslb.com/bfs/archive/cb93f69df4a4b9216d5149dc58d9a2ce9436b697.jpg@320w_200h.webp",
  23. "duration": "00:06:28",
  24. "title": "世界上最小的网站!小到只有0.4KB,你信么?【暗物质#1】",
  25. "playMsg": "20.6",
  26. "commentCount": " 445"
  27. },
  28. {
  29. "imgSrc": "https://i1.hdslb.com/bfs/archive/412d5a027a2d4adcd61816e8ce676911c92e7974.jpg@320w_200h.webp",
  30. "duration": "00:02:11",
  31. "title": "改革春风吹满地",
  32. "playMsg": "52.1",
  33. "commentCount": " 564"
  34. },
  35. {
  36. "imgSrc": "https://i0.hdslb.com/bfs/archive/945293f72fdec1eb6228afe9a3f1b9c433544ae5.jpg@320w_200h.webp",
  37. "duration": "00:01:39",
  38. "title": "呲哩呲哩?是不是我大破站太火了!!!",
  39. "playMsg": "27.0",
  40. "commentCount": " 1179"
  41. },
  42. {
  43. "imgSrc": "https://i1.hdslb.com/bfs/archive/2f1c5bd88f39c2a489ce1a7b2f715a102c2edf15.jpg@320w_200h.webp",
  44. "duration": "00:01:03",
  45. "title": "当B站被腾讯收购!会发生什么?",
  46. "playMsg": "117.8",
  47. "commentCount": " 4348"
  48. },
  49. {
  50. "imgSrc": "https://i2.hdslb.com/bfs/archive/873c62e7ab58f5f9f4f890fc66eef1efb62e2fb3.jpg@320w_200h.webp",
  51. "duration": "00:01:01",
  52. "title": "雷锋的故事里就这配音就tm值一个亿",
  53. "playMsg": "163.2",
  54. "commentCount": " 4668"
  55. },
  56. {
  57. "imgSrc": "https://i2.hdslb.com/bfs/archive/a4b08a069be32e489a48094ff62f413571d59d4d.jpg@320w_200h.webp",
  58. "duration": "00:00:16",
  59. "title": "往鲍鱼抹上芥末会发生什么",
  60. "playMsg": "116.5",
  61. "commentCount": " 1135"
  62. },
  63. {
  64. "imgSrc": "https://i0.hdslb.com/bfs/archive/e1acedadb5f51a49f1d74f4540162693010b2e2d.jpg@320w_200h.webp",
  65. "duration": "00:01:42",
  66. "title": "猜猜黑板上画的是什么?绝对不是你们看的那样《学校霸王》",
  67. "playMsg": "99.6",
  68. "commentCount": " 1770"
  69. },
  70. {
  71. "imgSrc": "https://i1.hdslb.com/bfs/archive/f05855bdfc400cd910a4f8e0fee652444bb6ef00.jpg@320w_200h.webp",
  72. "duration": "00:03:53",
  73. "title": "肯德基内部员工才知道,用这几句“暗语”点餐,能让你吃到撑!",
  74. "playMsg": "27.7",
  75. "commentCount": " 436"
  76. },
  77. {
  78. "imgSrc": "https://i0.hdslb.com/bfs/archive/0d3b1e699a2e84260ef5a8a71f102d4982f7a596.jpg@320w_200h.webp",
  79. "duration": "00:00:41",
  80. "title": "bilibili播放量最多的视频?!!",
  81. "playMsg": "35.6",
  82. "commentCount": " 246"
  83. },
  84. {
  85. "imgSrc": "https://i2.hdslb.com/bfs/archive/9a6e89134d6cbead10765950f0ec12fee482a15a.jpg@320w_200h.webp",
  86. "duration": "00:08:58",
  87. "title": "淘宝上最侮辱智商的商品!真是花钱买了个教训",
  88. "playMsg": "4.7",
  89. "commentCount": " 363"
  90. },
  91. {
  92. "imgSrc": "https://i1.hdslb.com/bfs/archive/5052636563f803ef1a5a4c397dce8fd274621c3f.jpg@320w_200h.webp",
  93. "duration": "00:03:48",
  94. "title": "男子醉驾被查扬言“我爷爷是搞原子弹的” 交警一查还真是",
  95. "playMsg": "75.8",
  96. "commentCount": " 931"
  97. },
  98. {
  99. "imgSrc": "https://i0.hdslb.com/bfs/archive/c2c60b08d4ecb10736f54f514c83767aaec1e880.jpg@320w_200h.webp",
  100. "duration": "00:02:53",
  101. "title": "万恶之源:我信你个鬼,你个糟老头子坏的很",
  102. "playMsg": "223.7",
  103. "commentCount": " 3439"
  104. },
  105. {
  106. "imgSrc": "https://i1.hdslb.com/bfs/archive/fe317a18cba364c62becf478f04d835c1b4708f3.jpg@320w_200h.webp",
  107. "duration": "00:02:43",
  108. "title": "打劫遇上一车特警,笨贼视频在youtube上,世界网友都笑死了!",
  109. "playMsg": "209.7",
  110. "commentCount": " 2431"
  111. },
  112. {
  113. "imgSrc": "https://i2.hdslb.com/bfs/archive/f0252c692931a8605d33aa8b4f0471100b24c7c5.jpg@320w_200h.webp",
  114. "duration": "00:01:59",
  115. "title": "B站恐怖事件!明明声音已经关掉却还能听到声音???",
  116. "playMsg": "57.8",
  117. "commentCount": " 1099"
  118. },
  119. {
  120. "imgSrc": "https://i1.hdslb.com/bfs/archive/98714070087b590dfb0d0150013c4a0c8da8b8e3.jpg@320w_200h.webp",
  121. "duration": "00:15:31",
  122. "title": "不小心受伤怎么办?教你23个生活的必备技巧@油兔不二字幕组",
  123. "playMsg": "118.8",
  124. "commentCount": " 3425"
  125. },
  126. {
  127. "imgSrc": "https://i0.hdslb.com/bfs/archive/9a4e9d3682e8f930d5ece87c24203105bc09fa1f.jpg@320w_200h.webp",
  128. "duration": "00:01:44",
  129. "title": "女朋友逛完漫展在酒店累趴了,该怎么办呢",
  130. "playMsg": "62.4",
  131. "commentCount": " 966"
  132. },
  133. {
  134. "imgSrc": "https://i0.hdslb.com/bfs/archive/d8bcdd8555027ad27896186da479d21a53218f8b.png@320w_200h.webp",
  135. "duration": "00:01:32",
  136. "title": "能让鲍鱼跳舞!遇到醋就饥忍难耐了吗?还是本能反应?",
  137. "playMsg": "5.7",
  138. "commentCount": " 77"
  139. },
  140. {
  141. "imgSrc": "https://i2.hdslb.com/bfs/archive/0970d603df54320610156a06d2ce8a5a4097b0c6.jpg@320w_200h.webp",
  142. "duration": "00:02:12",
  143. "title": "拘留所里出人才 惊呆了!",
  144. "playMsg": "20.2",
  145. "commentCount": " 363"
  146. },
  147. {
  148. "imgSrc": "https://i1.hdslb.com/bfs/archive/aa27ae344fc81d1f1be2ac4c691a27b43334e553.jpg@320w_200h.webp",
  149. "duration": "00:01:20",
  150. "title": "本以为小情侣在车库约会,8秒后,荒唐画面发生了",
  151. "playMsg": "33.6",
  152. "commentCount": " 326"
  153. },
  154. {
  155. "imgSrc": "https://i1.hdslb.com/bfs/archive/45a3a1258f7e473cc45ab0823729ac0b5618eee6.png@320w_200h.webp",
  156. "duration": "00:02:46",
  157. "title": "朱广权:自信=手拿30米长刀,先让你跑29米。",
  158. "playMsg": "48.2",
  159. "commentCount": " 852"
  160. }
  161. ],
  162. // 评论列表
  163. commentData:{
  164. commentTotalCount:454,
  165. commentList: [
  166. {
  167. "userIconSrc": "https://i2.hdslb.com/bfs/face/fe81d93c5beb92557474f48551d3b4966eadeeef.jpg@60w_60h.webp",
  168. "username": "峰岛达裕",
  169. "commentInfo": "什么?居然不是某些网站的澳门皇家赌场?",
  170. "commentDate": "12-15"
  171. },
  172. {
  173. "userIconSrc": "https://i0.hdslb.com/bfs/face/54923922eea6532c2dff95e45743b6a1203c0230.jpg@60w_60h.webp",
  174. "username": "黑狌白鸾",
  175. "commentInfo": "鲁迅说过,如果你有一个苹果,我有一个苹果,我们交换,一人还是一个苹果,如果你有一个网站,我有一个网站,我们交换那我们双方就有两个网站",
  176. "commentDate": "12-15"
  177. },
  178. {
  179. "userIconSrc": "https://i1.hdslb.com/bfs/face/d2fa6637d952d176a13c706f5efd179f52a12367.jpg@60w_60h.webp",
  180. "username": "马猴烧酒柊筱娅",
  181. "commentInfo": "等等,那这样的话,牧草君岂不是一个视频打了1w多个广告[小电视_吃惊]",
  182. "commentDate": "12-15"
  183. },
  184. {
  185. "userIconSrc": "https://i1.hdslb.com/bfs/face/c605ce1a2f47b049ab7f271aa228bb8e96a43bf0.jpg@60w_60h.webp",
  186. "username": "NAN某",
  187. "commentInfo": "我经常逛的那些网站也有很多广告(`・ω・´)",
  188. "commentDate": "12-15"
  189. },
  190. {
  191. "userIconSrc": "https://i0.hdslb.com/bfs/face/54923922eea6532c2dff95e45743b6a1203c0230.jpg@60w_60h.webp",
  192. "username": "牧草君",
  193. "commentInfo": "你们赶快去这个王网站了里面找找好玩的,我已经找到好几个(✪▽✪)好康的网站了[小电视_赞]",
  194. "commentDate": "12-15"
  195. }
  196. ]
  197. }
  198.  
  199. },
  200.  
  201. /**
  202. * 生命周期函数--监听页面加载
  203. */
  204. onLoad: function (options) {
  205. console.log(options);
  206. // 获取当前视频id
  207. let videoId=options.id;
  208. // 获取当前视频
  209. this.getCurrentVideo(videoId);
  210. // 获取推荐列表
  211. this.getOthersList(videoId);
  212. // 获取评论列表
  213. this.getCommentList(videoId);
  214. },
  215. /**
  216. * 获得当前视频
  217. */
  218. getCurrentVideo(videoId){
  219. var self =this;
  220. wx.request({
  221. url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videoDetail?id=' + videoId,
  222. success(res){
  223. console.log(res);
  224. if(res.data.code===0){
  225. self.setData({
  226. videoInfo: res.data.data.videoInfo
  227. })
  228. }
  229. }
  230. })
  231. },
  232. /**
  233. * 获取推荐视频
  234. */
  235. getOthersList(videoId){
  236. var self=this;
  237. wx.request({
  238. url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/othersList?id=' + videoId,
  239. success(res){
  240. console.log(res)
  241. if(res.data.code===0){
  242. self.setData({
  243. othersList: res.data.data.othersList
  244. })
  245. }
  246. }
  247. })
  248.  
  249. },
  250. /**
  251. * 获取评论列表
  252. */
  253. getCommentList(videoId){
  254. var self=this;
  255. wx.request({
  256. url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/commentsList?id=' + videoId,
  257. success(res){
  258. console.log(res)
  259. if(res.data.code===0){
  260. self.setData({
  261. commentData: res.data.data.commentData
  262. })
  263. }
  264. }
  265. })
  266. },
  267. /**
  268. * 生命周期函数--监听页面初次渲染完成
  269. */
  270. onReady: function () {
  271.  
  272. },
  273.  
  274. /**
  275. * 生命周期函数--监听页面显示
  276. */
  277. onShow: function () {
  278.  
  279. },
  280.  
  281. /**
  282. * 生命周期函数--监听页面隐藏
  283. */
  284. onHide: function () {
  285.  
  286. },
  287.  
  288. /**
  289. * 生命周期函数--监听页面卸载
  290. */
  291. onUnload: function () {
  292.  
  293. },
  294.  
  295. /**
  296. * 页面相关事件处理函数--监听用户下拉动作
  297. */
  298. onPullDownRefresh: function () {
  299.  
  300. },
  301.  
  302. /**
  303. * 页面上拉触底事件的处理函数
  304. */
  305. onReachBottom: function () {
  306.  
  307. },
  308.  
  309. /**
  310. * 用户点击右上角分享
  311. */
  312. onShareAppMessage: function () {
  313.  
  314. }
  315. })

detail.wxml

  1. <view class='main'>
  2. <!-- 公共的头部 -->
  3. <MyTitle></MyTitle>
  4.  
  5. <!-- 视频详情 -->
  6. <view class='video_info'>
  7. <!-- 视频标签 -->
  8. <video src='{{videoInfo.videoSrc}}' controls></video>
  9. <!-- 视频标题 -->
  10. <view class='video_title'>
  11. <text>{{videoInfo.videoTitle}}</text>
  12. <text class='fa fa-angle-down'></text>
  13. </view>
  14. <!-- 视频作者 -->
  15. <view class='video_detail'>
  16. <!-- 作者 -->
  17. <text class='author'>{{videoInfo.author}}</text>
  18. <!-- 播放量 -->
  19. <text class='play_count'>{{videoInfo.playCount}}</text>
  20. <!-- 评论量 -->
  21. <text class='comment_count'>{{videoInfo.commentCount}}弹幕</text>
  22. <!-- 时间 -->
  23. <text class='date'>{{videoInfo.date}}</text>
  24. </view>
  25. </view>
  26.  
  27. <!-- 推荐视频 -->
  28. <view class='other_list'>
  29. <navigator class='item_other' wx:for="{{othersList}}" wx:key="{{index}}">
  30. <!-- 图片容器 -->
  31. <view class='other_img_wrap'>
  32. <image mode='widthFix' src='{{item.imgSrc}}'></image>
  33. </view>
  34. <!-- 视频详情 -->
  35. <view class='other_info'>
  36. <!-- 标题 -->
  37. <view class='other_title'>{{item.title}}</view>
  38. <!-- 播放量 -->
  39. <view class='other_detail'>
  40. <!-- 播放量 -->
  41. <text class='play_count'>{{item.playMsg}}次观看</text>
  42. <!-- 评论量 -->
  43. <text class='comment_count'>{{item.commentCount}}弹幕</text>
  44. </view>
  45. </view>
  46. </navigator>
  47. </view>
  48.  
  49. <!-- 评论模块 -->
  50. <view class='comment_wrap'>
  51. <view class='comment_title'>
  52. 评论({{commentData.commentTotalCount}})
  53. </view>
  54. <view class='comment_list'>
  55. <view class='comment_item' wx:for="{{commentData.commentList}}" wx:key="{{index}}">
  56. <!-- 左侧 -->
  57. <view class='comment_user'>
  58. <image mode='widthFix' src='{{item.userIconSrc}}'></image>
  59. </view>
  60. <!-- 右侧 -->
  61. <view class='comment_info'>
  62. <view class='comment_detail'>
  63. <text class='author'>{{item.username}}</text>
  64. <text class='date'>{{item.commentDate}}</text>
  65. </view>
  66. <view class='comment_content'>{{item.commentInfo}}</view>
  67. </view>
  68. </view>
  69. </view>
  70. </view>
  71. </view>

detail.wxss

  1. /* pages/detial/detial.wxss */
  2. .main{
  3. padding:10rpx;
  4. color:#666;
  5. }
  6. /* 视频 */
  7. .video_info{
  8. margin-top:10rpx;
  9. }
  10. .video_info video{
  11. width:100%;
  12. }
  13. .video_title{
  14. display: flex;
  15. justify-content: space-between;
  16. font-size: 35rpx;
  17. }
  18. .video_detail{
  19. margin-top:5rpx;
  20. font-size: 28rpx;
  21. }
  22. .video_detail .author{
  23. color:#000;
  24. }
  25. .video_detail text{
  26. margin-left:10rpx;
  27. }
  28.  
  29. /* 推荐视频 */
  30. .other_list{
  31. margin-top:20rpx;
  32. }
  33. .item_other{
  34. display: flex;
  35. justify-content: space-between;
  36. margin-bottom: 20rpx;
  37. }
  38. .item_other .other_img_wrap{
  39. width:38%;
  40. display: flex;
  41. justify-content: center;
  42. align-items: center;
  43. }
  44. .other_img_wrap image{
  45. width:90%;
  46. border-radius: 15rpx;
  47. }
  48. .item_other .other_info{
  49. width:60%;
  50. display: flex;
  51. flex-direction: column;
  52. justify-content: space-around;
  53.  
  54. }
  55. .other_info .other_title{
  56. font-size: 30rpx;
  57. color:#e06f93;
  58. }
  59. .other_info .other_detail{
  60. font-size: 26rpx;
  61. color:#666;
  62. }
  63.  
  64. /* 评论列表 */
  65.  
  66. .comment_wrap{
  67. margin-top:10rpx;
  68. }
  69. .comment_title{
  70. padding: 10rpx;
  71. font-size: 28rpx;
  72. }
  73. .comment_list{}
  74. .comment_item{
  75. margin-bottom: 10rpx;
  76. padding: 10rpx;
  77. display: flex;
  78. justify-content: space-between;
  79. border-bottom: 1px solid #666;
  80. }
  81. .comment_item .comment_user{
  82. flex:;
  83. display: flex;
  84. justify-content: center;
  85. align-items: center;
  86. }
  87. .comment_user image{
  88. width:60%;
  89. }
  90. .comment_item .comment_info{
  91. flex:;
  92. display: flex;
  93. flex-direction:column;
  94. justify-content: space-around;
  95. }
  96. .comment_info .comment_detail{
  97. display: flex;
  98. justify-content: space-between;
  99. }
  100. .comment_detail .author{
  101. font-size: 28rpx;
  102. color:#000;
  103. }
  104. .comment_detail .date{
  105. font-size: 24rpx;
  106. color:#666;
  107. }
  108. .comment_info .comment_content{
  109. font-size: 28rpx;
  110. color:#000000;
  111. }

效果:

完!

小程序demo项目实践的更多相关文章

  1. 微信小程序demo

    微信小程序demo github地址 去年小程序刚发布时特别火,赶潮流做了个demo.感觉小程序开发还是比较简单的,主要是官方文档写得比较好,遗憾的是很多API需要微信认证才能使用. 由于小程序包大小 ...

  2. 微信小程序demo-环球小镇

    微信小程序-环球小镇说明:实现了环球小镇(huanqiuxiaozhen.com)移动端商城客户端部分功能,包括首页,分类,购物车,帐户,品牌列表,商品详情等功能.    项目下载:http://bb ...

  3. 微信小程序< 3 > ~ 微信小程序开源项目合集

    简介 移动开发者想学习微信小程序需要学习一点HTML ,CSS和JS才能够比较快速的上手,参考自己学习Android学习过程,阅读源码是一个很好的方式,所以才收集了一些WeApp的开源项目. awes ...

  4. 番外篇!全球首个微信应用号开发教程!小程序 DEMO 视频奉上!

    大家好,我是博卡君.经过国庆节的七天假期,相信很多朋友都已经研究出自己的小程序 demo 了吧?我最近也利用休息时间关注了一下网上关于小程序开发的讨论,今天就利用这个番外篇谈谈自己对小程序的一些想法吧 ...

  5. 微信小程序DEMO初体验

    小程序虽然被炒的很热,但是绝大部分人却从未亲自体验过,在2017年的上班第一天,献上一个小程序DEMO,您可以体验! 注意:由于微信限制,只能使用扫一扫来体验下方小程序DEMO. DEMO首页截图如下 ...

  6. 近期热门微信小程序demo源码下载汇总

    近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...

  7. 微信小程序mpvue项目使用WuxWeapp前端UI组件

    前言:这是一篇简单粗暴的使用指南 在最近的小程序项目里前端UI框架最后选择使用WuxWeapp,这篇文章记录一下如何在小程序mpvue项目中使用该UI组件. 步骤一:下载源码 (地址在这里)主要是里面 ...

  8. 微信小程序学习二 微信小程序的项目结构

    进来之后可以看到五个文件和两个文件夹,一般新建的小程序项目都是这种格式,但有些可能会不一样,不用担心,因为我们所要关注的文件是不会变的 pages 小程序的页面放置文件夹,每一个页面(page)包含四 ...

  9. 京东购物小程序 | Taro3 项目分包实践

    背景 京东购物小程序作为京东小程序业务流量的主要入口,承载着许多的活动和页面,而很多的活动在小程序开展的同时,也会在京东 APP 端进行同步的 H5 端页面的投放.这时候,一个相同的活动,需要同时开发 ...

随机推荐

  1. DNS 解析

    DNS即为Domain Name System的缩写形式,就是所谓的域名系统,它是互联网的一项服务.它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网. 如果想访问某个网站( ...

  2. VS.NET(C#)--2.6_ASP.NET服务器控件层次结构

    ASP.NET服务器控件层次结构 语法 <asp:ControlType Id="ControlID" Rubat="Server" Property=& ...

  3. 2.MVC基础-Model概述(思维导图)

    已思维导图形式,便于记忆和补充

  4. 【转载】Sqlserver存储过程中使用Select和Set给变量赋值

    Sqlserver存储过程是时常使用到的一个数据库对象,在存储过程中会使用到Declare来定义存储过程变量,定义的存储过程变量可以通过Set或者Select等关键字方法来进行赋值操作,使用Set对存 ...

  5. vue实现一个评论列表

    <!DOCTYPE html> <html> <head> <title>简易评论列表</title> <meta charset=& ...

  6. 从零开始搭建vue移动端项目到上线

    先来看一波效果图 初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack mypro ...

  7. Nginx 安装目录 和 编译参数

    安装目录详解 查看安装nginx之后总共生成了哪些文件 rpm -ql nginx 在上面的文件中包括配置文件和日志文件 /etc/logrotate.d/nginx 类型:配置文件 作用:Nginx ...

  8. sql 四舍五入 保留两位小数

    一.问题描述 数据库里的 float momey 类型,都会精确到多位小数.但有时候 我们不需要那么精确,例如,只精确到两位有效数字. 二.sqlserver解决方案: 1. 使用 Round() 函 ...

  9. nginx日志配置笔记:if条件

    1.特定条件写日志: 参照: https://stackoverflow.com/questions/19011719/how-to-write-only-logs-with-200-status h ...

  10. Win 2008 R2——由于管理员设置的策略,该磁盘处于脱机状态

    操作系统:Windows 2008R2 现象描述: 1.原系统为Windows 2012挂载了2T的存储,因业务要求重新安装为Windows 2008R2,并没有在磁盘存储空间上重新做映射. 2.系统 ...