微信小程序 | 小程序的转发问题

Posted 有生之年,欣喜相逢

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序 | 小程序的转发问题相关的知识,希望对你有一定的参考价值。

1、配置小程序页面静态转发信息

  关于小程序转发问题,文档

  在 page 页面填加了该监听函数,会在小程序右上角 ... 菜单中显示“转发”按钮;

  监听函数需要 return {} 其中的内容配置转发信息;

 1 onShareAppMessage: function (res) {
 2     return {
 3       title: `${this.data.data.column_share_title}`,
 4       path: `/pages/column/column?id=${this.data.data.id}`,
   // imageUrl: this.data.data.author_header, 5 success: res => { 6 wx.reportAnalytics(\'foward_column_success\', { column_id: this.data.data.id, column_name: this.data.data.column_title }) 7 // 分享赠书 8 if (this.data.data.is_shareget) { 9 this.setData({ ifShared : true }) 10 if (!this.data.data.had_sub) this.getBookData() 11 } 12 }, 13 fail: res => { 14 } 15 }

2、动态配置分享图

注意,这是静态的转发信息配置,其中的 imageUrl 指转发配图,自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持PNG及JPG,不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4

  

如果需求场景是,在不同的状态下,呈现自定义图片,这样就用到了两个知识点:(1)小程序 canvas 绘制转发图 (2)通过 wx.hideShareMenu(OBJECT) wx.showShareMenu(OBJECT) 控制转发按钮的显示与隐藏;达到的效果是,用户进入页面,在canvas绘制好转发小图之后,再显示转发按钮,转发图上的文字,根据业务场景的需求动态显示;

 1 const painter = require(\'./painter\')
 2 
 3 page({
 4 data: {
 5     user: {}
 6 },
 7 shareimgpath: \'\', // 分享小图临时路径
 8 onShow: function () {
 9     getApp().login().then(data => { // 确保登陆的前提下家在数据
10       this.setData({ user: data || {} })
11       this.requestData()
12     })
13 },
14 requestData () {
15     wx.hideShareMenu() // 先关闭按钮的显示
16     painter.draw(\'share-canvas-id\',{
17         parame1: \'1234\', // 传入的动态参数
18         parame2: \'asdf\'
19     })
20     .then(data => {
21          this.shareimgpath = data
       wx.showShareMenu() // 分享小图绘制好之后,再打开分享按钮
22 } 23 .catch(err => { }) 24 } 25 })

外部的功能模块 painter.js 专门用来绘制分享小图

 1 // painter.js
 2 module.export = {
 3   /**
 4    *  data.parame1   ....
 5    *  data.parame2   ....
 6    */  
 7    draw (canasId, data) {
 8        var ctx = wx.createCanvasContext(canasId)
 9        var bg_url = \'https://static001.geekbang.org/resource/image/3b/db/3bc3ad3e72aa19a2521c17cf1e5aa8db.png\'
10        return new Promise((resolve, reject) => {
11             wx.downloadFile({
12                url: bg_url,
13                success: res => {
14                     if (res.statusCode === 200) {
15                        ctx.beginPath()
16                        ctx.drawImage(res.tempFilePath, 0, 0, 500, 400) // 画 背景
17                        ctx.setTextAlign(\'center\')
18                        // ,,,,,,,
19                        ctx.draw(true, () => {
20                        wx.canvasToTempFilePath({
21                        canvasId: canvasId,
22                        success: res => {
23                            resolve(res.tempFilePath)
24                        },
25                        fail: err => {
26                            reject(err)
27                        }
28                      })
29                  })
30              }
31        })
32    }
33 }    

 

以上是关于微信小程序 | 小程序的转发问题的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序之分享转发函数

微信小程序 | 小程序的转发问题

微信小程序支付(此帖转发)

微信小程序转发传值及自定义图片

微信小程序 - 分享功能

Taro 微信小程序 分享/转发给好友