美文网首页
uniapp分享

uniapp分享

作者: 青争小台 | 来源:发表于2020-05-28 12:46 被阅读0次

uni.share(OBJECT)用于APP

参考官网:https://uniapp.dcloud.io/api/plugins/share?id=share

onShareAppMessage(OBJECT)针对多数小程序

针对页面内的分享按钮和小程序右上角原生菜单自带的分享按钮有效

  1. 小程序中用户点击分享后,在 js 中定义 onShareAppMessage 处理函数(和 onLoad 等生命周期函数同级),设置该页面的分享信息。

    • 用户点击分享按钮的时候会调用。这个分享按钮可能是小程序右上角原生菜单自带的分享按钮,也可能是开发者在页面中放置的分享按钮(\);
    • 此事件需要 return 一个Object,用于自定义分享内容。
  2. 平台差异及参数说明

截屏2020-05-28上午11.45.16.png
  1. 此事件需要 return 一个 Object,用于自定义分享内容,其内容如下:
截屏2020-05-28下午12.33.54.png
  1. 示例代码:
<template>
    <view>
     <!--这里需要注意:1.必须是一个按钮;2.设置属性open-type="share"-->
        <button type="primary" open-type="share">分享</button>
    </view>
</template>

<script>    
    export default{
        <!--注意:
        1.onShareAppMessage必须和onLoad等生命周期函数同级;
        2.如果不设置imageUrl属性,则默认展示的图片是页面的缩略图;-->
        onShareAppMessage(res) {
            console.log(res)
            return {
                title: '自定义分享标题',
                path: '/pages/manufacturer/shop_details?id=123'
            }
        }
    }
</script>
  1. console.log(res)出来是这样的:
    截屏2020-05-28下午12.44.52.png
    参考官网:https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage

uni.showShareMenu(OBJECT)针对多数小程序

小程序的原生菜单中显示分享按钮
只针对小程序右上角原生菜单自带的分享按钮有效

截屏2020-05-28下午1.11.11.png
  1. 示例代码:
<script>    
    export default{
        <!--可以在页面初始化后就配置,若不配置,该页面将无法分享-->
        onLoad(){
            uni.showShareMenu({
                title: '自定义分享标题',
                path: '/pages/manufacturer/shop_details?id=123'
            })
        }
    }
</script>

参考官网:https://uniapp.dcloud.io/api/plugins/share?id=showsharemenu

uni.hideShareMenu(OBJECT)针对多数小程序

小程序的原生菜单中隐藏分享按钮,此时该页面就不可分享了

截屏2020-05-28下午1.20.30.png
  1. 示例代码:
<script>    
    export default{
        onLoad(){
            uni.hideShareMenu()
        }
    }
</script>

参考官网:https://uniapp.dcloud.io/api/plugins/share?id=hidesharemenu

相关文章

网友评论

      本文标题:uniapp分享

      本文链接:https://www.haomeiwen.com/subject/xovoahtx.html