-
小程序分享
2018-08-17 16:44:39//小程序分享 //开启右上角分享按钮 wx.showShareMenu({ withShareTicket: true }) //按钮分享 <button open-type="share" class='share small' data-name='{{item.goods_name}}' data-...//小程序分享
//开启右上角分享按钮
wx.showShareMenu({
withShareTicket: true
})//按钮分享
<button open-type="share" class='share small' data-name='{{item.goods_name}}' data-goods='{{item.goods_id}}'><image src='/images/shear.png'></image></button>
//处理分享事件
// 分享
onShareAppMessage: function (res) {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target.dataset)
var name = res.target.dataset.name
var goods_id = res.target.dataset.goods
return {
title: name,
path: '/pages/index/goods/goods?id=' + goods_id,
success:function(e){ //分享回调
}
}
}else{
return {
title: this.data.name,
path: '/pages/index/goods/goods?id=' + this.data.goods_id,
success: function (e) { //分享回调}
}
}
},
-
微信小程序怎样分享一个链接到朋友圈,小程序分享到朋友圈,微信小程序如何分享到朋友圈,小程序链接分享到...
2020-07-07 11:26:01重磅消息重磅消息重磅消息重磅消息重磅消息重磅消息重磅消息 ...目前小程序已经支持分享到朋友圈, 只有安卓机好使。 体验地址:扫码进入小程序 ---- 点击右上角三个点 1.先看案例 2.微信开发文档: ...------2020-07-07------
重磅消息重磅消息重磅消息重磅消息重磅消息重磅消息重磅消息
目前小程序已经支持分享到朋友圈,
只有安卓机好使。
测试机型:小米9 miui12 20.7.2 微信版本7.0.16
体验地址:扫码进入小程序 ---- 点击右上角三个点
技术公众号
1.先看案例
2.微信开发文档:
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareTimeline
https://developers.weixin.qq.com/miniprogram/dev/api/share/wx.showShareMenu.html3.代码
//index.js //获取应用实例 const app = getApp() Page({ data: { }, onLoad: function () { wx.showShareMenu({ menus: ['shareAppMessage', 'shareTimeline'], success(res) { console.log(res) }, fail(e) { console.log(e) } }) }, onShareAppMessage(){ }, onShareTimeline(){ } })
4.我的微信 LJT-917
-
Taro小程序分享小结
2020-04-03 17:55:36Taro小程序分享小结 在开发小程序的时候遇到自定义分享按钮分享卡片到好友的需求,由于小程序的分享只有在页面js中定义了onShareAppMessage(Object)方法才会出现右上角的分享按钮。 object参数 onShareAppMessage...在开发小程序的时候遇到自定义分享按钮分享卡片到好友的需求,由于小程序的分享只有在页面js中定义了onShareAppMessage(Object)方法才会出现右上角的分享按钮,所以需要在页面中自定义分享方法。具体见下:
object参数
onShareAppMessage(Object)事件需要返回一个Object对象对象里面包含要分享的标题,转发的路径,以及自定义图片的路径。完成了这一系列操作就可以愉快的去分享微信小程序的页面了。
// 在页面中使用 import Taro, { Component } from "@tarojs/taro"; import { View } from "@tarojs/components"; class index extends Component { onShareAppMessage() { return { title: "自定义标题", path: '/page/user?id=123', // 自定义的分享路径,点击分享的卡片之后会跳转这里定义的路由 imageUrl: '' // 图片路径 }; } render(){ return( <View>微信分享</View> ) } } export default index;
自定义分享按钮事件的实现。有时候,在大多数的业务场景下我们需要在页面中点击某个按钮触发分享的事件,此时需要监听用户点击页面内转发按钮(Button 组件 openType=‘share’)就会自动触发onShareAppMessage方法。如果需要在button中携带信息,需要自定义button属性,通过res.target.dataset获取。
// 在页面中使用 import Taro, { Component } from "@tarojs/taro"; import { View } from "@tarojs/components"; class index extends Component { onShareAppMessage(res) { if (res.from === "button") { const {share = {}} = res.target.dataset return { title:`自定义分享按钮${share.title}`, path: `/pages/bill/index`, imageUrl: '' }; } else { return { title: "右上角分享事件", path: `/pages/bill/index`, imageUrl: '' }; } } render(){ return( <View> <Button open-type="share" data-share={data} > 点击分享 </Button> </View> ) } } export default index;
需要注意的是,onShareAppMessage不支持异步调用,如果有需求是先请求接口的数据再分享会因为拿不到数据导致分享信息不正确的错误。
-
小程序分享功能开发
2018-03-17 14:58:18小程序分享功能开发 接触小程序不久,在第一次开发分享功能的过程中遇到了些许波折,此文介绍在小程序中,如何应对不同业务场景下的分享功能开发需求。 功能介绍 小程序转发分享功能,跟开发相关的内容并不多,...小程序分享功能开发
接触小程序不久,在第一次开发分享功能的过程中遇到了些许波折,此文介绍在小程序中,如何应对不同业务场景下的分享功能开发需求。
功能介绍
小程序转发分享功能,跟开发相关的内容并不多,主要通过onShareAppMessage定制页面分享内容,但有两个重要约束:
- 无法从代码内触发转发,只能通过
open-type="share"
的按钮在页面内触发 - 转发内容(title、url、imageUrl)需要同步返回
这两个约束,对实际业务的开发带来了不小的影响,如果需要用户在一个操作内保存数据并分享,因为上述两个限制,该功能就能很难实现,因为保存,涉及网络请求,必然是异步的。
异步指定分享内容的解决方案
这里提供两种解决方案,都是曲线救国,多少有些瑕疵。
方案一
将用户行为拆分为两个步骤,先保存数据,成功后再由用户主动分享给他人。这种方案在技术上相比第二种更为安全,但在某些业务场景下,用户体验并不完美,比如“给好友发送xxx”这种场景模式。
方案二
在用户分享成功后再保存数据,采用这个方案需要结合具体业务思考,标准是:“数据如果没有保存成功,会造成多大的影响与后果?是不是可接受的?”。
常规POST/CREATE操作,一般数据ID都是后端负责生成,操作成功后接口返回ID,但为了面对目前这种情况,在接口设计上需要做出部分调整:
- 尽最大可能降低接口的失败可能性
- 保存数据时支持指定ID
- 为避免ID冲突,后端提供ID预生成接口
其他的就不过多废话了,一切尽在代码中:
Page({ data: { id: null }, onLoad: function () { return this.fetchId(); }, onShow: function () { if (!this.loading && !this.data.id) { return this.fetchId(); } }, onShareAppMessage: function () { if (!this.data.id) { // todo 返回默认分享信息,比如小程序首页 } return { title: 'xxx', path: 'xxx?id=' + this.data.id, success: function (res) { if (this.data.savedId === this.data.id) { return; } this.saveData().then(() => { this.setData({ savedId: this.data.id }); // todo 如果跳转到其他页面,删除this.data.id }); } }; }, fetchId: function () { // fetch id and set to data }, saveData: function () { // save data to server } });
canvas绘制分享图片
针对上一部分,如果分享内容是异步生成的,往往分享图片也是动态的(非固定的本地资源或者网络资源)。
针对动态分享图片,通常有两种解决方案:
- 服务器动态生成所需图片
依赖服务器的图片处理功能,灵活合成所需图片,缺点很明显,图片处理会消耗过多的服务器资源,影响服务器整体吞吐量
- 客户端使用canvas绘制动态图片
在客户端本地使用canvas绘制内容,最后通过
wx.canvasToTempFilePath
保存图片临时路径用于分享,这种方式的缺点:兼容性不够好,可能遇到各种BUG在第一次开发过程中,选择了canvas绘制分享图片,主要步骤如下:
- 在wxml文件中声明canvas区块
此处有一个主意事项:canvas区块应该不影响布局且不可见,但经过实践发现不能使用
display: none;
或opacity: 0;
这种方式。最终摸索出一种可行方式:使用view容器包裹canvas,然后设置view的style为height: 0; overflow: hidden;
在js中通过
wx.createCanvasContext
获取绘图上下文通过上下文使用canvas相关api绘图
使用
wx.canvasToTempFilePath
获取图片路径
这种方式的优点是不依赖服务器,节省了服务器性能开销,但是也有一个致命缺点:图片生成是异步的,与onShareAppMessage需要同步返回数据有冲突。
为解决该问题,采取的方案是在影响分享图片因素变化时,立即重新生成,且需要考虑失败时的替代图片。这种做法,因为频繁的使用canvas绘制与保存图片,可能会影响小程序的运行流畅度。
最后贴上针对输入框内容动态生成分享图片的核心代码:
App({ drawLock: false, // 避免同时对一个canvas进行操作 shareImageCache: {}, // 尽可能优化 drawShareImage: function (canvasId, ctx, text) { if (this.drawLock) { return; } this.drawLock = true; let that = this; let cacheKey = util.hash(text); if (this.shareImageCache[cacheKey]) { return Promise.resolve(this.shareImageCache[cacheKey]); } ctx.clearRect(0, 0, 500, 400); return new Promise(resolve, reject => { ctx.setFillStyle('#333333'); ctx.setFontSize(40); ctx.fillText(text, 20, 60); ctx.draw(true, () => { promisify(wx.canvasToTempFilePath)({ canvasId: canvasId }).then(res => { this.drawLock = false; that.shareImageCache[cacheKey] = res.tempFilePath; resolve(res.tempFilePath); }).catch(err => { this.drawLock = false; reject(err); }); }); }); } }); Page({ data: { canvasId: 'share-canvas', }, shareImagePath: null, onLoad: function () { this.ctx = wx.createCanvasContext(this.data.canvasId); this.drawShare(); }, onInput: function () { if (this.preInputTimer) { clearTimeout(this.preInputTimer); } this.preInputTimer = setTimeout(() => { this.drawShare(); }, 1000); // 这个数字最好是比一般人连续输入时间间隔大一丢丢 }, drawShare: function () { return app.drawShareImage(this.data.canvasId, this.ctx, e.detail.value).then(path => { this.shareImagePath = path; }).catch(err => { logger.error(err); }); } });
以上代码是从自己小程序代码中提炼的部分内容,把绘制行为放在app中,是为了与其他页面共享。
上述是一个极端例子,因为用户的输入实时反馈到分享图片上,如果在产品层面考虑变通,可能会有更好的思路与解决方案。
- 无法从代码内触发转发,只能通过
-
flutter 微信支付 跳转小程序 分享到小程序
2020-10-16 10:37:52flutter 微信支付 跳转小程序 分享到小程序 直接上步骤 第一步 pubspec.yaml 添加依赖 fluwx: ^1.2.1+1 fluwx最新3.0不太好用 第二步 界面添加 import ‘package:fluwx/fluwx.dart’ as fluwx; 第三步 界面加载方法... -
支付宝小程序分享转发
2019-04-11 11:33:11最近公司在做一系列支付宝小程序,其中分享拉新显然是很重要的一环...支付宝小程序分享方式 支付宝小程序触发分享的方式跟微信小程序相同也是两种方式设置onShareAppMessage和button添加open-type="share"属性 支付... -
微信小程序分享
2017-01-10 11:40:03微信小程序分享:1.微信小程序认证指引 http://t.cn/RI1RMEO2.微信小程序接入指南 http://t.cn/RI1RKRi3.微信小程序开发指南 http://t.cn/RI1RYEe4.微信小程序平台运营规范 http://t.cn/RI1R8tO5.个人进行申请开发者... -
小程序分享参数问题
2018-11-07 14:14:29小程序分享 微信小程序分享主要是使用自带的onShareAppMessage方法调起分享组件。 主要写法就是 onShareAppMessage:function(res){ if(res.from == 'button'){ //按钮授权 调用share } return { title: ... -
微信小程序分享功能
2017-05-09 15:41:34微信小程序分享功能 -
微信小程序分享页面
2017-09-26 14:17:41解决微信小程序分享页面到朋友圈 -
微信小程序自定义组件---生成小程序分享海报分享到朋友圈
2020-01-14 11:01:30在开发微信小程序的过程中免不了要使用到分享功能,然而现在微信官方还没有开放小程序分享到朋友圈的功能,这时候我们只能使用其他方法分享到朋友圈了。 效果图如下: 组件文件: js文件: // components/rwj... -
微信小程序分享功能知识点
2019-08-15 15:21:26微信小程序分享功能知识点微信小程序分享功能知识点概览小程序与普通网页开发的区别小程序运行机制启动前台/后台状态小程序销毁WXS响应事件的动机微信分享需求描述程序流程FAQs同类小程序分享功能调研&... -
微信小程序分享二维码生成
2019-06-24 12:06:27生成微信小程序分享二维码 微信小程序官方开放的二维码的接口,其中有一个是生成小程序二维码的,还有一个是圆形的小程序码,我这里就用php生成二维码。 完整代码: public function share($product_id, $user_id) ... -
小程序分享到微信群
2018-10-09 11:10:15小程序点击分享,将小程序分享到群 一、针对于分享做了以下几个判断: 01、是否分享到的是重复的群组 02、分享到的不是群组 03、今日是否在该群组已经分享过该小程序了 二、分享出去的页面做了一个固定页面的... -
小程序分享模块超级详解
2019-04-11 11:52:50导语:在小程序项目开发中,分享能力几乎是每个项目必备的要求,但原生的分享能力比较有限,不够灵活,今天就我们就一起来研究下,如何在现有基础上,增强小程序分享的能力,使信息传递更加直观、灵活。 示例项目... -
轻松生成小程序分享海报
2018-08-29 16:28:56小程序分享到朋友圈只能使用小程序码海报来实现,生成小程序码的方式有两种,一种是使用后端方式,一种是使用小程序自带的canvas生成;后端的方式开发难度大,由于生成图片耗用内存比较大对服务端也是不小的压力;... -
小程序分享,小程序自定义分享
2018-11-30 18:21:40小程序官方API https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#%E9%A1%B5%E9%9D%A2%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E5%87%BD%E6%95%B0 有两种方式,一种是页面内... -
微信小程序 分享给好友
2019-09-09 17:24:25微信小程序 分享给好友 1.html的代码 <button class="fixed-text fixed-button" open-type="share" title="分享" hover-class="none">分享好友</button> 2.js的代码 onShareAppMessage:function(res) {... -
uni-app 关于微信小程序分享,app微信聊天界面和朋友圈分享
2019-05-31 19:02:04微信小程序分享 实现微信小程序分享和app内微信分享 小程序分享很简单,我们通过button的open-type属性 <!-- #ifdef MP-WEIXIN --> <button class="share-btn" open-type="share">立即分享</button&... -
小程序分享至群群消息小结(包括分享到App)
2018-09-15 22:24:52以下是18年3月底在公司内部的分享,虽然小程序对于分享回调有所限制(下文会说明),但是整体方案依然是可行的 ...官方文档有,但是较分散,所以对这块知识作一个小结,能快速了解小程序分享至群获... -
微信分享图片 文字 Android原生分享图片文字 微信小程序分享
2017-06-20 17:27:53最近接一个小程序的分享,要求我们app端生成一个图片给用户用微信扫码,本地直接调微信分享小程序链接。... //小程序分享 public void shareLocal() { WXMiniProgramObject programObject = new WXMiniProgramObje -
微信小程序 分享登录的问题
2019-12-11 19:47:11关于微信小程序 分享登录的问题 大家好,在微信小程序实践项目开发过程中,遇到关于分享页面分享给别人 ,需要登录的问题。经过几天彻夜的研究啊,终于解决了。虽然走了很多的弯路,但是最后还是圆满的完成了任务。... -
uniapp转小程序分享到朋友圈
2020-08-04 21:19:44uniapp转小程序分享到朋友圈 uniapp转化成小程序,但是目前小程序只支持安卓手机进行朋友圈分享,ios目前还不支持。 文档link 我的项目是uniapp,就直接按照我的写法来进行展示: <button plain class="wx" open-... -
微信小程序分享及信息追踪
2018-09-21 11:18:00小程序分享群及信息追踪 需求 页面分享 小程序页面分享链接增加source参数,值为用户ID加密,分享出去的链接类似/pages/live/live?id=10109&source=1ada812s 分享时自定义分享文案、链接、封面图 ... -
微信小程序分享支持自定义封面图
2017-08-19 07:59:00微信小程序主要更新如下:“小程序分享支持自定义封面图,公众号及小程序客服可发送小程序卡片。同时,我们还开放了获取发票抬头,指纹识别等更多能力。” 1、小程序可自定义分享配图 为帮助开发者给用户呈现... -
小程序分享群及信息追踪
2018-05-04 12:19:45小程序分享群及信息追踪 需求 1.页面分享 小程序页面分享链接增加source参数,值为用户ID加密,分享出去的链接类似/pages/live/live?id=10109&source=1ada812s 分享时自定义分享文案、链接、封面... -
微信小程序分享接口卡片图片尺寸比例
2019-03-18 13:43:02调用微信小程序分享需要button标签 <button open-type="share">test</button> 然后在js的page里加一个函数 onShareAppMessage: function() { return { title: "小伙伴快来和我玩", ... -
微信小程序分享朋友圈限制多多
2020-07-23 10:09:45千呼万唤shi出来,在我渐渐淡忘了微信小程序可以分享朋友圈后,它又终于可以...现在想要将小程序分享到朋友圈,需要设置允许“发送给朋友”,并且定义分享朋友函数Page.onShareAppMessage和分享朋友圈函数Page.onSha.
-
我的第一篇博客
-
转行做IT-第1章 计算机基础
-
C#学习笔记
-
C语言-求两个整数之和。
-
【数据分析-随到随学】SPSS调查问卷统计分析
-
最左匹配原则
-
Cocos Creator游戏开发-连连看 (接入腾讯优量汇广告)
-
整合的PCB封装库 intLib.zip
-
VBA学习系列
-
2021年危险化学品经营单位主要负责人考试及危险化学品经营单位主要负责人模拟考试
-
uni-app实战专题
-
2021-01-16
-
tensorflow hubs 如何load本地的模型
-
Java学习路线,好的学习路线和好的方法,能让我们少走些弯路
-
Spring学习——注解开发
-
13款最佳免费网络监控工具,网站监控软件的总结。
-
FFmpeg4.3黄金系列课程:c++版
-
21年新MybatisPlus+Swagger3.x+SpringBo
-
树莓派4B 从零开始 基础 入门 安装
-
Lingo学习笔记(一)——语法入门