uniapp通过onHide,onShow监听小程序页面隐藏,实现点击小程序右上角按钮退出,再次进入小程序时,按需进入对应页面

26 阅读2分钟

需求:1、小程序实现分享功能,但分享显示的是公众号中某个h5页且公众号有登录(相当于分享要打开另一个公众号的内容)。2、在分享页退出微信(小程序从前台进入后台),在小程序未销毁前,再打开微信时显示分享页;在分享页退出小程序,在小程序未销毁前,在非分享页(如最近使用的小程序入口)再次进入小程序,显示首页。

分析:1、小程序没有方法直接跳转到公众号某个页面(非文章类) 2、显然分享页要和小程序功能分隔开(各自有各自的登录)

实现:用webview加载h5页,且隐藏小程序返回主页按钮(这样分享进来后就不会再回去小程序其他页面)

//html  ui插件-uView
 <view>
    <view v-if="isShow">
      <web-view :src="src" />
    </view>
    <view v-else>
      <u-loading-page
        :loading="!isShow"
        :loading-text="loadingText"
        icon-size="40"
      />
    </view>
//js
 export default {
    data() {
      return {
        src: null,
        isShow: false,
        loadingText: '',//页面加载txt,默认‘加载中...’
      };
    },
    onLoad(args) {
      this.src = decodeURIComponent(args.url);
      wx.hideHomeButton();//隐藏返回主页按钮
    },
    /**
       * 1007:单人聊天会话中的小程序消息卡片
       * 1008:群聊会话中的小程序消息卡片
       * 1096:聊天记录
       * 1044:带 shareTicket 的小程序消息卡片
       * get_scene小程序进入场景值
       * u-loading-page组件模拟了类小程序重启动画,使用户在非分享卡片无感进入
     */
    //尝试一:放弃
    //原因:直接在分享页面退出微信(小程序会从前台进入后台),在小程序没销毁前打开微信,执行了relaunch事件,显示的是首页。按理应该还是显示分享页。
    onHide(){
       this.isShow = false;
       uni.reLaunch({ url: '/pages/index/index' });
    },
    //尝试二:放弃
    //原因:由于第一种情况,这次加入了小程序场景值;问题是:在分享页面退出小程序后,没有执行onHide中的relaunch事件,导致通过非分享卡片进入时还是在分享页。
    onHide(){
      let sceneList = [1007, 1008, 1096, 1044];
      if (sceneList.includes(this.get_scene)) {
        this.isShow = true;
      }else{
         this.isShow = false;
         uni.reLaunch({ url: '/pages/index/index' });
      }
    },
    //尝试二:是个方法
    //如果从分享卡片退出,在小程序未销毁前,再次从非分享卡片进入,导航栏还是显示退出前的title,用uni.setNavigationBarTitle()重置。
    onShow() {
      let sceneList = [1007, 1008, 1096, 1044];
      if (sceneList.includes(this.get_scene)) {
        this.isShow = true;
        return;
      }
      this.isShow = false;
      uni.setNavigationBarTitle({
        title: '小程序名',
      });
      uni.reLaunch({ url: '/pages/index/index' });
    },
  };