开发试听页面及重录功能

app.js

@@ -1,80 +1,84 @@
 // app.js
 import {
-    userLogin
+  userLogin,
+  getUserInfo
 } from '~/api/user'
 import {
-    createStoreBindings
+  createStoreBindings
 } from 'mobx-miniprogram-bindings'
 import {
-    store
+  store
 } from '~/store/index'
 let storeBindings
 App({
-    onLaunch() {
-        this.checkIsIos()
-        this.getNavbarInfo()
-    },
-    async onShow(options) {
-        this.storeBindings = createStoreBindings(this, {
-            store,
-            actions: ['setUser']
-        })
-        let shareUid = options.query.uid
-        let uid = wx.getStorageSync('uid')
-        let userInfo = wx.getStorageSync('user')
-        if (uid && userInfo) {
-            this.setUser(userInfo)
-        } else {
-            this.login(shareUid)
-        }
-    },
-    login(shareUid) {
-        wx.login({
-            success: async (res) => {
-                if (res.code) {
-                    // 获取openid
-                    let data = {
-                        code: res.code,
-                        shareUid
-                    }
-                    let userRes = await userLogin(data)
-                    this.setUser(userRes.data)
-                    wx.setStorageSync('uid', userRes.data.uid)
-                    wx.setStorageSync('user', userRes.data)
-                    this.globalData.userInfo = userRes.data
-                    if (getApp().callBack) {
-                        getApp().callBack(userRes);
-                    }
-                }
-            }
-        })
-    },
-    checkIsIos: function () {
-        wx.getSystemInfo({
-            success: (res) => {
-                if (res.system.search('iOS') != -1) {
-                    this.globalData.isIOS = true
-                }
-            }
-        })
-    },
-    getNavbarInfo() {
-        // 获取系统信息
-        const systemInfo = wx.getSystemInfoSync();
-        // 胶囊按钮位置信息
-        const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
-        // 导航栏高度 = 状态栏高度 + 44
-        this.globalData.navBarHeight = systemInfo.statusBarHeight + 44;
-        this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
-        this.globalData.menuTop = menuButtonInfo.top;
-        this.globalData.menuHeight = menuButtonInfo.height;
-    },
-    globalData: {
-        userInfo: null,
-        isIOS: false, // 判断设备是否为苹果
-        navBarHeight: 0, // 导航栏高度
-        menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
-        menuTop: 0, // 胶囊距底部间距（保持底部间距一致）
-        menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
+  onLaunch() {
+    this.checkIsIos()
+    this.getNavbarInfo()
+  },
+  async onShow(options) {
+    this.storeBindings = createStoreBindings(this, {
+      store,
+      actions: ['setUser']
+    })
+    let shareUid = options.query.uid
+    let uid = wx.getStorageSync('uid')
+    if (uid) {
+      let userInfo = await getUserInfo()
+      this.setUser(userInfo.user)
+      if (getApp().callBack) {
+        getApp().callBack();
+      }
+    } else {
+      this.login(shareUid)
     }
+  },
+  login(shareUid) {
+    wx.login({
+      success: async (res) => {
+        if (res.code) {
+          // 获取openid
+          let data = {
+            code: res.code,
+            shareUid
+          }
+          let userRes = await userLogin(data)
+          this.setUser(userRes.data)
+          wx.setStorageSync('uid', userRes.data.uid)
+          wx.setStorageSync('user', userRes.data)
+          this.globalData.userInfo = userRes.data
+          if (getApp().callBack) {
+            getApp().callBack(userRes);
+          }
+        }
+      }
+    })
+  },
+  checkIsIos: function () {
+    wx.getSystemInfo({
+      success: (res) => {
+        if (res.system.search('iOS') != -1) {
+          this.globalData.isIOS = true
+        }
+      }
+    })
+  },
+  getNavbarInfo() {
+    // 获取系统信息
+    const systemInfo = wx.getSystemInfoSync();
+    // 胶囊按钮位置信息
+    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
+    // 导航栏高度 = 状态栏高度 + 44
+    this.globalData.navBarHeight = systemInfo.statusBarHeight + 44;
+    this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
+    this.globalData.menuTop = menuButtonInfo.top;
+    this.globalData.menuHeight = menuButtonInfo.height;
+  },
+  globalData: {
+    userInfo: null,
+    isIOS: false, // 判断设备是否为苹果
+    navBarHeight: 0, // 导航栏高度
+    menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
+    menuTop: 0, // 胶囊距底部间距（保持底部间距一致）
+    menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
+  }
 })

components/navigationBar/index.js

@@ -1,80 +1,80 @@
 const app = getApp()
 import {
-    setUserInfo
+  setUserInfo
 } from '~/api/user'
 import {
-    storeBindingsBehavior
+  storeBindingsBehavior
 } from 'mobx-miniprogram-bindings'
 import {
-    store
+  store
 } from '~/store/index'
 Component({
-    // 自动绑定
-    behaviors: [storeBindingsBehavior],
-    storeBindings: {
-        store,
-        fields: {
-            userInfo: 'userInfo'
-        },
-        actions: {
-            setUser: 'setUser'
-        }
+  // 自动绑定
+  behaviors: [storeBindingsBehavior],
+  storeBindings: {
+    store,
+    fields: {
+      userInfo: 'userInfo'
     },
-    properties: {
-        title: {
-            type: String,
-            value: '朗读小咖秀',
-        }
+    actions: {
+      setUser: 'setUser'
+    }
+  },
+  properties: {
+    title: {
+      type: String,
+      value: '朗读小咖秀',
+    }
+  },
+  data: {
+    navBarHeight: app.globalData.navBarHeight,
+    menuRight: app.globalData.menuRight,
+    menuTop: app.globalData.menuTop,
+    menuHeight: app.globalData.menuHeight,
+    isGradeShow: false,
+    temporaryGrade: null
+  },
+  methods: {
+    closeGrade() {
+      this.setData({
+        isGradeShow: false,
+      })
     },
-    data: {
-        navBarHeight: app.globalData.navBarHeight,
-        menuRight: app.globalData.menuRight,
-        menuTop: app.globalData.menuTop,
-        menuHeight: app.globalData.menuHeight,
+    // 选择年级
+    selectGrade({
+      target
+    }) {
+      let code = target.dataset.code
+      if (!code) {
+        return
+      }
+      this.setData({
+        temporaryGrade: code
+      })
+    },
+    showGrade() {
+      this.setData({
+        isGradeShow: true,
+        temporaryGrade: this.data.userInfo.grade
+      })
+    },
+    // 修改年级
+    async changeGrade(e) {
+      const grade = this.data.temporaryGrade
+      if (!grade) {
+        return wx.showToast({
+          title: '请选择年级',
+          icon: 'none',
+          duration: 2000
+        })
+      }
+      this.setData({
         isGradeShow: false,
-        temporaryGrade: null
+      })
+      let res = await setUserInfo({
+        grade
+      }, 'put')
+      this.setUser(res)
     },
-    methods: {
-        closeGrade() {
-            this.setData({
-                isGradeShow: false,
-            })
-        },
-        // 选择年级
-        selectGrade({
-            target
-        }) {
-            let code = target.dataset.code
-            if (!code) {
-                return
-            }
-            this.setData({
-                temporaryGrade: code
-            })
-        },
-        showGrade() {
-            this.setData({
-                isGradeShow: true,
-                temporaryGrade: this.data.userInfo.grade
-            })
-        },
-        // 修改年级
-        async changeGrade(e) {
-            const grade = this.data.temporaryGrade
-            if (!grade) {
-                return wx.showToast({
-                    title: '请选择年级',
-                    icon: 'none',
-                    duration: 2000
-                })
-            }
-            this.setData({
-                isGradeShow: false,
-            })
-            let res = await setUserInfo({
-                grade
-            }, 'put')
-            this.setUser(res)
-        },
-    }
+  }
 })

pages/index/index.js

@@ -1,97 +1,96 @@
 const app = getApp()
 import {
-    getHotrecommendList
+  getHotrecommendList
 } from "~/api/works"
 import reachBottom from '~/mixins/reachBottom'
 import {
-    createStoreBindings
+  createStoreBindings
 } from 'mobx-miniprogram-bindings'
 import {
-    store
+  store
 } from '~/store/index'
 Page({
-    behaviors: [reachBottom],
-    /**
-     * 页面的初始数据
-     */
-    data: {
-        navBarHeight: app.globalData.navBarHeight,
-        background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
-        currentType: '1',
-        // 控制一级分类是否固定
-        isFixed: false
-    },
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    onShow() {
-        if (typeof this.getTabBar === 'function') {
-            this.getTabBar().setData({
-                selected: 1
-            })
-        }
-
-        if (wx.getStorageSync('uid')) {
-            this.getLocUserInfo()
-            this.loadMore()
-        } else {
-            getApp().callBack = (res) => {
-                this.getLocUserInfo()
-                this.loadMore()
-            }
-        }
-    },
-    onUnload() {
-        this.storeBindings.destroyStoreBindings()
-    },
-    getLocUserInfo() {
-        this.storeBindings = createStoreBindings(this, {
-            store,
-            fields: {
-                userInfo: 'userInfo'
-            },
-        })
-        this.storeBindings.updateStoreBindings()
-    },
-    loadMore() {
-        if (this.data.currentType == '1') {
-            this.getData(getHotrecommendList, {
-                grade: this.data.userInfo.grade
-            })
-        } else if (this.data.currentType == '2') {
-            this.getData(getHotrecommendList, {
-                grade: 'PRESCHOOL'
-            })
-        }
+  behaviors: [reachBottom],
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    navBarHeight: app.globalData.navBarHeight,
+    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
+    currentType: '1',
+    // 控制一级分类是否固定
+    isFixed: false
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onShow() {
+    if (typeof this.getTabBar === 'function') {
+      this.getTabBar().setData({
+        selected: 1
+      })
+    }
+    // if (wx.getStorageSync('uid')) {
+    //     this.getLocUserInfo()
+    //     this.loadMore()
+    // } else {
+    getApp().callBack = (res) => {
+      this.getLocUserInfo()
+      this.loadMore()
+    }
+    // }
+  },
+  onUnload() {
+    this.storeBindings.destroyStoreBindings()
+  },
+  getLocUserInfo() {
+    this.storeBindings = createStoreBindings(this, {
+      store,
+      fields: {
+        userInfo: 'userInfo'
+      },
+    })
+    this.storeBindings.updateStoreBindings()
+  },
+  loadMore() {
+    if (this.data.currentType == '1') {
+      this.getData(getHotrecommendList, {
+        grade: this.data.userInfo.grade
+      })
+    } else if (this.data.currentType == '2') {
+      this.getData(getHotrecommendList, {
+        grade: 'PRESCHOOL'
+      })
+    }
 
-    },
-    /**
-     * 监听页面滚动事件
-     */
-    onPageScroll(e) {
-        if (e.scrollTop >= 103 && !this.data.isFixed) {
-            this.setData({
-                isFixed: true
-            })
-        } else if (e.scrollTop < 103 && this.data.isFixed) {
-            this.setData({
-                isFixed: false
-            })
-        }
-    },
+  },
+  /**
+   * 监听页面滚动事件
+   */
+  onPageScroll(e) {
+    if (e.scrollTop >= 103 && !this.data.isFixed) {
+      this.setData({
+        isFixed: true
+      })
+    } else if (e.scrollTop < 103 && this.data.isFixed) {
+      this.setData({
+        isFixed: false
+      })
+    }
+  },
 
-    onReachBottom() {
-        this.loadMore()
-    },
-    selectType({
-        target
-    }) {
-        if (target.dataset.type) {
-            this.setData({
-                currentType: target.dataset.type
-            })
-            this.resetData()
-        }
-    },
+  onReachBottom() {
+    this.loadMore()
+  },
+  selectType({
+    target
+  }) {
+    if (target.dataset.type) {
+      this.setData({
+        currentType: target.dataset.type
+      })
+      this.resetData()
+    }
+  },
 
 })

pages/reading/index.js

@@ -9,10 +9,15 @@ import {
 } from '~/store/index'
 const aiengine = require('~/utils/ChivoxAiEngine')
 const sha1 = require('~/utils/sha1');
+// 文章行高
 let rowH = 0
 let videoContext = null
+// 滚动变色定时器
 let stl = null
+// 倒计时
 let setTimeoutObj = null
+// 录音
+let innerAudioContext = null
 /*创建基础引擎*/
 let wsEngine = aiengine.createWsEngine({});
 /*微信录音*/
@@ -127,16 +132,14 @@ Page({
   },
   // 开始录制
   setCountDown() {
-    if (this.data.readingReset) {
-      this.setData({
-        readingReset: false
-      })
-      this.getHeight()
-    }
     if (this.data.state) {
       this.finishRecord()
       return
     }
+    if (this.data.readingReset) {
+      this.clearReset()
+      this.getHeight()
+    }
     this.setData({
       'countDown.state': true
     })
@@ -305,12 +308,23 @@ Page({
       url: `/pages/score/index`,
     })
   },
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload() {
-    clearTimeout(this.setTimeoutObj)
-    clearInterval(this.stl)
+  videoPlay() {
+    if (this.data.readingReset) {
+      this.innerAudioContext = wx.createInnerAudioContext();
+      this.innerAudioContext.src = this.data.readDetail.tempFilePath; // 这里可以是录音的临时路径
+      this.innerAudioContext.play();
+    }
+  },
+  // 清除试听状态
+  clearReset() {
+    if (this.innerAudioContext) {
+      this.innerAudioContext.stop()
+    }
+    this.videoContext.stop()
+    this.videoContext.seek(0)
+    this.setData({
+      readingReset: false
+    })
   },
   // 获取设备高度与行高度
   getHeight() {
@@ -324,6 +338,18 @@ Page({
       this.rowH = rect.height
     }).exec()
   },
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+    wsEngine.reset()
+    recorderManager.stop();
+    if (this.innerAudioContext) {
+      this.innerAudioContext.stop()
+    }
+    clearTimeout(this.setTimeoutObj)
+    clearInterval(this.stl)
+  },
   onShareAppMessage() {
 
   }

pages/reading/index.less

@@ -143,7 +143,7 @@
   }
 }
 
-.xxx {
+.scoreBoxC {
   flex: 1;
   width: 100%;
   overflow: auto;

pages/reading/index.wxml

@@ -1,7 +1,7 @@
 <view class="readingBox">
   <image src="{{videoInfo.userRead.coverImg}}" class='poster' wx:if="{{!state&&!readingReset}}" />
-  <video id="myVideo" src="{{videoInfo.userRead.originVideo}}" bindended='videoEnd' controls="{{readingReset}}"
-    show-center-play-btn="{{readingReset}}"></video>
+  <video id="myVideo" src="{{videoInfo.userRead.originVideo}}" bindended='videoEnd' controls="{{false}}"
+    show-center-play-btn="{{readingReset}}" bindplay='videoPlay'></video>
   <view class="contentBox" wx:if="{{!readingReset}}">
     <view class="articleMask"></view>
     <scroll-view class="content" scroll-y enhanced show-scrollbar="{{false}}" scroll-top="{{scrollTop}}"
@@ -12,7 +12,7 @@
       <view style="height: {{contentH}}rpx;"></view>
     </scroll-view>
   </view>
-  <view class="xxx" wx:elif="{{readingReset}}">
+  <view class="scoreBoxC" wx:elif="{{readingReset}}">
     <view class="scoreBox">
       <!-- 星星区域 -->
       <view class="lightBox">
@@ -38,21 +38,24 @@
         <view class="progressBox">
           <view class="row">
             <view class="name">完整度</view>
-            <progress class="progress" active percent='{{readDetail.integrity}}' stroke-width="18" activeColor="#70D9FF" />
+            <progress class="progress" active percent='{{readDetail.integrity}}' stroke-width="18"
+              activeColor="#70D9FF" />
             <view class="scoreInfo">
               {{readDetail.integrity}}/100
             </view>
           </view>
           <view class="row">
             <view class="name">正确率</view>
-            <progress class="progress" active percent='{{readDetail.accuracy}}' stroke-width="18" activeColor="#918EFD" />
+            <progress class="progress" active percent='{{readDetail.accuracy}}' stroke-width="18"
+              activeColor="#918EFD" />
             <view class="scoreInfo">
               {{readDetail.accuracy}}/100
             </view>
           </view>
           <view class="row">
             <view class="name">流利度</view>
-            <progress class="progress" active percent='{{readDetail.fluency}}' stroke-width="18" activeColor="#FE9500" />
+            <progress class="progress" active percent='{{readDetail.fluency}}' stroke-width="18"
+              activeColor="#FE9500" />
             <view class="scoreInfo">
               {{readDetail.fluency}}/100
             </view>

pages/reading/index.wxss

@@ -124,22 +124,22 @@
   font-size: 124rpx;
   margin-bottom: 6rpx;
 }
-.xxx {
+.scoreBoxC {
   flex: 1;
   width: 100%;
   overflow: auto;
   position: relative;
   padding-bottom: calc(170rpx + env(safe-area-inset-bottom));
 }
-.xxx .scoreBox {
+.scoreBoxC .scoreBox {
   width: 610rpx;
   margin: 80rpx auto 0rpx;
 }
-.xxx .scoreBox .lightBox {
+.scoreBoxC .scoreBox .lightBox {
   position: relative;
   height: 180rpx;
 }
-.xxx .scoreBox .lightBox .light {
+.scoreBoxC .scoreBox .lightBox .light {
   position: absolute;
   width: 360rpx;
   height: 180rpx;
@@ -147,32 +147,32 @@
   right: 0px;
   margin: auto;
 }
-.xxx .scoreBox .lightBox .stars {
+.scoreBoxC .scoreBox .lightBox .stars {
   position: absolute;
   width: 62rpx;
   height: 62rpx;
 }
-.xxx .scoreBox .lightBox .stars-1 {
+.scoreBoxC .scoreBox .lightBox .stars-1 {
   top: 64rpx;
   left: 132rpx;
 }
-.xxx .scoreBox .lightBox .stars-2 {
+.scoreBoxC .scoreBox .lightBox .stars-2 {
   top: 25rpx;
   left: 198rpx;
 }
-.xxx .scoreBox .lightBox .stars-3 {
+.scoreBoxC .scoreBox .lightBox .stars-3 {
   top: 6rpx;
   left: 276rpx;
 }
-.xxx .scoreBox .lightBox .stars-4 {
+.scoreBoxC .scoreBox .lightBox .stars-4 {
   top: 25rpx;
   right: 198rpx;
 }
-.xxx .scoreBox .lightBox .stars-5 {
+.scoreBoxC .scoreBox .lightBox .stars-5 {
   top: 62rpx;
   right: 132rpx;
 }
-.xxx .scoreBox .score {
+.scoreBoxC .scoreBox .score {
   position: relative;
   width: 100%;
   box-sizing: border-box;
@@ -181,7 +181,7 @@
   background-color: white;
   box-shadow: rgba(255, 255, 255, 0.15) 0px 6px 12px -2px, rgba(255, 255, 255, 0.1) 0px 3px 7px -3px;
 }
-.xxx .scoreBox .score .avatarBox {
+.scoreBoxC .scoreBox .score .avatarBox {
   position: absolute;
   top: -72rpx;
   left: 0px;
@@ -194,45 +194,45 @@
   background-color: white;
   font-size: 0px;
 }
-.xxx .scoreBox .score .avatarBox .avatar {
+.scoreBoxC .scoreBox .score .avatarBox .avatar {
   width: 100%;
   height: 100%;
   border-radius: 50%;
 }
-.xxx .scoreBox .score .nickName {
+.scoreBoxC .scoreBox .score .nickName {
   font-size: 36rpx;
   text-align: center;
 }
-.xxx .scoreBox .score .totalScore {
+.scoreBoxC .scoreBox .score .totalScore {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 26rpx;
   font-size: 42rpx;
 }
-.xxx .scoreBox .score .totalScore .num {
+.scoreBoxC .scoreBox .score .totalScore .num {
   color: #58C5FF;
   font-size: 42rpx;
 }
-.xxx .scoreBox .score .progressBox {
+.scoreBoxC .scoreBox .score .progressBox {
   margin-top: 50rpx;
 }
-.xxx .scoreBox .score .progressBox .row {
+.scoreBoxC .scoreBox .score .progressBox .row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 42rpx;
 }
-.xxx .scoreBox .score .progressBox .row .name {
+.scoreBoxC .scoreBox .score .progressBox .row .name {
   font-size: 32rpx;
   width: 96rpx;
 }
-.xxx .scoreBox .score .progressBox .row .progress {
+.scoreBoxC .scoreBox .score .progressBox .row .progress {
   width: 306rpx;
   border-radius: 20rpx;
   overflow: hidden;
 }
-.xxx .scoreBox .score .progressBox .row .scoreInfo {
+.scoreBoxC .scoreBox .score .progressBox .row .scoreInfo {
   font-size: 27rpx;
   color: #666666;
 }