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


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 数值型和字符串型之间的转换
Jul 25 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 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实现网页端验证码功能
2017/07/11 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
Python的另外几种语言实现
2015/01/29 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
详解python 爬取12306验证码
2019/05/10 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
python3实现简单飞机大战
2020/11/29 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
《中华少年》教学反思
2014/02/15 职场文书
红头文件任命书范本
2014/06/05 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
学前班学生评语
2014/12/29 职场文书
雨花台导游词
2015/02/06 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
Spring实现内置监听器
2021/07/09 Java/Android
vue修饰符.capture和.self的区别
2022/04/22 Vue.js
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript