• 技术文章 >web前端 >js教程

    微信小程序分享页面后跳转回首页

    php中世界最好的语言php中世界最好的语言2018-05-03 09:53:36原创5333
    这次给大家带来微信小程序分享页面后跳转回首页,微信小程序分享页面后跳转回首页的注意事项有哪些,下面就是实战案例,一起来看一下。

    今天我分享另外一种方法。请看下面.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)  
      }
      } 
    })

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    如何让数据里html字段转换为HTML标签

    前端如何向后台传送Json数据

    以上就是微信小程序分享页面后跳转回首页的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:小程序 回首页 页面
    上一篇:ElTableColumn添加搜索归纳功能 下一篇:js中el表达式使用步奏详解
    20期PHP线上班

    相关文章推荐

    精选22门好课,价值3725元,开通VIP免费学习!• 一文了解Node中的文件模块和核心模块• JavaScript怎么处理树状结构数据的增删改查• 浅显易懂的JavaScript引入• 聊聊Angular Route中怎么提前获取数据• node.js gm是什么
    1/1

    PHP中文网