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


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 中 document.createEvent的用法
Aug 29 Javascript
详解js闭包
Sep 02 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
angularJS中router的使用指南
Feb 09 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
countUp.js实现数字滚动效果
Oct 18 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数组及条件,循环语句学习
2012/11/11 PHP
php学习笔记之面向对象
2014/11/08 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
Vue实现简单购物车功能
2020/12/13 Vue.js
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
使用Flask集成bootstrap的方法
2018/07/24 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
大学毕业感言
2014/01/10 职场文书
应届生自荐信范文
2014/02/21 职场文书
水利水电专业自荐信
2014/07/08 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
写给领导的感谢信
2015/01/22 职场文书
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP