plsql developer无监听程序_微信小程序支持分享到朋友圈啦!技术解读跟我来

千呼万唤始出来!微信小程序页面分享到朋友圈的功能,终于在安卓系统灰度测试了!目前只在安卓系统!只在安卓系统!只在安卓系统!iOS系统还没有办法体验。

首先,我们看一下官方文档的描述,解读一下小程序分享到朋友圈的实现步骤和条条框框;之后,我们用一个非常简单的代码例子来实现小程序分享到朋友圈的功能。

下面开始正题,官方文档的具体位置在这里:

小程序开发文档-开发指南-开放能力-分享到朋友圈(Beta)

文档中有说明:
从基础库 2.11.3 开始支持,此功能为beta版,暂仅在Android平台支持。

官方文档短短一页,说明了小程序分享到朋友圈的使用方法,对于我们开发者或者用户来说急需要了解的是怎么用,呈现的效果是怎样的。

先不着急上“码”,我先来归纳整理一下官方文档,让大家能有个清楚的认识:

1. 小程序页面分享到朋友圈的呈现效果

不像大家想象的那样,小程序分享到朋友圈的内容点击后可直达小程序。目前呈现的方式是用官方称作为“单页模式”的页面显示小程序页面的内容。

59fdec2aee2e80d5dcdcdbb8479ff68f.png

分享到朋友圈以后点击打开的页面布局

2. 什么是单页模式?

这个单页模式可就厉害了,有着一些约束要记好:

1)单页模式的布局

页面顶部固定有导航栏,标题显示为分享时设置的标题。底部固定有操作栏,点击操作栏的“前往小程序”才可以打开小程序的当前页面。顶部导航栏与底部操作栏均不支持自定义样式。

2)单页模式的限制

  • 页面无登录状态(云开发资源需开启未登录访问方可在单页模式下使用)
  • 不允许跳转到其它页面
  • 不允许横屏使用
  • 若页面包含 tabBar 或自定义 tabBar,tabBar 不会渲染
  • 本地存储与小程序普通模式不共用
  • 如果在单页里使用了禁用的组件或接口,在点击调用时,会弹 toast 提示“请前往小程序使用完整服务”。官方有对应的适配解决方案,请接着看。

3) 单页模式的页面适配

以下文字内容是官方文档的原文:

可通过判断场景值等于 1154 的方法来进行页面适配。另外,在单页模式下,可设置顶部导航栏与页面的相交状态,具体参考 navigationBarFit 配置。

还需留意的是,在单页模式下,wx.getSystemInfo 接口返回的 safeArea 为整个屏幕空间。

所以,在分享到朋友圈的小程序页面里面有交互的环节应该尽量考虑适配方法,免得影响用户体验。

3. 什么页面适用于分享到朋友圈?

像文章详情页、产品详情页等等这样的内容页面是非常适合分享到朋友圈的,官方文档也提到了:“分享朋友圈能力是为了满足纯内容场景的分享诉求”。

因此,在这个页面不可诱导或强制用户点击“打开小程序”,应在“单页模式”中尽可能呈现完整的内容。

4. 使用分享到朋友圈能力之前的关注点

  • 存在 web-view 组件的页面不支持发起分享。解读:想嵌入个html走天下的想法是不被允许的!
  • 不支持在小程序页面内直接发起分享。解读:通过设置open-type="share"是不可能的!
  • 不支持自定义页面路径。解读:分享哪个页面就是哪个页面,想改没门儿!
  • 支持打开开发版、体验版
  • 无权限人员进入时页面会提示无权限
  • 低版本微信客户端打开时,会进入一个升级提示页面

好了,说了这么多,接下来用一个简单得不能再简单的代码案例说明使用方法。各位看官,上“码”!

等等……出发前先读一下分享朋友圈的接口文档,具体官方文档位置:

小程序开发文档-框架-框架接口-页面-Page-onShareTimeline()

官方又说了,这玩意儿从基础库 2.11.3 开始支持,如果低于这个版本请做兼容处理。再次提醒,这是Beta版本,目前只在Andriod平台支持。该接口监听右上角菜单“分享到朋友圈”按钮的行为,并设置自定义分享内容。

onShareTimeline返回一个 Object,用于自定义分享内容,不支持自定义页面路径(没有path这个属性),返回如下三个字段:

1.字段:title

说明:自定义标题
默认值:当前小程序名称

2.字段:query

说明:虽然不支持自定义页面路径,但这个页面需要接收参数小程序是让你传进去的,这就可以统计到这个分享入口的量了
默认值:当前页面路径携带的参数

3.字段:imageUrl

说明:自定义图片路径,可以是本地文件或者网络图片。支持 PNG 及 JPG,显示图片长宽比是 1:1
默认值:默认使用小程序 Logo

接下来,我们启动微信开发者工具,新建一个小程序项目,在index.js里增加如下代码即可:

onShareAppMessage: function (res) {  if (res.from === 'button') {    // 来自页面内转发按钮    console.log(res.target)  }  return {    title: '自定义转发标题',    path: '/page/index/index'  }},onShareTimeline: function() {  return {    title: '自定义朋友圈分享',    query: '',    imageUrl: '图片的链接地址'  }}

有人问,只放置 onShareTimeline,不要 onShareAppMessage 行不行? 这个真不行,会导致右上角菜单中“发送给朋友”和“分享到朋友圈”都是灰色不可点击。

代码已到位,编译运行,看看效果吧~

f542bf8fdb09d272cc3f2e00ada1086b.png

这是没有加onShareTimeline时的右上角菜单

ce6aa2af9d1481ccc41624d841ce3a07.png

这是加上onShareTimeline监听后的效果,分享到朋友圈亮起来啦!

3a7c6ddb9b68ba4b65a188c043c7fde2.png

onShareTimeline设置的标题和图片起作用了!

84f475cfd215cc78af4ef2dae3ef5eb2.png

分享出去了!测试嘛为了不惊动朋友圈,设置为私密啦呵呵

f49ffcf0cdbefe2e54e225a95b4f9c2e.png

这是点击分享内容的单页,这就是神秘单页模式!没有登录信息哦,被禁用了。

c5029052b92c9853a6b4cb23e7ab76f7.png

你不信?!点一下“获取头像昵称”按钮试试,完全被禁用。

通过上面这组截图,大概的把小程序分享朋友圈功能演示了一下,更多的应用还需要结合产品的自身业务逻辑来合理使用。尽早做准备吧,各大厂商和平台已经纷纷宣布接入了小程序分享朋友圈的能力,下一个是不是你的应用呢!?

感谢您的耐心阅读,欢迎技术爱好者交流探讨。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/381509.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

色彩的搭配

色彩的搭配是一门艺术,灵活运用它能让你的主页更具亲和力。当然这篇文章的内容还只限于理论,要想真的制作出漂亮的网页则需要灵活运用加上自己的创意才行。如果你有什么收获的话,可别忘了介绍给广大读者啊。 色彩的含义   色彩本身…

[读书笔记][golang]《go语言-云动力》

花了一些时间,读了樊剑虹的《go语言-云动力》,就这本书的整体情况来讲,还是值得读一读的,书中讲了一些另辟蹊径的东西,这可能是其他go语言书中不曾有的东西,但是就专业性来讲,是不值得推荐读的&…

mixin network_【译文】Mixin——以最高的安全性满足所有区块链资产的交易需求

一个免费的闪电般快速的数字资产端对端交易网络。01.概况Mixin 由一个理论上永久的内核、许多动态域和不同的多用途域扩展组成,以构成扩展的星形拓扑结构。Mixin Network 已经支持 BTC,BCH,ETH,EOS,ETC,SC&…

python脚本编程实例_C程序调用Python脚本的例子

下面我们一起来看看关于C程序调用Python脚本的例子,如果你对此有兴趣的希望此教程对各位同学会有所帮助。代码如下复制代码#include int main(){PyObject * g_pModule NULL;Py_Initialize(); //使用python之前,要调用Py_Initialize();这个函数进行初始化…

[golang]nil slice和empty slice的区别

前言 在开发的时候,会遇到对于nil slice和empty slice的问题,往往在声明了slice之后,在使用的时候却出现了问题。 问题 以下是错误的用法,会报数组越界的错误,因为只是声明了slice,却没有给实例化的对象&am…

socket通信需要网线连接吗_socket网络编程基础知识篇

网络通信是一种进程间通信(IPC,Inter-ProcessCommunication),要求位于不同网络节点不同进程的通信双方必须遵循统一的通信协议方可实现。基于套接字(Socket)通信是应用在不同节点上的进程间通信的典型办法。1、基本原理1.1、 Socket API基本概念SocketAPI是TCP/IP网…

python柱形图代码_Python数据可视化:基于matplotlib绘制「条形图」

简介 条形图 (bar chart)是用宽度相同条形的高度或长短来表示数据多少的图形,可以横置或纵置。纵置时的条形图也称为 柱形图 (column chart)。 绘制条形图 1 import matplotlib.pyplot as plot 2 3 data [5., 25., 50…

Dreamweaver cs3快捷键大全

新建文档        CtrlN 打开一个 HTML文件   CtrlO或者将文件从[文件管理器]或[站点]窗口拖动到[文档]窗口中 在框架中打开       CtrlShiftO 关闭           CtrlW 保存           CtrlS 另存为         CtrlShiftS 检查链接   …

[JS][前端]修改文件input为button样式

问题描述 在开发的时候&#xff0c;遇到了需要提交表单文件的需求&#xff0c;但是原生<input>标签特别不好看&#xff0c;而且还有点击提交文件的提示&#xff0c;这样很影响美观&#xff0c;于是便想着更改<input>为<button>按钮。 解决方案 建立一个butto…

源码 连接mysql_MySql轻松入门系列————第一站 从源码角度轻松认识mysql整体框架图...

一&#xff1a;背景 1. 讲故事 最近看各大技术社区&#xff0c;不管是知乎&#xff0c;掘金&#xff0c;博客园&#xff0c;csdn基本上看不到有小伙伴分享sqlserver类的文章&#xff0c;看样子这些年sqlserver没落了&#xff0c;已经后继无人了&#xff0c;再写sqlserver是不可…

ThinkPHP5.1中使用Redis来缓存

问题 在thinkphp5.1项目中需要引入Redis&#xff0c;安装redis后在tp5.1写入相关的操作代码后却一直报错&#xff0c;可能出现的问题如下&#xff1a; 1. 安装不正确&#xff0c;即redis没正常运行 2. 没有添加php_redis驱动扩展 3. php.ini修改位置不正确 4. tp5.1中配置代…

python网页爬虫例子_Python网络爬虫 - 一个简单的爬虫例子

下面我们创建一个真正的爬虫例子 爬取我的博客园个人主页首页的推荐文章列表和地址 scrape_home_articles.py from urllib.request importurlopenfrom bs4 importBeautifulSoupimportre html urlopen("http://www.cnblogs.com/davidgu") bsObj BeautifulSoup(html, &…

asp.net mvc使用的心得和问题的解决方法(陆续更新ing)

1、在mvc下webform的分页控件不能用&#xff0c;只好自己山寨一个轻便的。 1publicclassPageHelp2{ 3 /**//// <summary> 4 /// 总页数 5 /// </summary> 6 public int TotalPageNum { get; set; } 7 /**//// <summary…

[C++][线程安全]单例模式下双检查锁和线程

问题 在设计模式中&#xff0c;有一个很经典的模式-单例模式&#xff0c;它可能是实现上最简单的模式&#xff0c;在代码中也经常使用&#xff0c;在单线程下&#xff0c;毫无疑问延迟化加载是比较常用的&#xff0c;但是在多线程条件下&#xff0c;单例模式的延迟加载可能就会…

java的ZipOutputStream压缩文件的两个问题(乱码和每次zip后文件md5变化)

java的ZipOutputStream压缩文件的两个问题&#xff08;乱码和每次zip后文件md5变化&#xff09; 1、乱码问题可以使用org.apache.tools.zip 2、md5每次都变化只需要设置entry.setTime(1) posted on 2008-11-20 15:49 夜隼 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cn…

python少儿编程课件ppt_Python课程第五期

{getUnitName} 免费 {getTaskName} 剩余观看时长&#xff1a;{watchLimitRemaining} 回放 {activityStartTimeStr} 正在直播中 直播结束 {activityLength} 免费 {getTaskName} 敬请期待 { "id": "1680", "isDefault": "1", "lear…

h5 一镜到底_这些一镜到底的H5还能怎么玩?

前文《单个公众号收入过亿&#xff0c;条漫为什么成为2019风口》提到&#xff0c;加入插画元素的条漫和ps拼接的长图文正处在2019年风口&#xff0c;这种现象也适合描述H5。以往扁平化的H5内容新颖&#xff0c;但视觉上缺乏大幅度的起伏。想要让H5看起来更有律动&#xff0c;就…

visio生成数据表图

http://blog.163.com/zgkingdom126/blog/static/2273473200892714445447/转载于:https://www.cnblogs.com/lishenglyx/archive/2008/11/24/1339746.html

打开端口_打印机ip及端口设置

越洋帮路由网原创&#xff1a;文章是关于"打印机ip及端口设置"的相关知识分享&#xff0c;希望可以帮到大家。 - 素材来源网络 编辑:小易。随着科学技术的发展&#xff0c;各种技术成果也进入到千家万户&#xff0c;近日&#xff0c;有人咨询怎样设置和修改打印机ip及…

博客搬迁声明

博客搬迁 回过头&#xff0c;在CSDN写博客已经好几年了&#xff0c;当初写博客是为了总结自己的ACM解题思路&#xff0c;开始觉得浪费时间&#xff0c;可是写到了现在&#xff0c;慢慢发现自己爱上了写博客这种爱好&#xff0c;反过来看之前自己的想法的时候&#xff0c;会惊叹…