小程序二

11.网络数据请求

1.发起GET请求

// 发起GET请求
onTapGet () {
    wx.request({
        // 请求地址,必须是以https://开头
        // 必须是配置在request合法域名
        url: 'https://www.escook.cn/api/get',
        // 请求方式
        method: 'GET',
        // 请求参数
        data: {
            name: 'zs',
            age: 22
        },
        // 请求成功的回调
        success: (res) => {
            console.log(res)
        }
    })
}

2.发起post请求

// 发起GET请求
onTapPost () {
    wx.request({
        // 请求地址,必须是以https://开头
        // 必须是配置在request合法域名
        url: 'https://www.escook.cn/api/post',
        // 请求方式
        method: 'POST',
        // 请求参数
        data: {
            name: 'lisi',
            age: 18
         },
        // 请求成功的回调
        success: (res) => {
            console.log(res)
         }
    })
}
  1. 声明式导航

1.导航到 tabBar 页面

在使用 组件跳转到指定的 tabBar 页面时,需要指定 url 属性和 open-type 属性,其中:

  • url 表示要跳转的页面的地址,必须以 / 开头

  • open-type 表示跳转的方式,必须为 switchTab

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

  1. 导航到非 tabBar 页面
  • url 表示要跳转的页面的地址,必须以 / 开头

  • open-type 表示跳转的方式,必须为 navigate

  • 为了方便, 非 tabBar 页码的跳转时 open-type 也可以省略

    <navigator url="/pages/info/info" open-type="navigate">跳转到info页面</navigator>
    <navigator url="/pages/info/info" >跳转到info页面</navigator>

3.后退导航

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

  • open-type 的值必须是 navigateBack ,表示要进行后退导航

  • delta 的值必须是数字,表示要后退的层级

    <navigator open-type="navigateBack" delta="1">后退</navigator>
    <navigator open-type="navigateBack">后退</navigator>

注意:

  • 为了简便,如果只是后退到上一页面,则可以省略 delta 属性,因为其默认值就是 1
  • tabBar 页面是不能实现后退的效果的. 因为, 当我们跳转到 tabBar 页面,会关闭其他所有非 tabBar 页面,所以当处于 tabBar 页面时, 无页面可退

13.编程式导航

1.导航到 tabBar 页面

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

image.png

示例代码如下:

<!--
编程式导航
跳转至tabBar页面
-->
<button bindtap="gotoMessage">跳转到messae页面</button>
    /*
    通过编程式导航
    跳转至tabBar页面
    message页面
    */
    gotoMessage () {
      wx.switchTab({
         // 代表要跳转的路径
         url: '/pages/message/message',
    })
},
  1. 导航到非 tabBar 页面

调用 wx.navigateTo(Object object) 方法,可以跳转到非 tabBar 的页面。

其中 Object 参数对象的属性列表, 如下:

image.png

示例代码如下:

<!--
编程式导航
跳转至非 tabBar页面
-->
<button bindtap="gotoInfo">跳转到Info页面</button>
/*
通过编程式导航
跳转至非tabBar页面
Info页面
*/
gotoInfo () {
    wx.navigateTo({
        url: '/pages/info/info',
    })
},

3.后退导航

调用 wx.navigateBack(Object object) 方法,可以返回上一页面或多级页面。

其中 Object 参数对象可选的, 属性列表如下:

image.png

示例代码如下:

<!--
通过编程式导航实现后退导航
-->
<button bindtap="goBack">编程式导航实现后退</button>
/*
通过编程式导航实现后退导航
*/
goBack () {
    // 如果不传递参数就是返回上一页
    // 如果要传递参数则是传递 delta数字型, 代表返回的层级。
    wx.navigateBack()
},

注意: tabBar 页面是不能实现后退的效果的.

  • 因为, 当我们跳转到 tabBar 页面,会关闭其他所有非 tabBar 页面,所以当处于 tabBar 页面时, 无页面可退

14.导航传参

  1. 声明式导航传参

navigator组件的 url 属性用来指定将要跳转到的页面的路径。

<!--
声明式导航传参
参数与路径之间使用 ? 分隔
参数键与参数值用 = 相连
不同参数用 & 分隔
-->
<navigator url="/pages/info/info?name=zs&age=20">跳转至info页面</navigator>
  1. 编程式导航传参

wx.navigateTo(Object object) 方法跳转页面

<!--
编程式导航传参
-->
<button bindtap="gotoInfo2">跳转到info页面</button>
    /*
        编程式导航传递参数
    */
    gotoInfo2 () {
        wx.navigateTo({
            url: '/pages/info/info?name=李&gender=男',
        })
    },
  1. 在 onLoad 中接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数,可以直接在 onLoad 事件中直接获取到

/**
* 页面的初始数据
*/
data: {
// 导航传递的参数
    query: {}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
    // 通过声明式导航和编程式导航 都可以
    // 在onLoad声明周期函数中获取传递的参数
    console.log(options);
    // 将导航传递的参数转存在data中
    this.setData({
        query: options
    })
},

15.下拉刷新事件

1.开启下拉刷新:

  • 在json 配置文件中,将 enablePullDownRefresh设置为 true

2.. 配置下拉刷新窗口的样式

  • backgroundColor用来配置下拉刷新窗口的背景颜色,仅支持16 进制的颜色值
  • backgroundTextStyle用来配置下拉刷新 loading 的样式,仅支持dark 和light

3.监听页面的下拉刷新事件

  • 在页面的 js 文件中,通过 onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。

4.停止下拉刷新的效果

  • 调用 wx.stopPullDownRefresh()可以停止当前页面的下拉刷新。

16.上拉触底事件

1.监听页面的上拉触底事件

在页面的 js 文件中,通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。

2.配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离。

可以在全局或页面的 .json 配置文件中,通过 onReachBottomDistance节点来配置上拉触底的距 离。

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

①在 data 中定义 isLoading 节流阀

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

② 在 getColors() 方法中修改 isloading 节流阀的值

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

③ 在 onReachBottom 中判断节流阀的值,从而对数据请求进行节流控制

  • 如果节流阀的值为 true ,则阻止当前请求
  • 如果节流阀的值为 false ,则发起数据请求
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,133评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,682评论 3 390
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,784评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,508评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,603评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,607评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,604评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,359评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,805评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,121评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,280评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,959评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,588评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,206评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,193评论 2 367
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,144评论 2 352

推荐阅读更多精彩内容

  • 全局配置 配置界面、路径 可以通过配置 app.json 文件,设置 SWAN 的界面、路径、多 TAB 等。ap...
    悠闲豆浆阅读 425评论 0 0
  • 第三章:微信小程序项目结构以及配置 找到创建的 demo 文件夹,把项目导入到你的编辑器,这里使用的是Sublim...
    c14328d5898b阅读 3,099评论 1 2
  • 一、小程序全局生命周期钩子: 二、 页面生命周期钩子 三、页面跳转 标签方式:通过navigator跳转 相当于...
    Abby_qi阅读 499评论 0 0
  • 一、小程序全局生命周期钩子: 二、 页面生命周期钩子 三、页面跳转 标签方式:通过navigator跳转 相当于...
    Yaoxue9阅读 200评论 0 0
  • 一、小程序全局生命周期钩子: 二、 页面生命周期钩子 三、页面跳转 标签方式:通过navigator跳转 相当于...
    _TSRed阅读 154评论 0 0