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


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 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
对vuex中getters计算过滤操作详解
Nov 06 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 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 数据库树的遍历方法
2009/02/06 PHP
解析PHP提交后跳转
2013/06/23 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
学习React中ref的两个demo示例
2018/08/14 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
Python3字符串学习教程
2015/08/20 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
python过滤中英文标点符号的实例代码
2019/07/15 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
医院实习介绍信
2014/01/12 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
公益广告宣传方案
2014/02/28 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
保护黄河倡议书
2014/05/16 职场文书
法制宣传标语集锦
2014/06/25 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
如何利用pygame实现打飞机小游戏
2021/05/30 Python
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL