微信小程序 (1) (rpx) + ( 改变导航栏颜色 ) +

作者: woow_wu7 | 来源:发表于2018-07-18 16:52 被阅读216次

注意事项：

只有<text></text>标签包裹的文本可以在真机上长按选中
<text></text>可以嵌套，里面有转义字符，则解析成转义字符，而不是字符串。
小程序，默认的顶层标签是 <page></page>，可以用其修改全局样式等
如果一个标签的属性值是boolean值，不能直接用字符串false表示布尔的false，因为false是一个字符串，js转成布尔值后是true ---------- 所以要用双大括号包裹false，表示是微信小程序中的语法
condition: 是状态的意思
launch: 是发射的意思
defer：是延迟的意思
grid: 是格子的意思
category: 是类型的意思
pannel: 是面板的意思
在app.json中的路径，最前面用绝对路径时，不要加斜杠！！！！！！！！

效果图

(1) rpx 相对像素值

在iPhone6上，1rpx=1物理像素=0.5px。

因为设计师标注的尺寸一般是物理分辨率。所以如果以iphone6为标准出设计稿的话，那么我们就可以不需要经过换算直接标准rpx。


.banner {
    width:200rpx;
    height:200rpx;
    border-radius:50%
}

(2) 改变导航栏颜色

如果想单独改变某个页面的导航栏颜色，需要在单个页面文件夹中添加.json文件，并且不能再用window

app.json ( 所有页面 )



{
    "pages":[
        "pages/welcome/welcome"     // 注册页面
    ],
    "window": {
        "navigationBarBackgroundColor": "#b3d4db"     // 设置导航栏背景颜色
    }
}

----------------------------------------------------------------------------

posts.json ( 单个页面 )


{
     "navigationBarBackgroundColor":"#000"    // 配置单个导航栏的背景，记得没有window
     "navigationBarTitleText":"主页"    // 配置导航栏标题文字
}

(3) 嵌套样式


<view class='seven'>
     <text><text style="color:green">hellow</text>， 十月</text>
    </view>

(4) swiper轮播图组件


<view>
    <swiper style="with:100%;height:309rpx" indicator-dots="true" autoplay='true' interval="3000">
        <swiper-item>
             <image src="/image/b4.png" style="width:100%;height:309rpx"></image>
        </swiper-item>
         <swiper-item>
             <image src="/image/b3.png" style="width:100%;height:309rpx"></image>
        </swiper-item>
         <swiper-item>
             <image src="/image/b5.png" style="width:100%;height:309rpx"></image>
        </swiper-item>
    
    </swiper>
</view>

https://www.cnblogs.com/nosqlcoco/p/wxsmallcycle.html

小程序的生命周期：

应用生命周期
页面生命周期
应用生命周期影响页面生命周期

应用生命周期：

首次打开小程序，触发onLaunch事件 ( launch: 是发射的意思 )，( 全局只触发一次 )
小程序初始化完成后，触发 onShow事件，监听显示
小程序从前台进入后台，触发 onHide事件

应用生命周期

页面生命周期：

小程序注册完成后，加载页面，触发onLoad方法。
页面载入后触发onShow方法，显示页面。
首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只触发一次。
当小程序后台运行或跳转到其他页面时，触发onHide方法。
当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。
当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload

页面生命周期

应用生命周期影响页面生命周期

小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。
当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。
当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法

应用生命周期影响页面生命周期

前台和后台：

后台：
当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台
前台：
当再次进入微信或再次打开小程序，又会从后台进入前台

(5) 页面的生命周期

onLoad : 监听页面加 ( 可以在onLoad生命周期中请求数据 )

onShow : 监听页面显示

onReady : 监听页面初次渲染完成

onHide : 监听页面隐藏

onUnload ：监听页面卸载

(6) wx:if="{{false}}" 隐藏和显示

(7)<view wx:for="{{数组变量}}" wx:for-item="" wx:for-index="" wx:key=""> </view> 循环

在js文件中引入本地json文件时，使用require语法时，路径必须是 ( 相对路径 ) !!
如果对象中的属性名带有 - ，则在js中使用的时候，不能用点语法，只能用方括号，在方括号中必须用引号，否则会当作变量处理。
当 wx:for 的值为字符串时，会将字符串解析成字符串数组

<view wx:for="array">
  {{item}}
</view>

等同于

<view wx:for="{{['a','r','r','a','y']}}">
  {{item}}
</view>

