小程序~二点笔记

小程序~二点笔记

two~day

小程序的模版与配置

目标

• 能够使用 WXML模版语法渲染页面结构
• 能够使用 WXSS样式美化页面结构
• 能够使用 app.json对小程序进行全局配置
• 能够使用 Page.json 对小程序页面进行个性化配置
• 能够知道如何发起网络数据请求

目录

• wxml模版语法
• wxss模版语法
• 全局配置
• 页面配置
• 网络数据请求
• 案例-本地生活(首页)

WXML模版语法-数据绑定

1 数据绑定的基本原则

• 1.1 在data中定义数据
• 1.2 在WXML中使用数据

2 在data中定义页面的数据

在页面对应的 .js1文件中，把数据定义到data对象中即写:

3 Mustache语法的格式

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

4 Mustache 语法的应用场景

Mustache语法的主要应用场景如下:

• 绑定内容
• 绑定属性
• 运算(三元运算、算术运算等)

5 动态绑定内容

页面的数据如下:

页面的结构如下:

6 动态绑定属性

页面的数据如下:

页面的结构如下:

7 三元运算

页面的数据如下:

页面的结构如下:

8 算术运算

页面的数据如下:

页面的结构如下:

模版语法-事件绑定

1 什么是事件

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

2 小程序中常用的事件

3 事件对象的属性列表

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

4 target 和 currentTarget的区别

target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。举例如下:

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数 此时，对于外层的view来说:

• e.target指向的是触发事件的源头组件，因此，e.target是内部的按钮组件
• e.currentTarget指向的是当前正在触发事件的那个组件，因此,e.currentTarget是当前的view的组件

5 bindtap的语法格式

在小程序中，不存在的HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。

1 通过bindtap，可以为组件绑定tao触摸事件，语法如下:

2 在页面的 .js文件中定义对应的事件处理函数，事件参数通过形参event(一般简写成e)来接收:

6 是事件处理函数中为data中的数据赋值

通过调用 this.setData(dataObjetc)方法，可以给页面data中的数据重新赋值，示例如下:

7 事件传参

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

因为小程序会把bindtap的属性值，统一当作事件名称来处理，相当于要调用一个名称为 btnHandler(123)的事件处理函数

可以为组件提供 data-*自定义属性传参，其中 * 代表的是参数的名字，示例代码如下:

最终:

• info会被解析为参数的名字
• 数值2 会被解析为参数的值

事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值，示例代码如下:

8 bindinput的语法格式

在小程序中，通过input事件来响应文本框的输入事件，语法格式如下:

1 通过bindinput，可以为文本框绑定输入事件:

2 在页面的 .js文件中定义事件处理函数:

9 实现文本框和daya之间的数据同步

实现步骤:

• 1 定义数据
• 2 渲染结构
• 3 美化样式
• 4 绑定 input 事件处理函数

定义数据

渲染数据

美化样式

绑定 input事件处理函数

wxml模版语法-条件渲染

1 wx:if

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

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

2 结合 使用wx:if

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

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

3 hidden

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

4 wx:if 与 hidden 的对比

1 运行方式不同

• wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏
• hidden以切换样式的方式(display:none/block;),控制元素的显示与隐藏

2 使用建议

• 频繁切换时，建议使用hidden
• 控制条件复杂时，建议使用 wx:if 搭配 wx:elif,wx:else进行展示与隐藏的切换

wxml模版语法-列表渲染

1 wx:for

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

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

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

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

3 wx:key的使用

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

wxss模版样式

wxss-wsss与css的关系

1 什么是wxss

• wxss(Weixin style sheets)是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的CSS。

2 wxss 和 css 的关系

• wxss具有css大部分特性，同时，wxss还对 css进行了扩充以及修改，以适应微信小程序的开发。与CSS相比，WXSS扩展的特性有: rpx尺寸单位 @import样式导入

wxss-rpx单位

1 什么是rpx尺寸单位

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

2 rpx的实现原理

