当前位置:首页 > 开发工具 > 微信Web开发者工具详解

微信Web开发者工具详解

2022年09月17日 11:32:17开发工具10

一、微信小程序web开发工具下载地址

 

1.1 在微信公众平台-小程序里边去下载开发工具下载地址

微信Web开发者工具详解 _ JavaClub全栈架构师技术笔记

1.2 下载后安装一下就可以使用了:

微信Web开发者工具详解 _ JavaClub全栈架构师技术笔记

二、创建项目

 

2.1 微信小程序web开发工具需要扫码登陆,所以必须先绑定开发者才可以:

微信Web开发者工具详解 _ JavaClub全栈架构师技术笔记

 

2.2 已经绑定的开发者可以创建项目,需要填写AppID、项目名称、本地开发目录。

微信Web开发者工具详解 _ JavaClub全栈架构师技术笔记

 

微信Web开发者工具详解 _ JavaClub全栈架构师技术笔记

 

AppID需要去设置里边获取,如果不填的话官方给的提示是部分功能受限:

微信Web开发者工具详解 _ JavaClub全栈架构师技术笔记

 

 

 

三、开发工具界面介绍:

 

微信Web开发者工具详解 _ JavaClub全栈架构师技术笔记

 

 

1. 编辑:开发的时候,需要到编辑区去写代码 

2. 调试:开发完需要调试程序的时候需要切换到这个区域,调试区有很多工具可供使用。

3. 项目:在这里可以上传或者预览项目

4. 编译:就相当于运行项目的意思

5. 关闭:关闭当前工程

6. 微信小程序web开发工具提供实时预览的功能,界面的效果会在这个区域显示

7. 这个区域可以看到整个项目的文档目录结构

8. 这个区域是编码区

9. 这里是选择屏幕尺寸的地方

10. 模拟网络环境:2G/3G/4G/WiFi

 

 

 

四、调试区六大工具介绍:

 

在调试区开发工具提供了6种调试模式:

微信Web开发者工具详解 _ JavaClub全栈架构师技术笔记

 

4.1 Console

Console的意思是控制台,做过开发的都知道几乎每个IDE都会有控制台,可以显示错误信息和打印变量的信息等。

微信Web开发者工具详解 _ JavaClub全栈架构师技术笔记

 

4.2 Sources

Sources显示了当前项目的所有脚本文件,微信小程序框架会对这些脚本文件进行编译。

Source下边还有一个区域,做过软件开发的都知道,一般下边是控制台会显示一些log信息、断电调试等等。

微信Web开发者工具详解 _ JavaClub全栈架构师技术笔记

 

4.3 Network

Network顾名思义:这个区域显示的是与网络相关的信息,我这里暂时没有进行网络请求。

微信Web开发者工具详解 _ JavaClub全栈架构师技术笔记

 

4.4 Storage

官方的解释是显示当前项目的使用wx.setStorage或者wx.setStorageSync后的数据存储情况。这个后续用到再慢慢研究

微信Web开发者工具详解 _ JavaClub全栈架构师技术笔记

 

4.5 AppData

AppData是显示当前项目显示的具体数据,可以在这里编译,并且会在页面实时显示。

微信Web开发者工具详解 _ JavaClub全栈架构师技术笔记

 

4.6 Wxml

 

Wxml调试区:把他的名字换一下的话大家就好理解了,其实他的实质就是HTML+CSS,微信只是把HTML改成了Wxml而已。学过HTML的人一看就明白,左侧的区域是HTML语言+CSS的一些标签属性。右侧可以便捷的设置CSS的属性。

微信Web开发者工具详解 _ JavaClub全栈架构师技术笔记

 

 

转自:http://lib.csdn.NET/article/5/52864?knId=1796#focustext

作者:rememberyf
来源链接:https://blog.csdn.net/rememberyf/article/details/90486797

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/tool/42409.html

标签: 开发工具
分享给朋友:

