123

app.json

@@ -1,6 +1,8 @@
 {
   "pages": [
-    "pages/index/index"
+    "pages/index/index",
+    "pages/main/class/class",
+    "pages/main/reading/reading"
   ],
   "window": {
     "backgroundTextStyle": "light",

component/hot/hot.js

@@ -19,89 +19,127 @@ export const hotInit = (that) => {
             grade:"一年级 上学期",
             img: "../../static/image/timg.jpg",
             plays: "1",
-            likes: "2"
+            likes: "2",
+            classId: "1"
           },
           {
             title:"铺满金色巴掌的水泥道",
             grade:"一年级 上学期",
             img: "../../static/image/timg.jpg",
             plays: "12345",
-            likes: "54321"
+            likes: "54321",
+            classId: "2"
           },
           {
             title:"铺满金色巴掌的水泥道",
             grade:"一年级 上学期",
             img: "../../static/image/timg.jpg",
             plays: "12345",
-            likes: "54321"
+            likes: "54321",
+            classId: "2"
           },
           {
             title:"铺满金色巴掌的水泥道",
             grade:"一年级 上学期",
             img: "../../static/image/timg.jpg",
             plays: "12345",
-            likes: "54321"
+            likes: "54321",
+            classId: "2"
           },
           {
             title:"铺满金色巴掌的水泥道",
             grade:"一年级 上学期",
             img: "../../static/image/timg.jpg",
             plays: "12345",
-            likes: "54321"
+            likes: "54321",
+            classId: "2"
           },
           {
             title:"铺满金色巴掌的水泥道",
             grade:"一年级 上学期",
             img: "../../static/image/timg.jpg",
             plays: "12345",
-            likes: "54321"
+            likes: "54321",
+            classId: "2"
           },
           {
             title:"铺满金色巴掌的水泥道",
             grade:"一年级 上学期",
             img: "../../static/image/timg.jpg",
             plays: "12345",
-            likes: "54321"
+            likes: "54321",
+            classId: "2"
           },
           {
             title:"铺满金色巴掌的水泥道",
             grade:"一年级 上学期",
             img: "../../static/image/timg.jpg",
             plays: "12345",
-            likes: "54321"
+            likes: "54321",
+            classId: "2"
           },
           {
             title:"铺满金色巴掌的水泥道",
             grade:"一年级 上学期",
             img: "../../static/image/timg.jpg",
             plays: "12345",
-            likes: "54321"
+            likes: "54321",
+            classId: "2"
           },
           {
             title:"铺满金色巴掌的水泥道",
             grade:"一年级 上学期",
             img: "../../static/image/timg.jpg",
             plays: "12345",
-            likes: "54321"
+            likes: "54321",
+            classId: "2"
           },
           {
             title:"铺满金色巴掌的水泥道",
             grade:"一年级 上学期",
             img: "../../static/image/timg.jpg",
             plays: "12345",
-            likes: "54321"
-          }
+            likes: "54321",
+            classId: "2"
+          },
+          {
+            title:"铺满金色巴掌的水泥道",
+            grade:"一年级 上学期",
+            img: "../../static/image/timg.jpg",
+            plays: "12345",
+            likes: "54321",
+            classId: "2"
+          },
+          {
+            title:"铺满金色巴掌的水泥道",
+            grade:"一年级 上学期",
+            img: "../../static/image/timg.jpg",
+            plays: "12345",
+            likes: "54321",
+            classId: "2"
+          },
+      
         ]
       }
     }),
+    // 搜索方法
     that.searchHandler = () => {
       console.log('搜索按钮')
       console.log(that.data.hotInput);
     },
+    // 输入框输入
     that.inputHandler = (e) => {
       that.setData({
         hotInput: e.detail.value
       });
       console.log(that.data.hotInput)
     }
+    // 打开课程页面
+    that.openClass = (e) =>{
+      let classId = e.currentTarget.dataset.classid;
+      let title = e.currentTarget.dataset.title;
+      wx.navigateTo({
+        url: `../main/class/class?id=${classId}&title=${title}`
+      })
+    }
 }

component/hot/hot.wxml

@@ -20,6 +20,7 @@
         </view>
         <view class="hotWares"  style="flex-direction:row;">
             <view class="hotWareCard" wx:for="{{hotData.wareCards}}" wx:key="">
+            <view class="hotWareCard" wx:for="{{hotData.wareCards}}" wx:key="{{index}}" bindtap="openClass" data-classId="{{item.classId}}" data-title="{{item.title}}">
                 <image class="wareCardImg" src="{{item.img}}" />
                 <text class="wareCardTitle">{{item.title}}</text>
                 <text class="wareCardTip">{{item.grade}}</text>

