绘制音频分享的canvas

mixins/share.js

@@ -1,104 +1,129 @@
 module.exports = Behavior({
-    data: {},
-    methods: {
-        onShareAppMessage({
-            from,
-            target
-        }) {
-            if (from == 'button') {
-                let video = target.dataset.info
-                console.log(video, 'info,,.,.');
-                const promise = new Promise(resolve => {
-                    this.creatShare(video).then(res => {
-                        resolve(res)
-                    })
-                })
-                return {
-                    title: '请欣赏我的课文朗读作品，点赞+评论。',
-                    path: `/pages/index/index?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
-                    imageUrl: video.coverImg,
-                    promise
+  data: {},
+  methods: {
+    onShareAppMessage({
+      from,
+      target
+    }) {
+      if (from == 'button') {
+        let video = target.dataset.info
+        console.log(video, 'info,,.,.');
+        const promise = new Promise(resolve => {
+          this.creatShare(video).then(res => {
+            resolve(res)
+          })
+        })
+        return {
+          title: '请欣赏我的课文朗读作品，点赞+评论。',
+          path: `/pages/index/index?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
+          imageUrl: video.coverImg,
+          promise
+        }
+      } else {
+        return {
+          title: '课文朗读，从未如此有趣。',
+          path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
+          imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
+        }
+      }
+    },
+    creatShare(video) {
+      return new Promise((resolve, reject) => {
+        let context = wx.createSelectorQuery();
+        context
+          .select('#share')
+          .fields({
+            node: true,
+            size: true
+          }).exec((res) => {
+            const canvas = res[0].node;
+            const ctx = canvas.getContext('2d');
+            const dpr = wx.getSystemInfoSync().pixelRatio;
+            canvas.width = res[0].width * dpr;
+            canvas.height = res[0].height * dpr;
+            ctx.scale(dpr, dpr);
+            ctx.font = '14px PingFang';
+            let pic = canvas.createImage();
+            pic.src = video.userReadExtend.resourcesType == 1 ? video.userReadExtend.backgroundVirtualImg : video.userRead.coverImg;
+            pic.onload = () => {
+              ctx.drawImage(pic, 0, 0, 375, 211);
+              if (video.userReadExtend.resourcesType == 1) {
+                let aBg = canvas.createImage();
+                aBg.src = '/static/shareAudioBg.png';
+                aBg.onload = () => {
+                  ctx.drawImage(aBg, 127.5, 38, 120, 120);
+                  let rate = 0.5
+                  ctx.arc(
+                    Math.floor(375 * rate),
+                    98,
+                    Math.floor(100 * rate),
+                    0,
+                    2 * Math.PI
+                  );
+                  ctx.clip() //裁剪
+                  let coverImg = canvas.createImage();
+                  coverImg.src = video.userRead.coverImg;
+                  coverImg.onload = () => {
+                    ctx.drawImage( //定位在圆圈范围内便会出现
+                      coverImg, //图片暂存路径
+                      129, 42,
+                      110, 110,
+                    );
+                    ctx.restore()
+                  }
                 }
-            } else {
-                return {
-                    title: '课文朗读，从未如此有趣。',
-                    path: `/pages/index/index?uid=${wx.getStorageSync('uid')}`,
-                    imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
+              }
+            }
+            let peiyin = canvas.createImage();
+            peiyin.src = '/static/peiyin.jpg';
+            peiyin.onload = () => {
+              ctx.drawImage(peiyin, 0, 211, 375, 89);
+              //分享
+              let fx = canvas.createImage();
+              fx.src = '/static/share.png'
+              fx.onload = () => {
+                ctx.drawImage(fx, 12, 220, 20, 20)
+                ctx.fillText('分享', 36, 238)
+                // 收藏，一个一个渲染
+                let sc = canvas.createImage();
+                sc.src = '/static/no_collect.png'
+                sc.onload = () => {
+                  ctx.drawImage(sc, 110, 220, 19, 19)
+                  ctx.fillText('收藏', 134, 238)
+                  // 评论
+                  let pl = canvas.createImage();
+                  pl.src = '/static/comment.png'
+                  pl.onload = () => {
+                    ctx.drawImage(pl, 318, 222, 22, 22)
+                    ctx.fillText(video.userRead.commentAmount || 0, 340, 238)
+                    //点赞
+                    let dz = canvas.createImage();
+                    dz.src = video.isLike ? '/static/heart_colored.png' : '/static/heart.png'
+                    dz.onload = () => {
+                      ctx.drawImage(dz, 228, 222, 22, 22)
+                      ctx.fillText(video.userRead.likeAmount || 0, 254, 238)
+                      setTimeout(() => {
+                        wx.canvasToTempFilePath({
+                          canvas: canvas,
+                          success(res) {
+                            resolve({
+                              title: '请欣赏我的课文朗读作品，点赞+评论。',
+                              path: `/pages/index?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
+                              imageUrl: res.tempFilePath
+                            })
+                          },
+                          fail(res) {
+                            reject()
+                          }
+                        }, this)
+                      }, 500)
+                    }
+                  }
                 }
+              }
             }
-        },
-        creatShare(video) {
-            return new Promise((resolve, reject) => {
-                let context = wx.createSelectorQuery();
-                context
-                    .select('#share')
-                    .fields({
-                        node: true,
-                        size: true
-                    }).exec((res) => {
-                        const canvas = res[0].node;
-                        const ctx = canvas.getContext('2d');
-                        const dpr = wx.getSystemInfoSync().pixelRatio;
-                        canvas.width = res[0].width * dpr;
-                        canvas.height = res[0].height * dpr;
-                        ctx.scale(dpr, dpr);
-                        ctx.font = '14px PingFang';
-                        let pic = canvas.createImage();
-                        pic.src = video.userReadExtend.backgroundVirtualImg;
-                        // pic.src = video.userRead.coverImg; //可以是本地，也可以是网络图片
-                        pic.onload = () => {
-                            ctx.drawImage(pic, 0, 0, 375, 211);
-                        }
-                        let peiyin = canvas.createImage();
-                        peiyin.src = '/static/peiyin.jpg';
-                        peiyin.onload = () => {
-                            ctx.drawImage(peiyin, 0, 211, 375, 89);
-                            //分享
-                            let fx = canvas.createImage();
-                            fx.src = '/static/share.png'
-                            fx.onload = () => {
-                                ctx.drawImage(fx, 12, 220, 20, 20)
-                                ctx.fillText('分享', 36, 238)
-                                // 收藏，一个一个渲染
-                                let sc = canvas.createImage();
-                                sc.src = '/static/no_collect.png'
-                                sc.onload = () => {
-                                    ctx.drawImage(sc, 110, 220, 19, 19)
-                                    ctx.fillText('收藏', 134, 238)
-                                    //点赞
-                                    let dz = canvas.createImage();
-                                    dz.src = video.isLike ? '/static/heart_colored.png' : '/static/heart.png'
-                                    dz.onload = () => {
-                                        ctx.drawImage(dz, 228, 222, 22, 22)
-                                        ctx.fillText(video.userRead.likeAmount || 0, 254, 238)
-                                        // 评论
-                                        let pl = canvas.createImage();
-                                        pl.src = '/static/comment.png'
-                                        pl.onload = () => {
-                                            ctx.drawImage(pl, 318, 222, 22, 22)
-                                            ctx.fillText(video.userRead.commentAmount || 0, 340, 238)
-                                            setTimeout(() => {
-                                                wx.canvasToTempFilePath({
-                                                    canvas: canvas,
-                                                    success(res) {
-                                                        resolve({
-                                                            title: '请欣赏我的课文朗读作品，点赞+评论。',
-                                                            path: `/pages/index?readId=${video.id}&uid=${wx.getStorageSync('uid')}`,
-                                                            imageUrl: res.tempFilePath
-                                                        })
-                                                    },
-                                                    fail(res) {
-                                                        reject()
-                                                    }
-                                                }, this)
-                                            }, 500)
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    })
-            })
-        },
-    }
+          })
+      })
+    },
+  }
 })

pages/index/index.js

@@ -1,145 +1,142 @@
 const app = getApp()
 import {
-    getHotrecommendList,
-    getAuthorityList,
-    getCategoryList
+  getHotrecommendList,
+  getAuthorityList,
+  getCategoryList
 } from "~/api/works"
 import reachBottom from '~/mixins/reachBottom'
 import share from '~/mixins/share'
 import {
-    createStoreBindings
+  createStoreBindings
 } from 'mobx-miniprogram-bindings'
 import {
-    store
+  store
 } from '~/store/index'
 Page({
-    behaviors: [reachBottom, share],
-    /**
-     * 页面的初始数据
-     */
-    data: {
-        navBarHeight: app.globalData.navBarHeight,
-        background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
-        currentType: '1',
-        // 控制一级分类是否固定
-        isFixed: false,
-        desktopTips: app.globalData.desktopTips,
-        isIOS: app.globalData.isIOS,
-        categoryList: []
-    },
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    onShow() {
-        if (typeof this.getTabBar === 'function') {
-            this.getTabBar().setData({
-                selected: 1
-            })
-        }
+  behaviors: [reachBottom, share],
+  data: {
+    navBarHeight: app.globalData.navBarHeight,
+    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
+    currentType: '1',
+    // 控制一级分类是否固定
+    isFixed: false,
+    desktopTips: app.globalData.desktopTips,
+    isIOS: app.globalData.isIOS,
+    categoryList: []
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onShow() {
+    if (typeof this.getTabBar === 'function') {
+      this.getTabBar().setData({
+        selected: 1
+      })
+    }
+    this.getLocUserInfo()
+    if (Object.keys(this.data.userInfo).length > 0) {
+      this.resetData()
+    } else {
+      getApp().callBack = (res) => {
         this.getLocUserInfo()
-        if (Object.keys(this.data.userInfo).length > 0) {
-            this.resetData()
-        } else {
-            getApp().callBack = (res) => {
-                this.getLocUserInfo()
-                this.resetData()
-            }
-        }
-        let {
-            desktopTips
-        } = app.globalData
-        if (desktopTips) {
-            setTimeout(() => {
-                this.setData({
-                    desktopTips: false
-                })
-            }, 6000)
-        }
-
-    },
-    onUnload() {
-        this.storeBindings.destroyStoreBindings()
-    },
-    async 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(getAuthorityList, {
-                grade: this.data.userInfo.grade
-            })
-        }
-        this.getCategoryList()
-    },
-    jumpChildClassify({
-        currentTarget
-    }) {
-        let firstInfo = currentTarget.dataset.item
-        let params = firstInfo.childList.length > 0 ? `list=${encodeURIComponent(JSON.stringify(firstInfo.childList))}` : `id=${firstInfo.id}`
-        wx.navigateTo({
-            url: `/pages/childClassify/index?type=class&title=${firstInfo.title}&${params}`,
-        })
-    },
-    jumpSearch() {
-        wx.navigateTo({
-            url: '/pages/childClassify/index?type=search',
-        })
-    },
-    /**
-     * 监听页面滚动事件
-     */
-    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()
-    },
-    async getCategoryList() {
-        let grade = this.data.userInfo.grade
-        let categoryList = await getCategoryList({
-            grade
-        })
+        this.resetData()
+      }
+    }
+    let {
+      desktopTips
+    } = app.globalData
+    if (desktopTips) {
+      setTimeout(() => {
         this.setData({
-            categoryList
+          desktopTips: false
         })
-    },
-    selectType({
-        target
-    }) {
-        if (target.dataset.type) {
-            if (target.dataset.type == '3') {
-                this.selectComponent('#worksList').resetAudio()
-            }
-            this.setData({
-                currentType: target.dataset.type
-            })
-            if (target.dataset.type != '3') {
-                this.resetData()
-            }
+      }, 6000)
+    }
+
+  },
+  onUnload() {
+    this.storeBindings.destroyStoreBindings()
+  },
+  async 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(getAuthorityList, {
+        grade: this.data.userInfo.grade
+      })
+    }
+    this.getCategoryList()
+  },
+  jumpChildClassify({
+    currentTarget
+  }) {
+    let firstInfo = currentTarget.dataset.item
+    let params = firstInfo.childList.length > 0 ? `list=${encodeURIComponent(JSON.stringify(firstInfo.childList))}` : `id=${firstInfo.id}`
+    wx.navigateTo({
+      url: `/pages/childClassify/index?type=class&title=${firstInfo.title}&${params}`,
+    })
+  },
+  jumpSearch() {
+    wx.navigateTo({
+      url: '/pages/childClassify/index?type=search',
+    })
+  },
+  /**
+   * 监听页面滚动事件
+   */
+  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()
+  },
+  async getCategoryList() {
+    let grade = this.data.userInfo.grade
+    let categoryList = await getCategoryList({
+      grade
+    })
+    this.setData({
+      categoryList
+    })
+  },
+  selectType({
+    target
+  }) {
+    if (target.dataset.type) {
+      if (target.dataset.type == '3') {
+        this.selectComponent('#worksList').resetAudio()
+      }
+      this.setData({
+        currentType: target.dataset.type
+      })
+      if (target.dataset.type != '3') {
+        this.resetData()
+      }
 
-        }
-    },
-    closeDesktop() {
-        this.setData({
-            desktopTips: false
-        })
     }
+  },
+  closeDesktop() {
+    this.setData({
+      desktopTips: false
+    })
+  }
 })

pages/personal/index.js

@@ -39,7 +39,8 @@ Page({
   },
   loadMore() {
     this.getData(getUserRead, {
-      uid: this.data.userInfo.user.uid
+      uid: this.data.userInfo.user.uid,
+      pageSize: 20
     })
   },
   // 关注

pages/works/index.js

@@ -75,5 +75,4 @@ Page({
   onReachBottom() {
     this.loadMore()
   },
-
 })

pages/works/index.wxml

@@ -12,4 +12,4 @@
     autoPlay='{{false}}' />
   <emptyBg wx:if="{{list.length==0}}" message="{{currentType=='1'?'您还没有关注的用户哦':'您还没有作品哦，赶快去发表吧'}}"></emptyBg>
 </view>
-<canvas id='share' type=" 2d"> </canvas>
+<canvas id='share' type="2d"> </canvas>