uni-app中公众号h5端分享

有接触到使用uni-app来实现公众号的开发，在实现分享时，有出现一些疑惑，这里记录下

1.公众号分享使用sdk

• 开始我以为在公众号端，也是和微信小程序一样，可以使用button来进行我的朋友或者群的分享
• 要使用js-sdk才能进行分享，但是，一直使用小程序的分享都是点击后就能够进入微信端我的好友或者群进行分享，而这里使用sdk还是不能够直接的点击后进行分享，要点击右上角的发送给朋友进行分享
• 引入sdk，可以使用npm的方式引入，或者直接下载对应的js

npm install jweixin-module --save

• 使用方式

var jweixin = require('jweixin-module')
jweixin.ready(function(){  
    // TODO  
});

2.具体使用

• 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，在这里添加的安全域名是不需要加上http的，如：www.xxx.com这样写就可以了
• 在使用api时要先进行配置

jweixin.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

• 这里可能会出现签名错误，需要你将当前页面的url传给后台后生成对应的签名
• 使用js分享接口

/* 如果你不是点击事件，则要将api的调用放在ready中 */
jweixin.ready(() => {
    let uid = uni.getStorageSync('uid');
    /* 使用这个api来显示右上角的分享按钮 */
    /* 可以用hideOptionMenu()来隐藏右上角的分享按钮 */
    jweixin.showOptionMenu();
    
    jweixin.updateAppMessageShareData({ 
        title: document.title, // 标题
        desc: '', // 分享描述
        link: `${window.location.href}&uid=${uid}`,
        imgUrl: '', // 分享图标
        success: () => {
            console.log('success')
        },
    })
});

• 分享只能是分享当前页面，不能和小程序那样，在当前页面分享，之后跳转回另一个页面
• 每个接口的调用都需要进行config配置后才能起作用，像那个hide隐藏分享按钮也是一样
• 微信公众号sdk文档

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

• 往期推荐：

  • 实现单行及多行文字超出后加省略号
  • 判断iOS和Android及PC端
  • 使用vue开发移动端管理后台
  • 画三角形
  • 微信小程序使用车牌号输入法