微信开发者工具怎么切换窗口_微信开发者工具 多个窗口 - CSDN
  • 单个软件实例来回切换打开的项目太麻烦,一种办法是同时下载【微信web开发者工具】和【微信web开发者工具 Beta】,即正式版和测试版两个工具。 测试版下载地址:...

    在写小程序时,想要一边参考别人的Demo一边做,但是微信web开发者工具无法同时开两个实例,怎么办?

    单个软件实例来回切换打开的项目太麻烦,一种办法是同时下载【微信web开发者工具】和【微信web开发者工具 Beta】,即正式版和测试版两个工具。

    测试版下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/beta.html

    展开全文
  • 微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml [html]view plaincopy <!--index.wxml--> <view...

    微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了.

    总算做出来了.分享出来看看.

    先看效果:


    再上代码:

    1.index.wxml

    [html] view plain copy

    1. <!--index.wxml-->  

    2. <view class="swiper-tab">  

    3.     <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">哈哈</view>  

    4.     <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">呵呵</view>  

    5.     <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">嘿嘿</view>  

    6. </view>  

    7.   

    8. <swiper current="`currentTab`" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">  

    9.     <!-- 我是哈哈 -->  

    10.     <swiper-item>  

    11.       <view>我是哈哈</view>  

    12.     </swiper-item>  

    13.     <!-- 我是呵呵 -->  

    14.     <swiper-item>  

    15.       <view>我是呵呵</view>  

    16.     </swiper-item>  

    17.     <!-- 我是嘿嘿 -->  

    18.     <swiper-item>  

    19.       <view>我是嘿嘿</view>  

    20.     </swiper-item>  

    21. </swiper>  

    2.index.wxss


    [css] view plain copy

    1. /**index.wxss**/  

    2. .swiper-tab{  

    3.     width100%;  

    4.     border-bottom2rpx solid #777777;  

    5.     text-aligncenter;  

    6.     line-height80rpx;}  

    7. .swiper-tab-list{  font-size30rpx;  

    8.     display: inline-block;  

    9.     width33.33%;  

    10.     color#777777;  

    11. }  

    12. .on{ color#da7c0c;  

    13.     border-bottom5rpx solid #da7c0c;}  

    14.   

    15. .swiper-box{ displayblockheight100%width100%overflowhidden; }  

    16. .swiper-box view{  

    17.     text-aligncenter;  

    18. }  


    3.index.js


    [javascript] view plain copy

    1. //index.js  

    2. //获取应用实例  

    3. var app = getApp()  

    4. Page( {  

    5.   data: {  

    6.     /** 

    7.         * 页面配置 

    8.         */  

    9.     winWidth: 0,  

    10.     winHeight: 0,  

    11.     // tab切换  

    12.     currentTab: 0,  

    13.   },  

    14.   onLoad: function() {  

    15.     var that = this;  

    16.   

    17.     /** 

    18.      * 获取系统信息 

    19.      */  

    20.     wx.getSystemInfo( {  

    21.   

    22.       success: function( res ) {  

    23.         that.setData( {  

    24.           winWidth: res.windowWidth,  

    25.           winHeight: res.windowHeight  

    26.         });  

    27.       }  

    28.   

    29.     });  

    30.   },  

    31.   /** 

    32.      * 滑动切换tab 

    33.      */  

    34.   bindChange: function( e ) {  

    35.   

    36.     var that = this;  

    37.     that.setData( { currentTab: e.detail.current });  

    38.   

    39.   },  

    40.   /** 

    41.    * 点击tab切换 

    42.    */  

    43.   swichNav: function( e ) {  

    44.   

    45.     var that = this;  

    46.   

    47.     ifthis.data.currentTab === e.target.dataset.current ) {  

    48.       return false;  

    49.     } else {  

    50.       that.setData( {  

    51.         currentTab: e.target.dataset.current  

    52.       })  

    53.     }  

    54.   }  

    55. })  


    本文转自 IT阿飞 51CTO博客,原文链接:http://blog.51cto.com/itafei/1950128

    展开全文
  • 微信开发者工具(一) 一、微信开发者工具基本信息 1.1 微信开发者工具的下载 ​ 直接打开下面网址进行下载: ​ https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 1.2 下载以后登录 1.3 ...

    微信开发者工具(一)

    一、微信开发者工具基本信息

    1.1 微信开发者工具的下载

    直接打开下面网址进行下载:

    https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

    1.2 下载以后登录

    登录微信开发者工具.png

    1.3 新建项目

    1.4 微信开发者工具详情页

    [外链图片转存失败(img-gmV5PArB-1567256776341)(https://i.loli.net/2019/08/30/yvtRNblSdWjp4K5.png)]

    1. 模拟器:

      • 可以调整对应的机型

      • 可以调整展示页面的大小

      • 模拟网络状态:WIFI、2G、3G、4G和Offline(断网)

      • 模拟操作

        模拟操作.png

    该操作的模拟前后端,前后端的切换操作,

    例如当用户从小程序中回到聊天窗口,会触发一个小程序被设置为后台的回调。

    1. 调试工具:

      • **Wxml:**帮助开发者开发,wxml转发后的界面。可以看到真实的页面结构,和结构对应的wxss属性,同时可以通过更改wxss属性,实时的看到修改的情况

      • Sources panel: 用于显示当前的脚本文件,在Sources panel的脚本是已经编译好的脚本,已经处理之后的脚本文件。在Sources panel运行的时候,运行到断点,会导致整个小程序停止运行。

      • AppData panel: 用于展示目前运行小程序时的具体数据

      • Storage panel: 可以直接对数据进行删除、新增和修改
        用于显示当前项目使用的wx.setStorage或者wx.setStorageSync后的数据储存情况

      • Network Panel: 用于观察和显示 request 和 socket 的请求情况

      • **Console panel:**两大功能:

        1. 开发者可以在此输入和调试代码
        2. 可以再次查看小程序的报错

        在控制台可以输入命令

        build:编辑小程序

        Preview: 预览

        upload:上传代码

        openVendor:打卡基础库所在目录

        openToolsLog:打开工具日志目录

        checkproxy(url):检查指定url的代理使用情况

      • Sensor panel:
        两个功能:

        1. 开发者可以在这里选择模拟地理位置
        2. 开发者可以在这里模拟移动设备表现,用于调试重力感应API

        重力测试.gif

    展开全文
  • ctrl+p 快速打开文件 ctrl+e快速打开最近打开文件 快速格式化代码Shift+Alt+F 设置 外观设置 可以设置皮肤 第三方推荐使用vscode 安装minapp插件 ...

    ctrl+p 快速打开文件

    ctrl+e 快速打开最近打开文件

    快速格式化代码 Shift+Alt+F

    设置 外观设置 可以设置皮肤

    第三方推荐使用vscode 安装minapp插件

     

     

    转载于:https://my.oschina.net/u/3447041/blog/3033791

    展开全文
  • 这次的微信web开发者工具的更新主要是对开发工具的功能增强和bug修复,增加修改了一些最近一直频繁在开发者中被提出的问题,比如请求的地址不是合法的域名地址之类的问题。 具体看下面吧: 开发者工具基础功能 1....
  • 微信web开发者工具

    2020-07-29 14:20:17
    微信web官方开发小程序的开发者工具!.json 配置文件 .js 逻辑文件 .wxss 样式文件 .wxml 布局文件 pages存放首页的信息 logs存放日志文件的信息 app.js存放全局共享的逻辑文件 app.json存放全局共享的配置文件 app...
  • 最初的console 界面可能以下这样的, 当ctrl + s 保存并跑了一段代码,但是不显示结果. 解决办法就是把旁边的设置按钮 (蓝色的小齿轮) 点击一下就可以切换界面并看到跑代码的结果了 点击一下设置按钮,显示界面... ...
  • 这个game是我新建的页面,保存后,界面一直未变(还是index的初始界面)。怎么才能展示我新建的页面内容呢? ![图片说明](https://img-ask.csdn.net/upload/201903/22/1553258779_468019.png)
  • 微信开发工具使用git

    千次阅读 2018-11-16 17:09:29
    1、初始化本地仓库 在微信Web开发者工具中点击「版本管理」。... 这一步骤相当于执行「git init」命令。 ...2、初始化完成后,我们可以...下图为微信Web开发者工具初始化后的版本控制面板。 3、配置仓库信息 初...
  • 从前面从微信小程序开发者工具源码看实现原理(一)- - 小程序架构设计可以知道,小程序大部分是通过web技术进行渲染的,也就是最终通过浏览器的dom tree + cssom来生成渲染树;既然最终是通过css来绘制ui布局,我们...
  • 微信小程序-开发者工具

    千次阅读 2017-09-23 15:35:44
    为了帮助开发者简单和高效地开发微信小程序,我们推出了全新的开发者工具,集成了开发调试、代码编辑及程序发布等功能。 扫码登录 启动工具时,开发者需要使用已在后台绑定成功的微信号扫描二维码...
  • F 修复 删除用户数据目录后开发者工具启动不了的问题 F 修复 未使用体验评分时存在内存泄漏的情况 F 修复 切换页面偶现 WXML 面板内容丢失问题 反馈详情 F 修复 调试 WXML 面板 rpx 计算错误导致样式错乱的问题 ...
  • 当你下载完wepy案例之后,发现并不能够直接导入微信开发工具中查看,出现的情况如下图所示: 我在网上找了许多解决方案,忙活了一个上午之后终于找到一个完全可以用的链接,里面写得很详细,一步步操作就可以,写...
  • 当然,微信开发者工具也有许多方便的地方,可以直接在窗口显示运行效果、控制台、终端,创建页面时直接在全局的app.json文件中写入路径和页面名就会帮我们自动创建整个包含json/js/wxml/wxss的一整个文件夹,并且...
  • 一、简介:微信小程序自动化框架 Python 版 -- Minium 之前有项目一直做APP UI自动化,用的appium,后来项目增加了小程序,使用appium来做小程序自动化的话会遇到很多问题,比如元素定位只能根据xpath来定位,为了...
  • 微信小程序概述 小程序介绍 微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用。小程序和微信原生功能应用在本质上都是——Web App 小程序优势 微信有海量用户,依赖性很强,微信...
  • 微信小程序入门 准备工作 ​ 1....​ 2.... 打开并使用微信扫码登录 ,创建一个项目(AppID代表...如果没有AppID,小程序就不能在真机上演示,就是不能发布到线上给用户使用,只能在微信开发者工具里模拟运行。 ) 创建完
  • 微信 Andoid 6.5.10 开始,我们提供了 Trace 导出工具,开发者可以在开发者工具 Trace Panel 中使用该功能。 使用方法 PC 上需要先安装adb工具,可以参考一些主流教程进行安装,Mac 上可使用 brew 直接安装。 ...
  • 微信小程序开发工具使用简介

    千次阅读 2019-04-30 00:58:17
    为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。 使用公众号网页调试,开发者可以调试...
  • 创建+工具界面~
1 2 3 4 5 ... 20
收藏数 3,841
精华内容 1,536
关键字:

微信开发者工具怎么切换窗口