小程序介绍与开发环境
小程序是连接用户和服务的新方法,可以在微信内轻松获取和发布,非常棒的使用体验。 如果是普通的开发者,经过简单的学习和练习,就可以很容易地完成小程序
开发和发布。
1 .小程序和普通网页开发的区别
由于小程序的主要开发语言是JavaScript,因此小程序的开发通常用于与普通的网络开发进行比较。 两者有很大的相似性,对前端开发者来说,从网页开发转向小程序开发
虽然不高,但是两者有一点不同。
由于网页开发渲染线程和脚本线程是互斥的,因此长时间运行脚本可能会导致页面没有响应,但applet会在不同的进程中运行。 网络开发人员可以使用在各种浏览器中公开的DOM API来选择和操作DOM。 如上所述,小程序的逻辑层和渲染层是分离的,逻辑层在JSCore中运行,没有完整的浏览器对象,因此缺少相关的DOM API和BOM API。 由于这一差异,一些非常熟悉前端开发的库(如jQuery和Zepto )无法在小程序中运行。 另外,由于JSCore的环境与NodeJS环境不同,所以一些NPM的软件包在小程序中也不能工作。
1.1小程序运行的环境
运行环境逻辑层渲染层
IOs Javascript核心万维网视图
Androidx5jscorex5浏览器
小程序开发者工具NWJS Chrome WebView
1.2小程序的特色
如果是娇弱的蜡烛,小程序只需要送到APP应用程序手中,扫描、搜索、和朋友分享二维码,就可以立即打开。 结合优异的体验,小程序将提高服务提供商的触摸能力。
2 .小应用程序代码配置小应用程序由配置代码JSON文件、模板代码WXML文件、样式代码WXSS文件、逻辑代码JavaScript文件构成。
2.1 JSON
2.1.1 JSON配置SON是数据格式,不是编程语言。 在小程序中,JSON扮演静态配置的角色。
2.1.2 JSON语法
与XML相比,JSON格式最大的优点是人容易阅读和书写。 通常是一种不需要特殊工具,可读、可修改、轻量的数据交换格式。
JSON文件放在大括号中,用key-value格式表示数据。
JSON的Key必须用双引号引起来。 实际上,写JSON时,忘记在Key值上加双引号,或者在单引号上写双引号是常见的错误。
Jon的值仅限于以下数据格式。
包含浮点数和整数的数字
字符串。 必须用双引号引起来
布尔值、真或假数组。 需要方括号中的[]对象,需要花括号中的{}Null
其他格式(如JavaScript的undefined )会导致错误。
2.3 WXSS 样式
wxss (weixin样式表)是描述WXML组件样式或视觉效果的小程序的样式语言。WXSS类似于Web开发中的CSS。 为了适合小程序的开发,WXSS对CSS进行了一些补充和修改。
2.3.1尺寸的单位
WXSS引入了响应像素(rpx )大小的单位。 引用新尺寸单位的目的是适合不同宽度的屏幕,使开发变得容易。
在同一元素、不同宽度的屏幕下,如果使用px作为大小单位,页面可能会变得太空,如图2-9所示。
修改为rpx尺寸的单位
2.3.2 wxss的部署
由于WXSS最终被编译并打包为目标文件,因此用户只需要下载一次,在使用中不会因样式引用而产生额外的文件请求。
2.4 JavaScript 脚本
小程序的主要开发语言是JavaScript,开发者使用JavaScript开发业务逻辑,调用小程序的API满足业务需求。
小程序的JavaScript由ECMAScript、小程序框架和小程序API实现。 浏览器中的JavaScript
相比没有 BOM 以及 DOM 对象,所以类似 JQuery、Zepto这种浏览器类库是无法在小程序中运行起来的,同样的缺少 Native 模块和NPM包管理的机制,小程序中无法加载原生库,也无法直接使用大部分的 NPM 包。2.4.1 小程序的执行环境
明白了小程序中的 JavaScript 同浏览器以及NodeJS有所不同后,开发者还需要注意到另外一个问题,不同的平台的小程序的脚本执行环境也是有所区别的。
小程序目前可以运行在三大平台:
iOS平台,包括iOS9、iOS10、iOS11Android平台小程序IDE
这种区别主要是体现三大平台实现的 ECMAScript 的标准有所不同。
目前开发者大部分使用的是 ECMAScript 5 和 ECMAScript 6 的标准,但是在小程序中, iOS9和iOS10 所使用的运行环境并没有完全的兼容到 ECMAScript 6 标准,一些 ECMAScript 6 中规定的语法和关键字是没有的或者同标准是有所不同的。
例如:
箭头函数
let
const
模板字符串
…
小程序IDE提供语法转码工具帮助开发者,将 ECMAScript 6代码转为 ECMAScript 5代码,从而在所有的环境都能得到很好的执行。
开发者需要在项目设置中,勾选 ES6 转 ES5 开启此功能。
2.4.2 模块化
浏览器中,所有 JavaScript 是在运行在同一个作用域下的,定义的参数或者方法可以被后续加载的脚本访问或者改写。同浏览器不同,小程序中可以将任何一个JavaScript 文件作为一个模块,通过module.exports 或者 exports 对外暴露接口。