码迷,mamicode.com
首页 > 微信 > 详细

微信小程序开发初探

时间:2016-11-08 23:31:56      阅读:649      评论:0      收藏:0      [点我收藏+]

标签:版本   公司   ado   相关   链接   ros   android开发   down   jquer   

【主要内容:】


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

2. 创建项目

3. 开发工具界面

4. 调试区六大工具介绍

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

6. 微信小程序总结


一、微信小程序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的属性。

技术分享


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


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


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

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



六、微信小程序总结

技术分享
通过这几天的接触,简单谈谈我对微信小程序的一些使用感受。首先,从技术层面讲,微信小程序开发本质上还是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前端技术,以备不时之需。

想学web前端开发技术,请点击这个链接:微信小程序web前端技术开发视频教程,这里有web前端开发需要的所有技术。这套视频教程讲解的非常全面,涵盖所有的web前端技术:HTML5 + CSS3 + JavaScript + DOM + JQuery + Ajax + Angular.JS + RESTful + Node.JS +项目实战。


  欢迎大家关注“芒果iOS”微信公众账号,芒果会经常为大家分享好的技术文章:


技术分享

微信小程序开发初探

标签:版本   公司   ado   相关   链接   ros   android开发   down   jquer   

原文地址:http://blog.csdn.net/crazyzhang1990/article/details/53080775

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!