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


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实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
Javascript中Eval函数的使用
Mar 23 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
基于编写jQuery的无缝滚动插件
Aug 02 Javascript
jQuery链使用指南
Jan 20 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 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 pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
重定向实现代码
2006/11/20 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
Python素数检测实例分析
2015/06/15 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
大学生家政服务项目创业计划书
2014/01/30 职场文书
支部鉴定材料
2014/06/02 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
护士求职自荐信范文
2015/03/04 职场文书
部门2015年度工作总结
2015/04/29 职场文书
2015入党个人自传范文
2015/06/26 职场文书
小学思品教学反思
2016/02/20 职场文书
小学运动会开幕词
2016/03/04 职场文书