微信小程序之微信开发工具使用教程详解

╰+哭是因爲堅強的太久メ 2024-04-18 05:01 80阅读 0赞

如果你要开发自己的微信小程序或者小游戏，微信开发者工具是必不可少的，因为有些微信封装的方法只有微信开发者工具上才能使用，还有一个重要的原因就是，我们提交我们的代码审核必须通过该工具来提交，所有要做微信小程序和小游戏的开发，这个工具的学习是必不可少的。

老实说该工具不管是对久经沙场的老人还是萌新来说都是非常简单的，能很快上手，并且还是中文的哦，下面我们看看整体界面

![image][]

整个编辑器大题分为四块，**模拟器**、**编辑器**、**调试器**、**工具栏**，下面我们每个模块来独立讲解

**一、模拟器**

模拟器是工具为了让我们的代码达到所见即所得的效果，我们编写的代码效果能很快的在左边的界面上显示出去，做过web开发的小伙伴应该也很清楚，浏览器上按下F12也可以达到类似的效果，其实微信开发工具本身就是对浏览器进行了一定程度的封装，我们使用起来也相对亲切，模拟器还可以模拟不同手机，百分比、网络状态等，极大的方便了我们的开发和测试

![image][image 1]

**二、编辑器**

编辑器是每个开发工具必不可少的一部分，功能也大同小异，微信开发工具上有新增WXML、WXSS等文件的快捷方式，还是比较方便的，微信小程序采用的是ES6的语法，这个工具的提示确实有些差了，很多时候都不能提示出来，所以有很多人现在会采用WebStorm（前端开发最强神器）编写后在到微信开发工具上提交，当然也会有些坑，后续将专门讲解，不过微信开发工具目前更新速度还是很快的，希望能快点改善智能提示的问题

**三、调试器**

第一眼看到这个调试器有没有一点眼熟，它和浏览器按下F12后几乎是一样的，但是微信工具也做了一些简化和新增，我们主要看看几个不同和比较有用的三个功能

![image][image 2]

**1、Storage**

Storage可以理解成一个本地存储数据库，可以通过wx.setStorageSync(‘logs’, logs)等方法将我们需要的数据直接存储和取出，有时在开发的过程中是非常有用的，后续将介绍具体使用场景

**2、AppData**

AppData中主要存储了我们在页面上所有用到的变量，这个对于我们开发和调试来说是非常重要的，能通过它快速看到每个值的赋值情况，快速定位问题

**3、Audits**

这个是一个程序性能的分析工具，可以在开发和开发完成后，测试一下，看看我们的程序在那块还需要进行优化，非常方便

**三、工具栏**

工具栏提供了我们一些常用的操作，在此我们也只将一下常用到的，和一些有用的，主要有以下几点

![image][image 3]

**1、预览**

点击预览按钮后，我们可以用我们的后台绑定的微信扫描，在真机上看具体的效果，因为工具毕竟是模拟器，在模拟器上没问题，而在手机上却存在问题的情况是常有的，所以开发完一个功能后，我们有必要在真机上看看效果

**2、真机调试**

如果在“预览”中发现在真机上有问题，我们可以点击真机调试，我们的手机上也能看到调试信息，非常方便的让我们进行调试真机问题

**3、清缓存**

有时候我们可能用到Storage或者修改了页面和样式等，但是在渲染的时候还是使用的原来的代码，此时清缓存就是非常必要的操作了

**4、上传**

上传是在我们将我们的小程序开发完成后，点击上传，就会将我们的代码提交给微信官方审核了，只有审核通过后，其他用户才能在微信中搜索和使用我们自己开发的小程序

**5、详情**

![image][image 4]

详情中可以设置项目的一下信息，主要关注开发基础库的选择，版本不要过低或过高，教低的版本会让很多方法无法使用，太高的版本会让很多微信版本较低的用户无法使用你的小程序（当然你可以做兼容处理）；开发使用本地的服务时，需要勾选上“不校验本地域名…”,这样小程序就可以调用本地的服务了

[image]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTMyNzc3OS04MDk1MGViYzhkMmYxOWNiLnBuZw?x-oss-process=image/format,png
[image 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTMyNzc3OS1hNGM0NWZmODVhZWMyNzVhLnBuZw?x-oss-process=image/format,png
[image 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTMyNzc3OS1iYWFiMzllNGQ0MWE3ZTI4LnBuZw?x-oss-process=image/format,png
[image 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTMyNzc3OS03MjVjMDBkY2Q5NmQ5OTA3LnBuZw?x-oss-process=image/format,png
[image 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMTMyNzc3OS1iZjE4MjViYjcxZDZlN2MxLnBuZw?x-oss-process=image/format,png