uniapph5分享到微信好友

Uniapp是一种基于Vue.js和Webpack的前端开发框架，不仅支持小程序、APP开发，还可以开发H5网站。在开发的过程中，如果我们想要实现H5分享到微信好友的功能，该如何操作呢？

首先，我们需要了解微信分享需要使用微信JS-SDK进行调用。其次，我们需要在Uniapp项目中安装weixin-js-sdk插件，并将其注册为全局组件，这样我们就可以在任意页面中调用微信JS-SDK了。

在使用微信JS-SDK之前，我们需要在微信公众平台中设置分享的相关内容，包括分享标题、图片、描述等信息。在Uniapp中，我们可以在页面中使用<meta>标签或Vue的head属性来设置这些信息，比如：

<meta name="description" content="这是一篇有关Uniapp微信分享的文章">
<meta itemprop="image" content="/static/img/logo.png">

或者

export default {
  data() {
    return {
      title: '这是分享的标题',
      desc: '这是分享的描述',
      imgUrl: 'http://example.com/static/img/logo.png'
    }
  },
  head() {
    return {
      title: this.title,
      meta: [
        { name: 'description', content: this.desc },
        { itemprop: 'image', content: this.imgUrl }
      ]
    }
  }
}

接下来，我们需要编写JavaScript代码来实现微信分享功能。具体来说，我们需要用到以下几个API：

1. wx.config()：用于初始化微信JS-SDK配置信息，包括appId、timestamp、nonceStr、signature等参数。
2. wx.ready()：当微信JS-SDK初始化完成后会触发该事件，我们需要在该事件中调用wx.onMenuShareAppMessage()方法来设置分享内容。
3. wx.onMenuShareAppMessage()：用于设置分享到微信好友的内容，包括title、desc、link、imgUrl等参数。

下面是代码示例：

import wx from 'weixin-js-sdk'

export default {
  mounted() {
    this.getWechatConfig()
  },
  methods: {
    async getWechatConfig() {
      const res = await API.getWechatConfig()
      wx.config({
        debug: false,
        appId: res.data.appId,
        timestamp: res.data.timestamp,
        nonceStr: res.data.nonceStr,
        signature: res.data.signature,
        jsApiList: ['onMenuShareAppMessage']
      })
      wx.ready(() => {
        wx.onMenuShareAppMessage({
          title: '这是分享的标题',
          desc: '这是分享的描述',
          link: 'http://example.com',
          imgUrl: 'http://example.com/static/img/logo.png'
        })
      })
    }
  }
}

最后，我们需要在H5页面中添加分享按钮，并调用wx.showMenuItems()方法来显示分享菜单。代码示例如下：

<template>
  <div>
    <!-- 这里是页面内容 -->
    <button @click="share">分享</button>
  </div>
</template>

<script>
import wx from 'weixin-js-sdk'

export default {
  methods: {
    async share() {
      wx.showMenuItems({ menuList: ['menuItem:share:appMessage'] })
    }
  }
}
</script>

这样，我们就可以在Uniapp H5页面中实现微信分享功能了。当用户点击分享按钮时，会弹出分享菜单，选择分享到微信好友即可。需要注意的是，微信分享功能受微信公众号后台配置的权限限制，开发者需要在开发过程中仔细阅读文档和调试。