微信小程序_模板与配置

一、目标

A. 能够使用WXML模板语法渲染页面结构
B. 能够使用WXSS样式装饰页面结构
C. 能够使用app.json对小程序进行全局性配置
D. 能够使用page.json对小程序页面进行个性化配置
E. 能够知道如何发起网络数据请求

二、目录

A. WXML模板语法
B. WXSS模板样式
C. 全局配置
D. 页面配置
E. 网络数据请求
F. 案例-本地生活（首页）

三、wxml模板语法-数据绑定

3.1 数据绑定的基本原则

A. 在data中定义数据
B. 在WXML中使用数据

3.2 在data中定义页面的数据

在页面对应的.js文件中，把数据定义到data对象中即可
在这里插入图片描述

3.3 mustache语法的格式

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式为：

<!-- 1.绑定数据 -->
<view>我现在向世界问好：{{msg}}</view>
<view>我喜欢的颜色：{{colors}}</view>
<view>我喜欢的其中一个颜色：{{colors[1]}}</view>

3.4 mustache语法的应用场景

Mustache语法的主要应用场景如下：
绑定内容
绑定属性
运算（三元运算、算术运算等）

3.5 动态绑定

对应的js文件
在这里插入图片描述
对应的wxml文件

<!-- 2.动态绑定 -->
<image src="{{imgSrc}}" mode="widthFix"></image>
<view>{{num1>=5?"随机数>=5":"随机数<5"}}</view>
<view>生成100以内的随机数：{{num2*100}}</view>

界面效果：
在这里插入图片描述

四、wxml模板语法-事件绑定

4.1 什么是事件

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务
的处理

4.2 小程序中常用的事件

在这里插入图片描述

4.3 事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象event,它的详细属性如下表所示：

在这里插入图片描述

4.4 target和currentTarget的区别

target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件。举例如下：
在这里插入图片描述
点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。此时，对
于外层的view来说：
A. e.target指向的是触发事件的源头组件，因此，e.target是内容的按钮组件
B. e.currentTarget指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view组件

4.5 bindtap的语法格式

在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。
A. 通过bindtap,可以为组件绑定tap触摸事件，语法如下：

<button type="primary" bind:tap="handle1">按钮1</button>
<button type="warn" bidntap="handle2">按钮2</button>

B.在页面的.js文件中定义对应的事件处理函数，事件参数通过event(一般简写成e)来接收：
在这里插入图片描述

4.6 在事件处理函数中的data中的数据赋值

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，示例如下：
在这里插入图片描述

4.7 事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代码将
不能正常工作：

<button type="warn" bindtap="handle2(2)">按钮2</button>

因为小程序会把bindtap的属性值，统一当作事件名称来处理，相当于要调用一个名称为handle2(2)的事
件处理函数
可以为组件提供data-自定义属性传参，其中代表的是参数的名称，示例代码如下：

<button type="warn" bindtap="handle2" data-info="{{2}}">按钮2</button>

最终：
A. info会被解析为参数的名字
B. 数值2会被解析为参数的值
在事件处理函数中，通过event.target.dataset.参数名即可获取到具体参数的值，示例代码如下：
在这里插入图片描述

4.8 bindinput的语法格式

在小程序中，通过input事件来响应文本框的输入事件，语法格式如下：
A. 通过bindinput，可意味文本框输入事件

<input type="text" bindinput="handler3"/>

B.在页面js文件中定义事件处理函数
在这里插入图片描述

4.9 实现文本框和data之间的数据同步

实现步骤：
A. 定义数据
B. 渲染结构
C. 美化样式
D. 绑定input事件处理函数

五、wxml模板语法-条件渲染

5.1 wx:if

在小程序中，使用wx:if=”{{condition}}”来判断是否需要渲染该代码块：

<view wx:if="{{true}}">我是最棒的</view>

也可以用wx:elif和wx:else来添加else判断

<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===2}}">女</view>
<view wx:else>其他</view>

