MENU

小程序分享页面打开回到首页处理方式

August 13, 2019 • Read: 378 • 小程序

小程序分享页面打开回首页

分享页面打开回首页
网络上有很多关于typecho小程序版本,但是都有一个问题,页面分享给好友,好友打开后,看了文章却无法返回首页,怎么办呢,用以下方式解决,新增一个头部替换原生态的。
1.在小程序app.json配置加入代码:

"navigationStyle":"custom"

2.在app.js里加入:

//app.js
App({
  onLaunch: function (options) {
    // 判断是否由分享进入小程序
    if (options.scene == 1007 || options.scene == 1008) {
      this.globalData.share = true
    } else {
      this.globalData.share = false
    };

    wx.getSystemInfo({
      success: (res) => {
        this.globalData.height = res.statusBarHeight
      }
    })
  },

  globalData: {
    share: false,  // 分享默认为false
    height: 0,
  }
  
})

3.在app.wxss里加入:

/**app.wxss**/
pages {
  position: relative;
  z-index: 9999998;
  background: #fff;
}

4.下载以下文件至小程序并解压
文件下载

点击下载

5.使用方式:在微信小程序页面文件夹index.wxml文件加入:

<nav-bar navbar-data='{{nvabarData}}'></nav-bar>

index.json文件中(声明使用的组件,和组件的地址)加入:

{
  "usingComponents": {
    "nav-bar": "/towxml/navbar/index"
  }
}

index.js文件加入:

//index.js
const app = getApp()

Page({
  data: {
  // 组件所需的参数
    nvabarData: {
      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
      title: '猫贝SEO', //导航栏 中间的标题
    },

    // 此页面 页面内容距最顶部的距离
    height: app.globalData.height * 2 + 20 ,   
  },
  onLoad() {
    console.log(this.data.height)
  }
})

index.wxss文件加入:

/**index.wxss**/
.home-page {
  height: 160rpx;
  width: 100%;
  border: 1rpx solid red;
  font-size: 60rpx;
}

其他页面均可按此方式加入。
以上,感谢支持!

Last Modified: November 20, 2019
Archives QR Code Tip
QR Code for this page
Tipping QR Code