今天给各位分享微信app开发工具的知识，其中也会对微信程序开发工具进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

微信小程序开发|工具|npm 使用

用过 npm 的小伙伴肯定很熟悉 node_modules，但是「微信开发工具」是不认 node_modules 的 , 它认的是 miniprogram_npm； 而 miniprogram_npm 是通过 node_modules 转出来的， 它是通过「微信开发工具」的 “工具” - “构建 npm” 生成出来的。

具体步骤如下：

1、 npm init

这里会产生 package.json 的配置文件

2、 npm install ** --p --s

安装需要的包，这里会产生 node_modules

3、「微信开发工具」走一遍 “工具” - “构建 npm”

这里会产生 miniprogram_npm

4、「微信开发工具」的本地配置中 “使用 npm 模块” 勾上

5、使用包

引入的组件可以有第三方组件和 js 工具

1、 按照步骤安装库同时走一遍 “工具” - “构建 npm”，产生miniprogram_npmweui-miniprogra

npm install weui-miniprogram --p --s

2、 在 app.wxss 引入全局样式

3、在需要使用的页面中引入控件和使用，

譬如 pages/index/index.json，然后就可以在 index.wxml

1、 按照步骤安装库同时走一遍 “工具” - “构建 npm”，产生miniprogram_npmjs-base64

npm install js-base64 --p --s

2、在 *.js 文件中用 require 或者 import 引入，然后使用

微信小程序开发工具怎么使用

1、获取微信小程序的 AppID

首先，我们需要拥有一个账号，如果你能看到该文档，我们应当已经邀请并为你创建好一个账号。注意不可直接使用服务号或订阅号的 AppID。 利用提供的账号，登录，就可以在网站的「设置」-「开发者设置」中，查看到微信小程序的 AppID 了。

2、创建项目

我们需要通过开发者工具，来完成小程序创建和代码编辑。开发者工具安装完成后，打开并使用微信扫码登录。选择创建「项目」，填入上文获取到的 AppID，设置一个本地项目的名称（非小程序名称），比如「我的第一个项目」，并选择一个本地的文件夹作为代码存储的目录，点击「新建项目」就可以了。

3、编写代码

点击开发者工具左侧导航的「编辑」，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js 后缀的是脚本文件，.json 后缀的文件是配置文件，.wxss 后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。

4、创建页面

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js 后缀的文件是脚本文件，.json 后缀的文件是配置文件，.wxss 后缀的是样式表文件，.wxml 后缀的文件是页面结构文件。

在这个小程序开发教程里，我们有两个页面，index 页面和 logs 页面，即欢迎页和小程序启动日志的展示页，他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页。

页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

index.json是页面的配置文件，页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用app.json 中的默认配置。

微信开发工具如何导入wxapp文件夹

微信开发工具这样导入wxapp文件夹。

1、首先第一步找到微信开发工具图标之后双击它，使微信开发工具在电脑上运行。

2、运行之后我们找到想要导入的项目所属的类型点击进去，比如小编需要导入一个小程序项目，就点击小程序项目模块。

3、点击之后进入到小程序项目界面，在界面底部有一个管理项目选项，然后我们点击它右边的添加图标。

4、点击这个添加图标之后会出现一个新增项目的界面，我们选择项目目录以及填写项目名称等其他信息。

5、点击项目目录右边的图标即可打开选择项目目录的界面，我们找到想要导入的项目wxapp文件夹之后，点击选择它并点击确定按钮进行导入即可。

微信开发者工具——移动调试的简单使用

       目前主要是做PC端项目，但是偶尔也会有移动端需求提来，有在原生APP中的，也有在微信和浏览器中的，目前也就接触过这三个场景，对于移动端的坑入得也不深，本文介绍也是偏应用，如有不足请见谅。

一、开发移动端页面的工具

①移动端浏览器页面

       这里开发静态页面的做法和普通的PC页面开发一样，使用chrome浏览器进行开发和调试，但是不一样的地方是把PC端的开发模式切换到手机开发模式（PC调试模式切换到移动端，点亮图中 ②即可，图中①处可以模拟不同移动端设备，同时可以自己添加设备），效果如下：

该方式可以直接调试

②嵌入APP中的移动端页面

       对于某些经常举办针对用户活动的APP对于嵌入H5页面的需求是比较多的。因为这样会节省开发的成本、减少原生APP的迭代速度、对用户友好。

       开发嵌入原生APP的方式和第一种方式基本一致，唯一和第一种方式有些差别的是：如果h5页面和原生APP存在一些交互（js需要获取原生APP放回的数据），这种方式是没法做到的，因为上述方式是放在浏览器这个APP下的，而不是某个特定的原生APP。

解决方法：

        先和原生APP开发的同事商议好接口，使用方式一进行静态页面开发（这里面要写好正常的逻辑），然后与后台同事联调好接口，发不到测试，最后与原生开发的同事进行测试环境联调。过程看起来复杂，如果原生接口没问题，一般很快搞定。缺点就是和原生联调的时候，如果有问题，不好排查。（不知各位有什么好的方法，请指教！）

③开发微信端页面

       其实这个不应该拎出来说的，因为微信页面和在普通浏览器页面“一样”，可以认为微信中浏览网页就是在用QQ浏览器浏览。所以不再赘述。

总结：移动端开发，还是f12“大法”，然后切换移动调试就行了。