5.2 结合使用wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个标签将多个组件包装起来，并在标签上使用
wx:if控制属性，示例如下:

<block wx:if="{{false}}"><view>view1</view><view>view2</view>
</block>

注意：并不是一个组件，它只是一个包括性质的容器，不会在页面中做任何渲染

5.3 hidden

在小程序中，直接使用hidden=”{{condition}}”也能控制元素的显示与隐藏：

<view hidden="{{false}}">条件为true隐藏，条件为false显示</view>

5.4 wx:if与hidden的对比

A. 运行方式不同
wx:if以动态创建和移除元素的方式，控制元素的展示和隐藏
hidden以切换样式的方式（display:none/block）,控制元素的显示与隐藏
B.使用建议
频繁切换时，建议使用hidden
控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换

六、WXML模板语法-列表渲染

6.1 wx:for

通过wx:for可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：

<view>我喜欢的颜色：<view wx:for="{{colors}}">索引是：{{index}},当前项：{{item}}</view>
</view>

默认情况下，当前循环项的索引用index表示；当前循环项用item表示。

6.2 手动指定索引和当前项的变量名

A. 使用wx:for-index可以指定当前循环项的索引的变量名
B. 使用wx:for-item可以指定当前项的变量名
示例代码如下：

<view wx:for="{{colors}}" wx:for-index="idx" wx:for-item="itemName">索引是：{{idx}},当前项：{{itemName}}
</view>

6.3 wx:key的使用

类似于Vue列表渲染中的:key,小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值,
从而提高渲染的效率，示例代码如下：

<view wx:for="{{colors}}" wx:for-index="idx" wx:for-item="itemName" wx:key="item">索引是：{{idx}},当前项：{{itemName}}
</view>

七、WXSS模板样式

7.1 什么是wxss

WXSS(WeiXin Style Sheets)是一套样式语言，用于美化WXML的组件样式，类似于网页开发中的CSS

7.2 wxss和css的关系

WXSS具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。与
CSS相比，WXSS扩展的特性有：
A. rpx尺寸单位
B. @import样式导入
在这里插入图片描述

7.3 wxss模板样式-rpx

7.3.1 什么是rpx尺寸单位

rpx(responsive pixel)是微信小程序独有的，用来解决屏适配的尺寸单位

7.3.2 rpx的实现原理

rpx的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设别的
屏幕，在宽度上等分为750份（即：当前屏幕的总宽度为750rpx）
A. 在较小的设备上，1rpx所代表的宽度较小
B. 在较大的设备上，1rpx所代表的宽度较大
小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕
适配

7.3.3 rpx与px之间的单位换算

在iPhone6上，屏幕宽度为375px,共有750个物理像素，等分为750rpx。则：
750rpx=375px=750物理像素
1rpx=0.5px=1物理像素
在这里插入图片描述
官方建议：开发微信小程序时，设计师可以用iPhone6作为视觉稿的标准
开发举例：在iPhone6上如果要绘制宽100px,高20px的盒子，换算成rpx单位，宽高分别为 200rpx 和 40rpx

7.4 wxss模板样式-样式导入

7.4.1 什么是样式导入

使用WXSS提供的@import语法，可以导入外联的样式表

7.4.2 @import的语法格式

@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。示例如下：
在这里插入图片描述

八、wxss模板样式-全局样式和局部样式

8.1 全局样式

定义在app.wxss中的样式为全局样式，作用于每一个页面

8.2 局部样式

在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面
注意：
A. 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
B. 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式
在这里插入图片描述

在这里插入图片描述

九、全局配置

9.1 全局配置文件及常用的配置项

小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下：
A. pages,记录当前小程序所有页面的存放路径
B. window,全局设置小程序窗口的外观
C. tabBar,设置小程序底部的tabBar效果
D. style,是否启动新版的组件样式

9.2 全局配置-window

9.2.1 小程序窗口的组成部分

在这里插入图片描述

