微信开发者工具 返回按钮_隐藏微信公众号下边的返回和前进按钮-微信公众号开发 - CSDN
精华内容
参与话题
  • 微信小程序开发者工具详解

    万次阅读 2018-09-17 10:43:59
    在头像后边有三个按钮: 模拟器,编辑器和调试器:点击来显示或隐藏相应的模块 编译模式:普通编译和自定义编译条件 预览:在真机预览 远程调试:真机的远程调试功能,会通过我们的网络连接对我们手机运行的小...

    这里写图片描述
    个人中心:点击头像显示的是个人中心面板,展示的是小程序版本以及系统版本更新之后的一个推送消息,也方便我们去切换我们的小程序账号
    在头像后边有三个按钮:
    模拟器,编辑器和调试器:点击来显示或隐藏相应的模块
    编译模式:普通编译和自定义编译条件
    预览:在真机预览
    远程调试:真机的远程调试功能,会通过我们的网络连接对我们手机运行的小程序进行一个调试
    切后台:切后台按钮会帮助我们快速的切到不同的场景值,通过这个场景值可以帮助我们去个性化一些我们的功能需求
    清缓存:我们可以清楚我们开发者工具和我们调试设备的一个数据缓存,文件缓存,授权缓存,网络缓存和我们的登录状态
    上传,测试,腾讯云,详情
    上传会帮助我们把本次的小程序代码上传到我们的管理后台,会默认的设置为我们的开发版本
    小程序都有哪些版本?
    这里写图片描述
    预览版本:在手机上预览在我们手机上是一个怎样的表现
    开发版本:通过上传之后把我们的本地代码。上传成一个具有版本号的小程序的应用,那么应用开发者权限的成员可以通过小程序开发助手来看到我们的开发版本
    体验版本:就是我们在小程序管理后台可以直接将我们的开发版本切换成我们的体验版本,具有体验权限的成员就可以看到体验版本
    如果我们要将我们的开发版本上线成一个线上版本的话,我们需要先去提交审核,提交审核之后,我们的小程序就称为了一个审核版本的小程序,那么微信通过我们的审核之后,我们的小程序就正式的发布上线了。

    测试按钮:测试按钮我们可以通过每24小时生成一个测试报告。微信会给我们随机的分配4到8种的机型测试我们的小程序页面的一个首屏加载时间,CPU占比等这些指数
    腾讯云:第三方平台,可以快速的帮助我们构建一个小程序的开发环境和线上环境
    点击详情,会弹出一个详情的面板,可以通过一些项目的设置,还可以看到我们一些域名信息,腾讯云的状态
    项目设置:可以设置调试的一个基础库版本,
    可以设置编译的配置:Es6转ES5等等

    调试模块:
    主要分为七个模块
    这里写图片描述
    console: 打印小程序页面的调试log信息
    sources:会列出微信小程序页面的所有脚本文件
    Network:展示网络请求的状态信息
    Stroge:在小程序里面通过调用wx.setStroge和wx.setStrogeSycc函数设置我们的缓存的时候,在这里可以动态的修改这些缓存数据
    APPData: 是微信小程序页面上真实展示的一个数据,可以在这里动态的修改,来查看我们小程序页面在模拟器上不同设备的一个兼容性的情况
    wxml 页面:展示了微信小程序页面 的各个组件元素以及我们可以通过对这些组件元素。对它进行一个样式属性的修改
    sensor:只要是我们的一个地址位置信息和一个设备旋转角度的一个展示,在这里我们可以动态的去修改我们的地理位置信息来模拟我们小程序在不同地理位置下的一个表现,在设备旋转角度这里,我们可以设置旋转角度的参数来查看它的一个设备的旋转角度,可以看到各个坐标轴的变化

    OK,这就是对开发者工具详解。

    展开全文
  • 在进行小程序开发的过程中,经常遇到的一个问题就是,通过好友分享打开的小程序,去首页的入口太深,导致有部分用户流失,还有对返回按钮返回地址进行特殊化处理,需要返回到指定位置,则可以通过自定义的方式...

    原文地址: www.ctoku.com/post/XqArOn…

    在进行小程序开发的过程中,经常遇到的一个问题就是,通过好友分享打开的小程序,去首页的入口太深,导致有部分用户流失,还有对返回按钮和返回地址进行特殊化处理,需要返回到指定位置,则可以通过自定义的方式进行处理。

    配置:

    通过配置 navigationStyle 对页面或者全局页面进行自定义头部

    思路

    首先我们指定自定义头部肯定是以组件的形式存在的; 我们自定义的同时需要保持右边胶囊位置一致,同时也需要保留页面标题 我们实现的效果如下图所示:

    实现

    首先我们通过

    wx.getMenuButtonBoundingClientRect() 获取右边胶囊的位置 使用wx.getSystemInfo 获取系统信息 这两组数据不是经常改变的所以我们在进入小程序的时候执行放到全局变量里面。

    this.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect()
    wx.getSystemInfo({ // iphonex底部适配
    	success: res => {
    		that.globalData.systeminfo = res
    	}
    })
    复制代码

    根据下图分析

    我们自定义的图标和右边胶囊位置一致 因此我们通过右边胶囊的位置定位左边自定义图标的位置 我们最初获取到的右边胶囊位置

    headerPosi:{
    	bottom: 82
    	height: 32
    	left: 278
    	right: 365
    	top: 50
    	width: 87
    }
    复制代码

    获取到的状态栏高度为statusH = 44

    所以自定义胶囊距离最顶部的高度为 胶囊距离状态栏高度 - 状态栏高度

    customNav.top = headerPosi.top - statusH wxml部分

    <view class="custom_nav" style="height:{{navbarHeight}}px;">
      <view class="custom_nav_box" style="height:{{navbarHeight}}px;">
        <view class="custom_nav_bar" style="top:{{statusBarHeight}}px; height:{{cusnavH}}px;">
          <view class="custom_nav_icon"  wx:if="{{!navbarData.has_search}}" style="height:{{navbarBtn.height - 2}}px; top:{{navbarBtn.top}}px; left:{{navbarBtn.right}}px; border-radius: {{navbarBtn.height / 2}}px">
            <view class="gobank" style="height:{{navbarBtn.height - 10}}px;width:{{navbarBtn.height - 10}}px;"></view>
            <view class="home" style="height:{{navbarBtn.height -10 }}px;width:{{navbarBtn.height - 10}}px;"></view>
          </view>
          <view class="nav_title" wx:if="{{!navbarData.has_search}}" style="height:{{cusnavH}}px; line-height:{{cusnavH}}px;">组件目录</view>
        </view>
      </view>
    </view>
    复制代码

    wxss部分

    .custom_nav {
      width: 100%;
      background: #fff;
    }
    
    .custom_nav_box {
      position: fixed;
      width: 100%;
      background: #fff;
    }
    .custom_nav_bar{
      position: relative;
    }
    .custom_nav_box .nav_title {
      font-size: 34rpx;
      color: #000;
      text-align: center;
      position: absolute;
      max-width: 360rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      font-weight: 600;
    }
    
    .custom_nav_box .custom_nav_icon {
      position: absolute;
      border: .5rpx solid rgba(0, 0, 0, .1);
      border-radius: 50%;
      display: flex;
      padding: 0 10rpx
    }
    .custom_nav_icon .gobank {
      background: url('https://www.easyicon.net/api/resizeApi.php?id=1225467&size=128') no-repeat center center;
      background-size: 60%;
      padding:0 5px;
      margin: 4px 0;
    }
    .custom_nav_icon .home {
      background: url('https://www.easyicon.net/api/resizeApi.php?id=1223065&size=128') no-repeat center center;
      background-size: 60%;
      padding:0 5px;
      margin: 4px 0;
      border-left: 1px solid rgba(0, 0, 0, .1)
    }
    复制代码

    js部分

    const app = getApp();
    Component({
      properties: {
        navbarData: { // navbarData 由父页面传递的数据
          type: Object,
          value: {
            gobank: true,
            gohome: true,
            has_search: false,
          },
          observer: function (newVal, oldVal) { 
          }
        }
      },
      data: {
        haveBack: true, // 是否有返回按钮,true 有 false 没有 若从分享页进入则没有返回按钮
        statusBarHeight: 0, // 状态栏高度
        navbarHeight: 0, // 顶部导航栏高度
        navbarBtn: { // 胶囊位置信息
          height: 0,
          width: 0,
          top: 0,
          bottom: 0,
          right: 0
        },
        cusnavH: 0,
        searchW: 0, //搜索框宽度
      },
      // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()获得胶囊按钮高度
      attached: function () {
        let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度
        let headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息
        console.log(statusBarHeight)
        console.log(headerPosi)
        let btnPosi = { // 胶囊实际位置,坐标信息不是左上角原点
          height: headerPosi.height,
          width: headerPosi.width,
          top: headerPosi.top - statusBarHeight, // 胶囊top - 状态栏高度
          bottom: headerPosi.bottom - headerPosi.height - statusBarHeight, // 胶囊bottom - 胶囊height - 状态栏height (胶囊实际bottom 为距离导航栏底部的长度)
          right: app.globalData.systeminfo.screenWidth - headerPosi.right // 屏幕宽度 - 胶囊right
        }
        let haveBack;
        if (getCurrentPages().length === 1) { // 当只有一个页面时,并且是从分享页进入
          haveBack = false;
        } else {
          haveBack = true;
        }
        var cusnavH = btnPosi.height + btnPosi.top + btnPosi.bottom // 导航高度
        var searchW = app.globalData.systeminfo.screenWidth - headerPosi.width - btnPosi.right * 2 - 30
        console.log(searchW, app.globalData.systeminfo.screenWidth, headerPosi.width)
        this.setData({
          haveBack: haveBack, // 获取是否是通过分享进入的小程序
          statusBarHeight: statusBarHeight,
          navbarHeight: headerPosi.bottom + btnPosi.bottom, // 胶囊bottom + 胶囊实际bottom
          navbarBtn: btnPosi,
          cusnavH: cusnavH,
          searchW: searchW
        })
      },
      methods: {
        _goBack: function () {
          wx.navigateBack({
            delta: 1
          });
        },
        _goHome: function () {
          wx.navigateTo({
            url: '/pages/index/index',
          });
        }
      }
    })
    复制代码
    展开全文
  • 微信开发者工具 如何撤销返回到上一步操作 撤销操作的快捷键 Ctrl + Z 更多快捷键,参考列表 https://developers.weixin.qq.com/miniprogram/dev/devtools/shortcut.html

    用微信开发者工具 如何撤销返回到上一步操作

    撤销操作的快捷键
    Ctrl + Z

    更多快捷键,参考列表
    https://developers.weixin.qq.com/miniprogram/dev/devtools/shortcut.html

    展开全文
  • 微信小程序没有返回按钮

    万次阅读 2020-01-08 13:16:24
    刚接触小程序,发现页面跳转后左上角没有返回按钮,以为要通过函数设置,找文档却没发现,后来发现是跳转方式为“在当前页面打开”就不会有左上角的返回按钮 <view class="btn-area"> <navigator url=...

    刚接触小程序,发现页面跳转后左上角没有返回按钮,以为要通过函数设置,找文档却没发现,后来发现是跳转方式为“在当前页面打开”就不会有左上角的返回按钮

    <view class="btn-area">
    <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
    <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开</navigator>
    </view>

    实现页面跳转很简单,就是用内定义好的navigator,其中跳转方式有两种1、navigate:跳转到新页面,有返回按钮 2、redirect:在当前页打开,则无返回按钮

    另外,自己加返回按钮可以通过 wx.navigateBack();函数实现

    展开全文
  • 微信浏览器左上角返回按钮的监听

    万次阅读 热门讨论 2018-03-10 21:28:46
    微信开发的时候,在公众号菜单中打开一个H5页面(如:个人中心),在这个页面上的一些操作,经过多次跳转后,点击左上角的返回按钮,发现会原封不动的返回至上一级页面。 即 公众号菜单-&gt;A-&gt;B-&gt;...
  • 于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下: 第一步:打断点,我们必须在我们想要它停下来的...
  • 微信开发者工具中 实现微信小程序之相机拍照功能的开发 包括相机拍照文件相册的打开 镜头的反转等
  • 这里,可以通过在微信开发者工具里进行设置,具体:点击右上角的详情 - 选择本地设置 - 找到不校验合法域名xxx - 勾选上 即可。 之后,你再次点击前端按钮,发送请求就可以正常发送,获得返回信息了。 ...
  • 微信web开发者工具简介

    万次阅读 2016-10-03 00:12:51
    微信web开发者工具 为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发...
  • 目录 Demo最终效果 开发工具: 开发步骤: 第一步:准备工作,用visual studio写后台...刚自己做了一个开发微信小程序的Demo,怕忘了,记录下来。希望以后会跳过那些大坑~~ Demo最终效果 开发工具: ...
  • 微信开发者工具中操作时:添加完基金后,会跳转到「基金页面pages/index/main」并且刷新出刚刚添加的基金 在真机调试、预览时:在手机上操作添加完基金后,会跳转到「基金页面pages/index/m...
  • 准备工作:首先,你必须注册了微信小程序账户和安装了微信开发者工具,如果...点击按钮跳转到另一界面,显示轮播图,并支持跳回主页步骤开始:1:步骤开始:删除pages/index/index.wxml中的所有代码,等待写入新代码...
  • ![iphone显示](https://img-ask.csdn.net/upload/201705/18/1495110498_352418.jpg)开发的公众号中的一个界面在安卓和微信开发者工具中可以正常显示,在苹果手机中没有数据
  • 继续微信小程序方面的教程,今天讲怎么在空白的小程序页面添加几个类似菜单的按钮,实现点击某个按钮跳转到对应界面,而不是单单局限于一个页面。需要什么:微信小程序账户电脑一台电脑安装微信开发者工具软件不懂...
  • 微信开发(web开发者工具

    千次阅读 2016-10-04 15:20:41
    web开发者工具,就是为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行...
  • 微信web开发者工具

    千次阅读 2016-11-29 19:22:15
    转载于 :... ...2 调试微信网页授权 3 模拟JSSDK权限校验 4 移动调试 5 Chrome DevTools 6 下载地址 7 技术支持与反馈 概述
  • 微信WEB开发者工具

    2016-10-13 11:07:30
    微信开发者工具是一个桌面应用,作用是为开发调试用的。下载链接:Windows 64位版本: 下载地址 MD5:%20e74dd9499379ad93c68a952133eb7116 Windows 32位版本: 下载地址 MD5:%20b69a7d94a045430a1d8216950cb27199...
  • F 修复 删除用户数据目录后开发者工具启动不了的问题 F 修复 未使用体验评分时存在内存泄漏的情况 F 修复 切换页面偶现 WXML 面板内容丢失问题 反馈详情 F 修复 调试 WXML 面板 rpx 计算错误导致样式错乱的问题 ...
  • 为帮助开发者更方便、更安全地开发和调试基于微信的网页,微信推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。你可以...
  • 从微信小程序正式对开发者开放以来,开发者工具也更新迭代了很多版本,目前新版本为0.12.130400,由于微信开发者工具目前不是特别稳定,这期间部分开发者在更新开发者工具版本的时候遇到了很多问题,喝彩科技工程师...
1 2 3 4 5 ... 20
收藏数 7,182
精华内容 2,872
关键字:

微信开发者工具 返回按钮