（本科）第3章微信小程序框架ppt课件.pptx

《（本科）第3章微信小程序框架ppt课件.pptx》由会员分享，可在线阅读，更多相关《（本科）第3章微信小程序框架ppt课件.pptx（49页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、课程主讲人：第3章 微信小程序框架第3章 微信小程序框架夏敏捷第第3 3章章 微信小程序框架微信小程序框架 教学目标： 了解小程序框架 掌握逻辑层和视图层之间关系 掌握页面事件处理函数3 章节目录3.1 微信小程序框架文件3.2 微信小程序视图层3.3 微信小程序逻辑层43.1 3.1 微信小程序框架文件微信小程序框架文件 项目框架文件包括根目录下的主体文件app.js、app.json、app.wxss、配置文件和sitemap.json，pages文件夹和utils文件。53.1.1 3.1.1 小程序的框架结构小程序的框架结构1主体文件 主体文件由小程序根目录下的app.js、app.j

2、son、app.wxss这三个必不可少的文件组成，小程序启动时会读取这些文件初始化实例。必须存放在项目的根目录下，每个文件的名称和功能都是特定的，具体如下： app.js：该文件是小程序项目的启动入口文件，主要处理小程序生命周期中的一些方法。文件内容不能为空。 app.json：该文件是小程序的全局配置文件，主要用于设置导航条的颜色、字体大小、tabBar等。文件内容不能为空。 app.wxss：该文件是小程序的公共样式文件，主要用于全局美化设计界面。文件内容可以为空。63.1.1 3.1.1 小程序的框架结构小程序的框架结构（1）app.js文件App( /如下为小程序的生命周期 onLau

3、nch: function() , /监听初始化 onShow: function() , /监听显示（进入前台） onHide: function() , /监听隐藏（进入后台：按home离开微信） onError: function(msg) , /监听错误 /如下为自定义的全局方法和全局变量 globalFun:function(), /全局方法（函数） globalData: I am global data /全局变量)使用App()来注册一个小程序，必须在app.js中注册，且不能注册多个。78倪红军制作app.js文件示例代码app.js文件常用代码格式如下：3.1.1 3.1.

4、1 小程序的框架结构小程序的框架结构（2）app.json是对小程序的全局配置，app.json文件内容为一个JSON对象，有以下属性： pages: pages/index/index, pages/logs/logs , window: backgroundTextStyle: light, navigationBarBackgroundColor: #fff, navigationBarTitleText: WeChat, navigationBarTextStyle: black , style: v2, sitemapLocation: sitemap.json9导航栏 tabBar

5、: color: #000, list: pagePath: pages/index/index, text: 人人版, iconPath: images/one-off.png, selectedIconPath: images/one-on.png , pagePath: pages/computer/computer, text: 人机版, iconPath: images/computer-off.png, selectedIconPath: images/computer-on.png , window: backgroundTextStyle:light, navigationBa

6、rBackgroundColor: #00FF00, /* 导航栏背景色为绿色*/ navigationBarTitleText: 夏敏捷第一个项目, /* 导航栏文字*/ navigationBarTextStyle:black ,103.1.1 3.1.1 小程序的框架结构小程序的框架结构tab标签11倪红军制作app.json文件pages配置项用来指定小程序由哪些页面组成。如图所示目录结构的小程序，其app.json文件中pages配置项的代码如下所示： pages: pages/index/index, pages/logs/logs 第一项指定的页面是小程序的初始页面（首页）在小程

7、序中新增页面或减少页面都需要在pages配置项中进行相应的编辑修改如果在pages配置项中添加的页面在当前开发的小程序中不存在，经过编译或保存后，集成开发环境会自动生成页面存放目录和相应的.js、.wxml、.json和.wxss文件。3.1.1 3.1.1 小程序的框架结构小程序的框架结构（3）app.wxss是整个小程序的公共样式表，类似网站开发中的common.css。/*app.wxss*/.container height: 100%; display: flex; flex-direction: column; align-items: center; justify-conten

