微信小程序开发整理-mp2

一、WXSS和CSS的关系

WXSS 具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。与CSS相比，wXSS 扩展的特性有:

• rpx尺寸单位
• @import样式导入

1、rpx尺寸单位-750

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

2、样式导入

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

@import "common. wxss";

3、全局样式与局部样式

当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式。

当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式。

二、全局配置

1、app.json

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

• pages---记录当前小程序所有页面的存放路径
• window---全局设置小程序窗口的外观
• tabBar---设置小程序底部的tabBar效果
• style---是否启用新版的组件样式

2、window节点常用的配置项

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如#000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持black / white
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉loading的样式，仅支持dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

设置上拉触底的距离：

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

3、tabBar

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

• 底部 tabBar
• 顶部 tabBar

注意：

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

4、数据请求

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制:

• 只能请求HTTPS类型的接口
• 必须将接口的域名添加到信任列表中

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

wx.request({
    url: 'https: //ww.escook.cn/api/get'，//请求的接口地址，必须基于 https 协议
    method: 'GET",//请求的方式
    data: {//发送到服务器的数据
        name: 'zhang"，
        age: 22
    }，
    success: (res) => { //请求成功之后的回调函数
    console.log(res)
    }
}}

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

wx.request({
    url: 'https: //ww.escook.cn/api/get'，//请求的接口地址，必须基于 https 协议
    method: 'POST",//请求的方式
    data: {//发送到服务器的数据
        name: 'zhang"，
        age: 22
    }，
    success: (res) => { //请求成功之后的回调函数
    console.log(res)
    }
}}

预加载数据 

onlLoad: function (options) {
    this.getSwiperListo()   //方法
    this.getGridListo()     //方法
}

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

5、案例总结

三、视图与逻辑

（一）、页面导航

1、定义

页面之间的相互跳转。

2、声明式导航

导航到tabBar页面：

tabBar页面指的是被配置为tabBar的页面。
在使用<navigator>组件跳转到指定的tabBar页面时，需要指定url属性和open-type属性：

• url表示要跳转的页面的地址，必须以   /  开头
• open-type表示跳转的方式，必须为switchTab（tabBar页面用navigator,可省略！）

<navigator url="/pages/message/message" open-type=" switchTab">导航到消息页面</navigator>

 后退导航：

如果要后退到上一页面或多级页面，则需要指定open-type属性和delta属性，其中:

• open-type的值必须是navigateBack，表示要进行后退导航
• delta的值必须是数字，表示要后退的层级

导航传参:

navigator组件的url属性用来指定将要跳转到的页面的路径。路径的后面还可以携带参数:

• 参数与路径之间使用?分隔
• 参数键与参数值用=相连
• 不同参数用&分隔

3、编程试导航

导航到tabBar页面：

调用wx.switchTab(Object object)方法，可以跳转到 tabBar页面。其中 Object.参数对象的属性列表如下:

属性	类型	是否必选	说明
url	string	是	需要跳转的tabBar页面的路径,路径后不能带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行)

导航到非tabBar页面：

调用wx.navigateTo(Object object)方法，可以跳转到非tabBar的页面。其中Object 参数对象的属性列表如下:

属性	类型	是否必选	说明
url	string	是	需要跳转到的非tabBar页面的路径,路径后可以带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行)
后退导航	默认值1		wx.navigateBack
delta	number	否	返回的页面数,如果delta大于现有页面数，则返回到首页

导航传参:

调用wx.navigateTo(Object object)方法跳转页面时，也可以携带参数。

（二）、页面事件

1、下拉刷新(参考二.2)

• 监听页面的下拉刷新事件：在页面的.js 文件中，通过onPullDownRefresh()函数。
• 停止下拉刷新的效果：onPullDownRefresh()中调用wx.stopPullDownRefresh()

2、上拉触底(参考二.2)

• 监听页面的上拉触底事件：在页面的.js 文件中，通过onReachBottom()函数。
• 配置上拉触底距离：二.2
• Loading提示效果（参考官方文档）：wx.showLoading

3、 对上拉触底进行节流处理

I、在data中定义isloading节流阀。

• false表示当前没有进行任何数据请求
• true表示当前正在进行数据请求

data:{
isLoding:false
},

II、在getColors()方法中修改isloading节流阀的值。

• 在刚调用getColors时将节流阀设置true
• 在网络请求的complete回调函数中,将节流阀重置为false

getColors(){
    this.setData({
        isloding: true
})



complete()=>{
    this.setData({
        isLoding:false
    })
}

III、在onReachBottom中判断节流阀的值，从而对数据请求进行节流控制。

• 如果节流阀的值为true，则阻止当前请求
• 如果节流阀的值为false，则发起数据请求

onReachBottom: function (){
    if(this.data.isloding) return
    this.getColors()
},