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


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 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
Angular2库初探
Mar 01 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
JS简单表单验证功能完整示例
Jan 26 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 file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
为python设置socket代理的方法
2015/01/14 Python
Cpy和Python的效率对比
2015/03/20 Python
Python模块WSGI使用详解
2018/02/02 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
python让列表倒序输出的实例
2018/06/25 Python
对Python w和w+权限的区别详解
2019/01/23 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
python3访问字典里的值实例方法
2020/11/18 Python
法制宣传实施方案
2014/03/13 职场文书
2014年安全员工作总结
2014/11/13 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
应聘教师自荐信
2015/03/26 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