8、t: space-between; padding: 200rpx 0; box-sizing: border-box;app.wxss文件用于规定所有页面都可以用的样式效果，语法格式类似CSS。该文件是可选文件，如果没有公共样式效果规定，可以省略不写。12全局样式：定义在app.wxss中的样式为全局样式，可以作用于小程序的每一个页面；局部样式：在pages文件夹中的wxss文件中定义的样式为局部样式，只作用于对应页面。局部样式文件中定义的样式选择器如果与app.wxss文件中定义样式选择器同名，则会覆盖app.wxss文件中定义的样式选择器。3.1.1 3.1.1 小程序的框架结构小程序的

9、框架结构2项目配置文件（1）project.config项目配置小程序根目录下的文件用于定义小程序项目名称、APPID等内容。（2）sitemap配置小程序根目录下的sitemap.json文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个JSON对象，如果没有sitemap.json，则默认为所有页面都允许被索引。133.1.1 3.1.1 小程序的框架结构小程序的框架结构3页面文件小程序页面在pages目录下，由一个文件夹中的四个同名不同类型文件组成。例如在index文件夹中，index.js是脚本文件，index.json是配置文件，index.wxss是样式表文件，index

10、.wxml是页面结构文件，其中json和wxss文件为非必须（默认会继承app的json和wxss默认设置）。143.1.2 Page()3.1.2 Page()注册页面注册页面 小程序在每个页面JS文件中通过使用Page(OBJECT)函数来进行页面注册，该函数可以用于指定小程序页面的生命周期函数。注意Page()函数只能写在小程序每个页面对应的JS文件中，且每个页面只能注册1个。 1初始数据data属性，该属性是页面第一次渲染使用的初始数据。 2生命周期回调函数页面初次打开会依次触发onLoad-onShow-onReady同样如果被切换到后台，会调用页面onHide，从后台被唤醒会调用页

11、面onShow。直到页面关闭会调用onUnload。153.2 3.2 微信小程序视图微信小程序视图层层Web前端网页开发：HTML(Hyper Text Markup Language，超文本链接标示语言)用来描述Web前端网页的结构；CSS(Cascading Style Sheet，层叠样式表)用来描述网页的呈现样式；JS(JavaScript，Java脚本语言)用来实现页面和用户的交互逻辑。小程序的每个页面描述文件：页面结构文件(文件后缀名为.wxml)；页面样式文件(文件后缀名为.wxss)；页面逻辑文件(文件后缀名为.js)；页面配置文件(文件后缀名为.json)。页面结构文件(.

12、wxml)和页面样式文件(.wxss)构成了小程序框架的视图层，小程序在逻辑层将数据进行处理后发送给视图层展现出来，同时逻辑层也接收视图层的事件反馈。16夏敏捷制作3.2 3.2 微信小程序视图微信小程序视图层层页面结构文件的编写方式与HTML类似，可以由视图容器类组件、基础内容类组件、表单类组件、导航类组件、多媒体类组件、地图类组件、画布类组件的标签构成。17WXML具有数据绑定、列表渲染、条件渲染、模板及事件绑定等功能。3.2 3.2 微信小程序视图微信小程序视图层层页面结构文件的编写方式与HTML类似，常见的页面组件如表3-3所示。18夏敏捷制作3.2.1 3.2.1 绑定数据绑定数据在

13、微信小程序开发中通过数据绑定，将状态(数据)在界面上显示。通过变量名的语法把一个变量绑定到界面上，我们称为数据绑定。1简单数据绑定数据在js文件中定义，在wxml文件中绑定。实现js文件和wxml文件之间的数据交互。例如js文件中定义message。Page( data: /定义数据 message: Hello world! )在wxml文件中绑定message： message /数据绑定到页面上述代码会把Hello world!渲染到WXML页面上 message 出现的地方。193.2.1 3.2.1 绑定数据绑定数据2组件属性绑定wxml中组件的属性也可以使用动态数据，例如组件的ID

