云裂变营销网

标题: 如何使用微信开发者工具？ [打印本页]

作者: 云裂变 时间: 2018-2-13 21:33
标题: 如何使用微信开发者工具？
如何使用微信开发者工具？

作者: 云裂变 时间: 2018-2-13 21:33
   之前已经教大家如何如何下载和安装微信开发者工具，今天小七介绍如何微信开发者工具。如果想开发小程序但还没有入门的伙伴可以看看哦。

   1、登录小程序开发者工具的下载页面https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html，下载和安装微信开发者工具。

   2、双击打开微信开发者工具，用微信扫码登录，点击“确认登录”按钮登录微信开发者工具。

3、选择小程序项目，编辑和测试小程序。

4、填写小程序项目目录、AppId以及项目名称。如果还没有注册小程序，那么选择体验小程序。点击“确定”按钮来到了微信开发者工具的界面。

5、整个界面分为5个部分，工具栏、模拟器、目录树、编辑器、调试器。最上边为菜单栏、左边为模拟器、中间为目录树、右边为编辑器，最下边的为调试器。

   6、顶部菜单有项目、文件、编辑器、工具、界面、设置以及微信开发者工具。

   其中项目菜单栏那里可以新建、查看、切换、关闭微信小程序项目。

   文件菜单栏也包括了新建、保存和关闭文件。

   编辑菜单栏那里有一般编辑的功能，缩进、格式化代码、查找、替换、复制粘贴等。其中格式化代码就是把排版乱乱的代码规范化、缩进、有条理地显示代码。这个功能对编辑代码很有用。

   工具菜单栏有编译、刷新、前后台切换、上传文件等功能。

   界面菜单栏可以勾选需要显示的部分，比如工具栏、模拟器、目录树、编辑器、调试器。需要显示哪个就勾选哪个，默认是全部显示。

   设置菜单栏可以设置外观、比如浅色或深色外观，小七平时用的WebStorm使用的是深色外观，因此这里也显示深色外观。具体看个人喜欢。设置菜单栏还可以设置快捷键、代理以及项目。

   微信开发者工具菜单栏可以切换账号、还可以跳转到开发者文档和开发者论坛，切换开发模式（公众号网页调试和小程序调试）。其中的调试-编译器调试，界面上左边显示wxml代码，右边显示各个标签的样式，不过这里不能调试代码，在这里调试，模拟界面也不会改变。

7、这几个点击可以切换模拟器、编辑器和调试器的显示和隐藏状态。最后一个是切换前后台的，后台显示如图所示。

8、下面简单介绍微信小程序的目录。app.js、app.json、app.wxss是设置全局的。这几个文件必须要有。

9、首页有一下几个文件index.wxml、index.js、index.json、index.wxss。每个页面都有wxml，js，json以及wxss文件。wxml对应网页的html，wxss对应网页的css。这里设置的优先级比全局的要高。

   10、微信开发者工具的标签和网页的不同。主要有以下标签。

   （1）容器视图。view、scroll-view、swiper、movable-view、cover-view

   （2）基础内容。icon、text、rich-text、progress

   （3）表单组件。button、checkbox、form、input、label、picker、picker-view、radio、slider、switch、textarea。

   （4）导航。navigator

   （5）媒体组件。audio、image、video、camera、live-player、live-pusher。

   （6）地图。map

   （7）画布。canvas

   （8）开放能力open-data、web-view

欢迎光临云裂变营销网 (https://www.yunliebian.com/yingxiao/)