uni-app开发的微信公众号项目为何在可使用wx api的情况下还需引入jssdk?

发布于 1周前 作者 caililin 来自 Uni-App

uni-app开发的微信公众号项目为何在可使用wx api的情况下还需引入jssdk?

问题详情

例如定位,uniapp的api就可以实现,用jssdk有什么不一样吗?

3 回复

uni-app编译h5时,走的是浏览器。微信的jssdk,是微信提供的原生桥,它的定位最终调用了到了微信原生集成的腾讯定位里了


如果小程序嵌入的是 uniapp 开发的h5 ,要实现通信,是否需要 jssdk?引入的 jssdk 的 uni , wx 对象是否与 uniapp 开发的h5 的 uni 或者 wx 对象冲突?

在开发基于uni-app的微信公众号项目时,尽管uni-app已经提供了对微信小程序API的支持,使得开发者能够使用诸如wx.requestwx.setStorage等API进行开发,但在某些场景下,尤其是涉及到微信公众号特有的JSSDK功能时,仍然需要引入微信的JSSDK。

这是因为uni-app主要封装的是微信小程序API,而微信公众号JSSDK提供的功能(如分享、支付、获取用户信息等)是基于网页环境(即通过微信内置浏览器访问的H5页面)的JavaScript接口,这些接口在微信小程序环境中是不可用的,但在微信公众号中却是必须的。

以下是一个简单的示例,展示了如何在uni-app开发的微信公众号项目中引入并使用微信的JSSDK:

  1. 引入JSSDK: 在H5页面的<head>标签中引入微信的JSSDK脚本。

    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    
  2. 配置JSSDK: 在你的uni-app项目中,当页面加载完成后,通过后端接口获取签名等信息,并配置JSSDK。

    export default {
      mounted() {
        this.initWeChatSDK();
      },
      methods: {
        async initWeChatSDK() {
          try {
            // 假设你有一个后端接口返回签名等信息
            const res = await uni.request({
              url: 'https://your-backend-api/get-wechat-signature',
              method: 'POST',
              data: {
                url: window.location.href.split('#')[0]
              }
            });
    
            wx.config({
              debug: false,
              appId: res.data.appId,
              timestamp: res.data.timestamp,
              nonceStr: res.data.nonceStr,
              signature: res.data.signature,
              jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 需要使用的JSSDK接口列表
            });
    
            wx.ready(() => {
              // 分享到朋友圈
              wx.onMenuShareTimeline({
                title: '分享标题',
                link: window.location.href,
                imgUrl: '分享图标链接',
                success: function () {
                  // 用户点击了分享按钮
                }
              });
    
              // 分享给朋友
              wx.onMenuShareAppMessage({
                title: '分享标题',
                desc: '分享描述',
                link: window.location.href,
                imgUrl: '分享图标链接',
                success: function () {
                  // 用户点击了分享按钮
                }
              });
            });
    
          } catch (error) {
            console.error('初始化微信JSSDK失败', error);
          }
        }
      }
    };
    

通过上述代码,你可以在uni-app开发的微信公众号项目中成功引入并使用微信的JSSDK,实现分享等功能。需要注意的是,由于JSSDK是基于网页环境的,因此这些代码通常只在H5页面中生效,而在小程序环境中则不适用。

回到顶部