微信小程序开发图解案例教程课件 第3章 微信小程序核心技术

第3章微信小程序核心技术微信小程序框架，是我们在进行微信小程序开发前必须理解的内容。微信小程序框架可以让开发者在微信中通过简单、高效的方式开发具有原生App体验的服务。微信小程序框架分为逻辑层和视图层，逻辑层用来处理业务逻辑，而视图层用来渲染页面。视图层描述语言WXML和视图样式WXSS，再加上JavaScript逻辑层语言和JSON配置文件，一同构筑起了微信小程序框架。本章我们一起来分析微信小程序的框架。本章导读Thechapter’sintroduction目录导航3.1

WXML3.3

JavaScript语言3.5

沙场大练兵：仿“香哈菜谱”微信小程序3.2

WXSS样式语言3.4

WXS语言3.6小结3.1.1WXML介绍02微信小程序的设计理念之一是轻量级、简单易用，旨在提供快速加载和高性能的应用体验。轻量级设计01WXML提供了一些特有的标签和属性，能够更好地满足特殊需求，使得小程序能高效地运行在微信客户端上。定制化需求03WXML的设计考虑了微信客户端的安全性要求，采用了一些安全措施，例如对外部资源进行限制，从而保障了微信客户端的安全。安全性考虑04WXML作为小程序的页面标记语言，与微信小程序的其他组成部分相互配合，形成完整的小程序开发生态系统。生态一体化WXML的语法简洁明了，易于学习和使用，使得开发者可以方便地创建小程序的页面结构。微信小程序选择使用WXML而不是直接使用HTML，主要原因如下。3.1.2WXML语法1.WXML基本语法WXML文件的扩展名是.wxml，简单的WXML语句在语法上与HTML非常相似。一条完整的WXML语句由一个开始标签和一个结束标签组成，标签中可以包含实际内容，也可以包含其他的WXML语句。WXML要求标签必须是严格闭合的，没有闭合将会导致编译错误。标签可以拥有属性，属性提供了有关的WXML元素的更多信息。属性总是定义在开始标签中，除了一些特殊的属性外，其余属性都以key="value"的方式出现。WXML中的属性对大小写敏感，也就是说class和Class在WXML中是不同的属性。<标签名

属性名1="属性值1"属性名2="属性值2"...>...</标签名>3.1.2WXML语法<!--一个简单的文本标签--><text>hello微信小程序</text><!--<view>中包含<text>标签--><view><text>hello微信小程序</text></view><!--带属性的图片标签--><imageclass="avatar"src="./image/head.jpg"></image>示例代码如下所示。3.1.2WXML语法2．WXML的功能WXML定义了一套类似于HTML标签的标签来描述页面结构，还提供了以下功能。绑定数据：将JS文件里的动态数据绑定到WXML文件里。条件渲染：WXML通过不同的条件进行页面内容渲染。列表渲染：WXML可以通过<block>和<template>标签来进行列表渲染。事件绑定：WXML支持通过bind和catch前缀来绑定事件处理函数，例如bindtap、catchtouchstart等。条件渲染：WXML可以通过<block>和<template>标签的配合使用，以及wx:if、wx:elif和wx:else等指令来实现条件渲染，实现根据不同的条件来展示不同的页面内容。模板引用：WXML可以通过<import>和<include>标签来引用其他的WXML文件，并在当前页面中使用引用的模板，从而实现在多个页面中复用相同的页面结构。数据传递：WXML支持通过data-*和data属性来传递数据。3.1.3绑定数据组件属性绑定是将data里的数据绑定到微信小程序的组件上。<viewid="item-{{id}}"></view>Page({data:{id:0}})示例代码如下。1．组件属性绑定WXML文件里的动态数据来源于JS文件中Page的data，数据绑定时使用双花括号（{{}}）将变量包裹起来。3.1.3绑定数据进行if条件判断时，如果满足条件，则执行控制属性绑定；否则不执行控制属性绑定。<viewwx:if="{{condition}}"></view>Page({data:{condition:true}})示例代码如下。2．控制属性绑定3．关键字绑定关键字绑定常用于组件的一些关键字。如复选框组件，checked关键字如果等于true，则代表选中复选框；如果等于false，则代表不选中复选框。<checkboxchecked="{{false}}"></checkbox>示例代码如下。不要直接写checked="false"，其计算结果是一个字符串，转成boolean类型后代表真值。3.1.3绑定数据可以在{{}}内进行简单的运算，小程序支持以如下几种方式进行运算。<viewhidden="{{flag?true:false}}">Hidden</view>4．运算绑定<view>{{a+b}}+{{c}}+d</view>Page({data:{a:1,b:2,c:3}})view中的内容为3+3+d。（1）三元运算是一种条件运算，基于条件判断返回两种结果之一。（2）数学运算主要处理数值，包括加、减、乘、除等。3.1.3绑定数据<viewwx:if="{{length>5}}"></view><view>{{"hello"+name}}</view>Page({data:{name:'MINA'}})<view>{{object.key}}{{array[0]}}</view>Page({data:{object:{key:'Hello'},array:['MINA']}})（3）逻辑运算基于布尔值，使用逻辑运算符进行组合。（4）字符串运算涉及文本处理，如拼接、切片等。（5）数据路径运算与路径处理相关，如路径拼接、解析等。3.1.4条件渲染在微信小程序框架里，使用wx:if="{{condition}}"来判断是否需要渲染该代码块，它可以直接作为单个组件的控制属性使用。示例代码如下。<viewwx:if="{{condition}}">True</view>使用wx:elif和wx:else来添加一个else块。<viewwx:if="{{length>5}}">1</view><viewwx:elif="{{length>2}}">2</view><viewwx:else>3</view>1．wx:if：判断单个组件3.1.4条件渲染wx:if是一个控制属性，需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签，就可以使用一个<block/>标签将多个组件包装起来，并在上面使用wx:if控制属性。示例代码如下。<blockwx:if="{{true}}"><view>view1</view><view>view2</view></block><block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。2．blockwx:if：判断多个组件3.1.5列表渲染

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。数组当前项的下标变量名默认为index，数组当前项的变量名默认为item。示例代码如下。<viewwx:for="{{array}}"wx:for-index="idx"wx:for-item="itemName">{{idx}}:{{itemName.message}}</view><viewwx:for="{{array}}">{{index}}:{{item.message}}</view>Page({data:{

使用wx:for-item可以指定数组当前元素的变量名，使用wx:for-index可以指定数组当前下标的变量名。示例代码如下。array:[{message:'foo',},{message:'bar'}]}})1．wx:for：列表渲染单个组件3.1.5列表渲染

