如何简单地实现小程序分享页拥有返回首页按钮
最近对小程序有一定的了解,也对小程序赞赏有加,体验很好,但是分享小程序的单个页面容易有一个问题,回到首页的交互复杂,不存在后退按钮,先来看看有实现这个流程的小程序如何做这个事情--快住--全广州最走心的免费帮找租房小团队(感谢帮我找到合适的住所)
先看效果
仔细看的话会发现一般情况下,小程序的分享页没有跳转的一个流程,而快住这里却有一个先进入首页的流程,再跳转进入对应的分享页面,这样进入分享页之后左上角就会有回到主页的返回按钮,相比于让用户熟悉小程序的回首页交互,这样更为合理.
目前我发现市面上很多小程序都没有采用这样分享页面的做法,快住还是比较有想法的,贴个二维码,看官可以自行去体会.
如何实现
参照网上的资料以及官方的文档,我还是研究了不长不短的时间,这也是微信小程序的官方文档不全导致的(或者是我不够细心)
先看一下微信小程序中关于分享的api
微信官方api文档转发
我们可以通过重写onShareAppMessage 函数来实现一些定制化,比如分享出去的卡片标题等等,其中最重要的就是我们可以定义用户点击卡片进入的页面路径. 贴代码:
onShareAppMessage: function (res) {if (res.from === 'button') {// 来自页面内转发按钮console.log(res.target)}return {title: '自定义转发标题', path: '/pages/xxxx/xxx',//这里填写首页的地址,一般为/pages/xxxx/xxxsuccess: function(res) {// 转发成功},fail: function(res) {// 转发失败}}}
path为我们可以设置的任意页面,在此我们需要填入首页的地址,这样用户点击分享的卡片即进入首页.
实现首页跳转进入具体的详情页
这里涉及到两个问题,第一首页如何判断什么时候跳转,第二首页如何知晓该跳转到哪一个详情页.
这是微信官方文档没有告诉我们的事情,即页面传值.
页面传值
贴代码:
onShareAppMessage: function (res) {if (res.from === 'button') {// 来自页面内转发按钮console.log(res.target)}return {title: '自定义转发标题', path: '/pages/xxxx/xxx?pageId=123',//这里在首页的地址后面添加我们需要传值的标识位pageId以及值123(pageId 这个名字你们可以自己随便乱取 如同一个变量名)success: function(res) {// 转发成功},fail: function(res) {// 转发失败}}}
一段代码实现了将值123带给了首页,同时首页需要通过这个值来判断进入首页的来源是否为用户点击了分享的卡片.
首页获取pageId的值
在首页的js文件中,找到onLoad函数 贴代码:
onLoad: function (options) {if (options. pageId) {//这个pageId的值存在则证明首页的开启来源于用户点击来首页,同时可以通过获取到的pageId的值跳转导航到对应的详情页wx.navigateTo({url: '../pageDetail/pageDetail?pageId=' + options.pageId,})}}
网上还有别的做法,比如在详情页中添加一个回首页的按钮,个人认为这种跳转的方式一般,然而后退进入首页的交互很自然,唯一的弊端,会有一个从首页跳转到详情页的小瞬间,但是小程序的流行很多都依赖于分享卡片,用户点击了分享卡片瞅了一眼首页也未尝是一件坏事.
作者:ChrisPz
链接:如何简单地实现小程序分享页拥有返回首页按钮-实战教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
如何简单地实现小程序分享页拥有返回首页按钮相关推荐
- 微信小程序如何隐藏左上角返回首页按钮?
小程序如何隐藏左上角返回首页按钮? 两种方法 方法一: 在页面的onShow或onLoad或onHide函数里调用wx.hideHomeButton() onLoad(){wx.hideHomeBut ...
- 微信小程序 某个页面直接返回首页(微信小程序回退到首页)
微信小程序 某个页面直接返回首页(微信小程序回退到首页) 打开小程序后,到三级页面后点击左上角的返回按钮,能够直接返回到首页 正常 A -> B -> C 都是通过 wx.navigate ...
- 小程序分享到朋友圈_微信内测开放小程序分享到朋友圈功能
点击上方 ↑ 指尖渭南 关注我们好资讯抢鲜看 向上滑动阅读全文↑↑↑ 一大早在各科技公众号有看到小程序支持直接分享到朋友圈,这么好的功能,忍不住要实践下. 根据官方文档走起,文档地址:https:// ...
- 微信小程序分享注意点
模拟机如下图 使用呢,文档上都有如下 这个就是小程序分享 如果想点击按钮分享也行,需要设置一下属性如下 open-type="share" 文档内容 onShareAppMessa ...
- 分享一个微信小程序编辑页面的WXML模板
分享一个微信小程序编辑页面的WXML模板 最近在进行微信小程序开发的时候经常会碰到编辑页面的搭建,大致格式如图所示: 顶部:返回按钮和确认按钮,在中间还可以自行加上一些别的元素. 中间部分:编辑的标题 ...
- c语言撩妹小程序,撩妹简单的web小程序!分享给大家~~~~~~
撩妹简单的web小程序!分享给大家~~~~~~ 发布时间:2018-07-30 18:57, 浏览次数:667 , 标签: web content="width=device-width,i ...
- 微信小程序开发——小程序分享转发
关于小程序的转发: 最简单的就是点击小程序右上角菜单"转发"按钮直接分享,不过这种分享有点不太友好,实用性也不强. 当然,你可以自定义分享内容,包括标题,简介,图片及分享的小程序页 ...
- 【小程序】766- 一文看懂小程序分享到朋友圈
点击上方 关注我们 作者简介 张所勇 转转平台运营中心前端负责人,在前端领域有深入研究,包括:sketch一键切图.前端数据模型化,小程序基础能力建设等多个方面,10年工作经验中,做了2年工程师,5年 ...
- 记录微信小程序web-view页面分享出去之后没有返回首页按钮,微信小程序WebView页面分享出去后没有返回首页按钮,全局使用的自定义导航【解决办法】
描述: 微信小程序使用的是全局自定义导航,通过首页 banner 跳转到一个 web-view 页面,展示官网. web-view 页面要分享出去,通过分享出去的卡片进入,因为通过分享的卡片进入的画, ...
- 一文看懂:如何将小程序分享到朋友圈[建议收藏]
背景 近日小程序支持分享到朋友圈的消息可以说是小程序开发圈的一个重磅炸弹,转转小程序团队也在收到微信邀请后第一时间进行了调研,并对转转小程序迅速进行了能力支持,本文将全面解读微信此项能力. 概述 此项 ...
最新文章
- 广告出价--如何使用PID控制广告投放成本
- 神州数码DCWS学习日志
- Luogu P2068 统计和
- SQL Server 远程连接出错~~~无法访问服务器
- 春晚魔术,醉翁之意不在酒
- 一个Log系统,客户端运行起来,排除那些可以输出(编辑器文件)
- java判断一个数是否为素数的程序_java如何判断一个数是否为素数
- 微博奥运营销策略复盘,探索双十一微博品牌营销新手法!!
- 各种蜂蜜功效大全(收藏)
- 爬虫--Item Pipeline 介绍(21)
- 开发微信小程序的必备技能图谱
- 更改ubuntu默认文件管理器为deepin
- 月份和星期的英语(请不要再弄错了)
- 今天我抓了个 HTTPS 的包
- Python处理Windows记事本utf8编码文件要注意的坑
- JSP运行原理 九大内置对象 四大作用域
- python有中文版吗-python有中文版
- this 引用逸出
- 取消微信城市服务器,微信时代下,10年社交巨头倒下,2月19日关闭服务器,是真是假?...
- 者锐(zr)贴吧综合营销发帖机