微信开发--微信小程序(二)

1. 微信小程序下拉刷新

相信大家都使用过微信小程序,那一定都知道微信小程序下拉刷新吧,其实下拉刷新是微信小程序自带的功能,只不过没有背景图看不出来而已,好坑诶.

如果想要显示出来下拉刷新的三个小点,只需要在app.json文件中配置就好啦:

"window": {
    //三个小点的颜色,只有两种颜色哈
    "backgroundTextStyle": "dark",
    //下拉刷新的背景颜色
    "backgroundColor": "#F2F2F2",
  },

2. 微信小程序上拉数据加载,请求新数据

以昨天的电影列表为例,一次请求20条数据,这就需要监听页面加载,将网络请求单独封装,用户上拉,数据置为空,,list.js文件是这样的:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //电影列表数据
    movies:[],
    //每次请求数据个数
    count:20
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getData(0,this.data.count);
  },
  //网络请求函数
  getData(start,count){
    wx.request({
      url: 'https://douban.uieee.com/v2/movie/top250',
      data: {
        start,
        count
      },
      header: {
        "content-type": "json"
      },
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success: res => {
        // console.log(res);
        this.setData({
          movies: [...this.data.movies, ...res.data.subjects]
        })
      },
      fail: function (res) { },
      complete: function (res) { },
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.setData({
      movies:[]
    });
    this.getData(0,this.data.count);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.getData(this.data.movies.length,20);
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

3. 补充一个小知识吧

以电影列表为例,数据在循环时,演员的名字中间用 '/' 隔开,可是如果直接循环 '/' ,最后一个演员后面也会有 '/' ,可我们要实现的效果是这样:

那要怎么办呢? 很简单:

<text wx:for="{{detailsArr.casts}}" wx:key="{{index}}">{{item.name}}{{index != detailsArr.casts.length-1 ? ' / ':''}}</text>

4. php定界符

这个是微信公众号里用到的,突然想起来了,来总结一下它的基本用法.

定界符<<<,当需要输出大段文本时,一般选用定界符,它的输出形式和使用双引号输出的表现一致,只是没有双引号,这意味着在定界符中的字符串不需要转义双引号。

定界符的特点:

  • 按照原样输出,包括换行符、特殊字符等
  • 任何特殊字符都不需要转义,比如双引号、单引号,它会按照原样输出
  • 像在双引号字符串中一样使用php的变量输出
<?php

$testFloat = 0.58;
// 我在这里使用html作为定界符标识(定界符标识是可以自定义的)
echo <<<html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>$testFloat
</head>
<body>
    
</body>
</html>
html;

echo "<!DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\">
    <title>Document</title>$testFloat
</head>
<body>
    
</body>
</html>";
?>

以上两个echo的最终输出结果是一样的。 因此,像类似html大段文本的输出,就可以使用定界符方式,html元素属性就不用对双引号进行转义了。

使用定界符<<< 的注意事项(缺一不可)

  • 定界符标识必须前后一致
  • 可以任意定义定界符标识,比如 echo html div ,尽量选用有意义的标识符,并遵循某类命名规范。
  • 开头标识后不能跟任何字符,空格也不可以,换行后再跟要输出的文本。
  • 结束标识(其后紧跟一个分号;)前后都不可有任何字符,即结束标识要顶头写,且独占一行,其后除紧跟分号外,不能有任何字符(空格也不可以)
  • 最后要注意的是,结束标识所在行不能成为脚本的最后一行,其下必须有空行或者其他代码行,否则报错。
<?php
echo <<< div// 标识符后不能有空格,注释以及其他任何字符;标识符前无限制
<div id="divid"></div>
div;// 结束标识必须独占一行且前后都不可有任何字符,包括空格,没否则报错
// 如果结束标识下方没有任何行(空行、代码行等),报错
?>

原文发布于微信公众号 - 生南星(gh_36d61425a5dc)

原文发表时间:2019-05-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券