注意事項：
- 只有<text></text>標(biāo)簽包裹的文本可以在真機上長按選中
- <text></text>可以嵌套，里面有轉(zhuǎn)義字符，則解析成轉(zhuǎn)義字符，而不是字符串。
- 小程序，默認的頂層標(biāo)簽是 <page></page>，可以用其修改全局樣式等
- 如果一個標(biāo)簽的屬性值是boolean值，不能直接用字符串false表示 布爾的false，因為false是一個字符串，js轉(zhuǎn)成布爾值后是true ---------- 所以要用雙大括號包裹false，表示是微信小程序中的語法
- condition: 是狀態(tài)的意思
- launch: 是發(fā)射的意思
- defer： 是延遲的意思
- grid: 是格子的意思
- category: 是類型的意思
- pannel: 是面板的意思
- 在app.json中的路徑，最前面用絕對路徑時，不要加斜杠！！！！！！！！
效果圖
(1) rpx 相對像素值
在iPhone6上，1rpx=1物理像素=0.5px。
因為設(shè)計師標(biāo)注的尺寸一般是物理分辨率。所以如果以iphone6為標(biāo)準(zhǔn)出設(shè)計稿的話，那么我們就可以不需要經(jīng)過換算直接標(biāo)準(zhǔn)rpx。
.banner {
width:200rpx;
height:200rpx;
border-radius:50%
}
(2) 改變導(dǎo)航欄顏色
- 如果想單獨改變某個頁面的導(dǎo)航欄顏色，需要在單個頁面文件夾中添加.json文件，并且不能再用window
app.json ( 所有頁面 )
{
"pages":[
"pages/welcome/welcome" // 注冊頁面
],
"window": {
"navigationBarBackgroundColor": "#b3d4db" // 設(shè)置導(dǎo)航欄背景顏色
}
}
----------------------------------------------------------------------------
posts.json ( 單個頁面 )
{
"navigationBarBackgroundColor":"#000" // 配置單個導(dǎo)航欄的背景，記得沒有window
"navigationBarTitleText":"主頁" // 配置導(dǎo)航欄標(biāo)題文字
}
(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
小程序的生命周期：
- 應(yīng)用生命周期
- 頁面生命周期
- 應(yīng)用生命周期影響頁面生命周期
應(yīng)用生命周期：
- 首次打開小程序，觸發(fā)onLaunch事件 ( launch: 是發(fā)射的意思 )，( 全局只觸發(fā)一次 )
- 小程序初始化完成后，觸發(fā) onShow事件，監(jiān)聽顯示
- 小程序從前臺進入后臺，觸發(fā) onHide事件
應(yīng)用生命周期
頁面生命周期：
- 小程序注冊完成后，加載頁面，觸發(fā)onLoad方法。
- 頁面載入后觸發(fā)onShow方法，顯示頁面。
- 首次顯示頁面，會觸發(fā)onReady方法，渲染頁面元素和樣式，一個頁面只觸發(fā)一次。
- 當(dāng)小程序后臺運行或跳轉(zhuǎn)到其他頁面時，觸發(fā)onHide方法。
- 當(dāng)小程序有后臺進入到前臺運行或重新進入頁面時，觸發(fā)onShow方法。
- 當(dāng)使用重定向方法wx.redirectTo(OBJECT)或關(guān)閉當(dāng)前頁返回上一頁wx.navigateBack()，觸發(fā)onUnload
頁面生命周期
應(yīng)用生命周期影響頁面生命周期
- 小程序初始化完成后，頁面首次加載觸發(fā)onLoad，只會觸發(fā)一次。
- 當(dāng)小程序進入到后臺，先執(zhí)行頁面onHide方法再執(zhí)行應(yīng)用onHide方法。
- 當(dāng)小程序從后臺進入到前臺，先執(zhí)行應(yīng)用onShow方法再執(zhí)行頁面onShow方法
應(yīng)用生命周期影響頁面生命周期
前臺和后臺：
- 后臺：
當(dāng)用戶點擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開微信，小程序并沒有直接銷毀，而是進入了后臺 - 前臺：
當(dāng)再次進入微信或再次打開小程序，又會從后臺進入前臺
(5) 頁面的生命周期
onLoad : 監(jiān)聽頁面加 ( 可以在onLoad生命周期中請求數(shù)據(jù) )
onShow : 監(jiān)聽頁面顯示
onReady : 監(jiān)聽頁面初次渲染完成
onHide : 監(jiān)聽頁面隱藏
onUnload ：監(jiān)聽頁面卸載
(6) wx:if="{{false}}" 隱藏 和 顯示
(7)<view wx:for="{{數(shù)組變量}}" wx:for-item="" wx:for-index="" wx:key=""> </view> 循環(huán)
- 在js文件中引入本地json文件時，使用require語法時，路徑必須是 ( 相對路徑 ) !!
- 如果對象中的屬性名帶有 - ，則在js中使用的時候，不能用點語法，只能用方括號，在方括號中必須用引號，否則會當(dāng)作變量處理。
- 當(dāng) wx:for 的值為字符串時，會將字符串解析成字符串?dāng)?shù)組
<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() 參數(shù)格式
接受一個對象，以 key，value 的形式表示將 this.data 中的 key 對應(yīng)的值改變成 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事件 ----- 相當(dāng)于react中的onClick事件
tap事件：手指觸摸后馬上離開
- 事件綁定： bindtap
- 頁面跳轉(zhuǎn)：wx.navigateTo( { url : '.......' } ) 具有子集關(guān)系，可以返回，最多5個層級。
- 頁面重定向：wx.redirectTo( {url: '.......' } ) 不具有子集關(guān)系，不能返回
- wx.navigateTo()方法的完整寫法
wx.navigateTo({
url: '../posts/posts',
fail: function() {},
success: function() {},
complete: function() {},
})
navigateTo 和 redirectTo與頁面生命周期 onUnload() 和 onHide() 的關(guān)系?
- wx.redirectTo() 會觸發(fā) onUnload()方法 ，頁面卸載。
- wx.navigateTo() 會觸發(fā) onHide()方法，頁面隱藏，因為還可以返回，并沒有被卸載，只是隱藏了。
生命周期 onUnload() 和 onHide() 的區(qū)別？
- 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() 頁面跳轉(zhuǎn)
(1) 自定義屬性的獲取： event.currentTarget.dataset.屬性名
(2) 路由跳轉(zhuǎn)傳遞的參數(shù)獲取：onLoad(options)生命周期函數(shù)的options對象獲取
- options.key
posts.wxml
(1) 自定義屬性以 data- 開頭
(2) 自定義屬性通過 event.currentTarget.dataset.屬性名 獲取
(3) image很多時,可以在父級元素上用 catchtap ， 通過event.target獲得自定義屬性
(4) 注意采用事件冒泡的方式，自定義屬性是通過：event.target.dataset.屬性名 獲取 (區(qū)別2和4的不同)
(5)
target 是當(dāng)前點擊的組件
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: '頁面地址'}) 頁面跳轉(zhuǎn)
(2) 傳遞的參數(shù)通過 ？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對象有跳轉(zhuǎn)攜帶的數(shù)據(jù)
console.log(options.id, 'options.id') ------------ 獲取頁面跳轉(zhuǎn)攜帶的參數(shù)
}
(10) bindtap事件 和 catchtap事件的區(qū)別
- bindtap 綁定的事件會冒泡 ------------------ 冒泡
- catchtap 綁定的事件不會冒泡 ----------- 不冒泡
- 事件冒泡指的是事件的冒泡階段，由最里層向外層傳播，會觸發(fā)父元素綁定的事件
(11) template 模板
- 定義：
<template name="postsItem"></template>
在wxml中定義，必須有個name屬性
注意： 在模板中應(yīng)用圖片等靜態(tài)資源時，用絕對路徑！！！！！
- 引入并使用：
<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對應(yīng)name
</block>
</view>
注意點：
(1) 使用時，<template is="A" />標(biāo)簽中的 is 屬性對應(yīng) wxml文件中<template name="A">中的name屬性
(2) <template />中的data屬性對應(yīng)數(shù)據(jù)源
- 引入模板的，引入樣式
@import "./posts-item/posts-item-template.wxss"; // 使用相對路徑
(12) 自定義屬性
- 自定義屬性必須以data開頭，以 - 橫線鏈接，可以有多個橫線
- 自定義的標(biāo)簽屬性，在 js 中通過event.currentTarget.dataset獲取
- 自定義的標(biāo)簽屬性，在 js 中是會省略 "-" 橫線和data，并且是駝峰命名
- 在js中，大寫的英文字母也會被轉(zhuǎn)化成小寫的
wxml中：
<view catchtap="goDetail" data-name-text="aaa">
js中：
nameText:"aaa" --------- 注意：省略了（ data- ）， 并且采用駝峰命名
(13) event事件 和 點擊事件的參數(shù)傳遞
在小程序中，bindtap等事件都有一個event事件
- 在點擊元素標(biāo)簽上自定義的屬性，可以通過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傳遞參數(shù)，以查詢字符串的形式組成
},
在被傳遞的js文件中：
在 onLoad生命周期函數(shù)中，有 options 參數(shù)
onLoad: function (options) { ----------------- 一般請求數(shù)據(jù)都在 onLoad 生命周期中
const detail_id = options.id; ----------------- 上面代碼傳遞過來的 id 值
console.log(options)
},
(14) wx.setStorageSync() 和 wx.setStorage()
wx.removeStorageSync() 和 wx.clearStorageSync()
小程序規(guī)定 緩存的上限不能超過 10M
設(shè)置同步緩存：wx.setStorageSync(key, data)
第一個參數(shù)是鍵名，是一個字符串
第二個參數(shù)是鍵值，可以是 object 或者 string獲取同步緩存：wx.getStorageSync(key)
刪除指定鍵的同步緩存：wx.removeStorageSync(key)
刪除全部同步緩存：wx.clearStorageSync() - 不需要參數(shù)
同步設(shè)置：
wx.setStorageSync('message', {
name: 'wang'
});
-------------------
異步設(shè)置：
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對應(yīng)的鍵值wang
},
})
(15) 狀態(tài)切換，顯示隱藏
- 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按鈕的文字?jǐn)?shù)組，最大長度為6個
success: function(res) { ---- 點擊菜單某一項成功后的回調(diào)，res.tapIndex可獲得數(shù)組的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() 監(jiān)聽音樂播放。
wx.onBackgroundAudioPause() 監(jiān)聽音樂暫停。
wx.onBackgroundAudioStop() 監(jiān)聽音樂停止。
- 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
})
}
},
監(jiān)聽播放和暫停：用來同步播放，改變圖標(biāo)狀態(tài)
一般在onLoad生命周期函數(shù)中使用
onLoad: function(options) {
const that = this;
wx.onBackgroundAudioPlay(function() { ---------- 監(jiān)聽音樂播放
that.setData({
isMusciPlay: true
})
});
wx.onBackgroundAudioPause(function() { ---------- 監(jiān)聽音樂暫停
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
}
單在詳情頁播放音樂時，返回到父級頁面，再回到詳情頁時，圖標(biāo)狀態(tài)和全局控制圖標(biāo)狀態(tài)不一致
用全局標(biāo)量解決（注意：定義時是一個對象，所以把對象賦值后，修改對象摸個屬性，影響原對象）
wx.onBackgroundAudioPlay(function() {
that.setData({
isMusciPlay: true,
});
app.globalData.g_ispalyMusic = true;
});
wx.onBackgroundAudioPause(function() {
that.setData({
isMusciPlay: false
});
app.globalData.g_ispalyMusic = false; // 改變?nèi)謱ο蟮闹? })
(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) 啟動頁不跳轉(zhuǎn)到tabBar頁面的坑？
-
wx.switchTab({...}) : 跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面
(1) navigateTo和redirectTo都不跳轉(zhuǎn)：
wx.navigateTo({
url: '../posts/posts'
});
wx.redirectTo({
url: '../posts/posts'
});
----------------------------
(2) 使用 switchTab({}) 可以跳轉(zhuǎn)到tabBar頁面，并關(guān)閉其他非tabBar頁面
wx.switchTab({
url: '../posts/posts'
});
(23) wx.request()發(fā)起請求
官方文檔：
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: { --------------------------------------------- 請求參數(shù)，get請求會轉(zhuǎn)換成查詢字符串
start: 0,
count: 20,
},
header: { -------------------------------------------- 請求頭
"Content-Type": "application/json" -------------- 發(fā)送端發(fā)送的實體數(shù)據(jù)類型是json格式
},
success: function(res) { ----------------------------- 成功的回調(diào)
console.log(res);
console.log(res.data); --------------------------- 數(shù)據(jù)
console.log(res.statusCode); --------------------- 狀態(tài)碼
console.log(res.header); ------------------------ 響應(yīng)頭
}
});
},
(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頁面中應(yīng)用了template
const type = event.currentTarget.dataset.type;
wx.navigateTo({
url: '/pages/moves/more-move/more-move?type=' + type,
})
},
說明：
(1) 用event.currentTarget.dataset獲得點擊的節(jié)點的自定義屬性
(2) wx.navigateTo()導(dǎo)航
(3) 用查詢字符串傳遞參數(shù)，在子頁面的js中的onLoad生命周期中的options參數(shù)獲得導(dǎo)航傳遞的參數(shù)
(25) wx.setNavigationBarTitle() 動態(tài)設(shè)置當(dāng)前頁面標(biāo)題
-
區(qū)別json中配置的 ------- navigationBarTitleText
- 對界面設(shè)置ui相關(guān)的操作時，要在onReady頁面初次渲染完成之后。
onLoad()頁面加載，頁面還沒有正式生成，所以不能做ui相關(guān)的事情。一個頁面只會調(diào)用一次onShow()頁面顯示，每次打開頁面都會調(diào)用一次onReady()頁面初次渲染完成，一個頁面只會加載一次onReady()函數(shù)，代表頁面已準(zhǔn)備妥當(dāng)，可以和視圖層進行交互。- 對界面的設(shè)置如wx.setNavigationBarTitle請在onReady之后設(shè)置。
onReady: function () { ------ onReady()頁面初次渲染完成，一個頁面只加載一次，該生命周期可以和ui交互
wx.setNavigationBarTitle({ ------ wx.setNavigationBarTitle動態(tài)設(shè)置當(dāng)前頁面標(biāo)題
title: this.data.type,
})
},
------------------------------------------
不是動態(tài)設(shè)置，可以在當(dāng)面頁面的json中，配置
{
"navigationBarTitleText": "免費電影"
}
(26) scroll-view 可滾動視圖區(qū)域組件
- bindscrolltolower: 滾動到底部/右邊，會觸發(fā) scrolltolower 事件
- lower-threshold: 距底部/右邊多遠時（單位px），觸發(fā) scrolltolower 事件
move-grid-template.wxml
<import src="/pages/moves/move/move-template.wxml" />
<template name="move-grid">
<scroll-view ----------------------------------------- scroll-view可滾動試圖區(qū)域組件
scroll-y="true" ----------------------------------- 允許縱向滾動
bindscrolltolower="goScrollLower" ----------------- 滾動到底部，會觸發(fā) 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) { -------------- 星星的數(shù)量顯示
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() 顯示導(dǎo)航條加載動畫。
wx.hideNavigationBarLoading() 隱藏導(dǎo)航條加載動畫
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(); ---------------------------- 請求數(shù)據(jù)時，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() { --------------------- 設(shè)置完所有的data數(shù)據(jù)后，關(guān)閉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數(shù)組等 ------- 區(qū)別
- 在頁面的json中，只能配置window選項---------------------------- 區(qū)別
-
onPullDownRefresh() 監(jiān)聽下拉刷新事件
- 在 Page 中定義 onPullDownRefresh 處理函數(shù)，監(jiān)聽該頁面用戶下拉刷新事件。
- 需要在 config 的window選項中開啟 enablePullDownRefresh。
- 當(dāng)處理完數(shù)據(jù)刷新后，wx.stopPullDownRefresh可以停止當(dāng)前頁面的下拉刷新。
-
wx.stopPullDownRefresh停止拉刷新
(29) 搜索
- input組件有bindfocus，bindblur，bindinput，bindconfirm等函數(shù)
- 輸入的值通過 event.detail.value獲得