pages/index/index.js

@@ -4,6 +4,7 @@ const app = getApp()
 import { hotInit } from '../../component/hot/hot';
 import { myInit } from '../../component/my/my';
 import { followInit } from '../../component/follow/follow';
+// import '../../utils/hls';
 // import httpRequestApi from '../../utils/APIRequest';
 // import httputil from '../../utils/httputil';
 Page({

pages/main/class/class.js

@@ -0,0 +1,27 @@
+Page({
+  data: {
+    fullScreenBtn: false,
+    playBtn: false,
+    gesture: true,
+
+  },
+  onLoad: function (option) {
+    if(option.title){
+      wx.setNavigationBarTitle({
+        title: option.title//页面标题为路由参数
+      })
+      this.setData({
+        title: option.title,
+        id: option.id
+      })
+    }
+  },
+
+  goToReading: function(){
+    let id = this.data.id;
+    let title = this.data.title;
+    wx.navigateTo({
+      url: `../../main/reading/reading?id=${id}&title=${title}`
+    })
+  }
+})

pages/main/class/class.json

@@ -0,0 +1 @@
+{}

pages/main/class/class.wxml

@@ -0,0 +1,36 @@
+<view >
+课件朗读
+  <video
+  class="videoSection"
+  src="http://efunvideo.ai160.com/vs2m/001/00103075/00103075012/00103075012.m3u8"
+  controls
+  show-fullscreen-btn="{{fullScreenBtn}}"
+  show-play-btn="{{playBtn}}"
+
+  ></video>
+<view class="readWorksSection">
+    <view class="workCard">
+        <image class="avatar" src="../../../static/image/timg.jpg" />
+        <text class="nickName">萝莉小猫咪</text>
+        <text class="time"></text>
+        <view class="likes">
+            <image class="likeTag" src="" />
+            <text class="likeNum">231</text>
+        </view>
+    </view>
+</view>
+<view class="footSection">
+    <view class="collectBtn footerBtn">
+        <image src="../../../static/image/hot_recommand.png" />
+        <text >收藏</text>
+    </view>
+    <view class="readingBtn footerBtn" bindtap="goToReading">
+         <image src="../../../static/image/hot_recommand.png" />
+        <text >我要朗读</text>
+    </view>
+    <view class="shareBtn footerBtn">
+         <image src="../../../static/image/hot_recommand.png" />
+        <text >分享</text>
+    </view>
+</view>
+</view>

pages/main/class/class.wxss

@@ -0,0 +1,28 @@
+.videoSection{
+    width: 750rpx;
+    height: 428rpx;
+}
+.footSection{
+    width: 750rpx;
+    height: 124rpx;
+    position: fixed;
+    bottom: 0;
+    background: #aaa;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+.readingBtn{
+    width: 148rpx;
+    height: 148rpx;
+    border-radius: 50%;
+    background: #aaa;
+}
+.footerBtn{
+    display: flex;
+    flex-direction: column;
+}
+.footerBtn image{
+    width: 48rpx;    
+    height: 48rpx;
+}

pages/main/reading/reading.js

@@ -0,0 +1,117 @@
+Page({
+    data: {
+        fullScreenBtn: false,
+        playBtn: false,
+        gesture: true,
+        muted: true,
+        gesture: false,
+        centerBtn: false,
+        recordFlag: 0,
+        recordSource: '',
+        videoCtr: 'recordingVideoEnd',
+
+    },
+    onLoad: function (option) {
+        if (option.title) {
+            wx.setNavigationBarTitle({
+                title: option.title //页面标题为路由参数
+            })
+        }
+        this.recorderManager = wx.getRecorderManager();
+        this.videoCtx = wx.createVideoContext('myVideo', this);
+
+        // 监听录音部分
+        // 录音开始
+        this.recorderManager.onStart(() => {
+            this.videoCtx.play();
+            this.setData({
+                recordFlag: 1
+            })
+            console.log('recorder start')
+        })
+        // 录音结束
+        this.recorderManager.onStop((res) => {
+            this.videoCtx.stop();
+            console.log('recorder stop', res)
+            console.log(res.tempFilePath)
+            const recordFile = res.tempFilePath;
+            this.setData({
+                recordFlag: 0,
+                recordSource: recordFile
+            })
+        })
+    },
+    // onShow:function(){
+
+    // },
+    
+    // 录音中视频播放结束 (控制录音同时结束)
+    recordingVideoEnd:function(){
+        // 
+        if (this.data.recordFlag === 0) {
+            this.recordStop();
+            this.setData({
+                videoCtr : 'playingVideoEnd'
+            })
+        }
+        // 录音结束
+        if (this.data.recordFlag === 1) {
+            // this.recordStop();
+        }
+    },
+    // 播放中视频播放结束 (控制录音同时结束)
+    playingVideoEnd:function(){
+        this.innerAudioContext.stop();
+    },
+    /***
+     *  recordFlag: 
+     *      0 初始状态
+     *      1 录音中
+     ***/
+    audioRecord: function () {
+        console.log(this.data.recordFlag)
+        if (this.data.recordFlag === 0) {
+            this.recordStart();
+        }
+        // 录音结束后
+        if (this.data.recordFlag === 1) {
+            this.recordStop();
+        }
+    },
+    // 录音开始
+    /**
+     * duration: 时长 最长10分钟
+            sampleRate: 44100, 采样率
+            numberOfChannels: 1, 录音通道
+            encodeBitRate: 192000, 码率
+            format: 'mp3', 格式
+            frameSize: 50 制定帧大小
+     */
+    recordStart: function () {
+        const options = {
+            duration: 600000,
+            sampleRate: 44100,
+            numberOfChannels: 1,
+            encodeBitRate: 192000,
+            format: 'mp3',
+            frameSize: 50
+        }
+        this.recorderManager.start(options);
+        
+    },
+    // 录音结束
+    recordStop: function () {
+        this.recorderManager.stop();
+    },
+    // 播放录音
+    audioPlay: function () {
+        console.log('音频播放');
+        this.innerAudioContext = wx.createInnerAudioContext();
+        this.innerAudioContext.onError((res) => {
+            // 播放音频失败的回调
+        })
+        this.innerAudioContext.src = this.data.recordSource; // 这里可以是录音的临时路径
+        this.videoCtx.play();
+        this.innerAudioContext.play();
+    },
+})

pages/main/reading/reading.json

@@ -0,0 +1 @@
+{}

pages/main/reading/reading.wxml

@@ -0,0 +1,34 @@
+<view >
+课件朗读
+  <video
+  id="myVideo"
+  class="videoSection"
+  src="http://efunvideo.ai160.com/vs2m/001/00103075/00103075012/00103075012.m3u8"
+  show-fullscreen-btn="{{fullScreenBtn}}"
+  show-play-btn="{{playBtn}}"
+  show-center-play-btn="{{centerBtn}}"
+  muted="{{muted}}"
+  enable-progress-gesture="{{gesture}}"
+  bindended="{{videoCtr}}"
+  ></video>
+
+  <!-- <audio name="123" author="123" src="{{recordSource}}" id="myAudio" controls loop></audio> -->
+  <button type="primary" bindtap="audioPlay">试听</button>
+<view class="readWorksSection">
+   
+</view>
+<view class="footSection">
+    <view class="collectBtn footerBtn">
+        <image src="../../../static/image/hot_recommand.png" />
+        <text >收藏</text>
+    </view>
+    <view class="readingBtn footerBtn" bindtap="audioRecord">
+         <image src="../../../static/image/hot_recommand.png" />
+        <text >我要朗读</text>
+    </view>
+    <view class="shareBtn footerBtn">
+         <image src="../../../static/image/hot_recommand.png" />
+        <text >分享</text>
+    </view>
+</view>
+</view>

pages/main/reading/reading.wxss

@@ -0,0 +1,35 @@
+.videoSection{
+    width: 750rpx;
+    height: 428rpx;
+}
+audio{
+    background: #000;
+    width: 100%;
+    height: 200rpx;
+    position: fixed;
+    bottom: 200rpx;
+}
+.footSection{
+    width: 750rpx;
+    height: 124rpx;
+    position: fixed;
+    bottom: 0;
+    background: #aaa;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+.readingBtn{
+    width: 148rpx;
+    height: 148rpx;
+    border-radius: 50%;
+    background: #aaa;
+}
+.footerBtn{
+    display: flex;
+    flex-direction: column;
+}
+.footerBtn image{
+    width: 48rpx;    
+    height: 48rpx;
+}

project.config.json

@@ -13,7 +13,11 @@
 	"compileType": "miniprogram",
 	"libVersion": "2.3.0",
 	"appid": "wx8961a3e5512f307c",
+<<<<<<< HEAD
 	"projectname": "reading",
+=======
+	"projectname": "reader",
+>>>>>>> de802dd4433d732c96f728e75151744607a72c93
 	"debugOptions": {
 		"hidedInDevtools": []
 	},