<view wx:if="{{true}}">
     <image src="{{item['article-image']}}" class="item-image"></image>
</view>

wxml


 <view class='test'>
        <view wx:for="{{forData}}" wx:for-item="item" wx:for-index="index">
            <view>{{item.age}}</view>
            <view>{{item.name}}</view>
            <view>{{index}}</view>
        </view>
 </view>

-----------------------------------------------------------
js


  data: {
      switchShow: true,
      forData: [
          {age:10,name:"wang"},
          {age:30,name:"li"}
      ]
  }

(8) setData() 参数格式

接受一个对象，以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value。

js


  onLoad: function (options) {
      console.log('onLoad')
      var forDataFromLoad = [
          { age: 20, name: 'zhagn'},
          {age: 40, name: 'jian'}
      ]

      this.setData({
          getData: forDataFromLoad
      })
  },

-------------------------------------------------------
wxml



<view wx:for="{{getData}}" wx:for-item="abc">
            <view>{{abc.name}}</view>
        </view>

(9) tap事件 ----- 相当于react中的onClick事件

tap事件：手指触摸后马上离开

事件绑定： bindtap
页面跳转：wx.navigateTo( { url : '.......' } ) 具有子集关系，可以返回，最多5个层级。
页面重定向：wx.redirectTo( {url: '.......' } ) 不具有子集关系，不能返回
wx.navigateTo()方法的完整写法

 wx.navigateTo({
        url: '../posts/posts',
        fail: function() {},
        success: function() {},
        complete: function() {},
 })

navigateTo 和 redirectTo与页面生命周期 onUnload() 和 onHide() 的关系?

wx.redirectTo() 会触发 onUnload()方法，页面卸载。
wx.navigateTo() 会触发 onHide()方法，页面隐藏，因为还可以返回，并没有被卸载，只是隐藏了。

生命周期 onUnload() 和 onHide() 的区别？

onHide() 只是隐藏了，未被卸载。

wxml
<view class="tour-container" bindtap="goHome">
        <text class="tour">开启小程序之旅</text>
    </view>


js
goHome: function(e) {
    //   wx.navigateTo({
    //       url: '../posts/posts'
    //   })

    wx.redirectTo({
        url: '../posts/posts'
    })
}

(9.1) wx.navigateTo() 页面跳转

(1) 自定义属性的获取： event.currentTarget.dataset.属性名

(2) 路由跳转传递的参数获取：onLoad(options)生命周期函数的options对象获取

options.key

posts.wxml
(1) 自定义属性以 data- 开头
(2) 自定义属性通过   event.currentTarget.dataset.属性名    获取
(3) image很多时,可以在父级元素上用 catchtap ，  通过event.target获得自定义属性
(4) 注意采用事件冒泡的方式，自定义属性是通过：event.target.dataset.属性名  获取    (区别2和4的不同)

(5) 
target 是当前点击的组件
currentTarget 是事件捕获的组件

<image src="/images/e.jpg" class="swiper-image" data-idx="0" catchtap="goxArticle" />
<image src="/images/b.jpg" class="swiper-image" data-idx="1" catchtap="goxArticle" />
<image src="/images/c.jpg" class="swiper-image" data-idx="2" catchtap="goxArticle" />
<image src="/images/d.jpg" class="swiper-image" data-idx="3" catchtap="goxArticle" />


-----------------------------
posts.js
(1) wx.navigateTo({ url: '页面地址'}) 页面跳转
(2) 传递的参数通过  ？key=value&key2=value2....  的形式

  goxArticle: function(event) {
      const idx = event.currentTarget.dataset.idx;
      wx.navigateTo({
          url: '/pages/posts/posts-detail/posts-detail?id=' + idx,
      })
  },


-----------------------------
posts-detail.js

onLoad: function(options) {         ------------ onLoad(options)的options对象有跳转携带的数据
   console.log(options.id, 'options.id')   ------------ 获取页面跳转携带的参数
}

(10) bindtap事件和 catchtap事件的区别

bindtap 绑定的事件会冒泡 ------------------ 冒泡
catchtap 绑定的事件不会冒泡 ----------- 不冒泡
事件冒泡指的是事件的冒泡阶段，由最里层向外层传播，会触发父元素绑定的事件

(11) template 模板

定义：

<template name="postsItem"></template>    

在wxml中定义，必须有个name属性

注意： 在模板中应用图片等静态资源时，用绝对路径！！！！！

引入并使用：

