一、顯示loading效果
? ? ? ? 文檔地址：wx.showLoading(Object object) | 微信開放文檔
? ? ? ? 請求前 顯示loading 效果，請求結(jié)束后隱藏loading
// 在請求模塊中
wx.showLoading({
title: '加載中'
})
當(dāng)請求完成后，關(guān)閉加載
wx.request({
success: ()=>{ // ... }
complete() {
setTimeout(() => {
// 這里延時一秒鐘看到效果，關(guān)閉加載中效果
wx.hideLoading()
}, 1000)
}
})
?二、上拉觸底節(jié)流效果
? ? ? ? 下拉觸底需要時間比較長，但是可能會一直進(jìn)行請求，我們可以設(shè)置一個 加載狀態(tài)，用來控制什么時候 才可以加載
? ? ? ? 當(dāng)我們loading 效果為true 的時候 證明上次加載還沒有結(jié)束，所以不進(jìn)行加載
// js文件
data: {
colorList: [],
// 設(shè)置加載狀態(tài)
isLoading: false
},
getColorList() {
// 請求開始 設(shè)置加載時狀態(tài)為true
this.setData({
isLoading: true
})
wx.request({
// url ...
// success ...
complete: () => {
wx.hideLoading()
// 請求結(jié)束后關(guān)閉加載效果
this.setData({
isLoading: false
})
}
})
},三、小程序生命周期
????????文檔地址：App(Object object) | 微信開放文檔
1、頁面生命周期函數(shù)
// 頁面的 .js 文件
Page({
onLoad: function (option) { }, // 監(jiān)聽頁面加載，個頁面只調(diào)用1次function
onShow: function () { }, // 監(jiān)聽頁面顯示
onReady: function () { }, // 監(jiān)聽頁面初次渲染完成，一個頁面只調(diào)用1次
onHide: function () { }, // 監(jiān)聽頁面隱藏
onUnload: function () { } // 監(jiān)聽頁面卸載，一個頁面只調(diào)用1次
})2、全局小程序生命周期函數(shù)
// app.js 文件
App({
// 小程序初始化完成時，執(zhí)行此函數(shù)，全局只觸發(fā)一次?？梢宰鲆恍┏跏蓟墓ぷ鳌? onLaunch: function (options) { },
// 小程序啟動，或從后臺進(jìn)入前臺顯示時觸發(fā)。
onShow: function (options) { },
// 小程序從前臺進(jìn)入后臺時觸發(fā)。
onHide: function () { },
})四、WXS（微信版 Js）
? ? ? ? 文檔地址：WXS | 微信開放文檔
????????1、WXS 不依賴于運行時的基礎(chǔ)庫版本，可以在所有版本的小程序中運行。
????????2、WXS 與 JavaScript 是不同的語言，有自己的語法，并不和 JavaScript 一致，不能使用ES6語法，例如：解構(gòu)、const、let、箭頭函數(shù)等
? ? ? ? 3、由于運行環(huán)境的差異，在 iOS 設(shè)備上小程序內(nèi)的 WXS 會比 JavaScript 代碼快 2 ~ 20 倍。在 android 設(shè)備上二者運行效率無差異。
? ? ? ? 4、他不能作為事件處理函數(shù)，基本上都是使用當(dāng)作過濾器
1、基礎(chǔ)變量和應(yīng)用頁面
?在wxml中進(jìn)行 合寫
// 顯示在頁面上
<view>{{m1.a}}</view>
<view>{{m1.toUpper('aaa')}}</view>
// 聲明模塊名稱
<wxs module="m1">
var str = 'abc'
// 必須導(dǎo)出
module.exports = {
a: str
}
// 聲明函數(shù)
module.exports.toUpper = function(val){
return val.toUpperCase() // 轉(zhuǎn)換為大寫
}
</wxs>引入模塊使用
// .wxml
<view>{{m2.name}}</view>
<view>{{m2.toLower('BBB')}}</view>
// 引入并命名
<wxs module="m2" src="/utils/tools.wxs"></wxs>var name = '外部引入的wxs'
module.exports.name = name
module.exports.toLower = function (val) {
return val.toLowerCase() // 轉(zhuǎn)換為小寫
}五、組件的創(chuàng)建與使用
? ? ? ? 1、創(chuàng)建組件
????????
? ? ? ? 2、組件注冊及使用
? ? ? ? ?指南-使用方法? ? ?文檔地址：自定義組件 | 微信開放文檔
? ? ? ? ?框架-components文檔地址：Component(Object object) | 微信開放文檔
? ? ? ? ???全局注冊
? ? ? ? ? ? ?在app.json中進(jìn)行注冊
"usingComponents": {
"com-b":"/pages/comb/comb"
}
? ? ? ? ???局部注冊
? ? ? ? ? ? ?在使用的頁面中的json 文件中 與page 平級注冊
"usingComponents": {
"com-a":"/pages/coma/coma"
}應(yīng)用頁面上
<com-a></com-a>
<com-b></com-b>3、WXSS作用范圍
注意：
????????1. 操作組件樣式時，只使用類名樣式
????????2. 組件的樣式默認(rèn)有隔離行(scoped)，頁面的類樣式無法作用到組件中；組件的樣式，默認(rèn)無法作用到頁面中
????????3. 不要使用 屬性選擇器、標(biāo)簽選擇器、id選擇器操作組件中的樣式
手動調(diào)整 wxss 的作用范圍
在組件中的js文件中 添加options 配置?自定義組件 | 微信開放文檔
Component({
// isolated: 頁面與組件樣式相互隔離(默認(rèn))
// apply-shared: 頁面與組件的樣式相互作用
// shared： 頁面的樣式會作用到組件，組件的樣式不會作用到頁面
options:{
styleIsolation:"isolated" // 默認(rèn)
},
// ...
})4、聲明事件與數(shù)據(jù)
? ? ? ? 與頁面一致，使用data對象中存儲數(shù)據(jù)，但是方法需要在method中聲明文章來源：http://www.zghlxwxcb.cn/news/detail-497608.html
// coma.js
data: {
msgComA: 'comA的私有數(shù)據(jù)'
},
methods: {
comaHandel(e){
console.log('e',e);
console.log(this.data.msgComA);
}
}5、向組件傳遞數(shù)據(jù)
// 頁面文件
<com-b str='傳遞的str數(shù)據(jù)' ></com-b>
// 組件js文件 類似于vue 的props
properties: {
str:String
},它可以像data里面的數(shù)據(jù)一樣通過 setData 來進(jìn)行修改文章來源地址http://www.zghlxwxcb.cn/news/detail-497608.html
到了這里，關(guān)于微信小程序顯示loading效果，微信小程序節(jié)流效果，微信小程序生命周期，微信小程序組件的創(chuàng)建與使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
