uniapp微信分享详解

一、uniapp微信分享音乐

1、在manifest.json文件中声明微信appid存在；

{
    "mp-weixin": {
        "appid": "your appid"
    }
} 

2、在需要分享音乐的页面引用uni-share模块；

<template>
  <view>
    <button @tap="onShareTap">分享音乐</button>
  </view>
</template>

<script>
  import uniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js'
  
  export default {
    methods: {
      onShareTap() {
        uniShare.shareMusic({
          title: '音乐名称',
          desc: '音乐描述',
          musicUrl: 'http://www.example.com/music.mp3',
          imageUrl: 'http://www.example.com/cover.jpg',
          success() {
            console.log('分享成功')
          },
          fail() {
            console.log('分享失败')
          }
        })
      }
    }
  }
</script> 

3、调用uniShare.shareMusic方法即可完成分享音乐操作。

二、uniapp微信分享h5链接带描述

1、在manifest.json文件中声明微信appid存在；

{
    "mp-weixin": {
        "appid": "your appid"
    }
} 

2、在需要分享h5链接的页面引入uni-share模块；

<template>
  <view>
    <button @tap="onShareTap">分享链接</button>
  </view>
</template>

<script>
  import uniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js'
  
  export default {
    methods: {
      onShareTap() {
        uniShare.shareUrl({
          title: '分享标题',
          desc: '分享描述',
          href: 'http://www.example.com/page.html',
          imageUrl: 'http://www.example.com/image.jpg',
          success() {
            console.log('分享成功')
          },
          fail() {
            console.log('分享失败')
          }
        })
      }
    }
  }
</script> 

3、调用uniShare.shareUrl方法即可完成分享h5链接带描述操作。

三、uniapp微信分享链接

1、在manifest.json文件中声明微信appid存在；

{
    "mp-weixin": {
        "appid": "your appid"
    }
} 

2、在需要分享链接的页面引入uni-share模块；

<template>
  <view>
    <button @tap="onShareTap">分享链接</button>
  </view>
</template>

<script>
  import uniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js'
  
  export default {
    methods: {
      onShareTap() {
        uniShare.shareLink({
          title: '分享标题',
          url: 'http://www.example.com/page.html',
          imageUrl: 'http://www.example.com/image.jpg',
          success() {
            console.log('分享成功')
          },
          fail() {
            console.log('分享失败')
          }
        })
      }
    }
  }
</script> 

3、调用uniShare.shareLink方法即可完成分享链接操作。

四、uniapp微信分享朋友圈

1、在manifest.json文件中声明微信appid存在；

{
    "mp-weixin": {
        "appid": "your appid"
    }
} 

2、在需要分享朋友圈的页面引入uni-share模块；

<template>
  <view>
    <button @tap="onShareTap">分享朋友圈</button>
  </view>
</template>

<script>
  import uniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js'
  
  export default {
    methods: {
      onShareTap() {
        uniShare.shareTimeline({
          title: '分享标题',
          imageUrl: 'http://www.example.com/image.jpg',
          success() {
            console.log('分享成功')
          },
          fail() {
            console.log('分享失败')
          }
        })
      }
    }
  }
</script> 

3、调用uniShare.shareTimeline方法即可完成分享朋友圈操作。

五、uniapp微信分享不申请

uniapp微信分享不申请可通过微信开放平台网站申请分享权限，具体操作如下：

1、登录微信开放平台网站进入组件预授权页面；

2、输入要预授权的APP ID，包括Native App和H5 App，点击“下一步”按钮；

3、填写申请内容，如下图：

4、完成身份验证后，会跳转到预授权信息的确认页面，确认完成后，可以在“预授权记录”中查看已申请的预授权列表。

六、uniapp微信分享小程序页面

1、在manifest.json文件中声明微信appid存在；

{
    "mp-weixin": {
        "appid": "your appid"
    }
} 

2、在需要分享小程序页面的页面引入uni-share模块；

