微信小程序之分享页面如何返回首页的示例


Posted in Javascript onMarch 28, 2018

做小程序开发发现,页面分享出去后,用户通过分享进去的页面很难找到返首页的情况。(微信官方操作是点击右上角三个点,在手机下方显示返回首页)。民间很多方案是自己在页面加个悬浮Home标注。

今天我分享另外一种方法。请看下面.gif;

微信小程序之分享页面如何返回首页的示例

有没有发现,左上角有返回按钮了。原理简单,在你要分享的页面,分享配置时配置你的首页,并带上对应的参数,在首页 onLoad方法中可以获取。代码如下:

<!--index.wxml-->
<view class="container">
<text>我是首页</text>
 <button bindtap='goLogs'>go logsPage</button>
</view>

const app = getApp()

Page({
 data: {
  motto: 'Hello World',
  userInfo: {},
  hasUserInfo: false,
  canIUse: wx.canIUse('button.open-type.getUserInfo')
 },
 //事件处理函数
 goLogs: function() {
  wx.navigateTo({
   url: '/pages/logs/logs'
  })
 },
 onLoad: function (options) {
  console.log(options)
  if (options.share_query){
   wx.showLoading({
    title: '我是从分享页面进入的',
   })

   setTimeout(function () {
    wx.hideLoading()
    wx.navigateTo({
     url: '/pages/logs/logs',
    })
   }, 2000)

  
  }

  }
 
})
<!--logs.wxml-->
<view class="container log-list">
 <block wx:for="{{logs}}" wx:for-item="log">
  <text class="log-item">{{index + 1}}. {{log}}</text>
 </block>
</view>
const app = getApp()

Page({
 data: {
  motto: 'Hello World',
  userInfo: {},
  hasUserInfo: false,
  canIUse: wx.canIUse('button.open-type.getUserInfo')
 },
 //事件处理函数
 goLogs: function() {
  wx.navigateTo({
   url: '/pages/logs/logs'
  })
 },
 onLoad: function (options) {
  console.log(options)
  //判断是否分享进入
  if (options.share_query){
   wx.showLoading({
    title: '我是从分享页面进入的',
   })

   setTimeout(function () {
    wx.hideLoading()
    wx.navigateTo({
     url: '/pages/logs/logs',
    })
   }, 2000)  
  }
  } 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
Vue实现多标签选择器
Nov 28 Javascript
js中el表达式的使用和非空判断方法
Mar 28 #Javascript
JS实现左边列表移到到右边列表功能
Mar 28 #Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 #Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 #jQuery
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 #Javascript
浅谈js获取ModelAndView值的问题
Mar 28 #Javascript
vue页面加载闪烁问题的解决方法
Mar 28 #Javascript
You might like
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
php实现数据库的增删改查
2017/02/26 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
将json对象转换为字符串的方法
2014/02/20 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
基于python requests库中的代理实例讲解
2018/05/07 Python
python制作抖音代码舞
2019/04/07 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
如何利用python生成MD5并去重
2020/12/07 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
电话客服工作职责
2014/07/27 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
《角的度量》教学反思
2016/02/18 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python
Redis过期数据是否会被立马删除
2022/07/23 Redis