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


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 相关文章推荐
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
js中小数转换整数的方法
Jan 26 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 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
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
PHP clearstatcache()函数详解
2010/03/02 PHP
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
详解vue高级特性
2020/06/09 Javascript
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
查看Django和flask版本的方法
2018/05/14 Python
Python3多线程操作简单示例
2018/05/22 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
几个SQL的面试题
2014/03/08 面试题
职称自我鉴定
2013/10/15 职场文书
个人思想理论学习的自我鉴定
2013/11/30 职场文书
医院总经理岗位职责
2014/02/04 职场文书
主管会计岗位责任制
2014/02/10 职场文书
发展部经理职责规定
2014/02/22 职场文书
党员政治学习材料
2014/05/14 职场文书
护理专业自荐书
2014/06/04 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书