uniapp h5实现自定义微信分享当前页

要实现自定义微信分享当前页，需要在uniapp中使用微信JS-SDK，以下是大致的步骤：

1. 在公众号后台开启JS接口安全域名，并将当前网站的域名加入安全域名列表。

2. 在uniapp项目中安装并引入jweixin-1.6.0.js，可以通过npm命令安装，也可以手动下载并引入。

3. 在vue组件的mounted钩子函数中初始化微信JS-SDK，代码如下：

mounted() {
  // 初始化微信JS-SDK
  this.initWXSDK()
},

methods: {
  initWXSDK() {
    // 替换为你自己的appId和当前页面地址
    const appId = 'yourAppId'
    const url = window.location.href
    const timestamp = new Date().getTime()
    const nonceStr = 'yourNonceStr'

    // 调用后端接口获取微信JS-SDK的签名signature
    axios.get('/api/getSignature?url=' + encodeURIComponent(url))
      .then(res => {
        const signature = res.data.signature

        // 配置微信JS-SDK
        wx.config({
          debug: false,
          appId: appId,
          timestamp: timestamp,
          nonceStr: nonceStr,
          signature: signature,
          jsApiList: [
            'updateAppMessageShareData',
            'updateTimelineShareData'
          ]
        })

        // 初始化成功后调用分享函数
        wx.ready(() => {
          this.shareToWechat()
        })
      })
      .catch(err => {
        console.error(err)
      })
  },

  shareToWechat() {
    // 获取当前页面的标题、描述和图片
    const title = '分享标题'
    const desc = '分享描述'
    const imgUrl = '分享图片地址'

    // 分享给朋友
    wx.updateAppMessageShareData({
      title: title,
      desc: desc,
      link: window.location.href,
      imgUrl: imgUrl,
      success: function () {
        // 分享成功后的回调函数
      }
    })

    // 分享到朋友圈
    wx.updateTimelineShareData({
      title: title,
      link: window.location.href,
      imgUrl: imgUrl,
      success: function () {
        // 分享成功后的回调函数
      }
    })
  }
}

4. 在后端接口中生成微信JS-SDK的签名signature，代码如下：

const crypto = require('crypto')
const request = require('request')

const config = {
  appId: 'yourAppId',
  appSecret: 'yourAppSecret'
}

async function getSignature(url) {
  const access_token = await getAccessToken()
  const nonceStr = createNonceStr()
  const timestamp = Math.floor(Date.now() / 1000)
  const jsapi_ticket = await getJsApiTicket(access_token)

  // 按照微信JS-SDK的规则生成签名signature
  const str = `jsapi_ticket=${jsapi_ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}`
  const signature = crypto.createHash('sha1').update(str, 'utf-8').digest('hex')

  return {
    appId: config.appId,
    timestamp: timestamp,
    nonceStr: nonceStr,
    signature: signature
  }
}

function createNonceStr() {
  return Math.random().toString(36).substr(2, 15)
}

function getAccessToken() {
  return new Promise((resolve, reject) => {
    const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${config.appId}&secret=${config.appSecret}`
    request(url, (err, res, body) => {
      if (err) {
        reject(err)
      } else {
        const data = JSON.parse(body)
        if (data.access_token) {
          resolve(data.access_token)
        } else {
          reject(data.errmsg)
        }
      }
    })
  })
}

function getJsApiTicket(access_token) {
  return new Promise((resolve, reject) => {
    const url = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi`
    request(url, (err, res, body) => {
      if (err) {
        reject(err)
      } else {
        const data = JSON.parse(body)
        if (data.ticket) {
          resolve(data.ticket)
        } else {
          reject(data.errmsg)
        }
      }
    })
  })
}

module.exports = {
  getSignature
}

这样就完成了在uniapp h5中自定义微信分享当前页的实现。