开发新的分享canvas

app.json

@@ -1,7 +1,8 @@
 {
   "pages": [
-    "pages/works/index",
+    "pages/ranking/index",
     "pages/index/index",
+    "pages/works/index",
     "pages/collection/index",
     "pages/personal/index",
     "pages/childClassify/index",

app.wxss

@@ -24,9 +24,9 @@ text {
 #share {
   width: 375px;
   height: 300px;
-  position: absolute;
-  left: -999rpx;
-  top: -9999rpx;
+  /* position: absolute; */
+  /* left: -999rpx; */
+  /* top: -9999rpx; */
 }
 
 .textOver {

mixins/share.js

@@ -0,0 +1,104 @@
+module.exports = Behavior({
+  data: {},
+  methods: {
+    onShareAppMessage({
+      from,
+      target
+    }) {
+      if (from == 'button') {
+        let video = target.dataset.info
+        console.log(video);
+        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) {
+      console.log(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.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, 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, 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)
+                    }
+                  }
+                }
+              }
+            }
+          })
+      })
+    },
+  }
+})

mixins/video.js

@@ -1,24 +1,98 @@
 module.exports = Behavior({
-    data: {
-        currentId: '',
+  data: {
+    currentId: '',
+    videoState: true,
+  },
+  properties: {},
+  methods: {
+    // 开始播放
+    playVideo({
+      currentTarget
+    }) {
+      this.setData({
         videoState: true,
+        currentId: currentTarget.dataset.id
+      })
     },
-    properties: {},
-    methods: {
-        // 开始播放
-        playVideo({
-            currentTarget
-        }) {
-            this.setData({
-                videoState: true,
-                currentId: currentTarget.dataset.id
-            })
-        },
-        // 打开评论
-        openComment({
-            target
-        }) {
-            this.selectComponent('#comment').open(target.dataset.id)
-        },
-    }
+    // 打开评论
+    openComment({
+      target
+    }) {
+      this.selectComponent('#comment').open(target.dataset.id)
+    },
+    // 分享
+    creatShare(video) {
+      console.log(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.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 sc = canvas.createImage();
+              sc.src = '/static/no_collect.png'
+              sc.onload = () => {
+                ctx.drawImage(sc, 12, 220, 20, 20)
+                ctx.fillText('收藏', 36, 238)
+                //分享
+                let fx = canvas.createImage();
+                fx.src = '/static/share.png'
+                fx.onload = () => {
+                  ctx.drawImage(fx, 78, 220, 22, 22)
+                  ctx.fillText('分享', 104, 238)
+                  //点赞
+                  let dz = canvas.createImage();
+                  dz.src = video.isLike ? '/static/heart_colored.png' : '/static/heart.png'
+                  dz.onload = () => {
+                    ctx.drawImage(dz, 258, 222, 22, 22)
+                    ctx.fillText(video.likes, 284, 238)
+                    //评论
+                    let pl = canvas.createImage();
+                    pl.src = '/static/comment.png'
+                    pl.onload = () => {
+                      ctx.drawImage(pl, 318, 222, 22, 22)
+                      ctx.fillText(video.commentAmount, 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

@@ -3,6 +3,7 @@ import {
   getHotrecommendList
 } from "~/api/works"
 import reachBottom from '~/mixins/reachBottom'
+import share from '~/mixins/share'
 import {
   createStoreBindings
 } from 'mobx-miniprogram-bindings'
@@ -10,7 +11,7 @@ import {
   store
 } from '~/store/index'
 Page({
-  behaviors: [reachBottom],
+  behaviors: [reachBottom, share],
   /**
    * 页面的初始数据
    */
@@ -30,16 +31,20 @@ Page({
         selected: 1
       })
     }
-    let uid = wx.getStorageSync('uid')
-    if (uid) {
+    getApp().callBack = (res) => {
       this.getLocUserInfo()
       this.resetData()
-    } else {
-      getApp().callBack = (res) => {
-        this.getLocUserInfo()
-        this.resetData()
-      }
     }
+    let uid = wx.getStorageSync('uid')
+    /*  if (uid) {
+       this.getLocUserInfo()
+       this.resetData()
+     } else {
+       getApp().callBack = (res) => {
+         this.getLocUserInfo()
+         this.resetData()
+       }
+     } */
   },
   onUnload() {
     this.storeBindings.destroyStoreBindings()
@@ -54,6 +59,7 @@ Page({
     this.storeBindings.updateStoreBindings()
   },
   loadMore() {
+    console.log(this.data.userInfo);
     if (this.data.currentType == '1') {
       this.getData(getHotrecommendList, {
         grade: this.data.userInfo.grade

pages/index/index.wxml

@@ -1,5 +1,6 @@
 <navigationBar bind:reload='resetData'></navigationBar>
 <view class="recommend">
+  <canvas id='share' type="2d"> </canvas>
   <banner classify='1' />
   <!-- 滚动定位 -->
   <view class="scrollBox {{isFixed?'isFixed':''}}" style="top:{{navBarHeight}}px;">

pages/ranking/index.js

@@ -0,0 +1,66 @@
+// pages/ranking/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/ranking/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/ranking/index.less

@@ -0,0 +1 @@
+/* pages/ranking/index.wxss */

pages/ranking/index.wxml

@@ -0,0 +1,2 @@
+<!--pages/ranking/index.wxml-->
+<text>pages/ranking/index.wxml</text>

pages/ranking/index.wxss

@@ -0,0 +1 @@
+/* pages/ranking/index.wxss */

store/index.js

@@ -29,7 +29,6 @@ export const store = observable({
     }
     step.gradeName = grade ? gradeObj[grade] : '请选择'
     this.userInfo = step
-    console.log(this.userInfo);
   }, ),
   setReadDetail: action(function (detail) {
     this.readDetail = detail