14、和class等属性值。 js文件中定义my。Page( data: /定义数据 my: xmj1 )相当于如下定义： 203.2.1 3.2.1 绑定数据绑定数据3条件语句值绑定条件语句中的值也可以通过数据绑定来赋值。 js文件中定义condition。Page( data: condition: true /条件语句的值 )213.2.1 3.2.1 绑定数据绑定数据4关键字绑定 对于一些关键字、保留字，需要在关键字内才能起作用，如果只有双引号、没有双括号，则只是作为一个字符串而已。 不要直接写checked=false，false是一个字符串，转成boolean类型后反而代表真值。223.

15、2.1 3.2.1 绑定数据绑定数据5运算结果绑定可以在表达式内进行表达式运算，将结果绑定到页面。微信小程序运算支持： 三目运算：conditions ? val1 ： val2 算术运算：+ - * / 比较运算： = 等 点运算符：对象.属性 索引运算：数组对象index 组合成数组：值1，值2，值3，值4，值. 组合成对象：属性1：值，属性2：值，属性3：值.233.2.1 3.2.1 绑定数据绑定数据js文件中定义如下。Page( data: a: 1, b: 2, c: 3, d: 4 )wxml文件： a+b /a+b的值绑定到页面 a+b+c+d由于d没有使用d形式，所以是d字符

16、本身。页面显示效果等同于： 3 3+3+d如果使用d则第2个view中内容为3+3+4。24/如果使用d则第2个view中内容为3+3+4。25 3.2.2 3.2.2 条件渲染条件渲染在框架中，使用 wx:if=condition 来判断是否需要渲染该代码块：True也可以用 wx:elif 和 wx:else 来添加一个 else 块： 51 223示例：根据week的值来判断吃什么？今天吃什么？ 星期week：饺子 星期week：稀饭 星期week：西餐/ pages/find/find.jsPage( data: week: Math.floor(Math.random() * 7 +

17、 1) )夏敏捷制作26 3.2.3 3.2.3 循环渲染循环渲染在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。数组的当前项的下标变量默认为index，数组当前项的变量默认为item。示例如下： index: item.messagepage.js如下：Page( data: items: message:2020 , message:2018 , message:2015 )结果显示为：0：2020 1：20182：2015夏敏捷制作0：2020 1：20182：201527 3.2.3 3.2.3 循环渲染循环渲染也可以使用wx:for-item

18、指定数组当前元素的变量名，使用wx:for-index可以指定数组当前下标的变量名。例如： idx: itemNamewx:for也可以嵌套使用。 view wx:if = i i * j = i * j 这里是双重循环，相当于有两个循环变量i和j，条件渲染时判断是否ij。夏敏捷制作3.2.3 3.2.3 循环循环渲染渲染28page.js如下：Page( data: items:1,2,3,4,5,6,7,8,9 )结果显示为如图3-4的九乘九的乘法口诀表。29 3.2.3 3.2.3 循环渲染循环渲染wx:for也可以实现对象数组渲染。WXML文件如下： name:item1.name a

19、ge:item1.age gender:item1.gender js文件如下：Page( data: stu01: name: 张三, age: 18, gender: 男 , student: name: 张三, age: 18, gender: 男 , name: 李四, age: 19, gender: 女 )夏敏捷制作30夏敏捷制作 3.2.4 WXML3.2.4 WXML模版模版对于可以在不同页面出现的相同页面结构，可提取成为一个WXML模版，然后在不同页面的wxml文件引入这个模版，从而复用这个页面结构。/header.wxml 页面头部模版文件示例 左边内容 中间内容 右边内容

20、 例如引入定义的header.wxml页面头部模版文件： /导入模板 /传递数据使用is属性声明需要的使用那个模板，31倪红军制作3.2.5 WXSSWXSS(WeiXin Style Sheets)是一套样式语言，用于描述WXML的组件样式（例如尺寸、颜色、边框效果等）。WXSS用来决定WXML的组件应该怎么显示。WXSS基本沿用了CSS的大部分特性，另新增了：尺寸单位 rpx样式导入323.2.5 WXSS1尺寸单位小程序规定了全新的尺寸单位rpx（responsive pixel），可以根据屏幕宽度进行自适应。其原理是无视设备原先的尺寸大小，统一规定屏幕宽度为750rpx。rpx不是固定

