框架名称:MINA(MINA IS NOT APP)是在微信中开发小程序的框架。
框架结构 :MINA框架由两部分组成.视图层(View)和逻辑层(App Service)。
框架特征 :响应式的数据绑定(MINA用响应式数据绑定的方式,在视图层和逻辑层之间进行通信。从某种程度上,可以看成是MVVM模式。)
结构:MINA程序包含一个描述整体程序的app和多个描述各自页面的page。
一个MINA程序主体部分由三个文件组成,必须放在根目录下。
一个MINA页面由四个文件组成。如下图
注:为了方便开发者减少配置项,规定描述页面的这四个文件必须有相同的路径和文件名。
配置:
在MINA程序的主体部分中,是通过app.json文件来对小程序进行全局配置的。包括页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。
App.json配置项列表
1.逻辑层(AppService)
MINA的逻辑层是由JavaScript编写。
逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
在JavaScript的基础上,我们做了一些修改,以方便地开发MINA程序。
增加App和Page方法,进行程序和页面的注册。
提供丰富的API,如扫一扫,支付等微信特有能力。
每个页面有独立的作用域,并提供模块化能力。
由于MINA并非运行在浏览器中,所以JavaScript在web中一些能力都无法使用,如document,window等。
开发者写的所有代码最终将会打包成一份JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似ServiceWorker,所以逻辑层也称之为App Service。
App.js
注册程序:App()函数用来注册一个小程序。接受一个object参数,其指定小程序的生命周期函数等。
微信小程序中的前台、后台定义: 当用户点击左上角关闭,或者按了设备Home键离开微信,小程序并没有正在的销毁,而是进入了后台;当再次启动微信或再次打开小程序,又会从后台进入前台。
注意:
App()必须在app.js中注册,且不能注册多个。
不要在定义于App()内的函数中调用getApp(),使用this就可以拿到app实例。
不要在onLaunch的时候调用getCurrentPage(),此时page还没有生成。
通过getApp获取实例之后,不要私自调用生命周期函数。
注册页面:Page()函数用来注册一个页面。接受一个object参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
Page页面管理:在小程序中所有页面的路由全部由MINA进行管理,对于路由的触发方式以及页面生命周期函数如下:
2.视图层(View)
MINA的视图层由WXML与WXSS编写。(WXML类似HTML ,WXSS类似CSS)
将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
WXML(nWeiXi Markup language)用于描述页面的结构。
WXSS(WeiXin Style Sheet)用于描述页面的样式。
WXML:WXML(WeiXin Markup Language)是MINA设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
WXML的能力:
数据绑定:<text>{{ demo }} </text> 其中{{ demo }} 为 .js 文件中 data 里面的变量demo的值。
列表渲染:<view wx:for-items="{{array}}"> {{item}} </view>。通过 wx:for-items可以对数组进行遍历渲染,构造出多个view视图。
条件渲染:通过对 .js里面的变量 view的值,去判断显示哪个视图。
模板:模板功能是通过对template 标签的属性 name=”” 去创建不同模板,通过is=”name的值”来使用。模板:模板功能是通过对template 标签的属性 name=”” 去创建不同模板,通过is=”name的值”来使用。
事件:通过bindtap=”方法名称”属性,来定义该控件点击事件。
WXSS:
WXSS(WeiXin Style Sheets)是MINA设计的一套样式语言,用于描述WXML的组件样式。
WXSS用来决定WXML的组件应该怎么显示?
为了适应广大的前端开发者,WXSS具有CSS大部分特性。 同时为了更适合开发微信小程序,对CSS进行了扩充以及修改。
与css相比我们扩展的特性有:1.尺寸单位 2.样式导入.
尺寸单位: rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
rem(root em): 规定屏幕宽度为20rem;1rem = (750/20)rpx 。
样式导入: 使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
小程序的额生命周期
微信小应用的每一个page都有其生命周期。 onLoad,onReady,onShow,onHide,onUnload。我们在index.js里面每个生命周期里面打印出log。如下图。
可以看到一个page从打开到显示,他的生命周期执行的顺序是 onLoad->onShow->onReady,当跳转到另一个页面时,执行的是onHide,当从其他页面返回的时,又会重新调用onShow.