“微信Web开发者工具详解” 的相关文章

HTML开发工具的安装与使用(HbuilderX)

HTML开发工具的安装与使用(HbuilderX)

HTML开发工具的安装与使用(HbuilderX) 文章目录 HTML开发工具的安装与使用(HbuilderX) 一. 软件下载 二. 工具结构 三. 创...

谷粒商城--从入门到入坟(持续更新)第四篇:开发工具、环境安装配置

谷粒商城--从入门到入坟(持续更新)第四篇:开发工具、环境安装配置

需要安装idea、vscode、jdk、maven、git 一,jdk与maven jdk8及以上,maven3.6左右 maven换为阿里云的镜像 在maven文件->config->setting.xml中 <...

Java基础---Java 开发工具IntelliJ IDEA 安装

Java基础---Java 开发工具IntelliJ IDEA 安装

1.1 开发工具概述IDEA是一个专门针对Java的集成开发工具(IDE),由Java语言编写。所以,需要有JRE运行环境并配置好环境变量。它可以极大地提升我们的开发效率。可以自动编译,检查错误。在公司中,使用的就是IDEA进行开发。 1.2 IDEA 软件安装此软件集成了32位...

开发工具合集专题《开发工具,IAR工具安装步骤记录》

开发工具合集专题《开发工具,IAR工具安装步骤记录》

目录 软件安装 软件激活(IARkg_Unis) 软件版本:IAR EW for 8051 10.10.1 IAR EW for 8051 官方下载(建议下载与本教程相同的版本):点击进入 软件安装 ​​...

visual studio 2019 工具里添加开发中命令提示符

visual studio 2019 工具里添加开发中命令提示符

→_→→_→觉得有帮助,点个赞吧 最新新装了visual studio 2019,发现默认的没有开发者命令提示符 现将添加步骤描述如下: 从VS2019菜单选择“Tools”,然后选择“外部工具”。输入如下: 标题:Visual Studio 命令...

windows GoLang

开发软件 Go 安装包 https://studygolang.com/dl GoLang开发工具 http://www.jetbrains.com/go/   Go安装包是go开发环境,类似java平台的jdk,但go语言编译的可执行程序不需依赖go...

小米路由器安装MT工具箱(图文教程)

小米路由器安装MT工具箱(图文教程)

小米路由器安装MT工具箱(图文教程) 前几天某鱼50元入手了一台小米路由器R3。成色还不错,暂时用不上,想了想不如拿起来折腾吧。于是。。。。。 于是我默默安装了个MT工具箱,然后某鱼99元转手卖了出去,去掉8元邮费,赚了41元。看来我很有当奸商的天赋。...

微软最新的 Web 开发工具WebMatrix的简单介绍及安装

微软最新的 Web 开发工具WebMatrix的简单介绍及安装

今天很给力,微软Asp.Net团队同时发布了WebMatrix,Razor,MVC3以及Orchard四个产品,其中WebMatrix 是微软最新的 Web 开发工具,它包含了构建网站所需要的一切元素。您可以从开源 Web 项目或者内置的 Web 模板开始,也可以直接从无到有编写代码。...

Vue开发工具vuejs-devtools超级详细安装教程以及常见问题解决

Vue开发工具vuejs-devtools超级详细安装教程以及常见问题解决

这绝对是最详细的Vue开发工具vuejs-devtools安装教程,相信你只需要5分钟即可解决所有问题 所需的所有文件,链接:https://pan.baidu.com/s/19GWDS_7GodIdFBUO0eTDAg 提取码:2yvc 一...

【Xilinx FPGA】vivado工具下载安装

【Xilinx FPGA】vivado工具下载安装

目录 1. 下载 2. 安装 3. 许可 1. 下载 1. 进入xilinx的中文官网,找到产品下面的硬件开发工具,选择Vivado Design Suite。 2. 选择windows版本进行下载,可以下载最新版本或者之前的版...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。