欢迎光临,了解微信小程序开发,就上易用通!

微信小程序开发初探:工具界面,调试区六大工具介绍

发布:2018-03-29 18:33浏览: 来源:网络 作者:cola

【主要内容:】

 

1. 微信小程序web开发工具下载地址

2. 创建项目

3. 开发工具界面

4. 调试区六大工具介绍

5. 我与微信小程序的插曲

6. 微信小程序总结

 

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

 

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

微信小程序开发初探:工具界面,调试区六大工具介绍(图1)

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

微信小程序开发初探:工具界面,调试区六大工具介绍(图2)

二、创建项目

 

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

微信小程序开发初探:工具界面,调试区六大工具介绍(图3)

 

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

微信小程序开发初探:工具界面,调试区六大工具介绍(图4)

 

微信小程序开发初探:工具界面,调试区六大工具介绍(图5)

 

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

微信小程序开发初探:工具界面,调试区六大工具介绍(图6)

 

 

 

三、开发工具界面介绍:

 

微信小程序开发初探:工具界面,调试区六大工具介绍(图7)


 

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

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

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

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

5. 关闭:关闭当前工程

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

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

8. 这个区域是编码区

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

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

 

 

 

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

 

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

微信小程序开发初探:工具界面,调试区六大工具介绍(图8)

 

4.1 Console

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

微信小程序开发初探:工具界面,调试区六大工具介绍(图9)

 

4.2 Sources

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

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

微信小程序开发初探:工具界面,调试区六大工具介绍(图10)

 

4.3 Network

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

微信小程序开发初探:工具界面,调试区六大工具介绍(图11)

 

4.4 Storage

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

微信小程序开发初探:工具界面,调试区六大工具介绍(图12)

 

4.5 AppData

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

微信小程序开发初探:工具界面,调试区六大工具介绍(图13)

 

4.6 Wxml

 

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

微信小程序开发初探:工具界面,调试区六大工具介绍(图14)

 

 

五、我与微信小程序的插曲

 
小程序申请成功后第一件事就是体验一下小程序到底怎么样。还有就是想看看之前微信小程序的可视化开发这个功能(事实证明是我一开始理解有误)。
因为在之前曝光的一些微信小程序的图是这个样子的:

微信小程序开发初探:工具界面,调试区六大工具介绍(图15)

 

让我和朋友误以为微信出的这个小程序类似于Xcode的Storyboard功能一样可以进行拖拽开发。申请完的第一时间我就可以找这个功能找了一下午都没有找到,最后找到一个微信小程序设计指南,在这里边我找到了之前看到过的图,原来之前看到的那些图都是一些小程序的设计规范而已,并不是我想象的那样可视化开发,让那些不会代码的人也能开发。

虽然目前的内侧版本并没有这个功能,但是不排除不就的将来微信会出类似Xcode的Storyboard这样的可视化开发功能。

 

 

 

六、微信小程序总结

微信小程序开发初探:工具界面,调试区六大工具介绍(图16)

通过这几天的接触,简单谈谈我对微信小程序的一些使用感受。首先,从技术层面讲,微信小程序开发本质上还是web开发那套技术,开发小程序的核心还是HTML5 + CSS3 + JavaScript。所以微信小程序的到来对于web程序猿来说是一个春天。因为他们可以无缝的进入到微信小程序的开发中来。

当然其他程序猿也不必慌张,微信小程序才刚出来,目前还是内测阶段对于我们来说有大把大把的时间来学HTML5相关的技术。毕竟一门语言学会了,其实语言和语言之间的思想是相同的,只是每个语言的语法不同而已。

其次,还想聊聊前端开发程序猿(iOS/Android/H5/WP.....)未来的发展方向。再往前四五年,当时大家都是100% Native开发。但是随着HTML5的发展和性能不断的改进,再加上强大的网络支持,HTML5做出来的东西非常接近原生语言开发的App,而且原生app还不具备HTML5页面的灵活性。在易到用车开发的时候HTML5的页面大概能占到所有页面的10%,而且这个比例也再不断增长。因为运营可能会经常的发布活动,如果用Native开发,那么每次活动都需要重新提交审核太麻烦了,所以HTML5的优势就体现出来了。所以像iOS或者Android开发的工程师都可以去学习web前端的开发技术,即使不为了开发小程序,也为了程序中日渐变多的HTML5页面的交互和相互调用。

未来微信小程序的开发对于中小企业的公司来说确实不错,如果对业务和性能方面要求不是很高,完全可以用微信小程序开发就可以,这样前端的开发工作只需要招一个web前端的程序猿即可。至少可以干掉iOS和Android两个程序猿。但是作为iOS和Android程序猿也没必要担心会被web前端抢了饭碗。语言都是互通的只要学习谁都可以做。而且目前只是内测微信小程序做出来的app的性能不得而知,所以目前的任务就是先学习web前端技术,以备不时之需。





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。