小程序开发Day02

wxss模版样式

1.什么是样式导入

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

2.@import 的语法格式

@import 后跟需要导入的外联样式表的相对路径，用;表示语句结束

全局样式与局部样式

1.全局样式

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

2.局部样式

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

注意

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

全局配置

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

1
2
3
4
5
6
7
8
9
小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下:
pages
    记录当前小程序所有页面的存放路径
window
    全局设置小程序窗口的外观
tabBar
    设置小程序底部的 tabBar 效果
style
    是否启用新版的组件样式
小程序窗口组成部分

小程序窗口组成部分

2.window 节点常用配置项

window 节点常用配置项

3.设置导航栏的标题

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

4.设置导航栏背景色

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

5.设置导航栏的标题颜色

设置步骤: app.json -> window -> navigationBarTextStyle
注意: navigationBarTextStyle的可选值只有black和white

6.全局开启下拉刷新功能

概念:下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。
设置步骤: app.json -> window -> 把 enablePullDownRefresh 的值设置为 true

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

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

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

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

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

9.设置上拉触底的距离

概念:上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
设置步骤:app.json->window ->为 onReachBottomDistance 设置新的数值(默认为50px)

tabBar

1.什么是 tabBar

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

2.tabBar的 6 个组成部分

tabBar的 6 个组成部分

1
2
3
4
5
6
backgroundcolor:tabBar的背景色
selectedlconPath:选中时的图片路径
borderStyle:tabBar 上边框的颜色
iconPath:未选中时的图片路径
selectedcolor:tab上的文字选中时的颜色
color:tab 上文字的默认(未选中)颜色

3.tabBar 节点的配置项

tabBar 节点的配置项

4.每个tab项的配置选项

每个tab项的配置选项

页面配置

1.页面配置文件的作用

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

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

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

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

页面配置中常用的配置项

网络数据请求

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

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

2.配置request 合法域名

需求描述:假设在自己的微信小程序中，希望请求 https://www.escook.cn/ 域名下的接口
配置步骤: 登录微信小程序管理后台 ->开发 ->开发设置 ->服务器域名 ->修改 request 合法域名

注意事项:

1
2
3
4
域名只支持 https 协议
域名不能使用IP 地址或 localhost
域名必须经过 ICP 备案
服务器域名一个月内最多可申请5 次修改

3.发起 GET 请求

调用微信小程序提供的wx.request() 方法，可以发起GET数据请求。

1
2
3
4
5
6
7
8
9
10
11
12
例如:
wx.request({
    url: 'https://www.escook.cn/api/get',
    method: 'GET',
    data: {
        name: 'zs',
        age: 22
    },
    success: (res) => {
        console.log(res)
    }
})

4.发起 POST 请求

调用微信小程序提供的wx.request() 方法，可以发起POST数据请求。

1
2
3
4
5
6
7
8
9
10
11
12
例如:
wx.request({
    url: 'https://www.escook.cn/api/post',
    method: 'POST',
    data: {
        name: 'ls',
        age: 33
    },
    success: (res) => {
        console.log(res)
    }
})

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

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

6.跳过 request 合法域名校验

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

跳过 request 合法域名校验

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

7.关于跨域和 Ajax 的说明

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