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


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实现视频轮播在pc端与移动端均可
Sep 29 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
jquery实现上传图片功能
Jun 29 jQuery
Element Breadcrumb 面包屑的使用方法
Jul 26 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
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程序的国际化实现方法(利用gettext)
2011/08/14 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
javascript 浏览器检测代码精简版
2010/03/04 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
js实现简单的秒表
2020/01/16 Javascript
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
简单了解Django模板的使用
2017/12/20 Python
Python基于property实现类的特性操作示例
2018/06/15 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
室内设计专业学生的自我评价分享
2013/11/27 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
经典洗发水广告词
2014/03/13 职场文书
理发店策划方案
2014/06/05 职场文书
投标授权委托书范文
2014/08/02 职场文书
2014年材料员工作总结
2014/11/19 职场文书
出纳岗位职责
2015/01/31 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers