美文网首页前端
自定义微信分享链接(使用JS-SDK) + 实现预览pdf

自定义微信分享链接(使用JS-SDK) + 实现预览pdf

作者: promise96319 | 来源:发表于2018-12-25 22:45 被阅读0次

需求:外部网页在微信中被分享时,会出现一个小卡片,包含title,image和url。



这个分享链接的内容不够直观,故需自定义小卡片的内容。

  1. 准备公众号
    在公众号中设置js安全域名(即需要分享链接的网页的域名)
    js安全域名

服务端获取签名(客户端不安全,且存在跨域问题)

可参考:微信JS-SDK说明文档 >

  1. 获取access_token
    首先 从公众号中获取APPID和SECRET
    appid和appsecret
请求地址: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + APPID + '&secret=' + SECRET,
请求方法:'get'
返回:access_token

此时可能出现白名单错误(忘截图了),需要在微信公众号中设置错误中的IP


白名单设置
  1. 获取ticket
//  ACCESS_TOKEN为上一步中得到的access_token
请求地址:'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi'
请求方法:'get'
返回:'ticket'

注意:access_token和ticket都需要缓存

4.获取签名signature

const nonceStr = 'string'  // 一个随机的字符串即可
const jsapi_ticket = ticket  // 上一步中的ticket
const timestamp = Date.now() // 当前时间戳
const url = location.href.spilt('#')[0]  // 该网页当前地址不要`#`后面的内容(由后续前端当做参数传递过来)

将以上内容以键值对形式拼接,类似如下

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

本地引入sha1算法(需网上查找)
将上述拼接的字符串以参数的形式传递到sha1中得到signature
signature = sha1(拼接完的字符串)
验证signature是否正确 >
将appId,nonceStr,timestamp和signature返回给前端

前端处理

  1. 通过config接口注入权限验证配置
// CDN引入
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js" charset="utf-8"></script>
wx.config({
    debug: true, // 开启调试模式,可以在电脑端打印消息,也可以在真机上弹出框提示错误消息
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名
    jsApiList: ['updateAppMessageShareData'] // 必填,需要使用的JS接口列表 === 根据JS-SDK附录二获取,此处只是加了一个分享给朋友的api
});

后续整理发现了一个很怪的bug。我使用的是安卓,微信版本是6.7.3,调试的时候发现config: ok并且updateAppMessageShareData: ok但是实际上分享的链接并不会起到自定义内容的效果。经过很多尝试后,发现需要更改jsApiList里的内容。如下:

官网上是这样描述的:

即将废弃的分享的api
但是实际上在使用updateAppMessageShareData的时候没有作用,必须在jsApiList中增加相应的废弃的接口才能生效。
jsApiList: ['updateAppMessageShareData', 'onMenuShareAppMessage', 'updateTimelineShareData', 'onMenuShareTimeline']

这时候调用updateAppMessageShareDataupdateTimelineShareData的时候就可以生效了,具体原理不清楚。。

分享给朋友 朋友圈分享


6. 成功验证和失败验证

```javascript
// 成功
wx.ready(() => {
       wx.updateAppMessageShareData({
              title: '', // 分享标题
              desc: '', // 分享描述,为主题内容
              link: location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致。当点击小卡片时会跳转到该链接
              imgUrl: '', // 分享图标,尺寸120 x 120,大小不超过10K,不支持GIF格式。必须采用https协议(最好写完整url),不支持base64
              success() {
                 // 设置成功
              }
      })

// 失败
wx.error((err) => {})

注意:imgUrl配置有严格的要求
尺寸120 x 120,大小不超过10K,不支持GIF格式。必须采用https协议(最好写完整url),不支持base64。由于我使用的是vue,在webpack打包时图片小于10k的是会自动打包成base64导致无法正常显示图片,因此在webpack.base.config.js中修改默认配置

limit修改为4kb
  1. 保证可以分享每个页面都能分享出这种小卡片形式的链接
    在app.vue中加入监测路由,由于第一次进入不会调用,所以在mounted也执行一次this.shareLinkToWxFriends()shareLinkToWxFriends函数就是上面第5步和第六步的内容

    image.png
  2. 将代码部署完成后,可在真机上查看结果


    分享链接结果

附加 pdf的显示和分享

由于在网页中直接查看pdf的路径是无法在微信中查看(安卓)和分享(ios),因此使用pdf插件进行优化 --- pdf.js。其原理是绘制成canvas,最终在真机上放大时可能出现模糊的问题。

  1. 现在我需要查看的是阿里云oss上的pdf文件(可以通过阿里云文档获取oss上的文件的url,且在oss的基本设置中可以设置跨域问题)
  • 首先引入pdf.js
    github地址

    pdf.js
    按照文档操作后将build/generic/build目录下的buildweb文件放入到我们vue项目中static文件中(不能放入src),这样我们就引入了pdf.js
  • 首先在vue中创建一个新的组件preview,内部为iframe

<template>
  <div class="preview">
    <iframe
      width="100%" height="1000"
      :src='"(这里是你的网站的包含https://的域名)/static/web/viewer.html?file=" + (这里是你想显示的pdf的url)'></iframe>
  </div>
</template>

创建之后控制台会报错出现跨域问题,因为pdf.js不支持跨域访问。此时可以将错误跨域信息在上一步你引入的文件中查找,然后将其判断语句注释掉即可解决这个问题。最后会发现pdf出现在这个容器中(忘截图了),也实现了微信中预览和分享的功能。


pdf容器

相关文章

  • 自定义微信分享链接(使用JS-SDK) + 实现预览pdf

    需求:外部网页在微信中被分享时,会出现一个小卡片,包含title,image和url。这个分享链接的内容不够直观,...

  • 微信JS-SDK updateAppMessageShareDa

    最近开发一个项目时,有微信H5网页自定义分享功能,使用了微信JS-SDK的分享到好友和分享到朋友圈功能。 微信开发...

  • 微信JS-SDK分享实践

    前题 本篇适用范围: 使用微信JS-SDK接口调用,分享朋友圈、朋友、QQ、QQ空间、腾讯微博等,包括分享链接中带...

  • 微信分享实现自定义标题、摘要、图片

    1.如果是没有自定义过的网页,使用微信分享如图 2.使用自定义逻辑的网页进行微信分享,如图 3.自定义分享的实现 ...

  • 微信分享

    微信分享 准备工作 如果想要是使用微信的分享功能,需要使用微信JS-SDK来完成。且只能点击微信右上角的...调起...

  • 微信公众号开发(四)微信分享

    引言 如果想要使用微信的分享功能,需要使用微信 JS-SDK 来完成,并且只能通过点击微信右上角的...进行分享,...

  • H5中pdf.js在线预览pdf文件

    场景: 微信环境,打开pdf文件ios客户端直接预览 安卓客户单下载 为了能统一实现在线预览,所以引入pdf....

  • H5微信分享的坑

    准备工作 如果想要是使用微信的分享功能,需要使用微信JS-SDK来完成。且只能点击微信右上角的...调起分享面板,...

  • 面向微信开发

    在做一个在微信分享文章的项目,在微信分享的链接要有描述和图片必须调用微信的JS-SDK。而且现在(201904)只...

  • PC端pdfJs实现预览pdf并且可复制

    要求预览pdf,同时实现可复制功能。 首先使用pdfJs方法,生成pdf数据。

网友评论

    本文标题:自定义微信分享链接(使用JS-SDK) + 实现预览pdf

    本文链接:https://www.haomeiwen.com/subject/imxqlqtx.html