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


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 相关文章推荐
Javascript this指针
Jul 30 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 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 date与gmdate的获取日期的区别
2010/02/08 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
简单实现php上传文件功能
2017/09/21 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
python实现Decorator模式实例代码
2018/02/09 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
python3 map函数和filter函数详解
2019/08/26 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
Python如何对XML 解析
2020/06/28 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
小学新教师培训方案
2014/02/03 职场文书
医学生个人求职信范文
2014/02/07 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
班子四风对照检查材料
2014/08/21 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书