<template>
  <view>
    <button @tap="onShareTap">分享小程序页面</button>
  </view>
</template>

<script>
  import uniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js'
  
  export default {
    methods: {
      onShareTap() {
        uniShare.shareMiniProgram({
          title: '分享标题',
          imageUrl: 'http://www.example.com/image.jpg',
          pagePath: 'pages/index/index',
          success() {
            console.log('分享成功')
          },
          fail() {
            console.log('分享失败')
          }
        })
      }
    }
  }
</script> 

3、调用uniShare.shareMiniProgram方法即可完成分享小程序页面操作。

七、uniapp微信分享调起app

1、在manifest.json文件中声明微信appid存在；

{
    "mp-weixin": {
        "appid": "your appid"
    }
} 

2、在需要调起app的页面引入uni-share模块；

<template>
  <view>
    <button @tap="onShareTap">调起app</button>
  </view>
</template>

<script>
  import uniShare from '@/uni_modules/uni-share/js_sdk/uni-share.js'
  
  export default {
    methods: {
      onShareTap() {
        uniShare.shareAppMessage({
          title: '分享标题',
          imageUrl: 'http://www.example.com/image.jpg',
          path: '/pages/index/index',
          launchApp: true,
          success() {
            console.log('分享成功')
          },
          fail() {
            console.log('分享失败')
          }
        })
      }
    }
  }
</script> 

3、调用uniShare.shareAppMessage方法即可完成调起app操作。

八、uniapp微信分享 不用申请appid

如果不想申请微信appid，也可以通过调用微信官方分享接口实现分享，具体操作如下：

1、在需要分享的页面引入weixin-js-sdk库；

<template>
  <view>
    <button @tap="onShareTap">分享</button>
  </view>
</template>

<script>
  import wx from 'weixin-js-sdk'
  
  export default {
    methods: {
      onShareTap() {
        wx.ready(() => {
          wx.updateAppMessageShareData({
            title: '分享标题',
            desc: '分享描述',
            link: 'http://www.example.com/page',
            imgUrl: 'http://www.example.com/image.jpg',
            success() {
              console.log('分享成功')
            },
            fail() {
              console.log('分享失败')
            }
          })

          wx.updateTimelineShareData({
            title: '分享标题',
            link: 'http://www.example.com/page',
            imgUrl: 'http://www.example.com/image.jpg',
            success() {
              console.log('分享成功')
            },
            fail() {
              console.log('分享失败')
            }
          })
        })
      }
    }
  }
</script> 

2、调用wx.ready方法准备就绪后，调用wx.updateAppMessageShareData和wx.updateTimelineShareData方法即可完成分享操作。

九、uniapp微信分享页面里标题和描述

如果需要在页面里设置分享标题和描述，可以通过在html文件里设置meta标签实现，具体操作如下：

<template>
  <head>
    <meta name="title" content="分享标题">
    <meta name="description" content="分享描述">
  </head>
  <body>
    <button @tap="onShareTap">分享</button>
  </body>
</template>

<script>
  import wx from 'weixin-js-sdk'
  
  export default {
    methods: {
      onShareTap() {
        wx.ready(() => {
          wx.updateAppMessageShareData({
            title: document.title,
            desc: document.querySelector('meta[name="description"]').getAttribute('content'),
            link: 'http://www.example.com/page',
            imgUrl: 'http://www.example.com/image.jpg',
            success() {
              console.log('分享成功')
            },
            fail() {
              console.log('分享失败')
            }
          })

          wx.updateTimelineShareData({
            title: document.title,
            link: 'http://www.example.com/page',
            imgUrl: 'http://www.example.com/image.jpg',
            success() {
              console.log('分享成功')
            },
            fail() {
              console.log('分享失败')
            }
          })
        })
      }
    }
  }
</script> 

通过在head标签里设置meta标签，然后在分享方法里调用document.title和document.querySelector获取相关数据即可。