wx:for应用在某一个组件上，如果想渲染一个包含多节点的结构块，wx:for需要应用在<block/>标签上。示例代码如下。<blockwx:for="{{[1,2,3]}}"><view>{{index}}:</view><view>{{item}}</view></block>2．blockwx:for：列表渲染多个组件3.1.5列表渲染

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如<input/>中的输入内容，<switch/>的选中状态），需要使用wx:key来指定列表中项目的唯一的标识符。wx:key的值以如下两种形式提供。字符串保留关键字示例代码如下。<switchwx:for="{{objectArray}}"wx:key="unique"style="display:block;">{{item.id}}</switch>Page({data:{objectArray:[{id:5,unique:'unique_5'}, {id:4,unique:'unique_4'},{id:3,unique:'unique_3'},{id:2,unique:'unique_2'},{id:1,unique:'unique_1'},{id:0,unique:'unique_0'},]}}3．wx:key：指定唯一标识符注意：如不提供wx:key，会报一个warning。如果明确知道该列表是静态的，或者不必关注其顺序，可以选择忽略。3.1.6模板定义在<template/>内定义代码片段，使用name属性作为模板的名字。示例代码如下。<templatename="msgItem"><view><text>{{index}}:{{msg}}</text><text>Time:{{time}}</text></view></template>1．定义模板3.1.6模板定义在WXML文件里，使用is属性声明需要使用的模板，然后将模板所需要的data传入。示例代码如下。<templateis="msgItem"data="{{item}}"/>Page({data:{item:{index:0,msg:'thisisatemplate',time:'2016-09-15'}}})<templatename="odd"><view>odd</view></template><templatename="even"><view>even</view></template><blockwx:for="{{[1,2,3,4,5]}}"><templateis="{{item%2==0?'even':'odd'}}"/></block>is属性可以使用三元运算语法，来动态决定具体需要渲染哪个模板。2．使用模板3.1.7引用功能<!--item.wxml--><templatename="item"><text>{{text}}</text></template>import可以在该文件中使用目标文件定义的template。例如，在item.wxml文件中定义了一个叫item的template，示例代码如下。此外，在index.wxml文件中引用了item.wxml文件，就可以使用item模板。示例代码如下。<importsrc="item.wxml"/><templateis="item"data="{{text:'forbar'}}"/>1．import引用3.1.7引用功能<!--index.wxml--><includesrc="header.wxml"/><view>body</view><includesrc="footer.wxml"/><!--header.wxml--><view>header</view><!--footer.wxml--><view>footer</view>include可用于引用目标文件中除<template>之外的整个文件内容，相当于将其复制到<include>标签。示例代码如下。2．include引用3.1.8事件绑定事件绑定是一种常用的编程技术，用于在用户与小程序交互时，捕获用户的操作并触发相应的响应。微信小程序中的事件类型如下。1．事件类型01OPTION02OPTION03OPTION04OPTION点击事件（bindtap、catchtap）：用户点击某个组件时触发。输入事件（bindinput、catchinput）：用户在输入框中输入内容时触发。滑动事件（bindtouchstart、bindtouchmove、bindtouchend、catchtouchstart、catchtouchmove、catchtouchend）：用户在屏幕上滑动时触发。生命周期事件（onLoad、onReady、onShow、onHide、onUnload等）：在小程序加载时、页面显示时、页面隐藏时等触发。05OPTION06OPTION表单事件（bindsubmit、bindreset）：用户提交表单时触发。自定义事件（bind、catch）：开发者可以通过自定义事件，在组件之间进行通信。3.1.8事件绑定<buttonbindtap="onButtonClick">bind点击事件</button>（1）以bind开头的事件属性表示绑定非冒泡事件，即事件只会在当前组件上触发，不会向上层组件传递。示例代码如下。（2）以catch开头的事件属性表示绑定冒泡事件，即事件会从当前组件一直传递到父组件，直到被某个组件处理或者事件冒泡到了页面。示例代码如下。<buttoncatchtap="onButtonClick">catch点击事件</button>2．事件绑定方法3.1.9数据传递<viewdata-name="John"data-age="25"data-gender="male">用户信息</view>可以使用标签的data-*属性来传递自定义数据，例如data-id="{{id}}"，然后在事件处理函数中通过event.currentTarget.dataset来获取传递的数据。以上代码通过为<view>标签设置data-name、data-age和data-gender属性，并分别设置对应的数据，从而在WXML中传递了用户的姓名、年龄和性别。3.1.10小试牛刀：天气微信小程序天气微信小程序，用来显示温度、最低温度、最高温度及其他天气情况，如下图所示。下面我们通过数据绑定的方式来显示天气情况（实例位置：源码\第3章\weather）。创建一个天气“weather”项目，如右图所示。步骤一：创建“weather”项目3.1.10小试牛刀：天气微信小程序进入index.wxml、index.js、index.wxss文件，清空所有的内容，进入app.json文件，修改导航栏标题为“中国天气网”。步骤二：进入index.wxml文件，进行页面布局，包括当前温度、当天最低温度和当天最高温度、天气类型、城市、星期几和风向情况。示例代码如下。步骤三：<viewclass="content"><viewclass="today"><viewclass="info"><viewclass="temp">℃</view><viewclass="lowhigh"></view><viewclass="type"></view><viewclass="city"></view><viewclass="week"></view><viewclass="wind"></view></view></view></view>3.1.10小试牛刀：天气微信小程序进入index.js文件，在data里提供天气数据，用于页面显示。示例代码如下。步骤四：Page({data:{temp:"4",low:"-1℃",high:"10℃",type:"晴",city:"北京",week:"星期二",wind:"无持续风向

微风级"}})进入index.wxml文件，将data里提供天气情况的数据绑定到页面里。步骤五：3.1.10小试牛刀：天气微信小程序代码如下。<viewclass="content"><viewclass="today"><viewclass="info"><viewclass="temp">{{temp}}℃</view><viewclass="lowhigh">{{low}}/{{high}}</view><viewclass="type">{{type}}</view><viewclass="city">{{city}}</view><viewclass="week">{{week}}</view><viewclass="wind">{{wind}}</view></view></view></view>天气情况界面效果如上图所示。3.1.10小试牛刀：天气微信小程序.content{font-family:微软雅黑,宋体;font-size:14px;background-size:cover;height:100%;width:100%;color:#333333;}.today{padding-top:70rpx;height:50%;}.temp{font-size:80px;text-align:center;}进入index.wxss文件，为index.wxml文件添加样式，美化页面。代码如下。步骤六：.city{font-size:20px;text-align:center;margin-top:20rpx;margin-right:10rpx;}.lowhigh{font-size:12px;text-align:center;margin-top:30rpx;}.type{font-size:16px;text-align:center;margin-top:30rpx;}.week{font-size:12px;text-align:center;margin-top:30rpx;}.weather{font-size:12px;text-align:center;margin-top:20rpx;}在JS文件中，通过数据绑定将data中的数据动态显示在页面上，可以实现内容的实时加载与更新，从而增强页面的交互性与动态效果。目录导航3.1

WXML3.3

JavaScript语言3.5

沙场大练兵：仿“香哈菜谱”微信小程序3.4

WXS语言3.6小结3.2

WXSS样式语言3.2.1WXSS介绍WXSS是一种类似于CSS的样式语言，用于定义微信小程序页面的样式。它具有以下特点。轻量级01WXSS的语法简洁，只包含一些基本的样式定义规则，避免了复杂的样式继承和层叠机制，从而减小了样式文件的大小，有助于小程序的快速加载和高性能运行。响应式像素02WXSS引入了一种特殊的尺寸单位：响应式像素（ResponsivePixel，rpx），用于在具有不同屏幕尺寸的设备上实现样式的自适应。样式作用域限制03WXSS中的样式定义默认只作用于当前页面，避免了全局样式的污染和冲突，同时减小了样式文件的大小。如果需要在多个页面中共享样式，可以引用外部样式文件或者使用全局样式。支持组件化开发04微信小程序采用了组件化的开发方式，而WXSS可以与微信小程序组件和模块良好地集成。每个小程序页面可以包含多个自定义组件，而每个组件都可以有自己独立的WXSS文件，从而实现了样式的模块化管理和复用。支持动画效果05WXSS支持通过关键帧动画和过渡效果来实现丰富的动画效果，从而提升了微信小程序页面的交互性和用户体验。3.2.2WXSS语法1．选择器选择器用于选择页面中的元素，并为其定义样式。WXSS支持标签选择器、类选择器、ID选择器和属性选择器等多种选择器。示例代码如下。/*标签选择器*/view{color:#333;font-size:14px;}/*类选择器*/.text{font-weight:bold;}/*ID选择器*/#title{font-size:18px;}/*属性选择器*/[hidden]{display:none;}3.2.2WXSS语法2．样式属性和值样式属性和值用于设置元素的样式。WXSS支持类似于CSS的属性和值，如颜色、字体大小、背景颜色、边框、尺寸和位置等，以便于开发者快速上手。示例代码如下。/*设置文本颜色和字体大小*/view{color:#333;font-size:14px;}/*设置背景颜色和边框*/.button{background-color:#007AFF;border:1pxsolid#007AFF;}3.2.2WXSS语法3．值的单位WXSS支持多种单位，用于设置样式的尺寸和位置。常见的单位包括px（像素）、rpx（响应式像素）、%（百分比）等。其中rpx是微信小程序特有的单位，用于实现样式自适应。示例代码如下。/*设置元素的宽度和高度*/.view{width:200px;height:100rpx;}/*设置边距和内边距*/.button{margin-top:20px;padding:10rpx;}3.2.2WXSS语法4．样式的继承和层叠WXSS支持样式的继承和层叠。样式的继承指的是子元素会继承父元素的某些样式，例如文本颜色、字体大小等。示例代码如下。/*样式的继承*/.view-container{padding:10px;}.view-title{font-size:16px;color:#007AFF;}/*样式的层叠*/.view-title{color:#FF0000;/*优先级高的样式会覆盖优先级低的样式*/}3.2.2WXSS语法5．注释WXSS支持使用/*...*/来添加注释，注释内容不会被编译和渲染。示例代码如下。/*这是一个注释*/.view{color:#333;font-size:14px;}3.2.3尺寸单位rpx是微信小程序特特有的可以根据屏幕宽度进行自适应的尺寸单位。微信小程序规定屏幕宽度为750rpx。如手机屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，即1rpx=0.5px=1物理像素。rpx与px的换算如表所示。rpx与px的换算设备rpx换算px（屏幕宽度/750）px换算rpx（750/屏幕宽度）华为P60Pro假设屏幕宽度为360px，则1rpx=0.48px1px=2.08rpx华为Mate60Pro假设屏幕宽度为392px，则1rpx≈0.523px1px≈1.91rpx华为nova12Ultra假设屏幕宽度为345px，则1rpx=0.46px1px≈2.17rpx3.2.4样式导入

使用@import语句可以导入外联样式表。@import后跟需要导入的外联样式表的相对路径。用英文分号（;）表示语句结束。示例代码如下。/**common.wxss**/.small-p{padding:5px;}/**app.wxss**/@import"common.wxss";.middle-p{padding:15px;}上述代码表示在app.wxss文件里，将common.wxss文件样式引入使用。3.2.5内联样式WXML视图组件上可以使用style、class属性来控制组件的样式。（1）style：静态的样式统一写到class中。style接收动态的样式，在运行时会进行解析。请尽量避免将静态的样式写进style中，以免影响渲染速度。<viewstyle="color:red;"/> //静态的样式写进style<viewstyle="color:{{color}}"/> //动态获取（2）class：用于指定样式规则，其属性值是样式规则中类选择器名（样式类名）的集合。样式类名不需要带上点号（.）。样式类名之间用空格分隔。<viewclass="normal_view"/>3.2.6选择器现阶段WXSS支持的选择器选择器样例样例描述.class.intro选择所有拥有class="intro"的组件#id#firstname选择拥有id="firstname"的组件elementview选择所有view组件element,elementview,checkbox选择所有view组件和所有checkbox组件::afterview::after在view组件后边插入内容::beforeview::before在view组件前边插入内容WXSS渲染支持由选择器来控制。现阶段WXSS支持的选择器如表所示。目录导航3.1

WXML3.5

沙场大练兵：仿“香哈菜谱”微信小程序3.4

WXS语言3.6小结3.2

aWXSS样式语言3.3

JavaScript语言3.3.1数据类型和变量JavaScript中有多种数据类型，包括基本数据类型和复杂数据类型。可以使用var、let或const关键字来声明变量。示例代码如下。varnum=10; //声明一个数字类型的变量letstr='Hello'; //声明一个字符串类型的变量constflag=true; //声明一个布尔值类型的常量const一般在导入一个模块或者定义全局常量时使用。全局常量一旦定义，无法更改。let可限制变量的作用域，保证变量不会污染全局变量。let用于定义块级变量，不能重复声明，否则会报错。所以应尽量使用var而不是let。var变量具有函数作用域（或全局作用域），且在同一作用域内允许重复声明并覆盖先前的值。3.3.2运算符和控制流JavaScript支持各种算术、比较、逻辑等运算符，可进行各种数学运算和逻辑判断等运算。同时，JavaScript也支持条件语句（如if语句）、循环语句（如for语句）等，可实现不同的控制流逻辑。varnum1=10;varnum2=20;//判断条件并执行相应的逻辑if(num1>num2){console.log('num1大于num2');}else{console.log('num1小于等于num2');}//使用循环语句计算和varsum=0;for(vari=1;i<=10;i++){sum+=i;}console.log('1到10的和为：',sum);3.3.3函数和事件处理JS中的函数用于封装一段可重复使用的代码，以便需要的时候调用。在微信小程序中，可以通过编写函数来处理事件、实现页面逻辑和处理数据等。示例代码如下。<view>{{msg}}</view><buttonbindtap="clickMe">点击我</button>//定义一个函数，用于处理按钮点击事件Page({data:{msg:''},clickMe:function(){this.setData({msg:"HelloWorld"})}})3.3.4异步编程在微信小程序中，涉及与网络请求、定时器等相关的异步操作时，可以使用JavaScript的异步编程方式，如Promise、async/await等来处理。示例代码如下。//使用Promise处理异步请求functionfetchData(){returnnewPromise((resolve,reject)=>{wx.request({url:'',success:(res)=>{resolve(res.data);},fail:(err)=>{reject(err);}});}//调用异步函数并处理返回的数据fetchData().then((data)=>{console.log('获取到的数据：',data);}).catch((err)=>{console.error('请求数据失败：',err);});//使用async/await处理异步请求asyncfunctionfetchData(){try{constres=awaitwx.request({url:''});returnres.data;}catch(err){thrownewError('请求数据失败：'+err);}}//调用异步函数并处理返回的数据fetchData().then((data)=>{console.log('获取到的数据：',data);}).catch((err)=>{console.error(err);});3.3.5对象和数组操作对象和数组是JavaScript中的常用数据结构，可以通过对象来表示键值对的集合，通过数组来表示一组有序的值。在微信小程序中，可以使用对象和数组来处理页面数据和状态等。示例代码如下。//定义一个对象，表示用户信息constuser={name:'张三',age:25,gender:'男'};//访问对象的属性console.log('用户名：',);console.log('年龄：',user['age']);//定义一个数组，表示用户列表constuserList=[{name:'张三',age:25,gender:'男'},{name:'李四',age:30,gender:'女'},{name:'王五',age:28,gender:'男'}];//访问数组的元素console.log('第一个用户：',userList[0]);console.log('第一个用户的姓名：',userList[0].name);3.3.6模块化开发微信小程序支持模块化开发，可以将代码拆分成多个模块，分别管理和导入。在模块中可以定义函数、变量、类等，通过module.exports导出模块，通过require导入模块。示例代码如下。//utils.js模块functionformatTime(timestamp){//实现时间格式化的逻辑}functionshowToast(message){//实现显示消息提示框的逻辑}module.exports={formatTime,showToast};//在其他地方导入并使用utils.js模块constutils=require('./utils.js');console.log(utils.formatTime(Date.now()));utils.showToast('Hello,World!');3.3.7使用限制JavaScript在微信小程序中的使用存在一些限制，基于安全考虑，微信小程序不支持动态执行JavaScript代码。DOM操作window和document对象eval函数全局变量跨页面通信微信小程序不支持直接操作DOM，因为小程序中并没有完整的DOM树结构。在小程序中，没有window和document对象，因为小程序没有浏览器环境。因此，无法直接使用window和document对象中的属性和方法。微信小程序不支持使用eval函数，因为eval函数在小程序中存在安全风险，可能导致恶意代码执行和信息泄露。在微信小程序中，无法直接定义全局变量，因为微信小程序中的每个页面都有独立的作用域。如果需要在多个页面之间共享数据，需要使用微信小程序提供的全局数据和事件机制进行通信。微信小程序中的页面是相互独立的，不能直接通过JavaScript在不同页面之间进行通信，需要使用小程序提供的事件、消息、缓存等方式进行跨页面通信。3.3.7使用限制动态脚本加载定时器跨域请求第三方库限制网络限制微信小程序不支持使用动态脚本加载方式，例如通过添加<script>标签动态加载外部脚本文件。在微信小程序中，定时器的使用受到限制，setInterval和setTimeout的最小时间间隔为4ms，并且在小程序切入后台时，定时器会被暂停。微信小程序中的网络请求受到跨域限制，只能访问与小程序发布域名一致的接口，无法直接访问其他域名的接口。虽然微信小程序支持使用第三方库，但并不是所有的JavaScript库都可以直接在小程序中使用。有些依赖浏览器环境的库可能无法在小程序中正常运行，需要进行适配或使用小程序专用的库。微信小程序中的网络请求只能通过微信提供的API进行，不能直接使用XMLHttpRequest或Fetch等标准的WebAPI进行。目录导航3.1

WXML3.5

沙场大练兵：仿“香哈菜谱”微信小程序3.6小结3.2

aWXSS样式语言3.4

WXS语言3.3

JavaScript语言3.4

WXS语言<!—WXML文件--><wxsmodule="m1">varmsg="helloworld";module.exports.message=msg;</wxs><view>{{m1.message}}</view>WXS是微信小程序的一套脚本语言，结合WXML，可以构建出页面的结构。它把原来放在JS文件里进行处理的逻辑，直接放在WXML文件里进行处理。它有两种使用方式：///pages/tools.wxsvarfoo="'helloworld'fromtools.wxs";varbar=function(d){returnd;}module.exports={FOO:foo,bar:bar,};module.exp0orts.msg="somemsg";<!--page/index/index.wxml--><wxssrc="./../tools.wxs"module="tools"/><view>{{tools.msg}}</view><view>{{tools.bar(tools.FOO)}}</view>第1种第2种3.4.1模块化WXS小程序脚本语言是以模块化的形式存在的。在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。一个模块要想对外暴露其内部的私有变量与函数，只能通过module.exports实现。///pages/comm.wxsvarfoo="'helloworld'fromcomm.wxs";varbar=function(d){returnd;}module.exports={foo:foo,bar:bar};在.wxs文件模块中引用其他.wxs文件模块，可以使用require函数。在.wxs文件里只能引用.wxs文件模块，且必须使用相对路径。.wxs文件模块均为单例，多个地方、多个页面、多次引用，使用的都是同一个.wxs文件模块对象。如果一个.wxs文件模块在定义之后，一直没有被引用，则该模块不会被解析与运行。///pages/tools.wxsvarfoo="'helloworld'fromtools.wxs";varbar=function(d){returnd;}module.exports={FOO:foo,bar:bar,};module.exports.msg="somemsg";///pages/logic.wxsvartools=require("./tools.wxs");console.log(tools.FOO);console.log(tools.bar("logic.wxs"));console.log(tools.msg);<!--/page/index/index.wxml--><wxssrc="./../logic.wxs"module="logic"/>3.4.2变量与数据类型varfoo=1;varbar="helloworld";vari;//i===undefined1.变量的使用WXS中的变量均为值的引用，如果只声明变量而不赋值，则默认值为undefined。变量名命名规则如下。首字符必须是字母（a～z、A～Z）、下划线（_）。剩余字符可以是字母（a～z、A～Z）、下划线（_）、数字（0~9）。保留标识符不能作为变量名，如delete、void、typeof、null、undefined、NaN、Infinity、var、if、else、true、false、require、this、function、arguments、return、for、while、do、break、continue、switch、case、default。3.4.2变量与数据类型vara=10;varPI=3.141592653589793;2.数据类型number包括两种数值：整数、小数。string有如下两种写法。（1）number数值类型。（2）string字符串类型。'helloworld';"helloworld";（3）boolean布尔值类型。布尔值只有两个特定的值：True和False。object是一种无序的键值对。使用方法如下所示。（4）object对象类型。3.4.2变量与数据类型varo={} //生成一个新的空对象//生成一个新的非空对象o={'string':1, //object的key可以是字符串

const_var:2, //object的key也可以是符合变量定义规则的标识符

func:{}, //object的value可以是任何类型};//对象属性的读操作console.log(1===o['string']);console.log(2===o.const_var);//对象属性的写操作o['string']++;o['string']+=10;o.const_var++;o.const_var+=10;//对象属性的读操作console.log(12===o['string']);console.log(13===o.const_var);3.4.2变量与数据类型//方法1functiona(x){returnx;}//方法2varb=function(x){returnx;}function支持以下定义方式。（5）function函数类型。function同时也支持以下语法（匿名函数、闭包等）。vara=function(x){returnfunction(){returnx;}}vara=[]; //生成一个新的空数组a=[1,"2",{},function(){}]; //生成一个新的非空数组，数组元素可以是任何类型array支持以下定义方式。（6）array数组类型。3.4.2变量与数据类型getDate()getDate(milliseconds)getDate(datestring)getDate(year,month[,date[,hours[,minutes[,seconds[,milliseconds]]]]])（7）date日期类型。生成date对象需要使用getDate函数，返回一个当前时间的对象。参数如下：•milliseconds：从1970年1月1日00:00:00UTC开始计算的毫秒数。•datestring：日期字符串。其格式为："monthday,yearhours:minutes:seconds"。getRegExp(pattern[,flags])生成regexp对象需要使用getRegExp函数。（8）regexp正则类型。参数如下：•pattern：正则表达式的内容。•flags：修饰符。该字段只能包含以下字符：g：globali：ignoreCasem：multiline。3.4.3注释<wxsmodule="sample">//方法一：单行注释//varname="小刚";//方法二：多行注释/*vara=1;varb=2;*///方法三：结尾注释，即从/*开始往后的所有WXS代码均被注释/*vara=1;varb=2;varc="fake";</wxs>WXS注释有3种方式：单行注释、多行注释和结尾注释。注释方法如下。3.4.4语句if(表达式){

代码块;}elseif(表达式){

代码块;}elseif(表达式){

代码块;}else{

代码块;}示例代码如下。

varage=10;if(age<18){console.log("未成年");}elseif(age<28){console.log("青年");}else{console.log("壮年");}1.if条件语句示例语法如下。switch(表达式){case变量:

语句;case数字:

语句;break;case字符串:

语句;default:

语句;}2.switch语句示例语法如下。varexp=10;switch(exp){case"10":console.log("string10");break;case10:console.log("number10");break;caseexp:console.log("varexp");break;default:console.log("default");}示例代码如下。3.4.4语句for(语句;语句;语句){

代码块;}示例代码如下。

for(vari=0;i<3;++i){console.log(i);if(i>=1)break;}3.for循环语句示例语法如下。while(表达式){

代码块;}示例代码如下。do{

代码块;}while(表达式)4.while循环语句示例语法如下。for循环语句支持使用break、continue关键词。目录导航3.1

WXML3.6小结3.2

aWXSS样式语言3.4

WXS语言3.3

JavaScript语言3.5沙场大练兵：仿“香哈菜谱”微信小程序3.5沙场大练兵：仿“香哈菜谱”微信小程序“香哈菜谱”是围绕美食而创作的一款小程序，在这里可以查看各式各样的菜谱。对于菜谱类App，用户使用的频率并不高，只有当遇到不会做的菜式或者想尝试一些新的菜式时，用户才会去App查看，而微信小程序就适用于这种低频使用的场景，其部分页面如图所示（实例位置：源码\第3章\xhcp）。“学做菜”页面3.5.1底部标签导航设计仿“香哈菜谱”微信小程序底部有5个导航标签：“学做菜”“头条”“美食圈”“消息”“我的”。标签导航被选中时，导航图标会变为红色图标，导航文字会变为红色，如右图所示。新建一个香哈菜谱“xhcp”项目，如图所示。步骤一：将准备好的底部标签导航图标、美食轮播图片、宫格导航图标、香哈头条美食图片图片复制到pages文件夹下。步骤二：底部标签导航选中效果新建项目3.5.1底部标签导航设计打开app.json配置文件，在pages数组里添加5个页面路径：“pages/cook/cook”“pages/headline/headline”“pages/food/food”“pages/message/message”“pages/me/me”，保存后会自动生成相应的页面文件夹；删除“pages/index/index”“pages/logs/logs”页面路径及对应的文件夹，如图所示。步骤三：在window数组里配置窗口导航背景颜色为灰色（#494949）、导航栏文字为“学做菜”、字体颜色为白色（#ffffff），具体配置如图所示。步骤四：配置页面路径窗口及导航栏配置3.5.1底部标签导航设计在tabBar对象里配置底部标签导航背景色为白色（#ffffff）、文字默认颜色为灰色（#999999）、选中时为红色（#CC1004）。在list数组里配置底部标签导航对应的页面、导航名称、默认时图标、选中时图标。具体配置如图所示。步骤五：底部标签导航配置这样就完成了仿“香哈菜谱”微信小程序的底部标签导航配置。点击不同的导航，可以切换显示不同的页面，同时导航图标和导航文字会呈现为选中状态，效果如图所示。底部标签导航配置效果3.5.2宫格导航设计在“学做菜”这个界面里，有了海报轮播的图片（在微信小程序里有专门的swiper滑块视图组件实现这个效果，在4.1.3节中会详细讲解），还有4个宫格导航：“菜谱分类”“视频”“美食”和“闪购”。进入pages/cook/cook.wxml文件，先设计海报轮播区域。采用一张图片来进行布局，图片的宽度设置为100%，高度设置为230px。具体代码如下。步骤一：<viewclass="content"><viewclass="img"><imagesrc="../images/haibao/haibao-1.jpg"style="width:100%;height:230px;"></image></view></view>界面效果如下图所示。3.5.2宫格导航设计美食轮播图片和宫格导航页面效果设计宫格导航。分为4个导航：“菜谱分类”“视频”“美食养生”“闪购”。每个导航对应一个图标。在导航的下面是灰色的间隔线。具体代码如下。步骤二：3.5.2宫格导航设计<viewclass="content"><viewclass="img"><imagesrc="../images/haibao/haibao-1.jpg"style="width:100%;height:230px;"></image></view><viewclass="nav"><viewclass="nav-item"><view><imagesrc="../images/icon/fenlei.jpg"style="width:25px;height:23px;"></image></view><view>菜谱分类</view></view><viewclass="nav-item"><view><imagesrc="../images/icon/shipin.jpg"style="width:25px;height:23px;"></image></view><view>视频</view></view><viewclass="nav-item"><view><imagesrc="../images/icon/meishi.jpg"style="width:25px;height:23px;"></image></view><view>美食</view></view><viewclass="nav-item"><view><imagesrc="../images/icon/shangou.jpg"style="width:25px;height:23px;"></image></view><view>闪购</view></view></view><viewclass="hr"></view></view>3.5.2宫格导航设计进入pages/cook/cook.wxss文件，针对宫格导航添加样式。具体代码如下。步骤三：.nav{display:flex;flex-direction:row;text-align:center;}.nav-item{width:25%;margin-top:20px;font-size:12px;}.hr{height:15px;background-color:#cccccc;margin-top:15px;opacity:0.2;}.head{display:flex;flex-direction:row;margin:10px;font-size:13px;color:#999999;}.right{position:absolute;right:10px;color:#cccccc;}.hr2{height:2px;background-color:#cccccc;opacity:0.2;}宫格导航效果如图所示。至此，美食图片轮播和宫格页面设计完成。3.5.3香哈头条初始化数据作为客户端，微信小程序的数据来源于服务端。下面我们就模拟一下服务端提供的香哈头条列表的数据。有了数据，页面才能动态地进行渲染。进入pages/cook/cook.js文件，添加initData函数，在data页面初始化数据里添加array数组，然后将initData定义的数据通过setData设值函数赋值给array数组。具体代码如下。Page({data:{array:[]},onLoad:function(options){vararray=this.initData();this.setData({array:array});},initData:function(){vararray=[];varobject1=newObject();object1.img='../images/list/food-1.jpg';object1.title='爱心早餐';object1.type='健康每一天';object1.liulan='20696浏览';object1.pinglun='7评论';array[0]=object1;varobject2=newObject();object2.img='../images/list/food-2.jpg';object2.title='多吃蔬菜';object2.type='家庭医生在线';object2.liulan='29628浏览';object2.pinglun='13评论';array[1]=object2;varobject3=newObject();object3.img='../images/list/food-3.jpg';object3.title='橘子吃多变小黄人';object3.type='家庭医生在线';object3.liulan='19585浏览';object3.pinglun='6评论';array[2]=object3;varobject4=newObject();object4.img='../images/list/food-4.jpg';object4.title='搜狐新闻，手机用久了';object4.type='资讯';object4.liulan='4688浏览';object4.pinglun='4评论';array[3]=object4;varobject5=newObject();object5.img='../images/list/food-5.jpg';object5.title='困了只想喝咖啡';object5.type='家庭医生在线';object5.liulan='29628浏览';object5.pinglun='13评论';array[4]=object5;returnarray;}})3.5.4香哈头条列表渲染及绑定数据香哈头条里有菜谱的图片、美食名称、分类、浏览数量及评论数量。下面我们就来制作香哈头条列表。<viewclass="content"><viewclass="img"><imagesrc="../images/haibao/haibao-1.jpg"style="width:100%;height:230px;"></image></view><viewclass="nav"><viewclass="nav-item"><view><imagesrc="../images/icon/fenlei.jpg"style="width:25px;height:23px;"></image></view><view>菜谱分类</view></view><viewclass="nav-item"><view><imagesrc="../images/icon/shipin.jpg"style="width:25px;height:23px;"></image></view><view>视频</view></view><viewclass="nav-item"><view><imagesrc="../images/icon/meishi.jpg"style="width:25px;height:23px;"></image></view><view>美食</view></view>（1）进入pages/cook/cook.wxml文件，进行香哈头条列表的布局设计。具体代码如下。3.5.4香哈头条列表渲染及绑定数据<viewclass="nav-item"><view><imagesrc="../images/icon/shangou.jpg"style="width:25px;height:23px;"></image></view><view>闪购</view></view></view><viewclass="hr"></view>

<viewclass="head"><view>香哈头条</view><viewclass="right">></view></view><viewclass="list"><viewclass="item"bindtap="seeDetail"id="0"><view><imagesrc="../images/list/food-1.jpg"style="width:75px;height:58px;"></image></view><viewclass="desc"><viewclass="title">爱心早餐</view><viewclass="count"><view>健康每一天</view><viewclass="liulan">20696浏览</view><viewclass="pinglun">7评论</view></view></view></view><vie