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

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

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

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

一、模拟器

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

二、编辑器

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

三、调试器

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

1、Storage

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

2、AppData

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

3、Audits

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

三、工具栏

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

1、预览

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

2、真机调试

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

3、清缓存

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

4、上传

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

5、详情

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

微信小程序之微信开发工具使用教程详解相关推荐

区分微信小程序版本（开发工具中、开发版、体验版、正式版）的方法？
平凡也就两个字: 懒和惰; 成功也就两个字: 苦和勤; 优秀也就两个字: 你和我. 跟着我从0学习JAVA.spring全家桶和linux运维等知识,带你从懵懂少年走向人生巅峰,迎娶白富美! 关注微信 ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
下拉多选框微信小程序_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
pos请求微信小程序_微信小程序蓝牙连接小票打印机实例代码详解
1.连接蓝牙 (第一次发表博客) 第一步打开蓝牙并搜索附近打印机设备// startSearch: function() { var that = this wx.openBluetoothAdapt ...
微信小程序——账号及开发工具
1. 注册微信小程序账号点击我进入微信公众平台进入后点击立即注册注册成功且登录后进入小程序管理后台 2. 安装开发者工具点击进入开发文档进入安装开发工具(稳定版本) 一路默认下一步进行安装 ...
微信开发工具button跳转页面_微信小程序按钮点击跳转页面详解
微信小程序中,按钮也是标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkP ...
微信小程序和uniapp开发工具
微信开发者工具和文档操作 1. 安装扩展复制vscode扩展(路径C:\Users\用户名.vscode\extensions)到微信开发者工具的扩展目录(点击工具栏,编辑->打开编辑器扩展目 ...
微信小程序使用 npm 包，举例图文详解
使用 npm 包前提条件: 下载安装,配置npm环境变量,不懂得可以上网查教程,本文不再描述小程序使用 npm 包简述 1.初始化 package.json 2.勾选允许使用 npm(新版微信小程序 ...
微信小程序获取手机号 JavaScript解密示例代码详解
刚开始开发微信小程序的时候,想着实现手机验证码登入,后来查阅资料得知,发给用户的短信是要自己付费的.后来想想,微信获取用户的手机号一样可以保证手机号码的真实性,因为手机号既然可以绑定微信,那么肯定是被 ...

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

微信小程序之微信开发工具使用教程详解相关推荐

最新文章

热门文章

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

微信小程序之 微信开发工具使用教程详解相关推荐

最新文章

热门文章

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

微信小程序之微信开发工具使用教程详解相关推荐