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


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新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
Javascript call及apply应用场景及实例
Aug 26 Javascript
javascript canvas实现雨滴效果
Jun 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
实例讲解php实现多线程
2019/01/27 PHP
javascript window对象属性整理
2009/10/24 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
js module大战
2019/04/19 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
Python中__new__与__init__方法的区别详解
2015/05/04 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python 多维List创建的问题小结
2019/01/18 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
任意存:BOXFUL
2018/05/21 全球购物
酒店拾金不昧表扬信
2014/01/18 职场文书
税务会计岗位职责
2014/02/18 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
优质护理心得体会
2016/01/22 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android