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獲取相關數據即可。

以上就是關於uniapp微信分享的詳細闡述，我們通過對分享音樂、h5鏈接帶描述、鏈接、朋友圈、不申請、小程序頁面、調起app、不用申請appid、頁面里標題和描述等多個方面進行了探討，並給出了完整的代碼示例。希望對大家有所幫助。