<import src="./posts-item/posts-item-template.wxml" />      ----------------  引入，相对路径

<view>
    <swiper 
        class="swiper" 
        indicator-dots="true"
        autoplay="true"
        interval="4000"
        indicator-active-color="white"
        circular="true"
    >
        <swiper-item><image src="/images/e.jpg" class="swiper-image"></image></swiper-item>
        <swiper-item><image src="/images/b.jpg" class="swiper-image"></image></swiper-item>
        <swiper-item><image src="/images/c.jpg" class="swiper-image"></image></swiper-item>
        <swiper-item><image src="/images/d.jpg" class="swiper-image"></image></swiper-item>
    </swiper>

    <block wx:for="{{content}}" wx:for-item="item" wx:for-index="id" wx:key="loop">
        <template is="postsItem" data="{{...item}}"/>      -------------------  使用，is对应name
    </block>
</view>


注意点：
(1) 使用时，<template is="A" />标签中的 is 属性对应 wxml文件中<template name="A">中的name属性
(2) <template />中的data属性对应数据源

引入模板的，引入样式


@import "./posts-item/posts-item-template.wxss";     // 使用相对路径

(12) 自定义属性

自定义属性必须以data开头，以 - 横线链接，可以有多个横线
自定义的标签属性，在 js 中通过event.currentTarget.dataset获取
自定义的标签属性，在 js 中是会省略 "-" 横线和data，并且是驼峰命名
在js中，大写的英文字母也会被转化成小写的

wxml中：
<view catchtap="goDetail" data-name-text="aaa">


js中：
nameText:"aaa"       --------- 注意：省略了（ data-  ），  并且采用驼峰命名

(13) event事件和点击事件的参数传递

在小程序中，bindtap等事件都有一个event事件

在点击元素标签上自定义的属性，可以通过event.currentTarget.dataset获取
自定义属性以 data-xxx-xxx 形式组成，可以有多个横线
catchtap事件不冒泡，bindtap事件冒泡

wxml中：

 <block wx:for="{{content}}" wx:for-item="item" wx:for-index="id" wx:key="loop">
    <view data-id="{{item.id}}" catchtap="goDetail">   ---------------------- 自定义属性和点击事件
        <template is="postsItem" data="{{...item}}"/>
    </view>
</block>


--------------------------
js中

goDetail: function(event) {    ----------------------- event.currentTarget.dataset拿到自定义属性
   const detail_id = event.currentTarget.dataset.id;
   wx.navigateTo({
      url: `./posts-detail/posts-detail?id=${detail_id}&xxx=xxxx...`,
   })  ---------------------------------------------- 向js传递参数，以查询字符串的形式组成
},


在被传递的js文件中：

在 onLoad生命周期函数中，有 options 参数

  onLoad: function (options) {       ----------------- 一般请求数据都在 onLoad 生命周期中
    const detail_id = options.id;    ----------------- 上面代码传递过来的 id 值
    console.log(options)
  },

(14) wx.setStorageSync() 和 wx.setStorage()

wx.removeStorageSync() 和 wx.clearStorageSync()

小程序规定缓存的上限不能超过 10M

设置同步缓存：wx.setStorageSync(key, data)
第一个参数是键名，是一个字符串
第二个参数是键值，可以是 object 或者 string
获取同步缓存：wx.getStorageSync(key)
删除指定键的同步缓存：wx.removeStorageSync(key)
删除全部同步缓存：wx.clearStorageSync() - 不需要参数

同步设置：
wx.setStorageSync('message', {
   name: 'wang'
});
-------------------


异步设置：
wx.setStorage({
   key: 'name',
   data: 'wang',
})
-------------------


同步获取：
wx.getStorageSync(key)
-------------------


异步获取：
wx.getStorage({
  key: 'name',
  success: function(res) {
    console.log(res.data, 'res.data')    ------------ res.data就是键名name对应的键值wang
  },
})

(15) 状态切换，显示隐藏

wx:if 和 wx:else

 <view class="icon-wrapper">
    <view catchtap="changeCollection">
        <image wx:if="{{collectedStaus}}" src="../../../images/cv.png" class="icon"></image>
        <image wx:else src="../../../images/sc.png" class="icon"></image>
    </view>
    <image src="../../../images/cb.png" class="icon lastIcon"></image>
</view>

(16) wx.showToast 消息提示框


  wx.showToast({
      title: '收藏成功',
      con: "success",
      duration: 1000,
      mask: true
  })

