微信小程序（九）实现首页代码

2021-05-17 本文已影响0人 zcwfeng

截屏2021-05-17 00.57.14.png

1.API 介绍

1.2 首页banner
https://www.wanandroid.com/banner/json

方法：GET
参数：无

可直接点击查看示例：https://www.wanandroid.com/banner/json

1.首页相关
1.1 首页文章列表
https://www.wanandroid.com/article/list/0/json

方法：GET
参数：页码，拼接在连接中，从0开始。

可直接点击查看示例：https://www.wanandroid.com/article/list/1/json。

2.swiper & swiper-item

swiper
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

indicator-dots:是否显示面板指示点。
autoplay：是否自动切换。
interval：自动切换时间间隔。默认5000ms。
duration：滑动动画时长。默认500ms。
circular：是否采用衔接滑动。

swiper-item 仅可放置在swiper组件中，宽高自动设置为100%。

3.WXML语法

列表渲染

3-2.条件渲染

条件渲染

4.dataset

dataset

在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。

在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：

data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；
data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype 。

5.路由

5-1.navigateTo

navigateTo
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

url：需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'。

5-2.redirectTo

redirectTo
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

5-3.switchTab

switchTab
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

6.web-view

承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。

src：webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。

7.push

直接改变当前数组值。
遇到数组参数时，把整个数组参数作为一个元素。

requestArticleList:function(){
    let curPage = this.data.articileList.curPage
    api.articleList(curPage).then(res=>{
      // this.data.articileList.datas.push(...res.data.datas)
      console.log("requestArticleList--->",this.data.articileList)
    })

  },

没铺开直接赋值的打印结果：(打开注释)

不加...

 this.data.articileList.datas.push(res.data.datas)

铺开后赋值的打印结果：(打开注释)

8.下拉刷新

onPullDownRefresh

onPullDownRefresh()方法，用于监听用户下拉刷新事件。

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。

可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

8-1.页面配置

backgroundTextStyle：下拉 loading 的样式，仅支持 dark / light

9.上拉加载

onReachBottom()方法，用于监听用户上拉触底事件。

可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
在触发距离内滑动期间，本事件只会被触发一次。

10.去除乱码

微信小程序regexp对象（附带方法解析）
getRegExp(pattern[, flags])，参数：

pattern: 正则表达式的内容。
flags：修饰符。该字段只能包含以下字符:
- g: global
- i: ignoreCase
- m: multiline。
replace：替换
trim：去除字符串的头尾空格。

10-1.text组件

decode：是否解码，可以解析的有   < > & ' &ensp; &emsp;