uniapp开发H5页面微信分享

1,055 阅读1分钟

要实现在H5页面上的微信分享链接功能,需要配置微信JS-SDK,并在页面中调用微信JS-SDK的接口。具体步骤如下:

1.在微信公众平台中配置JS接口安全域名。

2.在uniapp项目中引入jweixin-1.6.0.js(可在微信JS-SDK下载页面下载并添加到项目中)。

3.在uniapp项目中创建一个js文件,填写以下代码:

import wx from 'jweixin-1.6.0.js'

export function wxShare(title, desc, link, imgUrl) {
  //用uniapp自带的ajax请求后端接口获取微信签名信息,并得到signature,appId等参数
  uni.request({
    url: 'http://xxx.com/wxconfig',
    method: 'POST',
    data: {
      url: window.location.href.split('#')[0]
    },
    success: function (res) {
      let wxConfig = res.data
      wx.config({
        debug: false,
        appId: wxConfig.appId,
        timestamp: wxConfig.timestamp,
        nonceStr: wxConfig.nonceStr,
        signature: wxConfig.signature,
        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
      })
      wx.ready(function () {
        wx.updateAppMessageShareData({
          title: title, // 分享标题
          desc: desc, // 分享描述
          link: link, // 分享链接
          imgUrl: imgUrl, // 分享图标
          success: function () {},
          fail: function () {}
        })
        wx.updateTimelineShareData({
          title: title, // 分享标题
          link: link, // 分享链接
          imgUrl: imgUrl, // 分享图标
          success: function () {},
          fail: function () {}
        })
      })
    }
  })
}

4.在需要添加分享功能的页面中,引入上述js文件,并在点击分享按钮的事件处理函数中调用wxShare函数:

import { wxShare } from '@/common/wx-share.js'
export default {
  methods: {
    share () {
      let title = '分享标题'
      let desc = '分享描述'
      let link = '分享链接'
      let imgUrl = '分享图标URL'
      wxShare(title, desc, link, imgUrl)
    }
  }
}

以上就是在uniapp中实现微信分享链接功能的方法。需要注意的是,由于微信JS-SDK要求使用HTTPS协议,而uniapp本地开发时使用的是HTTP协议,因此在本地开发时需要使用内网穿透工具实现HTTPS协议访问。