21、值，屏幕越大，1rpx对应的像素就越大。2定义样式选择器 属性名:值； 属性名:值； button font-size:12px; background:#00ff00; color:red;页面中所有button组件的背景都是#00ff00(绿色)，文字大小均是12px，颜色为red(红色)。333.2.5 WXSS3内联样式WXML内的组件上支持使用style、class属性来控制组件的样式。1）stylestyle属性又称为行内样式，可直接将样式代码写到组件的首标签中。例如：测试上述代码表示当前这个组件中的文本将变为红色、背景将变为黄色。style也支持动态样式效果，例如：测试上述代码表

22、示组件中的文本颜色将由页面JS文件的data.color属性规定。官方建议开发者尽量避免将静态的样式写进style中，以免影响渲染速度。如果是静态的样式可以统一写到class中。343.2.5 WXSS2）class小程序WXML文件中使用class属性指定样式规则，其属性值是其属性值是一个或多个自定义样式类名组成，多个样式类名之间用空格分隔。例如WXSS文件中：.style01 color: red; /文字为红色.style02 font-size: 20px; /字体大小为20像素 font-weight: bold; /字体加粗页面WXML文件中：测试上述代码表示组件同时接受.styl

23、e01和.style02的样式规则。注意在class属性值的引号内部不需要加上类名前面的点。夏敏捷制作353.2.5 WXSS4样式导入小程序在wxss样式表中使用import语句导入外联样式表，import后跟需要导入的外联样式表的相对路径，用;表示语句结束。例如有个公共样式表common.wxss代码如下：.red color:red;然后可以在其他任意wxss样式表中使用import语句对其进行引用。例如：a.wxss代码如下：import common.wxss;.blue color:blue;夏敏捷制作363.2.5 WXSS5全局样式和局部样式小程序wxss样式表中规定的样式根据

24、其作用范围分为两类：全局样式：在app.wxss中的样式，作用于每一个页面；局部样式：在页面wxss文件中定义的样式，只作用在对应的页面，并会覆盖app.wxss中相同的选择器。夏敏捷制作373.2.6 Flex布局微信小程序常用布局为Flex（Flexible Box的缩写）布局，意为弹性布局。小程序使用了Flex模型来提高页面布局效率，当页面需要适应不同屏幕大小以及设备类型时该模型可以确保元素在恰当的位置。1容器和项目采用Flex布局的元素，称为容器（container）。容器内部的组件（子元素）自动成为容器成员，称为项目（item）。例如： 夏敏捷制作ABCABC383.2.6 Flex

25、布局2坐标轴Flex布局的坐标系是以容器左上角的点为原点，自原点往右、往下两条坐标轴。默认情况下是水平布局，即水平方向从左往右为主轴（main axis），垂直方向自上而下为交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。如图3-5所示。夏敏捷制作3.2.6 Flex3.2.6 Flex布局布局 容器属性用于控制内部项目的排列和对齐方式。39属性解释默认值其他有效值flex-direction设置项目排列方向rowrow-reverse|colum

26、n|column-reverse，其中row（默认值）：主轴为水平方向，起点在左端。 column：主轴为垂直方向，起点在上沿。flex-wrap设置项目是否换行nowrapwrap|wrap-reverse，其中nowrap：默认值，表示不换行。如果单行内容过多，项目宽度可能会被压缩。wrap：容器单行容不下所有项目时允许换行排列。justify-content设置项目在主轴方向上对齐方式flex-startflex-end|center|space-between|space-around|space-evenly，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。flex-start（

27、默认值）：左对齐。flex-end：右对齐。center：居中。space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。space-evenly的作用是将每个项目的间隔相等。align-items设置水平方向的对齐方式stretchcenter |flex-end|baseline|flex-start，flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline:项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或