二、微信开发者工具之移动调试的使用

       对于f12开发小型的页面是没问题的，但是如果是基于微信的项目就有些力不从心了。所以大部分针对微信开发的项目基本上都可以使用 微信开发者工具 。

针对微信的开发者工具，真的是极大的方便了开发微信项目的效率。

       下面是一个应用于本地的个税计算器（其实控制台操作和浏览器f12基本一致，所以这个东西前端的同事一般立马上手）：

       但是，这个开发者工具虽然是微信官方开发工具，但是毕竟是模拟器，现实情况的复杂会导致有些样式不兼容。例如vivo的微信客户端，显示总是错乱的（测试的同事发现的问题，她的手机可以还原场景，但是我的手机端是正常的）。所以，我们需要有针对性的在这款手机真机上调试，如何做呢？下面简要介绍如何利用微信开发者工具进行真机调试。

       相对于iOS移动端调试，Android移动端调试更丰富一点，所以以安卓为例，ios调试方式同Android调试中的“普通调试”。

①普通调试

普通调试的步骤如下：

步骤解释：

第一步：选择无线网卡地址，默认即可，工具会自动查询你的无线网卡ip v4地址

第二步：意思就是你的手机连接的网络要和第一步得到的ip v4在同一个网段内（什么是网段？看这里）。简单的做法就是把手机的网络和电脑的网络设置为同一个源（连接到同一个无线网上）

第三步：这个步骤很清楚了，还有一个快捷的方式就是“下拉工具栏——长按无线连接图标”然后就可以直接进入到无线列表在做后续操作了。iOS操作如下：

iOS： 设置 - 无线局域网 - 选中网络 - HTTP代理手动

第四步：设置好上面步骤以后，重启微信，这可能是让微信重新检测目前的网络情况，然后打开你想调试的页面（注意，要先打开要调试的页面才可以开始调试）

第五步：这个不在上面的说明里，但是需要说明下，打开调试的网页以后，在点击下面的开始调试按钮！

如果你的操作正确，弹出框会是这样的：

如果你当前没有在微信打开调试页面或打开的本地页面地址错误，则会失败：

       请注意 ，如果你想调试本地开发的页面，需要你开启web服务，使用;:port的方式来访问，如果只是一个本地页面，是无法打开调试的，形如webstrom里面快捷打开的页面地址： 这个是无法调试的。需要你搭建WEB服务，使用类似于 这种url。（ 这种写法也是无法调试的，因为微信根本打不开）。

调试模式开启以后，我们就可以直接在手机上查看调试的结果或者修改东西：

我选中这里，手机就会有类似于PC端选中的状态一样被选中

       好了，可以直接看着手机调页面了，对于一些手机端的兼容性处理更有针对性，而且可以在network那里看网络请求，十分方便。

②X5 blink内核调试

X5 blink调试步骤如下：

       首先开发者工具要验证你的手机是不是支持该调试功能，所以，首先选择验证，然后在按下面的步骤做：

       上面三步结束以后，直接点击开始调试按钮，工具会给出一个弹框，检测出你的手机信息，但是其他什么都没有，像这样

那是因为——微信还没有打开能调试的页面！！！

同样，打开一个能调试的页面，这个“白板”就变了样子了，

注意：过程中会提示“是否允许USB调试”，选择同意即可

然后点击箭头指向的“inspect”，熟悉的画面再次出现！！！

好啦，这样就可以愉快的去调试真机界面了！

本文以应用为主，说的不深，不足之处还请见谅！

心如繁星，是美还是罪？

微信开发者工具中调试器旁边显示的是什么

微信开发者工具区域构成

调试器区域各个面板的功能

Wxml面板：用于帮助开发者开发 Wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性，还可以查看数据是否渲染到页面的代码上。同时可以通过修改对应的代码，在模拟器中实时看到修改的情况（仅为实时预览，无法保存文件）。通过调试器区域左上角的选择器，还可以快速找到页面中组件对应的 wxml 代码。

Console面板：可以用来显示小程序的输出信息、出错信息等，还可以在控制台中输入build（编译小程序）、preview（预览）、upload（上传代码）、npm（包管理）等命令，执行URL的代理使用情况的checkProxy（URL）命令。

AppData面板：用于显示当前项目运行时小程序 AppData 具体数据，实时地反映项目数据情况，可以在此处编辑数据，并及时地反馈到界面上。

Sources面板：用于显示当前项目的脚本文件，与浏览器开发不同，微信小程序框架会对脚本文件进行编译，所以在 Sources 面板中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在 define() 函数中，并且对于 Page（页面） 代码，在尾部会有 require 的主动调用。

Storage面板：用于显示当前项目的使用 wx.setStorage() 或者 wx.setStorageSync() 后的数据存储情况。可以直接在Storage面板上对数据进行删除、新增、修改。

NetWork面板：用于观察发送请求（request）和调用文件（socket）的信息和具体情况。

Audits面板：可用来在小程序运行过程中实时检查，分析出一些可能导致体验不好的地方，并定位出哪里有问题，以及给出一些优化建议。

Security面板：用于调试当前程序的安全和认证等问题，并确保已经在程序上正确使用Https。

Sensor面板：可以在这里选择模拟地理位置（纬度、经度、速度、精确度、高度、水平、精确度、垂直精确度等地理定位信息和方向定位信息）；模拟移动设备表现，用于调试重力感应API。

Trace面板：实现对不同设备的监测