搜外七街

【正规SEO排名技术】排名上了再付款 广告位招租 286693021 【霸屏系统咨询】294781937
-->
搜外七街 微信推广 小程序 小七教你如何使用微信开发者工具?
搜外会员 小七微信:seowhy07,欢迎骚扰。

小七教你如何使用微信开发者工具?

小程序 2018-02-07      查看: 2151
小七 加我微信:seowhy07,一对一及时回答您的问题,免费领取小程序最新资料。

2018-02-07

小七教你如何使用微信开发者工具?

      之前小七已经教大家如何如何下载和安装微信开发者工具,今天小七介绍如何微信开发者工具。如果想开发小程序但还没有入门的伙伴可以看看哦。

      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

      今天小七对微信开发者工具的使用就介绍到这里,如果有疑问,可以加小七的微信 seowhy07 咨询。
小七为您推荐:
编辑者
小七
发表评论

最新评论

引用 wangado 2018-3-26 16:24
多研究这个有什么用啊
引用 搜了个外小 2018-2-26 14:57
对于我们这种对代码不了解的有点难了。
引用 zhaoyan 2018-2-22 13:22
谢谢分享
引用 laixibuther 2018-2-22 11:38
说得很不错
引用 艺东 2018-2-21 21:19
谢谢分享,洋溪信息港:http://www.16qiang.com/
引用 睡不醒的觉 2018-2-17 12:32
2018年小程序牛呀
引用 tglhmily 2018-2-15 23:36
http://www.1wjt.com/miaozhunjingzixun/谢谢分享
引用 火之雪 2018-2-14 20:53
我确实想学习下
引用 weichenlin 2018-2-11 12:35
这个东西恐怕不简单哟。。。
引用 weichenlin 2018-2-9 20:07
看着好像挺简单的。。。
引用 小李子 2018-2-8 18:03
看上去有点复杂,不过还是可以
引用 suya1215 2018-2-8 16:23
学习。
引用 xiaoxiao868 2018-2-8 12:40
<a href="http://www.rzypgw.com" target="_blank">个股期权</a>
<a href="http://www.rzypgw.com" target="_blank">股票期权</a>
引用 xiguasoft 2018-2-8 11:04
也不知道这学习难不难哟?看上去有点难啊
引用 mugong 2018-2-8 11:00
讲的特别详细,又让我学到了许多的东西!
谷歌卫星地图 www.gugeditu.net
引用 qwe251063270 2018-2-7 20:42
谢谢分享

查看全部评论(16)