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


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中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 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中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
简单的分页代码js实现
2016/05/17 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
小程序实现多列选择器
2019/02/15 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
安装python及pycharm的教程图解
2019/10/10 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
爱之链教学反思
2014/04/30 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
个人合伙协议书范本
2014/10/14 职场文书
出纳试用期自我评价
2015/03/10 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
培训心得体会怎么写
2016/01/25 职场文书
争做文明公民倡议书
2019/06/24 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
linux目录管理方法介绍
2022/06/01 Servers