摘要：上次开发的生鲜类小程序要打包成H5放到微信公众号中，由于部分页面有分享的按钮，所以需要实现分享功能。经过测试和搜索后发现，现在的微信jssdk虽然在调用wx.updateAppMessageShareData时会进入success方法但并不会触发弹窗操作。最终的解决方案是自定义一个引导分享的弹层，让用户手动点击右上角的三个点进行分享......

文章有更新，末尾新增代码使用说明。 --- 2020-10-24号夜

写在最前：
当前时间，2020年10月22号夜。经测试发现，微信的jssdk不管是1.2还是1.32还是1.4还是1.6版本，虽然能进入分享的success方法，但都无法自动打开分享的弹窗！需要用户手动触发微信右上角的三个点进行分享。为了让看官更直接的看到最终效果，请猛戳下方视频观看。如果这是您想要的，可以到文章末尾下载源码，若不是请自便。视频：微信jssdk分享接口在项目中的应用.mp4（友情提示：点击上面的图片即可播放视频）

上面的视频展示了最终的效果，虽然在调用微信的sdk后无法成功唤醒弹窗，但是可以通过sdk配合手动分享来实现自定义标题、图片、描述的哈。下面，来说说这次的踩坑总结吧！

一、使用微信jssdk的前提条件必须要先配置SSL

如果看官想使用微信jssdk，必须要先配置SSL证书。配置完证书后，还要在微信开放平台中添加域名、白名单、分享相关的接口。比如：onMenuShareTimeline、onMenuShareAppMessage、onMenuShareQQ、onMenuShareQZone、updateAppMessageShareData、updateTimelineShareData，详情见微信官方文档→→→ JSSDK使用步骤。配置完成后在本地跑代码会直接进入wx.error，即使你在微信开发者工具中调试。错误如图：微信开发者工具调试本地网页时会进入wx-error.gif
解决方案就是：把代码传到线上服务器。成功后的效果如图：微信开发者工具调试线上网页时才会成功.png

二、微信jssdk 1.2~1.6版本全都无法自动触发弹窗，别挣扎了！

当第一步的一堆操作完成后，我就开始按微信开放文档→→→分享接口进行了复制粘贴。本以为可以愉快的分享了，谁知翻车了！不管是使用1.6还是1.4版本，在点击按钮后全都无法触发弹窗分享，但奇怪的是会进入wx.updateAppMessageShareData的success方法！难道又是我的手机问题？然后用几个同事的手机测试，结果都一样，我瞬间懵逼了！你要说失败了不执行弹窗也能理解，可你明明进入的是success呀...... 如图：调用微信jssdk后在手机上进行分享时会进入success方法但不会唤醒弹窗.png

没办法，只好在网上也搜索。找了很多文章，有的说是微信jssdk版本的问题降版本使用1.3.2，有的说使用1.2.0、还有的说分享的图片要大于300、还有的说注意顺序、有的说使用npm的方式安装weixin-js-sdk、有的说是安装weixin-jsapi......

反正，只要你搜索，啥版本都有，但都不提供示例或视频演示，有的提供了demo但已无法访问......

为了测试可行性，我又做了大量的测试。最后发现：压根就无法唤醒分享的弹层！可能曾经是可以的，只不过后来微信做了限制吧。

夜晚下班的路上，我跟@健宝吐槽这件事情。
他：我之前也搞过这个，是无法自动弹窗的，可以手动做一个弹窗引导用户点击右上角的三个点进行分享。
我：既然无法弹窗，那还给进入success方法，这不流氓么？再说了，既然没有用，那我还调个什么sdk，直接弹窗引导分享不就完了？
他：那不一样，你调sdk后可以配置分享的标题、分享的图片......

次日，我按照@健宝说的，百度了一张分享照片，然后做了一个自定义的引导分享弹层。经测试发现调用微信的sdk后再进行手动分享，确实是可以修改分享页面的标题及分享图的。效果如图：通过调用微信jssdk的分享接口实现自定义标题图片的分享.png

三、demo演示

为了让看官能够亲身体验一把，艺灵做了一个小demo。看官可以手动输入标题后点击分享，发送到自己微信号中看效果。demo如图：demo界面.png
有兴趣的看官可以扫码访问，注意要用微信扫码哈。
二维码：微信扫码体验.png（不保证此demo链接可永久访问）

四、源码下载

不管看官的项目是使用Vue还是使用传统的静态html，在源码包中都能找到相关的demo文件。看官在下载后需要做的一件事件就是：在调用getJsSDK方法时传自己的后端接口，其他代码可按需求进行修改。

    
网址： 戳我前往github查看源码 
    

以下内容续写于：2020-10-24 号夜

五、代码使用说明

第一步是通过上面的链接进行下载文件到本地，由于是uni-app项目，所以需要用HBuilderX编辑器打开项目并运行，下面说下目录中的主要相关文件。

5.1、目录结构

    
hybrid /* 静态html目录 */
    
  html /* html文件夹 */
    
    jssdk-share.html /* demo演示文件 */
    
    js /* js目录 */
    
    image /* 图片素材 */
    
pages /* pages目录 */
    
  index-sdk /* 首页目录 */
    
    index-sdk.vue /* demo演示文件 */
    
components /* 组件 */
    
  shareH5Popup /* 弹层组件 */
    
static /* 静态资源目录 */
    
common /* 公用资源 */
    
  getAPIData.js /* 全局API接口，已封装jssdk、share等方法 */
    

注意上面标黄的两个文件，分别代表html版和vue版，这两个才是demo演示文件。

5.2、调用方法

此处以pages/index-sdk/index-sdk.vue文件为例。主要有以下几件事件要做：
1、引入自定义弹层组件shareH5Popup；
2、引入已封装好的getJsSDK和goShare方法；
3、在生命周期mounted中调用getJsSDK；
4、在methods中声明点击事件并在点击事件内调用goShare方法。

在调用getJsSDK时只需要做一件事，就是把url换成你自己的后端接口。代码如下：

5.2.1、初始化微信jssdk

    
mounted () {
    
  /* #ifdef  H5 */
    
  const url = location.href.split('#')[0]
    
  getJsSDK({
    
    url: 'https://换成你的服务器地址/api/index/getJsSDK', /* 前端请求后端的接口地址，主要是获取sdk所需的一些参数，例如：appId、timestamp、nonceStr、signature、jsApiList */
    
    data: {
    
      url: url /* 要分享的url，一般取当前页面地址 */
    
    }
    
  })
    
  /* #endif */
    
},
    

怎么样，调用getJsSDK只需要传递后端接口链接即可完成初始化，是不是很简单呀！下面再说怎么调用分享。

5.2.2、调用分享方法 goShare

    
handleShare () { /* 点击分享按钮时触发此方法 */
    
  /* #ifdef H5 */
    
  const url = location.href.split('#')[0]
    
  let data = {
    
    url: url,
    
    title: '这里是分享的标题',
    
    describe: '这里是分享描述',
    
    imgUrl: '这里是分享的图片链接',
    
  }
    
  goShare({
    
    data: data,
    
    callback: () => { /* sdk方法成功后的回调 */
    
      this.show = true /* 显示自定义分享弹层 */
    
    },
    
  })
    
  /* #endif */
    
},
    

注意上面标黄的data，里面的url、title、describe、imgUrl对应的值都是可以进行修改的。

关于上面的/* #ifdef H5 */和/* #endif */千万不要删除！否则在打包成微信小程序时会报错！因为这是uni-app的条件编译，意思是区间的代码只在H5端有效！详情见官方文档→→→uni-app 条件编译

至此，代码使用说明已经补充完毕。若看官在实际过程中遇到问题，请扫下方二维码或通过右侧联系方式进行联系艺灵。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2020-10-22/uni-app-weixin-jssdk.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。