-
2021-09-17 21:37:41
1、在根目录新建utils目录,新建一个share.js
export default { data() { return { //设置默认的分享参数 //如果页面不设置share,就触发这个默认的分享 share: { title: ’全局默认标题', path: `/pages/index/index`, //默认跳转首页 imageUrl: '', //可设置默认分享图,不设置默认截取头部5:4 } } }, onShareAppMessage(res) { //发送给朋友 return { title: this.share.title, path: this.share.path, imageUrl: this.share.imageUrl, success(res) { console.log('success(res)==', res); uni.showToast({ title: '分享成功' }) }, fail(res) { console.log('fail(res)==', res); uni.showToast({ title: '分享失败', icon: 'none' }) } } }, onShareTimeline(res) { //分享到朋友圈 return { title: this.share.title, path: this.share.path, imageUrl: this.share.imageUrl, success(res) { console.log('success(res)==', res); uni.showToast({ title: '分享成功' }) }, fail(res) { console.log('fail(res)==', res); uni.showToast({ title: '分享失败', icon: 'none' }) } } }, }
main.js配置全局
// 引入自定义小程序分享的封装 import share from "./utils/share.js" Vue.mixin(share)
页面自定义引用
<script> export default { data() { return { title: 'Hello' share:{ title: ’页面标题', path: `/pages/default/default`, //页面路径 imageUrl: '', //页面图,可自定义 } } }, //引入单页面配置 onShareAppMessage(res) { if (res.from === 'button') { console.log('来自页面内分享按钮'); console.log(res.target); } return { title: this.share.title, path: this.share.path, imageUrl: this.share.imageUrl, success(res) { console.log('分享成功'); }, fail(res) { console.log('分享失败'); } }; }, onLoad() { }, methods: { } } </script>
写在最后:
QQ交流群:857064044
不懂可互相交流经验,嘻嘻更多相关内容 -
微信小程序点击生成朋友圈分享图(遇到的坑)
2020-10-15 05:15:55主要介绍了微信小程序 点击生成朋友圈分享图,本文给大家分享小编在实现此功能时遇到的各种坑,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 -
微信小程序实现限制用户转发功能的实例代码
2020-11-20 20:43:41在上篇文章给大家提到微信小程序实现禁止分享代码实例,感兴趣的朋友可以点击查阅。今天继续给大家分享微信小程序实现限制用户转发功能,...加入这个代码后,发送给朋友的按钮变成了灰色,显示当前页面不可转发。 2、 -
微信原生转发功能,就是右上角三个点里面得发送给朋友得功能实现
2022-02-25 15:20:14在做得小程序项目中,有一个需求,要求全部页面加上转发给朋友功能 做法:把转发混入到全局| 代码实现 混入文件: 然后在main.js进行全局混入 代码: import mixin from './common/mixin/mixall' Vue.mixin(share) ...需求:
在做得小程序项目中,有一个需求,要求全部页面加上转发给朋友功能
做法:把转发混入到全局|
代码实现
混入文件:
然后在main.js进行全局混入
代码:import mixin from './common/mixin/mixall' Vue.mixin(share)
然后坐等热重载
如果想在单页面混入得话需要这么做import share from "@/common/mixin/share" export default { mixins:[share] }
关于混入得官方文档链接:https://cn.vuejs.org/v2/guide/mixins.html
-
微信小程序如何支持分享给朋友和分享到朋友圈?如何解决分享朋友圈灰色问题
2021-09-09 12:39:23微信小程序分享给朋友和分享到朋友圈,都需要在小程序编写代码实现。 1.官方文档 转发官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html 分享到朋友圈官网文档:...微信小程序分享给朋友和分享到朋友圈,都需要在小程序编写代码实现。
目录
1.官方文档
转发官方文档:转发 | 微信开放文档
分享到朋友圈官网文档:分享到朋友圈 | 微信开放文档
官方文档,很重要,一定要看完。细节和坑在文档中都有说明。
2.分享给朋友,即转发
通过onShareAppMessage实现分享,分享有2种方式:
方法1:通过小程序右上角...进行分享
方法2:在页面,新增“分享”按钮,进行分享
通过给
button
组件设置属性open-type="share"
,可以在用户点击按钮后触发 Page.onShareAppMessage 事件,相关组件:button。前端按钮代码举例:
<button class="bottom-share" data-id='122' open-type="share" type="primary">分享</button>
js中的代码举例:
onShareAppMessage: function (res) {// 分享 if (res.from === 'button') { // 来自页面内转发按钮 //console.log("转发:" + JSON.stringify(res.target)) } return { title: this.data.goodsInfo.goodsName, path: '/pages/order/detail/detail?goodsId=' + this.data.goodsInfo.id , success: function (res) { //console.log('/pages/order/detail/detail?goodsId=' + this.data.goodsInfo.id ) // 转发成功 //console.log("转发成功:" + JSON.stringify(res)); }, fail: function (res) { // 转发失败 //console.log("转发失败:" + JSON.stringify(res)); } } },
3.分享到朋友圈
分享朋友圈的代码举例:
/*分享朋友圈 */ onShareTimeline: function() { return { title: '***批发商城', query: 'goodsId=' +this.data.goodsInfo.id, imageUrl: this.data.goodsInfo.mainImg, } },
4.常见问题
4.1.分享朋友圈灰色
原因:没有编写分享朋友圈代码
解决方法:见第3节,编写分享朋友圈代码
4.2.如何测试分享给朋友
在开发环境,通过预览进行测试,分享给朋友或者文件传输助手。
4.3.如何测试分享给朋友圈
在开发环境,通过预览进行测试,由于是测试,分享朋友圈时,可见范围选择私有,只有自己看到。
没有解决的朋友,欢迎留言,我会第一时间回复。
-
uniapp实现微信小程序点亮发送给朋友权限
2020-11-27 16:07:10 -
关于微信小程序上传按钮是灰色不能点击的问题
2020-11-22 15:21:33首先确保你的微信开发者工具是否填写了小程序id。网上有说管理员无法上传的,但是我这里角色就是管理员,且没有把管理员配置开发者(事实上你也不能配置…) 如果没有请添加小程序id即可就可以上传了。 此外,如果... -
小程序webview 转发 分享朋友圈
2019-01-19 12:01:00转战小程序 webview H5页面 的转发分享朋友圈功能 先说 小程序分享朋友圈的 功能实现 在小程序内部做分享,尚且需要用画布画出带有二维码的图片,在H5页面上更不用说了,根本就碰不着小程序的自己的api。老老... -
一文看懂:如何将小程序分享到朋友圈[建议收藏]
2020-07-24 15:33:26近日小程序支持分享到朋友圈的消息可以说是小程序开发圈的一个重磅炸弹,转转小程序团队也在收到微信邀请后第一时间进行了调研,并对转转小程序迅速进行了能力支持,本文将全面解读微信此项能力。 概述 此项能力其实... -
微信小程序 - 将页面可分享到朋友圈功能(两步完成)
2022-02-25 14:37:15前言 ... 没有设置过分享朋友圈功能的小程序,分享朋友圈按钮是灰色且无法点击,如下图所示: ...在想要开启分享朋友圈功能的页面,调用 wx.showShareMenu() 打开,分享朋友圈按钮才被激活(从灰色变为可用),上图所示。 -
实现微信小程序分享朋友圈及好友
2021-11-11 22:49:53showShareMenu微信小程序API文档链接 注意事项 显示“分享到朋友圈”按钮时必须同时显示“发送给朋友”按钮,显示“发送给朋友”按钮时则允许不显示“分享到朋友圈”按钮 onLoad() { // "shareAppMessage"表示... -
uni-app -- 小程序分享遇到的问题
2022-01-21 10:05:31小程序分享1. 全局混入mixins1.1 创建mixins.vue1.2 全局混入1.3 页面分享数据2.使用的方式 关于小程序分享的问题,该需求很常见。在uni-app中如何能够优雅的配置每个页面都有分享功能呢? 1. 全局混入mixins 1.1 ... -
taro 全局分享转发
2021-12-30 10:54:41taro 小程序开发,不用每个页面都设置 onShareAppMessage/useShareAppMessage,可以做到全局分享转发 -
小程序分享朋友圈_重磅:小程序将可分享到朋友圈
2020-12-04 14:11:01昨天( 6 日)深夜,几张小程序截图在行业中流传,截图显示,小程序已可正式分享到朋友圈。这表明,微信最大的流量池将向小程序敞开,毫无疑问,小程序也将迎来更大一轮爆发。如下四张截图,正是部分行业群内流传的小... -
微信小程序笔记
2022-01-10 16:35:51聊天素材小程序打开相关配置 2.14.3 serviceProviderTicket string 否 定制化型服务商票据 embeddedAppIdList string[] 否 半屏小程序 appId 2.20.1 halfPage Object 否 视频号直播半屏场景设置 2.18.0 pages 用于... -
2行代码实现小程序分享到朋友圈功能
2020-07-30 23:05:01期盼已久的小程序直接分享到朋友圈的功能,官方终于支持了。今天就来带大家实现小程序分享到朋友圈的功能。代码很简单。老规矩,以图为证新加分享到朋友圈的按钮分享到朋友圈的效果分享成功打开朋友圈... -
微信小程序之web-view中的页面分享
2021-06-12 05:57:55解决思路首先是开启小程序的页面分享功能wx.showShareMenu({withShareTicket: true, // 该参数在做分享到群内的统计的时候可以用到,单独分享给某个人是undefined,在小程序的load或者show的回... -
H5手机网站封装微信小程序并实现分享功能的教程
2021-06-13 04:11:48通过本文教程可以实现将H5手机网站直接封装成微信小程序,并且支持分享功能。但不支持微信支付功能。说明:手机站域名必须开启https模式第一步:微信开发者工具中创建小程序,填写你自己的小程序AppID第二步:修改... -
微信小程序 常见组件
2021-09-25 21:18:14重点为小程序中常用的布局组件 view,text,rich-text,button,image,navigator,icon,swipe,radio,checkbox等 文章目录常见组件viewtextimageswiper 轮播图组件navigator 导航组件rich-text 富文本button外观属性开放... -
小程序常见标签组件
2021-06-07 11:51:34default 灰色 primary 绿色 warn 红色 plain:按钮是否镂空,背景色透明 loading:前面是否有等待图标 button开放能力—open-type属性: contact:直接打开客服对话功能,需要在微信小程序的后台配置 share:转发... -
微信小程序——常用属性及标签
2021-07-19 12:45:38在学习的过程中感受到了内容之多,这里总结了一些小程序开发的一些常用属性与方法,更加具体的还得通过打开微信开放文档进行学习,在学习的过程中多打demo才是最好的学习方式啊,再好的文档都比不上自己去实践。... -
【小程序】766- 一文看懂小程序分享到朋友圈
2020-11-03 08:05:00点击上方 关注我们作者简介张所勇转转平台运营中心前端负责人,在前端领域有深入研究,包括:sketch一键切图、前端数据模型化,小程序基础能力建设等多个方面,10年工作经验中,做了2年工... -
微信小程序开发(BlackHorse)
2021-07-22 13:19:15打开客服会话,如果⽤⼾在会话中点击消息卡⽚后返回⼩程序,可以从 bindcontact 回调中获得具体信息 share:转发当前的小程序到微信朋友中,不能分享到朋友圈 getPhoneNumber:获取⽤⼾⼿机号,结合一个事件使用,非... -
重磅:小程序将可分享到朋友圈啦!
2020-07-08 08:46:04昨天(6日)深夜,几张小程序截图在行业中流传,截图显示,小程序已可正式分享到朋友圈。 这表明,微信最大的流量池将向小程序敞开,毫无疑问,小程序也将迎来更大一轮爆发。 如下四张截图,正是部分行业群内流传... -
微信小程序学习
2022-04-06 12:49:15微信小程序学习 声明: 本文章是基于黑马程序员的课程所编写,本人才疏学浅,内容仅作参考 项目和markdown文件资料: 微信小程序: 基于黑马程序员的微信小程序笔记与项目 文章目录 微信小程序学习 1. 环境准备 2. 小... -
微信小程序基础组件
2021-01-13 21:27:00微信小程序组件常见组件view容器text文本image图片[swiper轮播图 ](https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html) 官方文档: 组件 官网的组件很多,为了方便学习整理了常用的几个组件 ... -
微信小程序的开发(前端)
2022-01-07 11:18:51微信小程序的学习过程 -
微信小程序开发的基本用法
2020-04-06 18:16:55微信小程序开发的基本用法 1、数组或对象的遍历 数组遍历 wx:for=”{{数组或对象}}” wx:for-item=”循环项的名称” wx:for-index=”循环项的索引” wx:key=”唯一的值”用来标识数据的唯一性。 微信小程序的数组... -
第五章:如何开发一款内容展示类小程序(下)
2019-10-16 10:17:32前面我们搭建了一个简单的页面框架,实现了文章列表展示和跳转文章详情的功能。...考虑到性能问题,大部分情况下我们不会在首页展示出所有的文章列表,在 PC 上我们可以通过分页来实现,而在移动端...