(17) wx.showModal()

     wx.showModal({
            title: '收藏',
            content: '是否收藏该文章',
            showCancel: true,
            cancelText: '取消',
            cancelColor: 'silver',
            confirmText: '收藏',
            confirmColor: "#9F79EE"
      })

(18) wx.showActionSheet()操作菜单

    goShare: function(event) {
        const shareLists = [
            "分享给微信好友",
            "分享到到朋友圈",
            "分享到QQ",
            "分享到微博",
        ];
        wx.showActionSheet({         -------------- wx.showActionSheet({itemList: [], ...})
            itemList: shareLists,    -------------- itemList按钮的文字数组，最大长度为6个
            success: function(res) { ---- 点击菜单某一项成功后的回调，res.tapIndex可获得数组的index
                const index = res.tapIndex;
                wx.showModal({
                    title: `分享`,
                    content: `确定分享到${shareLists[index]}吗？`,
                    showCancel: true,
                    confirmText: "确定",
                    confirmColor: "#9F79EE",
                    cancelText: "取消",
                    cancelColor: "silver"
                })
            }
        })
    },

(19)

wx.playBackgrounAudio() 音乐播放控制

wx.pauseBackgroundAudio() 暂停播放音乐

wx.onBackgroundAudioPlay() 监听音乐播放。

wx.onBackgroundAudioPause() 监听音乐暂停。

wx.onBackgroundAudioStop() 监听音乐停止。

audio：是音频，音响，声音信号的意思

wx.playBackgroundAudio({
    dataUrl: '',
    title: '',
    coverImgUrl: ''
})

播放和暂停音乐播放：


 gomusic: function(event) {
        const isMusciPlaying = this.data.isMusciPlay;
        const detailData = data.data.filter(item => {
            return item.id === this.data.id
        })[0];
        const music = detailData.music;
        if (isMusciPlaying) {
            wx.pauseBackgroundAudio();      ---------- 暂停音乐播放
            this.setData({
                isMusciPlay: false
            });
            
        } else {
            wx.playBackgroundAudio({        ---------- 播放音乐
                ...music
            });
            this.setData({
                isMusciPlay: true
            })
        }
       
    },

监听播放和暂停：用来同步播放，改变图标状态