• rpx的实现原理非常简单:鉴于不同设备屏幕的1大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份(即: 当前屏幕的总宽度为750rpx）

• 在较小的设备上，1rpx所代表的宽度较小

• 在较大的设备上，1rpx所代表的宽度较大

• 小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配

3 rpx 与 px 之间的单位换算*

• 在ipone6，屏幕宽度为375px，共有750个物理像素，等分为750rpx。则：
• 750rpx= 375px = 750物理像素
• 1rpx = 0.5px= 1物理像素

• 官方建议: 开发微信小程序时，设计师可以用 ipone6 作为视觉稿的标准
• 开发举例: 在ipone6 上如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为200rpx 和 40rpx

wxss模版样式-样式导入

1 什么是样式导入

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

2 @import的语法格式

• @import后跟需要导入的外联样式表的相对路径，用； 表示语句结束。示例如下:

wss模版-全局样式与局部样式

1 全局样式

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

2 局部样式

• 在页面的 .wxss文件中定义的样式为局部样式，只作用于当前页面

注意:

• 1 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
• 2 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

全局配置

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

• 小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下:

1 pages

• 记录当前小程序所有页面的存放路径

2 windo

• 全局设置小程序窗口的外观

3 tabBar

• 设置小程序底部的tabBar效果

4 style

• 是否启用新版的组件样式

1 小程序窗口的组成部分

2 了解window节点常用的配置项

3 设置导航栏的标题

• 设置步骤 app.json -> window -> navigationBarTitleText

4 设置导航栏的背景色

• 设置步骤: app.json -> window -> navigationBarBackgroundColor
• 需求: 把导航栏标题的背景色，从默认的 #fff 修改为 #2b4b6b ，效果如图所示:

5 设置导航栏的标题颜色

• 设置步骤: app.json -> window -> navigationBarTextStyle
• 需求 : 把导航条上的标题，从默认的 black 修改为 white, 效果如图所示:

• 注意: navgationBarTextStyle 的可选值只有 black 和 white

6 全局开启下拉刷新功能

• 概念: 下拉刷新是移动端的专业名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。

• 设置步骤: app.json -> window -> 把 enablePullDowmRefresh 的值设置为 true

  注意: 在app.json 中启用下拉刷新功能，会作用于每个小程序页面！

7 设置下课刷新时窗口的背景色

• 当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色，实现步骤如下:
• app.json -> window -> 为backgroundColor 指定16进制的颜色值 #efefef 效果如下:

8 设置下拉刷新时 loading的样式

• 当全局开启下拉刷新功能之后，默认窗口的 loading 样式为白色，如果要更改 loading样式的效果，设置步骤为 app.json -> window -> 为 backgroundTextStyle 指定 dark值。效果如下:

• 注意: backgroundTextStyle 的可选值只有 light 和 dark

  9 设置上拉触底的距离

• 概念: 上拉触底是移动端的专业名词,通过手指在屏幕的上拉滑动操作，从而加载更多数据的行为。

• 设置步骤: app.json -> window -> onReachBottomDistance设置新的数值

• 注意: 默认距离为 50px，如果没有特殊需求，建议使用默认值即可。

全局配置-tabBar

1 什么是tabBar

• tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换，小程序中通常将其分为:
• 底部tabBar
• 顶部tabBar

• 注意:
• tabBar中只能配置最少2个、最多5个 tab页签
• 当渲染顶部 tabBar 时，不显示 icon，只显示文本

2 tabBar的6个组成部分

3 tabBar 节点的配置项

4 每个 tab 项的配置选项

全局配置-案例: 配置tabBar

1 需求描述

• 根据资料中提供的小图标、在小程序中配置如图所示的tabBar效果:

2 实现步骤

• 1 拷贝图标资源
• 2 新建3个对应的tab页面
• 3 配置tabBar选项

3 步骤1-拷贝图标资源

• 1 把资料目录中的images文件夹，拷贝到小程序项目跟目录中
• 2 将需要用到的小图标分为3组，每组两个，其中:
• 图片名称中包含 -active 是选中之后的图标
• 图片名称中不包含 -active的是默认图标
• 截图如下:

3 步骤2-新建3个对应的tab页面

• 通过app.json文件的pages节点，快速新建3个对应的tab页面，示例代码如下:

其中，home是首页，message是消息页面，contact是联系我们的页面

3 步骤3-配置 tabBar选项

1 打开app.json配置文件，和pages、window平级，新增 tabBar节点

2 tabBar节点，新增 List数组，这个数组中存放的，是每个 tab项的配置对象

3 在list 数组中，新增的每一个tab项的配置对象。对象中包含的属性如下:

• pagepath指定当前tab对应的页面路径【必填】
• text指定当前tab上按钮的文字【必填】
• iconpath 指定当前tab未选中的时候图片路径【可选】
• selectediconpath指定当前tab被选中后高亮的图片路径【可选】

页面配置

1 页面配置文件的作用

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

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

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

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

网络数据请求

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

• 出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制:
• 1 只能请求 HTTPS类型的接口
• 2 必须将接口的域名添加到信任列表中

2 配置 request 合法域名

• 需求描述: 假设在自己的微信小程序中，希望请求 www.escook.cn/ 域名下的接口

• 配置步骤: 登录微信小程序管理后台 -> 开发 -> 开发设置 -。 服务器域名 -> 修改request合法域名

  注意事项:

• 1 域名只支持 https 协议

• 2 域名不能使用 ip 地址 或 localhost

• 3 域名必须经过 icp备案

• 4 服务器域名一个月内最多可申请5次修改

3 发起 GET请求

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

4 发起 POST 请求

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

5 在页面刚加载时请求数据

• 在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化数据，此时需要在页面的 onLoad事件中调用获取数据的函数，示例代码如下:

6 跳过 request 合法域名校验

• 如果后端程序员仅仅提供了 htto协议的接口，暂时没有提供 https协议接口。
• 此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开发【开发环境不校验请求的域名、TLS版本及HTTPS 证书】选项，跳过 request 合法域名的校验。

• 注意
• 跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！

7 关于跨域和Ajax的说明

• 跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所有小程序不存在跨域的问题。

• Ajax技术的核心是依赖于浏览器的XMLHttoRequest这个对象，由于小程序的宿主环境是微信客户端，所有小程序中不能叫做"发起Ajax请求"，而是叫做"发起网络数据请求"

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!