微信小程序（三）

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

 

 结合<block>使用wx:if

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

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

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

wx:if与hidden的对比
①运行方式不同
●wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
●
hidden以切换样式的方式(display: none/block;)，控制元素的显示与隐藏
②使用建议
●频繁切换时， 建议使用hidden
●
控制条件复杂时，建议使用wx:if搭配Wx:elif、Wx:else 进行展示与隐藏的切换

 点击：flag:true；切换false,隐藏与显示

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

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

 WXSS模板样式

什么是WXSS
WXSS (WeiXin Style Sheets)是一套样式语言， 用于美化WXML的组件样式，类似于网1.什么是样式导入
使用WXSS提供的@import语法，可以导入外联的样式表。
页开发中的CSS。

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

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

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

WXSS模板样式-全局样式和局部样式
  全局样式

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

  局部样式

        在页面的.WXSS文件中定义的样式为局部样式，只作用于当前页面。
注意:
①当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
②当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

全局配置- window

 设置导航栏的标题
设置步骤: app.json -> window -> navigationBarTitleText

导航栏的背景色 

设置步骤: app.json -> window -> navigationBarBackgroundColor

注：不支持文本类的颜色，支持十六为颜色
如图：

导航栏标题颜色 

设置步骤: app.json -> window -> navigationBarTextStyle
目前小程序只支持黑色（black）、白色两种颜色(white)

1 全局开启下拉刷新效果

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

2 全局开启下拉刷新修改颜色

当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色，设置步骤为: 

app.json -> window ->为backgroundColor指定16进制的颜色值#efefef。

3 全局开启下拉刷新修改小按钮

app.json -> window ->为"backgroundTextStyle": "light"

注："backgroundTextStyle"可选值有两个 light和dark

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

 ①
backgroundColor: tabBar 的背景色
②selectedlconPath: 选中时的图片路径
③borderStyle: tabBar .上边框的颜色
④iconPath: 未选中时的图片路径;
⑤selectedColor: tab. 上的文字选中时的颜色
⑥
color: tab. 上文字的默认(未选中)颜色

 tabBar节点的配置项

页面配置

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

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

 

 数据请求

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

 配置request合法域名

需求描述:假设在自己的微信小程序中，希望请求https://www.escook.cn/域名下的接口
配置步骤:登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名
注意事项:
①域名只支持https协议
②域名不能使用IP地址或localhost
③域名必须经过ICP备案
④服务器域名-一个月内最多可申请5次修改
发起GET请求
调用微信小程序提供的wx.request()方法，可以发起GET数据请求，示例代码如下:

 发起post请求

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

 

 页面刚加载时请求数据

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

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

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

关于跨域和Ajax的说明

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

 

感谢观看！看到这了点下赞吧！谢谢!         欢迎指证！

后续持续更新！！！