一般在onLoad生命周期函数中使用


 onLoad: function(options) {
       
        const that = this;
        wx.onBackgroundAudioPlay(function() {        ---------- 监听音乐播放
            that.setData({
                isMusciPlay: true
            })
        });
        wx.onBackgroundAudioPause(function() {        ---------- 监听音乐暂停
            that.setData({
                isMusciPlay: false
            })
        })

(20) 全局变量

全局变量在入口 app.js中定义，通过getApp()获取全局变量

app.js中定义全局变量

App({
    globalData: {
        g_ispalyMusic: false,
    }
})

---------------------------------------------

detail.js中获取全局变量

const app = getApp();                                     -------  获取App

onLoad: function(options) {
  const g_ispalyMusic = app.globalData.g_ispalyMusic;     ------ 获取全局变量
  console.log(g_ispalyMusic, 'g_ispalyMusic')     // false
}

单在详情页播放音乐时，返回到父级页面，再回到详情页时，图标状态和全局控制图标状态不一致

用全局标量解决（注意：定义时是一个对象，所以把对象赋值后，修改对象摸个属性，影响原对象）


  wx.onBackgroundAudioPlay(function() {
      that.setData({
          isMusciPlay: true,
      });
      app.globalData.g_ispalyMusic = true;
  });
  wx.onBackgroundAudioPause(function() {
      that.setData({
          isMusciPlay: false
       });
      app.globalData.g_ispalyMusic = false;    // 改变全局对象的值
  })

(21) tabBar

tabBar在app.json文件中配置

"tabBar": {
   "list": [
      {
         "pagePath": "pages/posts/posts",
          "text":"阅读",
          "iconPath": "/images/home2.png",
          "selectedIconPath": "/images/homecheck2.png"
      },
      {
         "pagePath": "pages/moves/moves",
          "text":"电影",
          "iconPath": "/images/move.png",
          "selectedIconPath": "/images/movecheck.png"
       }
   ],
   "borderStyle": "white"
}

(22) 启动页不跳转到tabBar页面的坑？

wx.switchTab({...}) : 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

(1) navigateTo和redirectTo都不跳转：

wx.navigateTo({
   url: '../posts/posts'
});
wx.redirectTo({
   url: '../posts/posts'
});

----------------------------

(2) 使用 switchTab({}) 可以跳转到tabBar页面，并关闭其他非tabBar页面

wx.switchTab({
    url: '../posts/posts'
});

(23) wx.request()发起请求

官方文档：
https://developers.weixin.qq.com/miniprogram/dev/api/network-request.html#wxrequestobject

 onLoad: function (options) {
    wx.request({
        url: 'http://t.yushu.im/v2/movie/top250',
        method: 'GET',
        data: { --------------------------------------------- 请求参数，get请求会转换成查询字符串
            start: 0,
            count: 20,
        },
        header: { -------------------------------------------- 请求头
            "Content-Type": "application/json"  -------------- 发送端发送的实体数据类型是json格式
        },
        success: function(res) { ----------------------------- 成功的回调
            console.log(res);
            console.log(res.data); --------------------------- 数据
            console.log(res.statusCode); --------------------- 状态码
            console.log(res.header);  ------------------------ 响应头
        }
    });
  },

(24) template模板的点击事件

因为模板只能有wxml和wxss，不能包含js文件，没法做到真正的组件化

在模板的wxml中绑定的点击事件，在哪个js文件？ ---- 是在引用模板的组件的js文件中

move-list.wxml文件

<import src="/pages/moves/move/move-template.wxml" />
<template name="move-list">
    <view class="move-list-tatalwrpper">
        <view class="move-list-type">
            <text>{{moveTop.type}}</text>
            <view 
                class="move-list-more-warpper" 
                catchtap="gomore"  ------------------------------------ templet模板中绑定的事件
                data-type="{{moveTop.requestAddress}}" ---------------- 自定义属性
             >
                <text>更多</text>
                <image src="/images/move/right.png" class="rightArrow"></image>
            </view>
        </view>
        <view class="move-list-content"> 
            <template is="move" data="{{moveTop}}"/>
        </view>
    </view>
</template>




------------------------------------------
moves.js文件

gomore: function(event) {    -------------------------------- 在moves页面中应用了template
   const type = event.currentTarget.dataset.type;
   wx.navigateTo({
       url: '/pages/moves/more-move/more-move?type=' + type,
    })
},

说明：
(1) 用event.currentTarget.dataset获得点击的节点的自定义属性
(2) wx.navigateTo()导航
(3) 用查询字符串传递参数，在子页面的js中的onLoad生命周期中的options参数获得导航传递的参数

(25) wx.setNavigationBarTitle() 动态设置当前页面标题

区别json中配置的 ------- navigationBarTitleText
对界面设置ui相关的操作时，要在onReady页面初次渲染完成之后。
onLoad()页面加载，页面还没有正式生成，所以不能做ui相关的事情。一个页面只会调用一次
onShow()页面显示，每次打开页面都会调用一次
onReady()页面初次渲染完成，一个页面只会加载一次onReady()函数，代表页面已准备妥当，可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。

onReady: function () {  ------ onReady()页面初次渲染完成，一个页面只加载一次，该生命周期可以和ui交互
   wx.setNavigationBarTitle({   ------ wx.setNavigationBarTitle动态设置当前页面标题
      title: this.data.type,
   })
},


------------------------------------------


不是动态设置，可以在当面页面的json中，配置
{
    "navigationBarTitleText": "免费电影"
}

(26) scroll-view 可滚动视图区域组件

bindscrolltolower: 滚动到底部/右边，会触发 scrolltolower 事件
lower-threshold: 距底部/右边多远时（单位px），触发 scrolltolower 事件

move-grid-template.wxml

<import src="/pages/moves/move/move-template.wxml" />
<template name="move-grid">
    <scroll-view  ----------------------------------------- scroll-view可滚动试图区域组件
        scroll-y="true" ----------------------------------- 允许纵向滚动
        bindscrolltolower="goScrollLower" ----------------- 滚动到底部，会触发 scrolltolower 事件 
        class="scroll-view"
    >
        <view class="move-grid-container">
            <view 
              class="move-grid-item" 
              wx:for="{{moveTop.subjects}}" 
              wx:for-item="item" 
              wx:key="moveid"
            >
                <template is="move" data="{{item}}" />
            </view>
        </view>
    </scroll-view>
</template>




-----------------------------------------------

more-move.js

 goScrollLower: function() {
        const url = this.data.url;  -------------- 点击更多按钮后，请求电影类型的地址
        const type = this.data.type;  ---------- 电影类型
        this.setData({
            type
        })
        const that = this;
        let countNumber = this.data.count;
        wx.request({
            url: url,
            method: 'GET',
            data: {
                start: 0,
                count: countNumber,  ------------------------------- 每次滚动到底部，count+10
            },
            header: {
                "Content-Type": "application/json"
            },
            success: function(res) {
                console.log(res, 'res----xxxxxxxxxxxxx')
                if (res.statusCode === 200) {
                    const newStartsArray = res.data.subjects.map(item => {
                        const starsArray = {
                            starsLightArray: [],
                            starsDarkArray: []
                        };

                        function getStarsNumber(starsArray) {   -------------- 星星的数量显示
                            const startsNumber = Number(item.rating.stars.slice(0, 1));
                            for (let i = 0; i < startsNumber; i++) {
                                starsArray.starsLightArray.push(1);
                            }
                            for (let i = 0; i < 5 - startsNumber; i++) {
                                starsArray.starsDarkArray.push(1)
                            }
                        };
                        getStarsNumber(starsArray);

                        return {
                            ...item,
                            'rating': {
                                ...item.rating,
                                stars: item.rating.stars.slice(0, 1),
                                starsArray: starsArray
                            },
                        }
                    });
                    that.setData({
                        moveTop: {
                            ...res.data,
                            type: '正在热映',
                            subjects: [
                                ...newStartsArray
                            ],
                            'requestAddress': 'http://t.yushu.im/v2/movie/top250'
                        }
                    })
                }
            }
        });
        this.setData({   -------------------------------------- 每次滚动到底部，count+10
            count: countNumber+10
        })
    },

(27)

wx.showNavigationBarLoading() 显示导航条加载动画。

wx.hideNavigationBarLoading() 隐藏导航条加载动画

 goScrollLower: function() {
        const url = this.data.url;
        const type = this.data.type;
        this.setData({
            type
        })
        const that = this;
        let countNumber = this.data.count;
        wx.showNavigationBarLoading(); ---------------------------- 请求数据时，loading显示动画
        wx.request({
            url: url,
            method: 'GET',
            data: {
                start: 0,
                count: countNumber,
            },
            header: {
                "Content-Type": "application/json"
            },
            success: function(res) {
                if (res.statusCode === 200) {
                    const newStartsArray = res.data.subjects.map(item => {
                        const starsArray = {
                            starsLightArray: [],
                            starsDarkArray: []
                        };

                        function getStarsNumber(starsArray) {
                            const startsNumber = Number(item.rating.stars.slice(0, 1));
                            for (let i = 0; i < startsNumber; i++) {
                                starsArray.starsLightArray.push(1);
                            }
                            for (let i = 0; i < 5 - startsNumber; i++) {
                                starsArray.starsDarkArray.push(1)
                            }
                        };
                        getStarsNumber(starsArray);

                        return {
                            ...item,
                            'rating': {
                                ...item.rating,
                                stars: item.rating.stars.slice(0, 1),
                                starsArray: starsArray
                            },
                        }
                    });
                    that.setData({
                        moveTop: {
                            ...res.data,
                            type: '正在热映',
                            subjects: [
                                ...newStartsArray
                            ],
                            'requestAddress': 'http://t.yushu.im/v2/movie/top250'
                        }
                    })
                }
            }
        });
        this.setData({
            count: countNumber+10
        })
        setTimeout(function() {   --------------------- 设置完所有的data数据后，关闭loading动画
            wx.hideNavigationBarLoading();
        }, 500)
    },

(28) 下拉刷新

https://blog.csdn.net/weixin_41871290/article/details/80665161
https://zhuanlan.zhihu.com/p/24739728

在页面的json文件中，配置 enablePullDownRefresh()

enablePullDownRefresh() 是否开启下拉刷新
enablePullDownRefresh() 是否开启下拉刷新-------------------- 默认是false
在app.json中可以配置window，tabBar，pages数组等 ------- 区别
在页面的json中，只能配置window选项---------------------------- 区别
onPullDownRefresh() 监听下拉刷新事件
在 Page 中定义 onPullDownRefresh 处理函数，监听该页面用户下拉刷新事件。
需要在 config 的window选项中开启 enablePullDownRefresh。
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
wx.stopPullDownRefresh停止拉刷新

(29) 搜索

input组件有bindfocus，bindblur，bindinput，bindconfirm等函数
输入的值通过 event.detail.value获得