總結微信小程序中的一些知識

NO IMAGE

一、微信小程序中的單位rpx

注:開發微信小程序時設計師可以用iPhone6作為設計稿的標準。
建議:設計稿使用設備寬度750px,比較容易計算,750px的設計稿,1rpx=1px,這樣的話,設計稿上量出來的尺寸是多少px就是多少rpx,至於在不同的設備上實際上要換算成多少個rem就交給小程序自己換算了。

二、微信小程序頁面跳轉的幾種方法

1、wx.navigateTo(object)
保留當前頁面,跳轉到應用內的某個頁面。

 wx.navigateTo({
url: '/pages/budget/budget?id=' + id,
})
注:小程序中左上角有一個返回箭頭,可返回上一個頁面,也可以通過方法 wx.navigateBack 返回原頁面

2、wx.redirectTo(object)
關閉當前頁面,跳轉到應用內的某個頁面。

wx.redirectTo({
url: '/pages/budget/budget?id=' + id,
})
注:小程序左上角沒有返回箭頭,不能返回上一個頁面

3、wx.switchTab(object)
跳轉到 tabBar 頁面,並關閉其他非 tabBar 頁面

{
"tabBar": {
"list": [{
"pagePath": "index",
"text": "首頁"
},{
"pagePath": "other",
"text": "其他"
}]
}
}
wx.switchTab({
url: '/index'
})
注:wx.navigateTo 和 wx.redirectTo 不允許跳轉到 tabBar 頁面,只能用 wx.switchTab 跳轉到 tabBar 頁面

4、wx.reLaunch(object)
關閉所有頁面,打開到應用內的某個頁面。

wx.reLaunch({
url: 'test?id=1'
})
注:跟wx.redirectTo一樣左上角不會出現返回箭頭,但兩者卻不完全相同

區別:

(1)在wx.navigateTo中,每跳轉一個新的頁面,其原始頁面就會被加入堆棧,通過調用wx.navigateBack(object),可通過獲取堆棧中保存的頁面,返回上一級或多級頁面;
(2)wx.redirectTo方法則不會被加入堆棧,但仍可通過wx.navigateBack(object)方法返回之前堆棧中的頁面
(3)wx.reLaunch方法則會清空當前的堆棧。

三、小程序實現多button單選/多選

1、wxml
樣式選中改變是通過三元運算符實現的

<!--pages/button-select/button-select.wxml-->
<view class='button_container'>
<block wx:for="{{buttons}}" wx:key="buttons">
<button class='{{item.checked?"checked_button":"normal_button"}}' data-id='{{item.id}}' bindtap='radioButtonTap'>{{item.name}}</button>
</block>
</view>

2、在Page({…})中填充數據

data: {
buttons: [{ id: 1, name: '銀色' }, { id: 2, name: '白色' }, { id: 3, name: '黑色' }],
},

3、默認第一個按鈕被選中

onLoad: function (options) {
this.data.buttons[0].checked = true;
this.setData({
buttons: this.data.buttons,
})
},

4、在Page({…})中添加事件監聽方法(單選)

/**
* 事件監聽,實現單選效果
* e是獲取e.currentTarget.dataset.id所以是必備的,跟前端的data-id獲取的方式差不多
*/
radioButtonTap: function (e) {
console.log(e)
let id = e.currentTarget.dataset.id
console.log(id)
for (let i = 0; i < this.data.buttons.length; i++) {
if (this.data.buttons[i].id == id) {
//當前點擊的位置為true即選中
this.data.buttons[i].checked = true;
}
else {
//其他的位置為false
this.data.buttons[i].checked = false;
}
}
this.setData({
buttons: this.data.buttons,
})
},

5、在Page({…})中添加事件監聽方法(多選)

注:記得在wxml中修改綁定方法bindtap='radioButtonTap'
checkButtonTap:function(e){
console.log(e)
let id = e.currentTarget.dataset.id
console.log(id)
for (let i = 0; i < this.data.buttons.length; i++) {
if (this.data.buttons[i].id == id) {
if (this.data.buttons[i].checked == true) {
this.data.buttons[i].checked = false;
} else {
this.data.buttons[i].checked = true;
}
}
}
this.setData({
buttons: this.data.buttons,
})
}

四、微信小程序顯示與隱藏hidden

1、wxml

<view bindtap='clickMe'>點擊</view>
//這是顯示隱藏的部分
<view hidden="{{hiddenName}}">隱藏顯示部分</view>

2、js

page({
data:{
hiddenName:true  //默認隱藏
},
clickMe:function(e){
this.setData({
hiddenName:(!this.data.hiddenName)
})
}
})

五、微信小程序實現tab選項卡

1、wxml

<!--pages/detail/detail.wxml-->
<view class="swiper-tab">
<view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">全部</view>
<view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">提現中</view>
<view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">已提現</view>
</view>
<swiper current="{{currentTab}}" duration="300"  bindchange="swiperTab">
<swiper-item ><view>全部</view></swiper-item>
<swiper-item><view>提現中</view></swiper-item>
<swiper-item><view>已提現</view></swiper-item>
</swiper>

2、js

// pages/detail/detail.js
var app = getApp()
Page({
data: {
currentTab: 0
},
onLoad: function (options) {
// 頁面初始化 options為頁面跳轉所帶來的參數
},
//滑動切換
swiperTab: function (e) {
var that = this;
that.setData({
currentTab: e.detail.current
});
},
//點擊切換
clickTab: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
}
})

鏈接

微信公眾平臺

微信官方文檔

小程序開發總結

小程序實時聊天socket

相關文章

js繼承的幾種方式

vue的一些知識點

微信小程序的知識點

微信小程序中的swiper用法