你需要知道的小程序開發技巧
|
一直以來進行了比較多的微信小程序開發... 總會接觸到一些和官方組件或 api 相關或其無法解決的需求，于是決定在這里小小的整理一下自己的實現(次序不分先后) 自定義組件的使用
"注釋": "前面為組件名，后面為路徑，這里僅供參考"
{
"usingComponents": {
"Menu": "../Components/Menu/Menu",
"Loading": "../Components/Loading/Loading"
}
}
在組件的 js 中定義你需要的屬性名,類型及默認值
properties: {
theme: {
type: String,
value: 'gray'
}
...
},
注意 properties 為父組件要傳入的數據，組件自身狀態還是在 data 中 然后在 wxml 中引用即可
<Menu theme="{{theme}}"></Menu>
一鍵換膚先創建一個 color.wxss 來存你的皮膚樣式(文件名和位置隨意)
/* 黑色主題 */
.bg-black{
background-color: #363636;
}
.col-black-title{
color: #ffffff;
}
.col-black-name{
color: #c3c3c3;
}
class 名中必須帶一個 標志 來區分不同主題，推薦使用顏色的英文名..然后在 app.wxss 中引用 // ~ 為你的文件路徑 @import '~/color.wxss'; 之后在 app.js 的 globalData 中定義一個字段儲存你當前主題
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
})
}
})
來個效果圖
這里你也可以使用 storage 來保存 theme 加載更多使用 scroll-view
<scroll-view
scroll-y
bindscrolltolower='toLow'
style="height: {{height}}px"
>
scroll-y 允許縱向滾動， bindscrolltolower 定義了滾動到底部時應該執行的函數， 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>
下拉刷新這個功能用到的都是官方的 api ，先在 app.json 中定義允許下拉刷新
"window": {
......
"enablePullDownRefresh": true
}
然后在你的 js 文件中定義相應的函數
onPullDownRefresh: function () {
......
wx.stopPullDownRefresh()
},
這個點可以看官方文檔 自適應rpx 單位是微信小程序中 css 的尺寸單位， rpx 可以根據屏幕寬度進行自適應，如在 iPhone6 上，屏幕寬度為 375px ，共有 750 個物理像素，則 750rpx = 375px = 750 物理像素， 1rpx = 0.5px = 1 物理像素 如果不懂的話不用考慮太多，在用 px 的時候將其大小翻倍使用 rpx 即可 阻止事件冒泡假設有如下結構 <view class='A' bindtap='funcA'> <view class='B' bindtap='funcB'></view> </view> 我們在 A , B 上定義了兩個獨立的點擊事件，懂得事件冒泡的童鞋會發現，如果點擊 B 的話，不僅會執行 funcB 還會執行 funcA ，那么如何避免這個問題? 很簡單，只需要將不需要冒泡的的綁定函數改成 catchtap <view class='A' bindtap='funcA'> <view class='B' catchtap='funcB'></view> </view> 如何去掉Button的默認邊框將 button 自帶的 position: relative 去掉即可 |
