小程序框架简介和生命周期

框架名称:MINA(MINA IS NOT APP)是在微信中开发小程序的框架。

框架结构 :MINA框架由两部分组成.视图层(View)和逻辑层(App Service)。

框架特征 :响应式的数据绑定(MINA用响应式数据绑定的方式,在视图层和逻辑层之间进行通信。从某种程度上,可以看成是MVVM模式。)

结构:MINA程序包含一个描述整体程序的app和多个描述各自页面的page。
一个MINA程序主体部分由三个文件组成,必须放在根目录下。

Paste_Image.png

一个MINA页面由四个文件组成。如下图

Paste_Image.png

注:为了方便开发者减少配置项,规定描述页面的这四个文件必须有相同的路径和文件名。

配置:
在MINA程序的主体部分中,是通过app.json文件来对小程序进行全局配置的。包括页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。
App.json配置项列表

Paste_Image.png
1.逻辑层(AppService)

MINA的逻辑层是由JavaScript编写。
逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
在JavaScript的基础上,我们做了一些修改,以方便地开发MINA程序。

增加App和Page方法,进行程序和页面的注册。
提供丰富的API,如扫一扫,支付等微信特有能力。
每个页面有独立的作用域,并提供模块化能力。
由于MINA并非运行在浏览器中,所以JavaScript在web中一些能力都无法使用,如document,window等。
 开发者写的所有代码最终将会打包成一份JavaScript,并在小程序启动的时候运行,直到小程序销毁。类似ServiceWorker,所以逻辑层也称之为App Service。

App.js

注册程序:App()函数用来注册一个小程序。接受一个object参数,其指定小程序的生命周期函数等。

Paste_Image.png

微信小程序中的前台、后台定义: 当用户点击左上角关闭,或者按了设备Home键离开微信,小程序并没有正在的销毁,而是进入了后台;当再次启动微信或再次打开小程序,又会从后台进入前台。

注意:
App()必须在app.js中注册,且不能注册多个。
不要在定义于App()内的函数中调用getApp(),使用this就可以拿到app实例。
不要在onLaunch的时候调用getCurrentPage(),此时page还没有生成。
通过getApp获取实例之后,不要私自调用生命周期函数。

注册页面:Page()函数用来注册一个页面。接受一个object参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

Paste_Image.png

Page页面管理:在小程序中所有页面的路由全部由MINA进行管理,对于路由的触发方式以及页面生命周期函数如下:

Paste_Image.png
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的值,去判断显示哪个视图。

Paste_Image.png

模板:模板功能是通过对template 标签的属性 name=”” 去创建不同模板,通过is=”name的值”来使用。模板:模板功能是通过对template 标签的属性 name=”” 去创建不同模板,通过is=”name的值”来使用。

Paste_Image.png
Paste_Image.png

事件:通过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。如下图。

Paste_Image.png
Paste_Image.png

可以看到一个page从打开到显示,他的生命周期执行的顺序是 onLoad->onShow->onReady,当跳转到另一个页面时,执行的是onHide,当从其他页面返回的时,又会重新调用onShow.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,056评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,842评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,938评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,296评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,292评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,413评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,824评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,493评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,686评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,502评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,553评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,281评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,820评论 3 305
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,873评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,109评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,699评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,257评论 2 341

推荐阅读更多精彩内容