• 本人觉得微信微信开发者工具快捷键太low了为什么就不像其他编辑器学习呢,难受的要死,开一个编辑器还得把微信开发者工具打开,他特么麻烦了,支持的赞一个



                                                                                 格式调整                                                                            
      Ctrl+S:保存文件
      Ctrl+[, Ctrl+]:代码行缩进
      Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块
      Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行
      Shift+Alt+F:代码格式化
      Alt+Up,Alt+Down:上下移动一行
      Shift+Alt+Up,Shift+Alt+Down:向上向下复制一行
      Ctrl+Shift+Enter:在当前行上方插入一行
                                                                                 光标操作                                                                            

         Ctrl+End:移动到文件结尾

      Ctrl+Home:移动到文件开头
      Ctrl+i:选中当前行
      Shift+End:选择从光标到行尾
      Shift+Home:选择从行首到光标处
      Ctrl+Shift+L:选中所有匹配
      Ctrl+D:选中匹配
      Ctrl+U:光标回退

                                                                                 界面操作                                                                             

    - Ctrl + \:隐藏侧边栏 
    - Ctrl + m: 打开或者隐藏模拟器

                                             个人操作反馈(一直更新反应大家的心声                                         

    - Tab:像eclipse 一样在引号中间用 Tab键跳出引号后边;

     -ctrl +J 像sublime 一样可以压缩代码到一行(如果有这个简直是太棒了);


    还有就是界面为什么每次只能打开一个项目,多个项目同时打开不行吗?

    展开全文
  • 刚刚开始学习uni-app,不知道微信开发者工具,运行到页面是咋回事。后来接触了一下,发现蛮好用的,这个功能可以联调你需要的某一页面。 每次联调项目时,Hbuilder X每次都要重新编译到初始默认的首页,然后要...

    刚刚开始学习uni-app,不知道微信开发者工具,运行到页面是咋回事。后来接触了一下,发现蛮好用的,这个功能可以联调你需要的某一页面。

    每次联调项目时,Hbuilder X每次都要重新编译到初始默认的首页,然后要点击跳转才会出现详情页进行调试,这样很麻烦。后来发现这个功能。每次Ctrl+s项目微信小程序模拟器可以直接跳转到你需要的页面,下面开始正常操作

    condition

    启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面。

    属性说明:

    属性 类型 是否必填 描述
    current Number 当前激活的模式,list节点的索引值
    list Array 启动模式列表

    list说明:

    属性 类型 是否必填 描述
    name String 启动模式名称
    path String 启动页面路径
    query String 启动参数,可在页面的 onLoad 函数里获得

    注意: 在 5+App 里真机运行可直接打开配置的页面,微信开发者工具里需要手动改变编译模式,如下图:

     

    在pages.json里配置

    "condition" : { //模式配置,仅开发期间生效
    		"current": 0, //当前激活的模式(list 的索引项)
    		"list": [
    			{
    				"name": "test", //模式名称
    				"path": "pages/info/info", //启动页面,必选
    				"query": "newsid=5173214" //启动参数,在页面的onLoad函数里面得到
    			}
    		]
    	},

    然后在微信小程序里  工具/编译配置/(选择需要的页面)

    最后选中需要的联调页面,重新编译就可以直接到你需要的页面啦

    展开全文
  • 打开微信开发者工具 创建第一个小程序 步骤: 打开微信开发者工具 使用微信扫码登录 点击小程序-创建小程序 项目名 项目路径 appid 不使用云服务器 语言: javascript...

     打开微信开发者工具 创建第一个小程序

    • 步骤:

      • 打开微信开发者工具

      • 使用微信扫码登录

      • 点击小程序-创建小程序

        • 项目名

        • 项目路径

        • appid

        • 不使用云服务器

        • 语言: javascript

     截图如下:

     

    微信开发者开发工具的组成

    • 菜单栏

    • 工具栏

      • 预览

        • 描述二维码

        • 自动预览

      • 切后台

    • 模拟器

    • 编译器

    • 调试器

     目录结构:

        

     

    1.项目结构

    • 对比:

      • web页面:

        • 技术栈:

          • html

            • 从语义化的角度来描述页面结构

          • css

            • 从审美的角度来美化页面

          • js

            • 从交互的角度来提升用户体验

      • 小程序页面

        • 技术栈:

          • wxml

            • 描述微信页面的结构

          • wxss

            • 描述微信页面的样式

          • js

            • 书写微信的逻辑代码

          • json

            • 配置页面的相关信息

    • 组成

      • pages:管理当前小程序中所有的页面

        • index

          • index.wml

          • index.js

            • 注意点:

              • 所有的代码都是写在

                Page({
                 
                })
          • index.wxss

          • index.json

            • 注意点:

              • 如果没有内容,必须添加一个空对象

      • app.json:注册小程序中的页面

    • 小技巧
      • 快速创建一个页面

        • 在 app.json 中的 pages 下添加一个路径,直接保存,可以自动生成对应的页面

      • 设置项目的默认首页

        • 在 app.json 中的 pages 将路径移到第一个元素中










    转载于:https://www.cnblogs.com/KoBe-bk/p/11423765.html

    展开全文
  • 微信开发者工具(一) 一、微信开发者工具基本信息 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

    展开全文
  • 微信开发者工具-调试器 调试器常用的 6 大功能模块有:Console、Sources、Network、Appdata、Storage、Wxml Console Console有两大功能: 1)开发者可以在此输入和调试代码  2)小程序的错误输出,会显示...

    微信开发者工具-调试器

    调试器常用的 6 大功能模块有:Console、Sources、Network、Appdata、Storage、Wxml

    Console

    Console有两大功能:
    1)开发者可以在此输入和调试代码
    在这里插入图片描述

    2)小程序的错误输出,会显示在此处
    在这里插入图片描述

    Sources

    Sources 用于显示当前项目的脚本文件,同浏览器开发不同,微信小程序框架会对脚本文件进行编译的工作,所以在 Sources 中开发者看到的文件是经过处理之后的脚本文件,开发者的代码都会被包裹在 define 函数中,并且对于 Page 代码,在尾部会有 require 的主动调用。
    小程序编译出错时,点击错误,可以跳转到这里,方便查错(黄色背景处为出错处)
    在这里插入图片描述

    Network

    Network 用于观察和显示 request 和 socket 的请求情况
    点击Headers可以查看请求数据,点击Preview和Response可以查看响应数据
    在这里插入图片描述

    Appdata

    Appdata 用于显示当前项目当前时刻 appdata 具体数据,实时地反馈项目数据情况,可以在此处编辑数据,并及时地反馈到界面上。
    在这里插入图片描述

    Storage

    Storage 用于显示当前项目的使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。
    在这里插入图片描述

    Wxml

    Wxml用于帮助开发者开发 Wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性,同时可以通过修改对应 wxss 属性,在模拟器中实时看到修改的情况。通过调试模块左上角的选择器,还可以快速找到页面中组件对应的 wxml 代码。
    在这里插入图片描述

    展开全文
  • 微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。微信团队发布了...
  • 常用快捷键 格式调整 Ctrl+S:保存文件Ctrl+[, Ctrl+]:代码行缩进Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行Shift+Alt+F:代码格式化Alt+Up,...
  • 代码编辑区:在该区编写代码,可通过模拟器区实时预览。修改wxss、wxml文件,会刷新当前页面。修改js或json文件,会重新编译小程序。 代码补全 在代码编写过程中,开发工具提供自动补全功能。 编辑js文件时,会...
  • 微信开发者工具的主页面主要是由菜单栏、工具栏、模拟器、编辑器以及调试其组成的。 菜单栏 项目:新建或打开一个项目 文件:新建、打开或者关闭文件 编辑:编辑或格式化代码 工具:包含一些辅助工具 ...
  • 1、首先用户需要做的就是先下载安装,并启工具。 即刻下载使用==》微信web...请确认手机登录,绑定的公众号为“微信 web 开发者工具”。 2)为了保证开发者身份信息的安全,对于希望调试的公众号,我们要求开发者微信
  • 这个game是我新建的页面,保存后,界面一直未变(还是index的初始界面)。怎么才能展示我新建的页面内容呢? ![图片说明](https://img-ask.csdn.net/upload/201903/22/1553258779_468019.png)
  • 微信web开发者工具 它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。 该工具界面主要由几大部分组成,如下图所示: ...
  • 这次的微信web开发者工具的更新主要是对开发工具的功能增强和bug修复,增加修改了一些最近一直频繁在开发者中被提出的问题,比如请求的地址不是合法的域名地址之类的问题。 具体看下面吧: 开发者工具基础功能 1....
  • 原文链接地址:「小程序JAVA实战」微信开发者工具helloworld(三) 第一个小程序demo的运行,首选需要去使用开发工具 开发工具下载安装 https://mp.weixin.qq.com/cgi-bin/wx 点击开发工具,选择自己的系统...
  • F 修复 删除用户数据目录后开发者工具启动不了的问题 F 修复 未使用体验评分时存在内存泄漏的情况 F 修复 切换页面偶现 WXML 面板内容丢失问题 反馈详情 F 修复 调试 WXML 面板 rpx 计算错误导致样式错乱的问题 ...
  • 微信web开发者工具

    2017-04-07 10:38:57
    为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。立即...
  • web开发者工具,就是为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行...
  • 为帮助开发者更方便、更安全地开发和调试基于微信的网页,微信推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。你可以...
  • 一,微信开发者工具简介 微信开发者工具是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。微信团队发布了微信小程序开发者工具,微信小程序开发文档和微信小程序设计指南,全新的...
  • web开发者工具。 有任何疑问或建议请私信我,或者在评论区大家一起探讨。 概述 为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端...
1 2 3 4 5 ... 20
收藏数 2,473
精华内容 989