9.2.2 导航栏信息

在这里插入图片描述

9.2.3 全局开启下拉刷新功能

概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。设置步骤：app.json->window->enablePullDownRefresh的值设置为true.
注意：在app.json中启动下拉刷新新功能，会作用于每个小程序页面。
在这里插入图片描述

9.2.4 背景

在这里插入图片描述

9.2.5 上拉触底

概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
设置步骤：app.json->window->为onReachBottomDistance设置新的数值
注意：默认距离为50px,如果没有特殊需求，建议使用默认值即可。
在这里插入图片描述

十、全局配置-tabbar

10.1 什么是tabbar

tabBar是移动端引用常用的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：
A. 底部tabBar
B. 顶部tabBar
注意：
A. tabBar中只能配置最少2个、最多5个tab页签
B. 当渲染顶部tabBar时，不显示icon,只显示文本

10.2 tabbar的6个组成部分

在这里插入图片描述
A. backgroundColor:tabBar的背景色
B. selectedIconPath:选中时的图片路径
C. borderStyle:tabBar上边框的颜色
D. iconPath:未选中时的图片路径
E. selectedColor:tab上的文字选中时的颜色
F. color:tab上文字的默认（未选中）颜色

10.3 tabbar节点的配置项

在这里插入图片描述

10.4 每个tab项的配置选项

在这里插入图片描述

"tabBar": {"color": "#ff0000","selectedColor": "#00ff00","backgroundColor":"#0000ff","list": [{"pagePath": "pages/1index/1index","text": "首页","iconPath": "imgs/info2.png","selectedIconPath": "imgs/info1.png"},{"pagePath": "pages/2tap/2tap","text": "商品","iconPath": "imgs/smile2.png","selectedIconPath": "imgs/smile1.png"},{"pagePath": "pages/3for/3for","text": "联系我们","iconPath": "imgs/info2.png","selectedIconPath": "imgs/info1.png"}]
},

十一、页面配置

11.1 页面配置文件的作用

小程序中，每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置

11.2 页面配置和全局配置的关系

小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。如果某些小程序
页面想要拥有特殊的窗口表现，此时，”页面级别的.json配置文件”就可以实现这种需求。
注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准

11.3 页面配置中常用的配置项

在这里插入图片描述

十二、网络数据请求

12.1 小程序中网络数据请求的限制

出于安全性方面的考虑，小程序官方对数据接口的请求作出了如下两个限制：
A. 只能请求HTTPS类型的结构
B. 必须将接口的域名添加到信任列表中
在这里插入图片描述

12.2 配置request合法域名

需求描述：假设在自己的微信小程序中，希望请求 https://www.escook.cn/ 域名下的接口，配置步骤：
登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名。
在这里插入图片描述
注意事项：
A. 域名只支持https协议
B. 域名不能使用IP地址或localhost
C. 域名必须经过ICP备案
D. 服务器域名一个月内最多可申请5次修改

12.3 跳过request合法域名校验

如果后端程序员仅仅提供了http协议的接口、暂时没有提供https协议的接口。
此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启【开发环境不校验请求域名、
TLS版本及HTTPS证书】选项，跳过request合法域名的校验。
注意：跳过request合法域名校验的选项，仅限在开发与调试阶段使用。
在这里插入图片描述

12.4 发起GET请求

调用微信小程序提供的wx.request()方法，可以发起GET数据请求，示例代码如下：

<button type="primary" bind:tap="getUrl">发送get请求</button>

getUrl() {wx.request({url: 'http://127.0.0.1:8888/test', //请求的接口地址method: "GET", //请求方式data: {name: 'zs',pwd: '123321'},success: (res) => { //请求成功之后的回调函数console.log(res);}})
},

12.5 关于跨域和ajax的说明

跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所
以小程序不存在跨域的问题。
Ajax技术的核心是依赖于浏览器的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，
所以小程序中不能叫做”发起Ajax请求”，而是叫做”发起网络数据请求”。