28、设为auto，将占满整个容器的高度align-content多行排列时，设置行在交叉轴方向上的对齐方式stretchflex-start|center|flex-end|space-between |space-around|space-evenly3.2.6 Flex3.2.6 Flex布局布局 项目属性用于设置容器内部项目的尺寸、位置以及对齐方式。40属性解释默认值其他有效值order设置项目在主轴上排列顺序。数值越小，排列越靠前，默认为0。0flex-shrink收缩在主轴上溢出的项目。此属性定义项目的缩小比例，默认为1即如果空间不足，该项目将缩小。1flex-grow扩张在主轴方向上还

29、有空间的项目。此属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。0flex-basis代替项目的原来宽/高属性。定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。autoflex是flex-shrink、flex-grow和flex-basis三种属性的综合简写，默认值为0 1 auto。后两个属性可选。无none|auto|flex-grow flex-shrink flex-basisalign-self设置项目在行中交叉轴上的对齐方式，允许单个项目有与其他项目不一样的对齐方式。autof l

30、e x - s t a r t | f l e x -end|center|baseline| stretch3.2.6 Flex3.2.6 Flex布局布局41图3-6 Flex布局示例九宫格布局的九宫格布局的实现实现 九宫格布局的实现。4243夏敏捷制作3.3 微信小程序逻辑层微信小程序整个系统分为两个部分：视图层（WXML文件）和逻辑层（JS文件），逻辑层是事务逻辑处理的地方。对于小程序而言，逻辑层就是JS脚本文件。逻辑层对数据的处理后发送给视图层展示给用户，同时接收视图层用户的反馈。443.3.1 事件1事件分类事件分为冒泡事件和非冒泡事件。冒泡事件是当一个组件上的事件被触发后，该事件

31、会向父节点传递。非冒泡事件是当一个组件上的事件被触发后，该事件不会向父节点传递。WXML视图中的冒泡事件如表3-9所示。注意除表3-9之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如form表单的submit事件，input输入组件的input事件，scroll-view的scroll事件等。夏敏捷制作453.3.1 事件2事件绑定事件绑定的写法同组件的属性，为key和value的形式。key以bind或catch开头，然后接事件名，例如bindtap，bindtouchstart。value是一个字符串，是Page中定义的函数名。 Click me! Click me! bind绑定的

32、事件不会阻止事件冒泡，catch绑定的事件会阻止事件冒泡。夏敏捷制作463.3.2 事件对象当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象，事件对象可以携带额外信息，如id, dataset, touches。 最终在事件处理函数通过可以获取这些组件中可以定义数据。夏敏捷制作473.3.3 事件对象数据参数的传递 最终在事件处理函数通过可以获取这些组件中可以定义数据。Page( btnclick: function(event) console.log(event.target.dataset.choose) /获取控件传递过来的值从而识别那个image组件 )夏敏捷制作483

33、.3.4 页面事件处理函数 Page()函数中默认生成的onPullDownRefresh、onReachBottom、onShareAppMessage以及未自动生成的onPageScroll、onTabItemTap均属于页面的事件处理函数。具体解释如下：onPullDownRefresh()：监听用户下拉刷新事件。onReachBottom()：监听用户上拉触底事件。onPageScroll(Object)：监听用户滑动页面事件。onShareAppMessage(Object)：监听用户单击页面内转发按钮（按钮组件，其属性值 open-type=“share”）或右上角菜单“转发”按钮

34、的行为，并自定义转发内容。onTabItemTap(OBJECT)：单击tab时触发，从基础库开始支持，低版本需做兼容处理。Page()函数中还可以定义组件事件处理函数，在WXML页面的组件上添加事件绑定，当事件被触发时就会主动执行Page()中对应的事件处理函数。夏敏捷制作49夏敏捷制作3.3.4 页面事件处理函数onShareAppMessage(Object)的转发事件示例如下。Page( onShareAppMessage: function (res) if (res.from = button) / 来自页面内转发按钮 console.log(res.target) return title: 自定义转发标题, path: /page/user?id=123 /自定义转发页面路径 )onTabItemTap(OBJECT)的单击tab事件示例如下。/* tab单击 */ onTabItemTap(item) console.log(item) wx.showToast( title: tab点击, ) , 开发者根据自己需要选择使用页面的事件处理函数。