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


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正则表达式来格式化XML内容
Jul 04 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
原生JS 购物车及购物页面的cookie使用方法
Aug 21 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
javascript实现滚轮轮播图片
Dec 13 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 Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
JQuery中each()的使用方法说明
2010/08/19 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
js随机生成一个验证码
2017/06/01 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
详解flask表单提交的两种方式
2018/07/21 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
python实现电子产品商店
2019/02/26 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
奥巴马演讲稿
2014/01/08 职场文书
文化宣传方案
2014/03/13 职场文书
二年级学生评语大全
2014/04/23 职场文书
留学生求职信
2014/06/03 职场文书
建设工地安全标语
2014/06/07 职场文书
村委会贫困证明范本
2014/09/17 职场文书
2015新年寄语大全
2014/12/08 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
2015年端午节活动方案
2015/05/05 职场文书
中学社团活动总结
2015/05/07 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
使用CSS设置滚动条样式
2022/01/18 HTML / CSS