分享
  • 收藏
  • 举报
    X
    关于小程序文章内容页面如何添加返回按钮
    3505
    13

    今年年初的版本,我锁定版本了,具体版本号不清楚,如果你也遇到了使用后台的小程序打包,进入文章页面没有返回按钮,仅有返回首页,可以继续往下查看


    首先要明确的是,打包程序使用的方法是iframe,在微信小程序中是

    <web-view src="{{url}}"></web-view>

    这个方法是无法拥有小程序自带的返回按钮的

    原因是你的无论怎么点击,小程序内部的网址目录是不会进行更改

    因此不会拥有返回按钮

    但是你会拥有一个小房子,这是我们打包的时候自带的,但是谁也不希望你的小程序中,用户点了三四层,而不能返回上一层只能返回主页

    查阅官方文档可知

    我们需要在app.json中添加一个

    "navigationStyle": "custom",

    进行自定义头部


    理论上是没错的 但是!

    是的 他居然塔喵的无效


    所以还是需要自己研究  但是你也知道了 接口开放自定义返回你用不了  iframe还没有返回

    那么如何添加返回按钮?


    下面说一下我的操作步骤:

    (1)第一步:明确首页;

          首页就是那个过图的动画页面

    (2)第二部:明确实现逻辑:

            从一个iframe 跳到 另外一个iframe后 你会发现 返回键会出现

    (3)第三部:实现

            首先:在小程序 pages/wap 目录下复制一个一模一样的iframe冥冥为iframeshow

            

            然后在iframe文件下打开index.js,找到onshow方法,在此方法内添加

    onShow: function () {
    wx.hideHomeButton();
    },

       这样这个页面就没有了返回首页(小房子) 谁也不想点小房子看一遍动画

    下一步要添加这个返回按钮,不然只能左右滑动

    我们明确要从一个iframe跳到另外一个iframe

    那么我们需要进行是否在小程序判断


    打开你的首页代码

    (A),引用js

    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js";></script>

    (B),在首页或者你需要的页面更改A标签

    <a href="javascript:void(0);" data-url="{$rs.url}" id='id{$rs.id}'>

    (C),在后面继续添加

    <script>
       $("#id{$rs.id}").click(function(){
        var xiaochengxu = navigator.userAgent.toLowerCase();
        if(xiaochengxu.match(/MicroMessenger/i)=="micromessenger") {
            wx.miniProgram.getEnv((res)=>{
              if (res.miniprogram) {
    
                  wx.miniProgram.navigateTo({
                        url:'/pages/wap/iframeshow/index?url=你的域名'+'<?php echo $rs["url"];?>'
                  });
                  return false;
              }
            })
        }else{
            window.location = $(this).data("url");
        }
         
    }); 
    </script>

    (D),试例图

    如此写之后你就会发现 这个返回按钮出现了


    ps:

    1、如果描述不清可以继续联系 不过我感觉差不多了 Q 361553564

    2、目前暂时没想到比这个还简单的方法

    3、实现逻辑是 从一个iframe跳到另外一个iframe 从而调出微信自带的返回按钮

    4、如果您感觉有用请点赞,回复,收藏

    9
    赏礼
    赏钱
    收藏
    点击回复
        全部留言
    • 13
    • 袁冬 普通粉丝 消费:160.85元 2020-12-19 08:55 08:55
      华为
      6楼
      学习了
    0 赏钱 赏礼回复
    • admin 超级管理员 消费:3.03元 2020-04-01 22:31 22:316楼
      很详细.大家可以试试
    0 赏钱 赏礼回复
    • 午夜梦寒 实战运营者 消费:1817.13元 2020-03-24 15:07 15:076楼
      暂时只能用小白球来解决不能返回的问题了。
      1stFreddy 消费:0元 2020-03-24 15:10
      小白球是什么?
      午夜梦寒 消费:1817.13元 2020-03-24 15:18
      苹果小白球带有回主页、返回等各种功能热键功能,安卓也有类似小白球功能。
      午夜梦寒 消费:1817.13元 2020-03-24 15:19
      就是替代物理返回按键的虚拟图形按键。
      1stFreddy 消费:0元 2020-03-24 17:09
      手机上是可以存在左右滑动回到前一页面的,不是所有手机都有苹果的小白球模式。
      按照我的方法就可以做出返回的效果。
      午夜梦寒 消费:1817.13元 其他手机 2020-03-24 18:20
      改代码的方式不敢用
    0 赏钱 赏礼回复
    • 啡巅 普通粉丝 消费:1381.19元 2020-03-24 14:01 14:016楼
      那么可不可以像其他小程序那样,左上角同时有返回和小房子(主页)按钮的,中间用|分开。
      1stFreddy 消费:0元 2020-03-24 14:25
      那个是自定义头部,
      <cBar id="c-bar" title="{{title}}" showBack="{{true}}" showHome="{{true}}" ></cBar>
      但是如果开启了之后1需要引用文件 2<web-view src="{{url}}" bindmessage="msgHandler"></web-view>则无效
      1stFreddy 消费:0元 2020-03-24 14:27
      这个地方除非你使用单独配置 ,也就是说一个页面写一个page 否则目前按照我的能力 是没有寻找到这一方法
      1stFreddy 消费:0元 2020-03-24 14:29
      如果你需要 ,我可以给你发送文件以及方法
      啡巅 消费:1381.19元 2020-03-24 15:23
      谢谢您 不试了,目前上架太麻烦,一般我3个月活半年上架一次,官方更新一定一定时间且用户反应有什么bug才会更新,稳定才是第一要务。
    0 赏钱 赏礼回复
    更多回复
        你可能感兴趣的主题
    恢复多功能编辑器
  • 3 1
  • 推荐内容
    扫一扫访问手机版
    请选择要切换的马甲:

     
    网页即时交流
    QQ咨询
    咨询热线
    020-28998648