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


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实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
vuex实现购物车的增加减少移除
Jun 28 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 Javascript
利用node.js开发cli的完整步骤
Dec 29 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
Python控制Firefox方法总结
2019/06/03 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
岗位职责定义及内容
2013/11/08 职场文书
房屋租赁协议书
2014/04/10 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript