微信小程序右上角三个点的分享是灰色的-前端-E先生的博客
Java
MySQL
大数据
Python
前端
黑科技
大语言模型
    首页 >> 互联网 >> 前端

微信小程序右上角三个点的分享是灰色的

[导读]:小程序右上角三个点,如果没有设置分享,则是灰色的,需要设置第一:指定页面分享onShareAppMessage(res){return{title:'自定义分享标题',path:'/pages/test/test?id=123'...

小程序右上角三个点,如果没有设置分享,则是灰色的,需要设置

第一:指定页面分享

onShareAppMessage(res) {
    return {
      title: '自定义分享标题',
      path: '/pages/test/test?id=123'
    }
 }

onShareAppMessage 与 页面的onLoad 同级,这个是指定页面可以配置其他参数 详情见文档:https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage

第二:页面内分享,通过按钮button分享

<button open-type="share">分享</button>
onShareAppMessage(res) {
    if (res.from === 'button') {// 来自页面内分享按钮
      console.log(res.target)
    }
    return {
      title: '自定义分享标题',
      path: '/pages/test/test?id=123'
    }
 }

第三:全局分享,如果需要实现所有页面都分享到一个页面,每个页面都写很麻烦,可以这样实现

首先,新建混入mixin-share.js   1.1版本

export default {
	data() {
		return {
		   //这个share可以在每个页面的data中设置相应的转发内容
			share:{
				title:'自定义标题',
				path:'/pages/home/index',
				
			}
		}
	},
	// 用户点击右上角分享给好友,要先在分享好友这里设置menus的两个参数,才可以分享朋友圈
	onShareAppMessage(res) {
		return {
			title: this.share.title,
			path: this.share.path,
			// imageUrl: this.share.imageUrl,
			// desc: this.share.desc,
			// content: this.share.content,
			success(res) {
				uni.showToast({
					title: '分享成功'
				})
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				})
			}
		}
	},
	//用户点击右上角分享朋友圈
	onShareTimeline () {
		return {
	      title: '',
	      query: {
	        key: value
	      },
	      imageUrl: ''
	    }
	},
}

其次,在main.js 里面注入全局

import share from'./utils/mixin-share.js';
Vue.mixin(share)

1.2版本

创建公共js文件 文件代码如下

这个地方title没有使用data里面的变量是因为在这个地方取不到

export default {
    // 发送给朋友
    onShareAppMessage(res) {
         return {
          title: this.$shareTitle,
          path: '/pages/login/login'
        }
    },
    //分享到朋友圈
    onShareTimeline(res) {
         return {
          title: this.$shareTitle,
          path: '/pages/login/login'
        }
    }
}

在main.js里面引入公共js 通过Vue.mixin进行全局挂载

如果每个页面想显示的标题不一样就在对应的页面onload里面修改标题,想增加分享图修改也是同等操作

import wxShare from '@/utills/wxShare.js'
Vue.prototype.$shareTitle = '分享标题'
Vue.mixin(wxShare)

页面修改标题

onLoad() {
    this.$shareTitle = '登录页面分享'
},

结束,最后测试通过

image.png

本文来自E先生的博客,如若转载,请注明出处:https://javajz.cn

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

欢迎加Easy的QQ