你需要知道的小程序開發(fā)技巧
|
一直以來進(jìn)行了比較多的微信小程序開發(fā)... 總會(huì)接觸到一些和官方組件或 api 相關(guān)或其無法解決的需求，于是決定在這里小小的整理一下自己的實(shí)現(xiàn)(次序不分先后) 自定義組件的使用
"注釋": "前面為組件名，后面為路徑，這里僅供參考"
{
"usingComponents": {
"Menu": "../Components/Menu/Menu",
"Loading": "../Components/Loading/Loading"
}
}
在組件的 js 中定義你需要的屬性名,類型及默認(rèn)值
properties: {
theme: {
type: String,
value: 'gray'
}
...
},
注意 properties 為父組件要傳入的數(shù)據(jù)，組件自身狀態(tài)還是在 data 中 然后在 wxml 中引用即可
<Menu theme="{{theme}}"></Menu>
一鍵換膚先創(chuàng)建一個(gè) color.wxss 來存你的皮膚樣式(文件名和位置隨意)
/* 黑色主題 */
.bg-black{
background-color: #363636;
}
.col-black-title{
color: #ffffff;
}
.col-black-name{
color: #c3c3c3;
}
class 名中必須帶一個(gè) 標(biāo)志 來區(qū)分不同主題，推薦使用顏色的英文名..然后在 app.wxss 中引用 // ~ 為你的文件路徑 @import '~/color.wxss'; 之后在 app.js 的 globalData 中定義一個(gè)字段儲(chǔ)存你當(dāng)前主題
globalData: {
themeArr: ['gray', 'black', 'green', 'orange', 'pink', 'blue'],
theme: 'black' // gray, black, green, orange, pink, blue
}
然后在js里引用 app.js ，然后在 onLoad 里獲取 theme 后 setData 即可，這里貼上代碼
<Menu theme="{{theme}}"></Menu>
<block wx:for="{{themeArr}}" wx:key="{{index}}">
<view
class="theme-view-item bg-{{item}} select-{{item == theme}}"
bindtap='changeTheme'
data-theme="{{item}}"
></view>
</block>
.theme-view-item{
width: 80rpx;
height: 40rpx;
margin: 20rpx;
border-radius: 10rpx;
}
.select-true{
transform: scale(1.2,1.2);
}
var app = getApp()
Page({
data: {
theme: '',
themeArr: app.globalData.themeArr
},
onLoad: function (options) {
this.setData({
theme: app.globalData.theme
})
},
changeTheme(e){
var theme = e.currentTarget.dataset.theme
app.globalData.theme = theme
this.setData({
theme: theme
})
}
})
來個(gè)效果圖
這里你也可以使用 storage 來保存 theme 加載更多使用 scroll-view
<scroll-view
scroll-y
bindscrolltolower='toLow'
style="height: {{height}}px"
>
scroll-y 允許縱向滾動(dòng)， bindscrolltolower 定義了滾動(dòng)到底部時(shí)應(yīng)該執(zhí)行的函數(shù)， style 中使用了 js 中獲取的屏幕可用高度 使用 scroll-y 需要指定 scroll 的高度
onLoad: function (options) {
wx.getSystemInfo({
success: (res) => {
this.setData({
height: res.windowHeight
})
}
})
},
toLow(){
this.setData({
isLoading: true
})
},
然后在 scroll 下面放你的 loading 組件就可以了..
<scroll-view
scroll-y
bindscrolltolower='toLow'
style="height: {{height}}px"
>
......
<view hidden="{{!isLoading}}">
<Loading></Loading>
</view>
</scroll-view>
下拉刷新這個(gè)功能用到的都是官方的 api ，先在 app.json 中定義允許下拉刷新
"window": {
......
"enablePullDownRefresh": true
}
然后在你的 js 文件中定義相應(yīng)的函數(shù)
onPullDownRefresh: function () {
......
wx.stopPullDownRefresh()
},
這個(gè)點(diǎn)可以看官方文檔 自適應(yīng)rpx 單位是微信小程序中 css 的尺寸單位， rpx 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，如在 iPhone6 上，屏幕寬度為 375px ，共有 750 個(gè)物理像素，則 750rpx = 375px = 750 物理像素， 1rpx = 0.5px = 1 物理像素 如果不懂的話不用考慮太多，在用 px 的時(shí)候?qū)⑵浯笮》妒褂?nbsp;rpx 即可 【微信小程序】——rpx、px、rem等尺寸間關(guān)系淺析 阻止事件冒泡假設(shè)有如下結(jié)構(gòu) <view class='A' bindtap='funcA'> <view class='B' bindtap='funcB'></view> </view> 我們?cè)?nbsp;A , B 上定義了兩個(gè)獨(dú)立的點(diǎn)擊事件，懂得事件冒泡的童鞋會(huì)發(fā)現(xiàn)，如果點(diǎn)擊 B 的話，不僅會(huì)執(zhí)行 funcB 還會(huì)執(zhí)行 funcA ，那么如何避免這個(gè)問題? 很簡(jiǎn)單，只需要將不需要冒泡的的綁定函數(shù)改成 catchtap <view class='A' bindtap='funcA'> <view class='B' catchtap='funcB'></view> </view> 如何去掉Button的默認(rèn)邊框將 button 自帶的 position: relative 去掉即可 |
