有接触到使用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文档
作者:SegmentFault 思否-小小蚊子 著作权归作者所有。
相关说明
① 本站VIP源码资源永久免费下载www.src1024.com
② 本网站资源来源于网络收集,如有侵权,请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流,请不要用于商业用途,否则后果自负。
④ 如果你有源码需要出售,可以联系小编,info@src1024.com。
⑤ 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。
⑧ 网站资源不做任何二次加密和授权后门(原版加密除外)

1024资源网 » uni-app公众号开发问题:uni-app中公众号h5端分享

发表评论