大连哪里做网站好,wordpress用户登录教程,seo网站建设哪家专业,网站icp是什么意思微信小程序原生开发详解 微信小程序的更新迭代非常频繁#xff0c;几乎每个月都会有新版本发布#xff0c;这就会让初学者感觉到学习的压力和难度。其实#xff0c;我们小程序的每次版本迭代都是在现有小程序架构基础之上进行更新的#xff0c;如果想要学好小程序开发技术几乎每个月都会有新版本发布这就会让初学者感觉到学习的压力和难度。其实我们小程序的每次版本迭代都是在现有小程序架构基础之上进行更新的如果想要学好小程序开发技术打牢基础是必不可少的学习环节。本章就对小程序的基础架构进行详细地讲解。熟练掌握本章的小程序框架基础知识对后面学习小程序开发至关重要。 1 小程序代码组成
1.1 小程序与传统前端开发
小程序开发与传统的前端开发有着很大的区别不管什么类型的前端技术都是由以下三种技术组成
静态标签文件HTML静态标签决定了前端页面的基本骨架是如何构成的样式文件CSS样式文件可以让前端的页面凸显自身的美术风格动态脚本文件JavaScript动态脚本可以让前端页面与用户进行交互。
静态标签组成了前端的骨架让渲染工具明白前端是由哪些标签组成的。但是原始的静态标签是没有样式的并不具备很强的观赏性如果想要让前端产品更加美观并且具有独特的美术风格那么就需要使用到样式文件。样式文件主要由不同类型的选择器组成开发人员可以将样式通过不同范围的选择器添加到页面的UI组件上。如果只是静态标签和样式是无法让一个前端页面动起来的例如用户点击页面中的一个按钮需要弹出一个提示框这就需要使用到动态脚本动态脚本决定了前端页面如何与用户进行交互例如弹窗的时机、广告图片的滚动速度以及向后端请求数据等这些都是由动态脚本来实现的。
小程序虽然与传统的前端开发有所区别但是也脱离不了前端的固定模式。小程序拥有四种文件类型分别是
wxml文件类似于传统前端的HTML文件用于静态标签的编写wxss文件与传统前端的CSS文件功能类似用于页面样式的编写js文件与传统前端的JavaScript脚本功能类似用于页面交互逻辑的编写json文件在传统前端页面开发中没有json文件小程序的json文件主要用于页面配置如页面标题、颜色、样式的配置等。
新建一个小程序就会默认创建index和logs模块每个模块都以单独的文件夹形式保存。页面文件在微信开发者工具中的效果如图1所示。 图1 首页下的四种文件
除了页面文件对应的模块文件夹之外小程序还支持将一些工具型js独立保存通过导入的方式为模块提供功能支持例如新建小程序中自动创建的utils效果如图2所示。 图2 utils模块
所有的全局文件都以app命名开头全局文件内部声明的资源可以作用到所有模块中效果如图3所示。 图3 小程序应用的全局文件
在过去开发人员所积累的前端开发经验其实有很大一部分可以继续应用在小程序的开发上例如小程序和普通网页都需要书写静态标签页面。小程序的样式和普通网页基本相同而且小程序和普通网页都遵循了JavaScript的ES6标准很多语法在两个平台都可以一起使用例如模块的导入导出、箭头函数等。
但是小程序和传统网页开发毕竟还是两种不同的技术二者之间还是有些许的区别。在普通网页中渲染线程和脚本线程是互斥的而在小程序中二者不是互斥的。普通网页可以操作DOM和BOM对象但是小程序的逻辑层运行在JSCore中无法操作DOM和BOM对象所以小程序在使用JS选择UI时就没有父节点、子节点、ID选择器这些概念了。网页开发者需要面对的环境是各式各样的浏览器在PC端需要面对IE、Chrome、QQ浏览器等在移动端也需要面对各个系统中的WebView而小程序开发过程中主要面对的是IOS和Android的微信客户端。目前小程序也支持在微信的PC客户端上运行所以在开发过程中也需要考虑Windows或Mac环境的UI适配以及代码兼容性的问题。
1.2 WXML模板
WXMLWeiXin Markup Language是小程序框架设计的一套标签语言结合小程序的基础组件、事件系统可以构建出页面的结构。虽然在书写方式上WXML和HTML有很多相似之处但是二者之间的语法结构又有很大的区别WXML仅能在微信小程序开发工具中预览而HTML可以在浏览器内预览。传统的HTML标签在WXML中是无法之间使用的WXML对组件进行了重新封装为后续的性能优化提供了可能同时避免开发者写出低质量的代码。
WXML文件以 .wxml 作为后缀一个完整的 WXML 语句由一段开始标签和结束标签组成在标签中可以是内容也可以是其他的WXML语句这一点上与HTML是一致的。WXML基本语法如例1所示。
【例1】WXML基本语法
!--pages/wxml/index.wxml--
textpages/wxml/index.wxml/textWXML的语法校验是非常严格的要求标签必须是严格闭合的没有闭合将会导致编译错误。
1.3 WXSS样式
WXSSWeiXin Style Sheets是一套用于小程序的样式语言用于描述WXML的组件样式提升视觉上的效果。WXSS与传统前端开发中的CSS类似为了更适合小程序开发WXSS对CSS做了一个补充和扩展例如尺寸单位、样式导入等。
在WXSS中使用rpxresponsive pixel作为尺寸单位可以根据屏幕宽度进行自适应。小程序中的rpx与传统CSS尺寸单位的px是以 1rpx 0.5px 进行的换算。
1.4 JS脚本
小程序的主要开发语言是JavaScript开发者使用JavaScript开发业务逻辑以及调用小程序的API以此来完成业务需求。在大部分开发者看来JavaScript和ECMAScript是指同一回事但是从严格意义上来讲二者之间的意义是完全不同的。ECMAScript是由ECMA国际组织通过ECMA-262标准化的脚本程序设计语言该标准规定了ECMAScript主要包括脚本语法、数据类型、语句、关键字、操作符以及对象等基本的编程语言规范而JavaScript是ECMAScript的一种具体实现。理解了这些概念有助于开发者理解小程序中的JavaScript同浏览器的JavaScript以及Node中的JavaScript之间的区别。
浏览器中的JavaScript是由BOM浏览器对象模型全称 Browser Object Model、DOM文档对象模型全称 Document Object Model以及ECMAScript组成的对于Web前端开发者来说应该非常熟悉BOM和DOM这两个对象模型它使得开发者可以去操作浏览器的一些表现比如修改URL、修改页面呈现、记录数据等等。
Node中的JavaScript是由NPM、Native模块以及ECMAScript组成的Node的开发者非常熟悉NPM的包管理工具通过各种扩展包来快速实现一些功能同时通过使用一些原生的模块来赋予Node语言本身不具有的能力例如FS、HTTP、OS等。
小程序的JavaScript是由ECMAScript以及小程序的框架和API来实现的与浏览器中的JavaScript相比没有BOM和DOM对象所以类似于jQuery、Zepto这种浏览器类库是无法在小程序中运行起来的同样的缺少Native模块和NPM包管理的机制。所以这就导致小程序中无法加载原生库也无法直接使用大部分的NPM依赖包。
1.5 JSON配置
JSONJS对象简谱全称 JavaScript Object Notation是一种轻量级的数据交换格式是基于ECMAScript的一个子集采用完全独立于编程语言的文本格式来存储和表示数据。JSON的语法易于阅读和编写同时也易于程序解析和生成是一种理想的网络传输格式也可以作为项目的配置文件。由此可见JSON仅是一种数据格式而非编程语言在小程序中也作为一种重要的配置文件而存在。
JOSN文件作为小程序中的静态配置文件在小程序运行之前就决定了小程序的一些表现需要注意的是小程序无法在运行过程中去动态更新JSON配置如果JSON配置文件的内容发生了更改需要重新编译当前的项目才能生效。
2 小程序宿主环境
2.1 小程序的渲染机制
小程序是基于双线程模型的包括渲染层和逻辑层。在这个模型中小程序的渲染层和逻辑层是分开在不同的线程中运行的这与传统的Web单线程模型有很大的区别。小程序渲染层的界面使用了WebView 进行渲染逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面所以渲染层存在多个WebView线程这两个线程的通信会经由微信客户端做中转逻辑层发送网络请求也经由Native转发小程序的通信模型如图4所示。 图4 渲染层和逻辑层通信模型
在小程序的开发中开发者对小程序最大的期望就是当用户点击某个小程序时可以让小程序在最短的时间内加载完毕小程序的界面。由于小程序的宿主是微信所以我们不太可能用纯客户端原生技术来编写小程序因此我们需要像Web技术那样有一份随时可更新的资源包放在云端通过下载到本地动态执行后即可渲染出界面。
我们了解过模型背后的原理下面再来看一下小程序是如何把脚本中的数据渲染到界面上的。小程序的WXML模板使用view标签其子节点用“{{}}”的语法绑定一个msg的变量如例2所示。
【例2】渲染WXML代码
view{{ msg }}/view在JS脚本中使用 this.setData() 方法把msg字段设置为“Hello World”如例3所示。
【例3】用于渲染的JS脚本
Page({data: {msg:
},onLoad: function () {this.setData({ msg: Hello World })}
})上面的例子中WXML页面通过模板语法的方式绑定了JS脚本的msg变量当msg变量被修改后页面展示的内容也会自动发生改变。在UI界面开发过程中程序需要维护很多变量状态同时还需要操作变量所对应的UI元素。但是随着界面的结构越来越复杂程序需要维护的变量也随之增加同时还要处理更多界面上的交互事件整个程序就变得特别地复杂。如果使用某种方法将变量的状态和UI视图绑定在一起当状态变更时视图也会自动变更那么开发者就可以省去编写修改视图的代码提高开发效率。这种方法就是“数据驱动”。
小程序数据驱动的原理就是通过JS对象来表达DOM树的结构而这棵DOM树实际上就是WXML的结构。WXML可以先转换成JS对象然后再渲染出真正的DOM树例2与例3的转换效果如图5所示。 图5 WXML结构转换示例图
假如我们把msg变量的值从“Hello World”改为“Hi”这个过程必须通过调用 this.setData() 方法来完成其产生的JS对象所对应的节点发生了变化此时DOM树也会随之更改从而达到更新UI界面的目的这就是小程序“数据驱动”的原理。
通过上述讲解我们理解了小程序的渲染层和逻辑层为什么是分开的而且在渲染层中小程序的宿主环境会把WXML转换成JS对象而JS脚本是运行在逻辑层的。当逻辑层的数据发生变化时通过 this.setData() 方法把数据从逻辑层再传递到渲染层经过对比前后的差异把更改后的数据应用在原来的DOM树上以此实现UI界面的渲染这就是小程序的渲染机制。
2.2 程序与页面
小程序的运行环境被分为了渲染层和逻辑层渲染层主要是用于渲染页面视图而逻辑层主要负责处理业务逻辑这就要求我们必须要分清楚小程序中的程序与页面。站在逻辑组成的角度来说一个小程序是由多个页面组成的程序那么我们又要分清楚“小程序”和“程序”的概念。
我们常说的“小程序”其实指的是一个应用这个应用是从产品的层面上来理解的一个小程序就是一个软件应用的产品。而我们在本小节中所讲的“程序”是指在小程序应用内部的代码层面的程序实例。小程序的宿主环境提供了 App() 函数作为程序的构造方法以此来注册一个程序的 App 对象所以在本小节中我们就以 App 作为代码层面的“程序”。
构造方法 App() 需要声明在小程序项目的根目录下的 app.js 文件中App 实例也是一个单例对象其构造方法接收一个 Object 对象参数参数对象中可以声明小程序全局生命周期函数代码如例4所示。
【例4】全局生命周期方法
App({onLaunch: function(options) {}, // 小程序初始化完成时触发并且只触发一次onShow: function(options) {}, // 小程序启动或切回前台显示时触发onHide: function() {}, // 小程序切到后台时触发onError: function(error) {} // 小程序发生脚本错误或API调用失败时触发
})在其他的 JS 脚本中需要使用 getApp() 方法来获取 App 的实例具体方法如例5所示。
【例5】获取 App 实例
var app getApp()我们都知道一个小程序有很多页面组成每个页面都是有界面、配置、逻辑三部分构成这些页面的业务逻辑都需要编写到当前页面文件夹下的 page.js 文件中。宿主环境也提供了一个构造方法 Page() 来实现注册小程序页面Page() 在页面脚本 page.js 中调用。与 App() 相同Page() 方法也是要接收一个 Object 对象参数参数对象的属性中除了要声明页面的生命周期方法之外还可以声明事件方法和页面的初始化数据data 属性代码如例6所示。
【例6】页面构造方法 Page()
Page({data: { }, // 页面的初始化数据onLoad: function(options) { }, // 页面被加载时触发onReady: function() { }, // 页面初次渲染完成后触发onShow: function() { }, // 页面切回前台显示时触发onHide: function() { }, // 页面切到后台隐藏时触发onUnload: function() { }, // 页面被卸载时触发onPullDownRefresh: function() { }, // 页面被下拉时触发onReachBottom: function() { }, // 页面上拉触底时触发onShareAppMessage: function () { }, // 页面被转发时触发onPageScroll: function() { } // 页面被滚动时触发
})开发者不需要主动调用 Page() 构造器中定义的生命周期方法而是由微信客户端根据监听用户的操作而主动触发的这就避免了程序调用上的混乱。学习过了小程序界面渲染的基本原理后我们知道小程序的页面结构是由 WXML 进行描述的WXML 可以通过数据绑定的语法来绑定逻辑层定义的数据对象这个数据对象就是在 Page() 构造方法的参数中定义的 data 属性字段data 字段的值也是在页面第一次被渲染时从逻辑层传递到渲染层的。
2.3 小程序的内置组件
组件化是前端最常见的一种开发方式组件就是对应用视图层的拆分一个小程序的页面也可以被拆分成多个组件组件是小程序页面的基本组成单元。为了方便开发者可以快速进行开发小程序的宿主环境提供了一系列的基础组件。除了小程序宿主环境提供的组件还有开发者自行封装的视图组件和引入的外部第三方组件所以为了区分这些组件我们就把小程序宿主环境提供的基础组件称为小程序的内置组件。
组件是在 WXML 模板文件中声明使用的其语法和 HTML 语法非常相似但又有一些区别。小程序的 WXML 模板文件遵循 JSXJavaScript XML 语法规范规定了每个组件标签都必须有开始标记和结束标记所有组件名称和属性名称都必须是小写多个单词之间使用“-”进行连接。WXML组件标签代码如例6所示。
【例7】WXML组件标签
viewimage idlogo modescaleToFill srcapp-logo.png/imageview classapp-listview classitemhello/viewview classitem stylecolor:red;world/view/view
/view组件标签的属性主要包含样式和事件绑定除了一些公共属性之外还可以拥有各自自定义的属性组件可以使用这些属性对自身就行样式修饰和功能封装以image组件为例可以为图片标签上面定义图片的模式和加载方式具体代码如8所示。
【例8】image图片组件
image modescaleToFill srcapp-logo.png lazy-load/image在 image 图片组件上可以使用 src 属性加载图片资源还可以使用 mode 属性来定义图片的裁剪、缩放模式组件上的 lazy-load 属性决定了图片是否开启懒加载。我们还可以定义图片的事件属性例如 binderror、bindload 等。
2.4 小程序的API
为了方便开发者调用微信提供的能力和手机硬件能力小程序宿主环境提供了丰富的 APIApplication Programming Interface应用程序接口。小程序提供的 API 按照功能主要分为几大类网络、媒体、文件、数据缓存、位置、设备、界面、微信开放能力等而且对于 API 的调用小程序也做了约定例如
小程序所有的API都挂载到名为wx的全局对象下用于监听事件的 API 函数都是以 wx.on* 开头API的Object参数一般由success、fail、complete三个回调函数来接收接口调用的结果在API中凡是以 wx.set* 和 wx.get* 开头的都是用于写入数据和获取数据的接口如果没有特殊说明大部分的API函数都是异步函数并且都接受一个Object作为参数。
以小程序发起网络请求为例API接口调用的代码如例9所示。
【例9】发起网络请求
wx.request({url: http://192.168.1.10:8080/find, // 请求的服务地址data: {}, // 请求参数success: function(res) {// 请求成功后调用},fail: function() {// 发生网络错误时调用},complete: function() {// 成功或者失败都会调用}
})2.5 小程序的事件处理
事件就是被控件所识别的操作例如在页面中点击了确定按钮小程序中的事件与传统Web开发的事件机制是一样的。当小程序UI界面的程序与用户之间发生了交互渲染层就会通知逻辑层执行对应的事件方法然后逻辑层再将处理好的结果传递给渲染层并向用户展示。但是有时候程序上的“行为反馈”不一定是用户主动触发的例如视频播放过程中的进度变化也需要对开发者进行返回方便开发者在逻辑层中所响应的处理。
在小程序中任何渲染层的行为事件都需要向开发者反馈这种事件行为有可能是用户主动触发的也有可能是组件状态改变而触发的无论哪种状态的事件触发。无论哪种状态的事件触发行为都需要被微信客户端捕获然后由开发者在逻辑层中处理。整个事件传递过程如图6所示。 图6 渲染层与逻辑层的事件传递
以页面按钮点击事件交互为例具体代码如例10所示。
【例10】页面按钮点击事件
!-- page.wxml --
button data-msgHello bindtaponBtnClick 按钮 /button// page.js
Page({onBtnClick: function(event) {console.log(event)}
})事件通过组件上绑定的 bindtap 属性触发同时在页面构造方法 Page() 中声明对应的 onBtnClick() 方法来处理对应的事件当用户点击页面的 button 按钮时就会触发 onBtnClick() 事件方法同时得到event 事件对象组件上的 data-msg 属性的值也会被封装到 event 事件对象中。
当事件回调函数触发时会接收到一个事件对象。事件对象的属性如表1所示。
这里需要注意的是target和currentTarget的区别currentTarget为当前事件所绑定的组件而target则是触发该事件的源头组件。
3 小程序应用能力
3.1 原生CSS布局
在传统网页开发中我们可以使用 CSS 的display、position、float等属性来实现页面布局但是在小程序中需要考虑各种终端的尺寸适配如果还是使用定位、浮动这类布局的话很难实现不同终端的适配缺乏灵活性。在微信小程序中建议使用flex弹性盒子布局。如果小程序需要兼容IOS8以下版本的话需要开启样式自动补全在小程序菜单栏中选择设置、项目设置勾选“上传代码时样式自动补全”选项。
flex弹性盒子布局提供了一种灵活的布局模型使容器能通过改变里面项目的高宽、顺序来对可用空间实现最佳的填充方便适配不同大小的内容区域。flex不单是一个属性它包含了一套新的属性集。属性集包括用于设置容器和用于设置项目两部分。设置容器的属性如表2所示。
设置项目的属性如表3所示。 flex在页面布局设计中应用非常广泛例如在不固定高度的情况下只需要在容器中设置flex的排列方向和主轴的对齐方式即可实现内容不确定下的垂直居中效果示例代码如例11所示。
【例11】flex设置容器内容垂直居中
.container{display: flex;flex-direction: column;justify-content: center;
}3.2 界面交互反馈
微信小程序中常用的界面交互行为包括屏幕触摸反馈、弹框提示、界面滚动等。由于受到终端设备性能等因素的影响频繁的用户与小程序交互的操作会导致系统延迟操作的反馈耗时较长的情况我们在开发小程序时应该尽可能的考虑到用户的使用体验。
一般在用户触摸某个事件按钮或view区域时会改变对应区域的颜色例如用户手指触摸view区域时将该view区域的底色设置成浅灰色或其他具有明显对比的颜色效果如图7所示。 图7 可触摸区域的用户操作反馈效果
这样做的目的就是为用户及时提示触摸的结果以免用户触摸后不知道结果而反复的触发执行。设置了用户操作的反馈效果大大提升了用户的使用体验。
除了这种设置区域不同的触发样式外还有些常用的用户触发效果反馈例如为button组件设置loading属性在完成某个操作后弹出Toast提示框等效果。如果使用弹出框作为用户操作后的提示效果需要在错误提示时明确告知用户具体出现错误的原因并且需要用户手动关闭弹出框如有需要的话还会附带下一步操作的引导。
3.3 HTTPS网络通信
在前后端分离开发的项目中前端需要通过发送异步请求从服务器获取数据小程序中也不例外。小程序作为客户端需要通过宿主环境提供的 wx.request() 函数发起网络请求来实现从服务器拉取信息。小程序宿主环境要求request发起的网络请求必须是https协议请求因此开发者服务器必须提供HTTPS服务的接口同时为了保证小程序不乱用任意域名的服务wx.request 请求的域名需要在小程序管理平台进行配置如果小程序正式版使用 wx.request 请求未配置的域名在控制台会有相应的报错。
wx.request() 方法的参数是一个Object对象对象中最重要的属性包括
url服务器请求接口data请求参数header设置请求的headermethod请求方法默认值是GETsuccess收到开发者服务成功返回的回调函数。
小程序发出一个HTTPS网络请求有时网络存在一些异常或者服务器存在问题在经过一段时间后仍然没有收到网络回包我们把这一段等待的最长时间称为请求超时时间。小程序request默认超时时间是60秒一般来说我们不需要这么长的一个等待时间才收到回包可能在等待3秒后还没收到回包就需要给用户一个明确的“服务不可用”的提示。在小程序项目根目录里边的app.json可以指定request的超时时间。
3.4 本地数据缓存
小程序的本地数据缓存能力在实际开发中应用非常广泛本地数据缓存就是通过小程序将数据存储到当前设备的硬盘上开发者可以使用本地数据缓存来存储一些服务端非实时的数据从而提高小程序的渲染速度减少用户的等待时间。 小程序提供了读写本地数据缓存的接口通过 wx.getStorage/wx.getStorageSync 读取本地缓存通过 wx.setStorage/wx.setStorageSync 写数据到缓存其中Sync后缀的接口表示是同步接口执行完毕之后会立马返回。小程序宿主环境会管理不同小程序的数据缓存不同小程序的本地缓存空间是分开的每个小程序的缓存空间上限为10MB如果当前缓存已经达到10MB再通过 wx.setStorage 写入缓存会触发fail回调。
小程序的本地缓存不仅仅通过小程序这个维度来隔离空间考虑到同一个设备可以登录不同微信用户宿主环境还对不同用户的缓存进行了隔离避免用户间的数据隐私泄露。由于本地缓存是存放在当前设备用户换设备之后无法从另一个设备读取到当前设备数据因此用户的关键信息不建议只存在本地缓存应该把数据放到服务器端进行持久化存储。
3.5 连接设备硬件
移动终端设备不同于PC端在移动终端没有了PC端的键盘、鼠标等常用的输入设备和一些输出设备但是移动终端中有很多传感器。而且移动终端屏幕尺寸也比PC端小了很多所以在移动端屏幕上输入复杂信息的效率会很低。小程序的宿主环境提供了很多操作移动终端设备的能力从而帮助开发者实现某些特定场景下的高效操作能力例如扫描二维码、蓝牙连接、GPS定位等能力。
但是有的设备操作能力并不仅仅是为了解决高效输入的问题更多的是提升用户的使用体验例如获取设备的网络状态。手机连接网络的方式有2G、3G、4G、5G和wifi每种连接方式的上传和下载速度有着很大的差异而且计费方式不同。wifi连接相对于其他的移动网络连接来说不仅访问速度快而且不会对用户产生流量费用。用户在使用小程序观看视频或下载体积较大的文档时为了避免用户耗费太多的数据流量开发者就需要通过小程序提供的获取网络状态的能力做出一些更加友好的提示供用户自行选择。
3.6 微信开放能力
小程序是以微信为基座的一种应用在很多场景下都需要获取微信的一些能力所以小程序的宿主环境就提供了开放微信部分权限的能力这种开放能力包括获取微信登录凭证、获取微信用户的基本信息、分享到朋友圈或转发消息、收藏、卡券、发票、生物认证、微信运动等能力。以微信登录为例开发者在已有的互联网产品中接入小程序时会面临一些与登录状态有关的问题微信就对小程序开发了微信登录的接口。
4 小程序的组件化
4.1 小程序基础组件
小程序的视图是在WebView里渲染的所以小程序的视图搭建离不开HTML标记语言。如果在小程序中直接使用HTML的话其安全性就会大大降低并且无法使用微信小程序的双线程模型实现数据绑定和页面的动态渲染。为了解决这一问题小程序设计了一套名为Exparser的组件框架基于这个框架在小程序内设计了一套涵盖大部分功能的组件方便开发者快速搭建出满足需求的界面。
基于Exparser框架设计的小程序内置组件涵盖了视图容器类、表单类、导航类、媒体类、开放类等几十种组件。所有的内置组件都可以使用WXSS修饰这样就解决了大部分的项目需求。
4.2 自定义组件
在实际的项目开发中小程序的内置组件不一定能满足所有的需求为了实现更高效的代码复用小程序还允许开发者自行扩充组件这些由开发者自行设计的组件被称为自定义组件。
在小程序中每个组件都具有独立的逻辑空间分别拥有自己的独立数据和setData方法调用。在使用自定义组件的小程序页面中Exparser框架将接管所有的自定义组件注册和实例化。小程序的基础库中提供了Page和Component两个构造器自定义组件使用的是Component构造器。
4.3 第三方组件库
小程序从基础库版本 2.2.1 开始支持使用 npm 安装第三方包因此也支持开发和使用第三方自定义组件包。我们在开发微信小程序时选择一款好用的UI组件库可以达到事半功倍的效果。目前市面上常用的小程序UI组件库有以下几款
WeUI是一套同微信原生视觉体验一致的基础样式库由微信官方设计团队为微信 Web 开发量身设计可以令用户的使用感知更加统一。Vant Weapp是有赞移动端组件库 Vant 的小程序版本两者基于相同的视觉规范提供一致的 API 接口助力开发者快速搭建小程序应用。iView Weapp是由 TalkingData 发布的组件库一套高质量的微信小程序 UI 组件库。TaroUI是由京东凹凸实验室倾力打造的多端开发解决方案使用 Taro 可以将源代码分别编译出可以在不同端微信小程序、H5、RN等运行的代码。
5 本章小结
本章概述了微信小程序的代码结构、小程序宿主环境、小程序渲染机制和小程序应用能力。通过本章的学习可以让大家清晰地理解小程序开发流程掌握小程序的核心API为以后快速上手小程序开发打下基础。
