精华内容
下载资源
问答
  • 微信开发者工具
    2022-03-30 17:57:58

    排查问题

    1:在manifest.json中将AppID重新获取
    2:在微信开发者工具-安全-打开协议
    3:设置hb的appid,微信小程序的,一定要设置正确
    操作以上三步,如果还有问题,那应该就是hb微信设置的微信开发者工具路径有问题,可以去看一下
    
    更多相关内容
  • 运行uni-app在微信开发者工具下注意的问题: (1)在点击工具栏里的文件 -> 新建 -> 项目: (2)选择uni-app,输入工程名,如:hello-uniapp,点击创建,即可成功创建 uni-app。点击模板里的 Hello uni-app 即可...
  • 微信开发者工具如何调试小程序直播1
  • 21年9月版本-微信开发者工具1.05.2109131版本(x64)
  • 微信开发者工具,包含使用npm模块功能,最新版本的开发者工具没有这个功能了
  • 微信开发者工具

    2017-12-15 16:44:51
    微信开发者工具,最近微信开发者中心推出了微信web开发者工具,对于我们这些开发微信公众平台的非常实用,所以来安装起来用用
  • 打开最新版本微信开发者工具一直黑屏,要怎么解决?简单又有效,黑屏问题麻烦打开C:\\users\\<>\\AppData\\Local\\微信开发者工具\\user data\\WeappLocalData 放置这个文件就可以了,其他系统目录名称大致一样的。
  • 打开/关闭工具栏 Ctrl+Shift+T 打开/关闭模拟器 Ctrl+Shift+D 打开/关闭调试器 Ctrl+Shift+M 格式化文件 Shift+Alt+F 编译 Ctrl+B 刷新 Ctrl+R 删除行 Ctrl+Shift+K 向上复制行 Shift+Alt+↑ 向上...
  • 新版微信开发者工具更新后很多用户出现启动出现黑屏卡屏,现我将解决方法及代码贡献出来,让更多开发者能够及时生产。
  • 有时候微信官网会下载不了开发者工具, 可以在这边下载
  • 基于微信开发者工具开发的一款简易的小程序
  • 微信开发者工具安装包
  • 基于SpringBoot+Mybatis+微信开发者工具的商城小程序
  • 微信Web开发者工具,可用于微信小程序,微信公众号的开发
  • wechat:微信开发者工具

    2021-06-11 10:35:21
    微信页面在PC侧查看时,无法实现WeixinJSBridge接口,也无法正常体验流程,故pc版jsBridge登场了 使用方式 chrome打开任意页面,添加书签,标题写 JSBridge,内容写以下内容 [removed]void((function(){var d=...
  • 深入了解-微信开发者工具

    千次阅读 2022-07-23 21:39:56
    深入了解微信开发者工具的运行原理。 主要介绍微信开发者工具如何编译小程序代码,如何实现小程序模拟器以及如何调试小程序。

    主要介绍微信开发者工具如何编译小程序代码,如何实现小程序模拟器以及如何调试小程序。

    1 简介

    虽然在开发语言层面小程序与传统的网页差别不大:是使用JavaScript 脚本语言编写逻辑代码、使用类似于HTML的WXML来描述页面的结构、使用类似于CSS的WXSS来描述节点的样式,但是由于小程序渲染和逻辑分离的运行机制与传统的网页存在差异,所以无法使用传统的网页的开发调试工具,因此我们使用小程序开发生态一站式IDE——微信开发者工具。开发者可以借助微信开发者工具完成小程序的代码开发、编译运行、界面和逻辑调试、真机预览和提交发布版本等功能。

    图1 微信开发者工具

    微信开发者工具是一个基于nw.js ,使用node.js、chromium以及系统API来实现底层模块,使用React、Redux等前端技术框架来搭建用户交互层,实现同一套代码跨Mac和Windows 平台使用。

    图2 微信开发者工具底层框架


    2 代码编译

    微信开发者工具和微信客户端都无法直接运行小程序的源码,因此我们需要对小程序的源码进行编译。代码编译过程包括本地预处理本地编译和服务器编译。为了快速预览,微信开发者工具模拟器运行的代码只经过本地预处理、本地编译,没有服务器编译过程,而微信客户端运行的代码是额外经过服务器编译的。

     

    1 编译WXML 

    WXML(WeiXin Markup Language)是小程序框架设计的一套标签语言,用于构建出页面的结构。小程序的渲染层的运行环境是一个WebView,而WebView无法直接理解WXML标签,所以需要经过编译。
    微信开发者工具内置了一个二进制的WXML编译器,这个编译器接受WXML代码文件列表,处理完成之后输出JavaScript代码,这段代码是各个页面的结构生成函数

    图3 WXML的编译过程

    编译过程将所有的WXML代码最终变成一个JavaScript 函数,预先注入在WebView中。在运行时确定了页面路径之后,将路径作为参数传递给这个函数得到该页面的结构生成函数,页面结构生成函数接受页面数据,输出一段描述页面结构的JSON,最终通过小程序组件系统生成对应的HTML

    代码清单1 如何使用页面结构生成函数

    //$gwx 是WXML编译后得到的函数
    //根据页面路径获取页面结构生成函数
    var generateFun = $gwx('name.wxml')
    //页面结构生成函数接受页面数据,得到描述页面结构的JSON
    var virtualTree = generateFun({
       name:  'miniprogram'
    })
    /** virtualTree == {
       tag: 'view',
       children: [{
           tag: 'view',
           children: ['miniprogram']
         }]
     }**/
     //小程序组件系统在虚拟树对比后将结果渲染到页面上
     virtualDom.render(virtualTree)
    

    上传代码时,微信开发者工具直接将本地的WXML代码文件提交到后台,由后台进行WXML编译,后台的WXML编译器和开发者工具本地内置的WXML编译器是同一套代码生成的。

    2 编译WXSS

    WXSS (WeiXin Style Sheets) 是一套样式语言,用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比,WXSS 扩展的一些特性,包括rpx尺寸单位和样式导入语法,这些特性都是WebView无法直接理解的。
    微信开发者工具内置了一个二进制的WXSS编译器,这个编译器接受WXSS文件列表,分析文件之间的引用关系,同时预处理rpx,输出一个样式信息数组,如图4,每个WXSS文件对应于这个数组中的一项。

    图4 WXSS的编译过程

    在运行时,根据当前的屏幕宽度,计算出1rpx对应多少像素单位,然后将样式信息数组转换成最终的样式添加到页面中。
    由于样式在微信客户端存在兼容性问题,为了方便开发者,微信开发者工具提供了上传代码时样式自动补全的功能,利用PostCSS 对WXSS文件进行预处理,自动添加样式前缀。

    3 编译JavaScript

    微信客户端在运行小程序的逻辑层的时候只需要加载一个JS文件(我们称为app-service.js),而小程序框架允许开发者将 JavaScript 代码写在不同的文件中,所以在代码上传之前,微信开发者工具会对开发者的JS 文件做一些预处理,包括ES6转ES5和代码压缩(开发者可以选择关闭预处理操作),在服务器编译过程将每个JS文件的内容分别包裹在define域中,再按一定的顺序合并成 app-service.js 。其中对于页面JS和app.js需要主动require。

    图5 JavaScript的编译过程


    3.模拟器

    小程序模拟器模拟小程序在微信客户端的逻辑和界面表现,方便开发者实时查看代码效果。由于系统差异以及微信客户端特有的一些交互流程,少部分的API无法在模拟器上进行模拟,但对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。同时微信开发者工具提供多种机型尺寸以及自定义机型尺寸功能,方便开发者进行界面样式的机型适配。

    图6 小程序模拟器

    2 逻辑层模拟

    在iOS微信客户端上,小程序的JavaScript代码是运行在JavaScriptCore中,在Android微信客户端上,小程序的JavaScript代码是通过 X5 JSCore来解析的。而在微信开发者工具上我们采用了一个隐藏着的Webivew来模拟小程序的逻辑运行环境

    图7 微信客户端小程序运行环境模型简图

    图8 微信开发者工具小程序运行环境模型简图

    在微信开发者工具上WebView是一个chrome的 <webview /> 标签。与<iframe />标签不同的是,<webview/>标签是采用独立的线程运行的。
    用于模拟小程序逻辑层的<webview/> 加载的链接是

    http://127.0.0.1:9973/appservice/appservice
    

    我们在开发者工具底层搭建了一个本地HTTP服务器来处理小程序模拟器的网络请求。其中:

    ./__asdebug/asdebug.js: 是开发者工具注入的脚本。

    ./__dev__/WAService.js:是小程序逻辑层基础库。

    ./util.js、./app.js、./index.js:开发者JS代码。

    WebView在请求开发者JS代码时,开发者工具读取JS代码进行必要的预处理后,将处理结果返回,然后由WebView解析执行。虽然开发者工具上是没有对JS代码进行合并的,但是还是按照相同的加载顺序进行解析执行

    图9 appservice内容

    WebView是一个浏览器环境,而JsCore是一个单纯的脚本解析器,浏览器中的BOM对象无法在JSCore中使用,开发者工具做了一个很巧妙的工作,将开发者的代码包裹在define域的时候,将浏览器的BOM对象局部变量化,从而使得在开发阶段就能发现问题。

    图10 BOM对象局部变量化

    3 渲染层模拟

    微信开发者工具使用chrome的 <webview />标签来加载渲染层页面,每个渲染层WebView加载

    http://127.0.0.1:9973/pageframe/pageframe.html
    

    开发者工具底层搭建的HTTP本地服务器在收到这个请求的时候,就会编译WXML文件和WXSS文件,然后将编译结果作为HTTP请求的返回包。当确定加载页面的路径之后,如index页面,开发工具会动态注入如下一段脚本:

    // 改变当前webview 的路径,确保之后的图片网络请求能得到正确的相对路径
    
    history.pushState('', '', 'pageframe/index')
    
    // 创建自定义事件,将页面结构生成函数派发出去,由小程序渲染层基础库处理
    
    document.dispatchEvent(new CustomEvent("generateFuncReady", {
    
       detail: {
    
         generateFunc: $gwx('./index.wxml')
    
       }
    
    }))
    
    // 注入对应页面的样式,这段函数由WXSS编译器生成
    
    setCssToHead()
    

    4 客户端模拟

    微信客户端为丰富小程序的功能提供了大量的API。在微信开发者工具上,通过借助BOM(浏览器对象模型)以及node.js访问系统资源的能力,同时模拟客户端的UI和交互流程,使得大部分的API能够正常执行。
    借助BOM,如wx.request使用XMLHttpRequest 模拟、wx.connectSocket 使用 WebSocket、wx.startRecord 使用MediaRecorder、wx.playBackgroundAudio 使用 <audio/>标签;
    借助node.js,如使用fs实现wx.saveFile、wx.setStorage、wx.chooseImage等API功能。
    借助模拟UI和交互流程,实现wx.navigateTo、wx.showToast、wx.openSetting、wx.addCard等。

    5 通讯模拟

    上文已经叙述了小程序的逻辑层、渲染层以及客户端在微信开发者工具上的模拟实现,除此之外,我们需要一个有效的通讯方案使得小程序的逻辑层、渲染层和客户端之间进行数据交流,才能将这三个部分串联成为一个有机的整体。
    微信开发者工具的有一个消息中心底层模块维持着一个WebSocket服务器,小程序的逻辑层的WebView和渲染层页面的WebView通过WebSocket与开发者工具底层建立长连,使用WebSocket的protocol字段来区分Socket的来源。
    代码清单2 逻辑层中的消息模块

    // <webview/>的userAgent是可定制的
    // 通过userAgent中获取开发者工具WebSocket服务器监听的端口
    var port = window.navigator.userAgent.match(/port\/(\d*)/)[1]
    // 通过指定 protocol == 'APPSERVICE' 告知开发者工具这个链接是来自逻辑层
    var ws = new WebSocket(`ws://127.0.0.1:${port}`, 'APPSERVICE')
    ws.onmessage = (evt) => {
      let msg = JSON.parse(evt.data)
      // …处理来自开发者工具的信息
       }
    // 调用API接口 wx.navigateBack
    ws.send(JSON.stringify({
      command: 'APPSERVICE_INVOKE',
      data: {
         api: 'navigateBack',
         args: {}
      }
    }))
    
    展开全文
  • 1、现在的微信开发者工具内嵌小程序小游戏,启动慢,占资源 2、此版本为早期还没有小程序的时候,官版开发者工具
  • 目录️‍ 软件介绍 基本简介 安装方法 微信开发者工具是微信公众号官方推出的一款专门给用户制作微信小程序和给公众号添加新的功能的软件,对于懂得编程的用户来说,这是款非常好用的工具,用户可以用微信开发者...

    目录

    🏳️‍🌈 软件介绍

    🍁 基本简介

    📣 安装方法

    🏳️‍🌈 软件介绍

     微信开发者工具是微信公众号官方推出的一款专门给用户制作微信小程序和给公众号添加新的功能的软件,对于懂得编程的用户来说,这是款非常好用的工具,用户可以用微信开发者工具实现对公众号的接口功能,也可以用微信开发者工具制作游戏、小程序,有需要的可以下载使用。

     

    🍁 基本简介

    为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的 微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。

      使用公众号网页调试,开发者可以调试微信网页授权和微信JS-SDK

      使用小程序调试,开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

    功能介绍

      菜单栏

      微信web开发者工具

      切换帐号:快速切换登录用户

      关于:关于开发者工具

      检查更新:检查版本更新

      开发者论坛:前往开发者论坛

      开发者文档:前往开发者文档

      调试:调试开发者工具、调试编辑器;如果遇到疑似开发者工具或者编辑器的 bug,可以打开调试工具查看是否有出错日志,欢迎在论坛上反馈相关问题

      更换开发模式:快速切换公众号网页调试和小程序调试

      退出:退出开发者工具

      项目

      新建项目:快速新建项目

      打开最近:可以查看最近打开的项目列表,并选择是否进入对应项目

      查看所有项目:新窗口打开启动页的项目列表页

      关闭当前项目:关闭当前项目,回到启动页的项目列表页

      文件

      新建文件

      保存

      保存所有

      关闭文件

      编辑:可以查看编辑相关的操作和快捷键

      工具

      编译:编译当前小程序项目

      刷新:与编译的功能一致,由于历史原因保留对应的快捷键 ctrl(?) + R

      编译配置:可以选择普通编译或自定义编译条件

      前后台切换:模拟客户端小程序进入后台运行和返回前台的操作

      清除缓存:清除文件缓存、数据缓存、以及授权数据

      界面:控制主界面窗口模块的显示与隐藏

      设置:

      外观设置:控制编辑器的配色主题、字体、字号、行距

      编辑设置:控制文件保存的行为,编辑器的表现

      通知设置:设置是否接受某种类型的通知

      工具栏

      点击用户头像可以打开个人中心,在这里可以便捷的切换用户和查看开发者工具收到的消息。

      用户头像右侧是控制主界面模块显示/隐藏的按钮。至少需要有一个模块显示。

      工具栏中间,可以选择普通编译,也可以新建并选择自定义条件进行编译和预览。

      通过切后台按钮,可以模拟小程序进入后台的情况

      工具栏上提供了清缓存的快速入口。可以便捷的清除工具上的文件缓存、数据缓存、还有后台的授权数据,方便开发者调试。

      工具栏右侧是开发辅助功能的区域,在这里可以上传代码、版本管理、查看项目详情

      工具栏管理

      在工具栏上点击鼠标右键,可以打开工具栏管理

      模拟器

      模拟器可以模拟小程序在微信客户端的表现。小程序的代码通过编译后可以在模拟器上直接运行。

      开发者可以选择不同的设备,也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。

      在模拟器底部的状态栏,可以直观地看到当前运行小程序的场景值,页面路径及页面参数

      独立窗口

      点击 模拟器/调试器 右上角的按钮可以使用独立窗口显示 模拟器/调试器

    📣 安装方法

    下载安装微信开发者工具并打开软件

     打开软件后使用微信扫描登录

     按照自己的需求可以在小程序、小游戏点击新建或者导入项目制作新的程序

      选择公众号网页功能可以对公众号进行WEB进行功能调试

     

     各位走过路过,不要错过,记得关注我哦

     

    展开全文
  • 目前微信开发者工具中仅集成了 Git 的版本控制工具。要想使用 SVN 的话,需要安装 SVN 插件,但是在微信开发者工具中的插件中心中搜索不到该插件。所以需要借助 VSCode 的插件市场安装。

    目前微信开发者工具中仅集成了 Git 的版本控制工具。

    要想使用 SVN 的话,需要安装 SVN 插件,但是在微信开发者工具中的插件中心中搜索不到该插件。
    所以需要借助 VSCode 的插件市场安装。步骤如下:

    Step1 在 VSCode 的扩展中搜索 “SVN” 并进行安装。

    在这里插入图片描述

    Step2 复制扩展ID,随便粘贴一个地方,并记住。

    如SVN的ID:johnstoncode.svn-scm

    在这里插入图片描述

    Step3 在微信开发者工具中找到扩展,点击更多找到“从已解包的扩展文件夹安装…”

    在这里插入图片描述

    Step4 选择名为 第一步中扩展ID johnstoncode.svn-scm 的文件夹。

    一般都 用户家目录.vscode > extensions 中。

    在这里插入图片描述

    Step5 选择完后回到 微信开发者工具 中,应该能看到多出来一个 SVN 的图标。

    且源代码管理中会加载出代码的变动信息。

    在这里插入图片描述

    导入扩展后,无效果的解决方法

    如果选择目录后没有显示的话。进入微信开发者工具的设置中。
    菜单栏 > 设置 > 通用设置 > 编辑设置 > 更多编辑器设置…

    在这里插入图片描述
    在这里插入图片描述

    搜索:svn enable 取消勾选再重新勾选即可。

    在这里插入图片描述

    展开全文
  • 文章目录

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 100,478
精华内容 40,191
关键字:

微信开发者工具