微信小程序开发者工具详解

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

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

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

二、创建项目

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

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

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

三、开发工具界面介绍：

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

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

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

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

5. 关闭：关闭当前工程

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

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

8. 这个区域是编码区

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

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

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

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

4.1 Console

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

4.2 Sources

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

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

4.3 Network

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

4.4 Storage

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

4.5 AppData

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

4.6 Wxml

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

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

微信小程序开发者工具详解相关推荐

微信小程序开发者工具怎么使用Less、Sass
微信小程序开发者工具怎么使用Less.Sass 前言一.Sass使用第一步按需导入如何设置Sass 应用 Less使用前言在微信小程序开发者工具中编写wxss样式表是不是感觉很麻烦,不要困 ...
wanlshop小程序商城配置UNIAPP商城 B2B2C多用户多终端微信小程序开发者工具] - initialize
小程序商城配置 https://doc.fastadmin.net/wanlshop/268.html 安装宝塔安装fastadmin 登录fastadmin后台安装所有插件宝塔配置域名服务多商 ...
php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
小程序向Java传值,微信小程序页面传值详解
微信小程序页面传值详解一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如这里将good_id=16 参数传入detail页面, 然后detail页面的 ...
微信小程序开发者工具的使用
微信小程序开发者工具的使用:登录自己的微信小程序页面,找到工具,下载微信开发者工具.下载好后,扫码登录自己的小程序.在登录的过程中,需要输入自己的小程序的appid.登录好之后就会显示这样的一个页面. ...
微信开发者工具无法选择预览和真机调试_小程序开发第二篇：使用微信小程序开发者工具、wepy框架初始化项目...
1.微信小程序开发者工具使用: 小程序原生开发:直接使用小程序开发者工具打开项目即可小程序框架开发:首选官方提供类vue.js开发框架 wepy.js ,备选 mpVue.我们选择的是 wepy ...
微信小程序开发者工具真机调试和预览连接本地服务器
微信小程序开发者工具真机调试连接本地服务器网上参考了很多方法只有这个方法能解决本地服务器在微信开发者工具预览或者真机调试的连接,话不多说看图. 第一步 win+R,CMD输入ipconfig查看本地 ...
微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...
微信小程序底部菜单详解
微信小程序底部菜单详解只需要在app.json里面修改配置,即可 {"pages":["pages/index/index","pages/logs ...
【HbuilderX+微信小程序开发者工具解决报错问题】
第2节 uni-app的环境搭建并创建项目运行正确的配置运行终端获取小程序appid的方法微信小程序的配置错误导致的问题问题描述问题原因解决方法![在这里插入图片描述](https://i ...

微信小程序开发者工具详解

微信小程序开发者工具详解相关推荐

最新文章

热门文章