微信小程序,分享页面进入,返回首页处理办法(附源码)

微信小程序分享的页面,点击进入的时候,是没有 tab 栏的,如果要回到首页,可以自己添加一个悬浮的返回首页按钮,这样,就能返回首页了

页面主要代码
js

Page({

  /**
   * 页面的初始数据: isshare = 0,表示不是从分享进入, isshare = 1 表示是从分享进入
   */
  data: {
    isshare: 0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
    //可以在页面 onLoad 中去获取页面 url 中的参数( 下面 onShareAppMessage 函数中配置)
    if (options.isshare == 1) {
      console.log('是分享进入');
      this.setData({
        'isshare': options.isshare
      })
    }
    
  },

  /**
   * 用户点击右上角分享 (path 中配置了参数 isshare = 1,用来 onLoad 中判断是否用户从分享出去的页面点击进入)
   */
  onShareAppMessage: function () {
    return {
      title: '配置分享显示的标题',
      path: '/pages/home/project-detail/project-detail?isshare=1',
      success: function (res) {
        // 转发成功
      },
      fail: function (res) {
        // 转发失败
      }
    }
  },
  
/**
  * 回到首页(分享的时候)
  */
  backHome: function () {
    wx.reLaunch({
      url: '/pages/home/home-index/home-index'
    })
  }
})

wxml

<view class='container'>
  页面主要内容
</view>

<!-- 回到首页(分享的时候显示) -->
<image wx:if="{{isshare}}" bindtap='backHome' class='d-back-home' src='http://cdn.xcx.pemarket.com.cn/icon-Return%20to%20the%20home%20page.png' lazy-load></image>

wxss

/* 回到首页,固定定位,悬浮 */
.d-back-home {
  position: fixed;
  width: 96rpx;
  height: 96rpx;
  right: 30rpx;
  bottom: 166rpx;
  z-index: 10000;
}

猜你喜欢

转载自blog.csdn.net/qq_42363090/article/details/93206750
今日推荐