哈哈,碰到同道了,幸会 !
这种专业问题,恐怕能给你靠谱回答的不多。
我至所以解答,有几个方面的原因:其一是我的编程水平不咋的,你想如果我是腾讯公司的大牛,拿着百万年薪,我会有耐心答复你吗?其二是我曾经也有你这种想法,并自编过简单实用的微信小程序,对你现在的处境感同身受。其三呢,是我刚刚申请了生活领域创作者,需要4个优质回答,这任务太难了,真的。于是我就看上你了。
废话少说,还是回到你的问题上来吧。依我看,你大可以先定一个小任务,试着去完成,然后根据任务的完成情况,决定是否应当继续做下去。
如果你的任务做起来得心应手,且一直保持着浓厚的兴趣,那么你应当是具有这方面天赋的可造之才,恭喜你。假以时日,你定为让人刮目相看。
如果做了很久还是觉得云里雾里,且发现越往前走越需要海量知识储备,有一种力不从心的感觉,那还是算了吧。微信小程序涉及的知识范围实在是太广泛了,结构编程、前端开发、后端架构、网络安全、漏洞防范等等都得熟悉,非专业人员单打独斗是很难搞出什么大动静来的。
当然,一定要先试试,不然对不起自己的想法。
那么,怎么入手呢?
首先,自然是在电脑里安装微信开发者工具,目前的最新版本是1.02.091180。
安装后运行,出现登陆界面,用微信扫码登陆,就进入了小程序开发页面。
为了不至于手忙脚乱,开发前,最好去淘宝、京东等网店购买一些开发方面的图书,如“微信小程序项目开发实战”,“微信开发深度解析”等。不知你的基础咋样, HTML、CSS、JavaScript这些知识必备书可视情况选购。
当然,如果你不怕麻烦,也可以通过网络来学习相关知识,这样可以省下购书支出。微信开发者工具里有个“帮助”菜单,在其中点击“开发者社区”,可打开浏览器进入“微信开放社区”页面,内有大量资料可供参考、学习和指导。
从小程序开发的文件目录树可以看出,小程序根目录下,有三个app开头的文件、project.config.json文件和两个文件目录pages、utils,utils文件下存放工具类文件,根目录下的四个文件是对小程序全局的设置。
小程序的每一个页面,都有一个对应的文件夹。如上图所示的程序有两个页面,index 和 logs ,它们都在 pages 目录下,每个小程序页面都由同名不同后缀的4个文件组成,如:index.js、index.wxml、index.wxss、index.json。其中.js是脚本文件,.json是配置文件,.wxss是样式表文件,.wxml是页面结构文件。
如果接着说下去,得编本书才行,就此打住吧!你可以拿一个样本程序,试着进行加工改造,很快就会明白其中的奥妙。
顺带说一下,我只编了一个微信小程序,用于信用卡还款提示。该程序可根据当前时间判定最近信用卡还款日期和金额,提醒主人不要逾期,为月光族和卡奴打造良好征信提供可靠保证。当然,对记忆力好的人来说,纯属多此一举。
在我推出体验版时,我老婆曾经拿眼睛瞪我,很不屑一顾的样子。其实,她哪里知道,男人的爱好,除了吸烟、喝酒、打游戏外,还有一种较为变态的,叫玩代码!
HTML英文全称为Hyper Text Markup Language,即超文本标记语言,H5是一种技术,依附的外壳是是浏览器,而小程序是基于微信的一种不需要下载安装即可使用的应用。
从“前端开发”的视角来看,微信小程序和HTML5也存在着多方面的不同。概括来说有以下四个方面的区别!
第一条是运行环境的不同传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览器,大家注意,我这里写的是“非完整的浏览器”,有以下几个原因
小程序的开发过程中会用到html5相关的技术(并非全部)
小程序最后的发布上线需要微信审核,微信在不更新自身软件的情况下可以将小程序更新到自身软件内,这就联想到了ReactNative框架,并且已经有开发者在微信小程序的开发工具源码中发现使用了react和NodeWebkit库
官方文档中着重强调了脚本内是无法使用浏览器中常用的window对象和document对象(基于这一点,像zepto/jQuery这种操作dom的库就被完全抛弃了)
所以我个人认为,小程序的运行环境很有可能是微信开发团队基于浏览器内核完全重构的一个内置解析器,针对小程序专门做了优化,配合自己定义的开发语言标准,提升了小程序的性能。
不过由于微信给开发者提供了开发工具,而开发工具中也内置了编程、调试、开发环境、发布于一身,我们也不用再探讨它的最终运行环境了,只要按照官方文档进行开发就可以了。并且从微信团队给开发者提供开发工具这一举动,让我联想到了苹果给开发者提供的X-CODE开发工具,可以想象微信的“野心”可见一斑
第二条是开发成本的不同这里我提出了一个问题,当我们面对一个Html5web开发需求时,我们需要考虑什么呢?
抛去开发工具(vscode、sublimtext、Atom等)不谈,大到前端框架(Angular、react、vue、backbone等)、模块管理工具(Webpack 、Browserify 等)、任务管理工具(Grunt、Gulp等),小到UI库选择、接口调用工具(ajax、Fetch Api等)、浏览器兼容性等都要我们一一考略,再不济用jqery插件写H5,也要在开发过程中去寻找合适的jquery插件来配合项目。
尽管这些工具可定制化非常高,并且提高了开发者的开发效率,但我相信项目开发的配置工作已经消耗了不少精力,尽管大部分开发者都有自己的配置模板,但长久以来对于项目中使用的各种外部库的版本迭代、版本升级所产生的成本应该也不低。
而当我们面对一个微信小程序的开发需求时,我们需要考虑什么呢?微信团队提供了开发者工具,并且规范了开发标准,前端常见的HTML、CSS变成了微信自定义的WXML、WXSS,WXML中尽管全部是自定义标签,但官方文档中都有明确的使用介绍,相信上手应该是非常容易的;WXSS、JSON和js文件中的写法稍有限制,但整体相差不多。在统一了这些标准之后,作为一个开发者,你会发现,自己只要专注写程序就可以了:
当需要调用后端接口时,调用发起请求API
当需要上传下载时,调用上传下载API
当需要数据缓存时,调用本地存储API
引入地图、使用罗盘、调用支付、调用扫码等等功能都可以直接使用
UI库方面,框架自然带有自家weui库加成
并且在使用这些API时,你不用再去顾虑浏览器兼容性,不用担心生产环境中出现不可预料的奇妙BUG,可见微信小程序的开发成本确实相比以往的web开发低很多。
第三条是获取系统级权限的不同微信小程序相对于HTML5 web应用能获得更多的系统权限,比如网络通信状态、数据缓存能力等,这些系统级权限都可以和微信小程序无缝衔接,也就是官方宣称的拥有Native App的流畅性能,而这一点恰巧是HTML5 web应用经常被诟病的地方,这也是HTML5的大多应用场景被定位在业务逻辑简单、功能单一的原因。
第四条便是应用在生产环境的运行流畅度最容易区分小程序与H5的一点, 打开H5,实际上是打开一个网页,而网页需要在浏览器中渲染,面对复杂的业务逻辑或者丰富的页面交互时页面会卡顿。
而微信小程序,直接在微信上运行,省去了通过浏览器渲染的步骤,因此,在微信中使用小程序,才会比H5流畅很多。除了首次打开需要几秒的加载时间外,小程序各个页面的切换、跳转等体验已经媲美原生App,非常顺畅。
小程序不能跳转外部链接,H5没有限制。
概括来说、小程序相对H5有着开发成本低、功能更丰富、用户体验更佳的优点。(缺点:微信做了很多限制,很多东西不能自定义)
以上就是我总结的微信小程序跟HTML5的区别。微信现在月活9亿,特别是微信推出大众号今后,微信的月活也大幅上升,这就为微信小程序带了十分便利的入口。以9亿为基数,奠定了微信小程序的根底。
微信小程序不是HTML5,它是根据微信的独立的开发模式,能过节约人们的开发本钱与开发周期。当然,现在小程序也不能彻底替代APP,今后的发展怎么样,欢迎持续关注千锋武汉吧!