微信小程序 ｜ 開發(fā)常用事例 2
發(fā)布時間：2020-05-13 09:54 所屬欄目：小程序開發(fā)教程
前言
小程序斷斷續(xù)續(xù)搞了有一段時間了，發(fā)現(xiàn)在某些情況下，第一次消耗 30 分鐘，而后則幾分鐘即可。
短暫微小積累，做一個積累，也希望幫助有需要的小伙伴～
一起來看關(guān)于小程序常用事例
話不多說，立刻開搞～
一、 實現(xiàn)底部 Tab 欄
"tabBar": {
"color": "#515151",
"selectedColor": "#01509F",
"list": [
{
"pagePath": "pages/index/index",
"text": "預(yù)約",
"iconPath": "/images/tab_yuyue.png",
"selectedIconPath": "images/tab_yuyue_selected.png"
},
{
"pagePath": "pages/records/records",
"text": "記錄",
"iconPath": "/images/tab_record.png",
"selectedIconPath": "/images/tab_record_selected.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "/images/tab_mine.png",
"selectedIconPath": "/images/tab_mine_selected.png"
}
]
}
復(fù)制代碼
二、 設(shè)置 Button 透明無邊框
.price_detail .img_info button::after {
border: none;
}
.price_detail .img_info button {
background: none;
}
復(fù)制代碼
三、 設(shè)置 CheckBox 樣式為圓形
/* 重寫 checkbox 樣式 */
/* 未選中的 背景樣式 */
checkbox .wx-checkbox-input {
border-radius: 50%;
width: 46rpx;
height: 46rpx;
}
/* 選中后的 背景樣式 （紅色背景 無邊框 可根據(jù)UI需求自己修改） */
checkbox .wx-checkbox-input .wx-checkbox-input-checked {
border: 1rpx solid #ff783b;
background: #ff783b;
}
/* 選中后的 對勾樣式 （白色對勾 可根據(jù)UI需求自己修改） */
checkbox .wx-checkbox-input .wx-checkbox-input-checked ::before {
border-radius: 50%;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
font-size: 30rpx;
color: #fff;
/* 對勾顏色 白色 */
background: transparent;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
復(fù)制代碼
如下所示：
四、 Text 文本內(nèi)顯示空格
先來看下效果：
- Shift + option + B： 選擇全角空格即可
<van-field clearable label="微  信" placeholder="請輸入微信號碼" /> 復(fù)制代碼
五、 點擊左上角返回直接返回首頁
方式一：
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function() {
wx.navigateBack({
delta: 6
})
},
復(fù)制代碼
方式二：
/**
* 返回首頁
*/
goBackHome: function() {
wx.switchTab({
url: '/pages/index/index',
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function() {
wx.switchTab({
url: '/pages/index/index',
})
},
復(fù)制代碼
六、 跳轉(zhuǎn)傳值
傳值的話，一般可概括為如下倆種：
- 下級頁面需要得到上級頁的 ID （傳單值）；
- 下級頁面需要得到上級頁例如訂單信息以便與下級頁填充 （傳對象或者 Array 數(shù)組 等）。
首先來看單值傳值方式：
<navigator url='/pages/order/order?type=4'>
<view>
<image src='../../images/ic_pay_error.png' />
<text>已退款</text>
</view>
</navigator>
復(fù)制代碼
接受值方式如下：
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
console.log("Get Value:" + options.type)
},
復(fù)制代碼
而數(shù)組或者對象傳值類似，區(qū)別在于傳遞對象 or 數(shù)組需要對傳遞的數(shù)據(jù)轉(zhuǎn)換為字符串類型的 Json 串，如下：
wx.navigateTo({
url: '/pages/xx/xx?activeTempList=' + JSON.stringify(this.data.activeTempList),
})
復(fù)制代碼
而取值的地方則是需要將值再次轉(zhuǎn)回去，這里需要注意傳遞值 key 是什么，獲取的時候就 options. 什么：
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
this.setData({
orderInfo: JSON.parse(options.orderInfo),
})
},
復(fù)制代碼
官方地址：developers.weixin.qq.com/miniprogram…
七、 兼容 iPhone X
附上一張未兼容和已兼容的效果圖：
Step 1： App.js 中檢測當(dāng)前設(shè)備是否為 iPhone X
globalData: {
// 是否為 iPhoneX 以上版本
isIphoneX: false
},
/**
* 檢測當(dāng)前設(shè)備是否為 iPhone X 及以上
*/
checkIsiPhoneX: function() {
const self = this
wx.getSystemInfo({
success: function(res) {
// 根據(jù) model 進行判斷
if (res.model.search('iPhone X') != -1) {
self.globalData.isIphoneX = true
}
// 或者根據(jù) screenHeight 進行判斷
// if (res.screenHeight == 812) {
// self.globalData.isIphoneX = true
// }
}
})
},
onLaunch: function() {
// 判斷設(shè)備是否為 iPhone X 及以上
this.checkIsiPhoneX()
}
復(fù)制代碼
Step 2： 設(shè)置兼容以及普通機型下的樣式
/* 提交按鈕 */
.submit_btn {
background: #d04801;
color: #fff;
border-radius: 50rpx;
margin: 30rpx;
font-size: 32rpx;
padding: 15rpx;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
/* 點擊效果 */
.submit_btn:active {
opacity: 0.6;
}
/* 提交按鈕 iPhone X */
.submit_btn_iPhoneX {
margin-bottom: 68rpx;
}
復(fù)制代碼
Step 3： 具體的 Page.js 中匹配
const app = getApp()
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
isIphoneX: app.globalData.isIphoneX,
},
}
復(fù)制代碼
Step 4： 未指定的控件設(shè)置對應(yīng)的樣式兼容
<button class="{{ isIphoneX ? 'submit_btn submit_btn_iPhoneX' :'submit_btn'}}" bindtap="{{phone.length ? 'confirmOrder' : ''}}" open-type="{{phone.length ? '' : 'getPhoneNumber'}}" bindgetphonenumber='bindgetphonenumber'>下一步</button>
復(fù)制代碼
以上內(nèi)容參考自如下鏈接：
- kangzubin.com/wxapp-iphon…
八、來一個彈窗領(lǐng)優(yōu)惠卷效果
先來看一波效果：
分布拆解實現(xiàn)步驟：
- 彈出層，采用 Vant Popup：youzan.github.io/vant-weapp/… ；
- 一張紅包背景圖，扣的累死；
- 一小撮洋碼子。
此處忽略集成 Vant 步驟。 此處忽略集成 Vant 步驟。 此處忽略集成 Vant 步驟。
Step 1： 在所需要的頁面的 json 文件中添加 popup 引用：
"usingComponents": {
"van-popup": "/miniprogram_npm/vant-weapp/popup/index"
}
復(fù)制代碼
Step 2： 拼接紅包效果
首先附上樣式內(nèi)容：
.van-popup {
background: transparent !important;
}
.red_packet_info {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.red_packet_title {
font: 28rpx;
line-height: 72rpx;
color: #999;
margin-top: 16rpx;
}
.red_packet_price {
font-size: 72rpx;
line-height: 56rpx;
color: #666;
font-weight: bold;
}
.give_money_now {
border-radius: 50rpx;
margin: 0 100rpx;
position: relative;
color: rgb(0, 0, 0);
top: -200rpx;
}
復(fù)制代碼
隨后附上實際碼子：
<van-popup show="{{ isShow }}" bind:close="getHaveOffer" close-on-click-overlay="true" custom-class="van-popup">
<div>
<div class="red_packet_info">
<text class='red_packet_title'>優(yōu)惠卷</text>
<text class='red_packet_price'>¥{{ offerPrice }}</text>
</div>
<image src='/images/bg_red_packet.png' style='height:800rpx;'></image>
<button class='give_money_now' bindtap='giveMoneyNow'>立即領(lǐng)取</button>
</div>
</van-popup>
復(fù)制代碼
Step 3： 事件搞起來
data: {
offerPrice: 100, // 優(yōu)惠卷價格，為了演示，后續(xù)直接接口獲取
},
。。。
/**
* 點擊空白消失
*/
getHaveOffer: function() {
console.log("---> getHaveOffer")
this.setData({
isShow: false
})
},
/**
* 點擊獲取優(yōu)惠卷
*/
giveMoneyNow: function() {
console.log("---> giveMoneyNow")
this.setData({
isShow: false
})
},
復(fù)制代碼
就這樣，Bye～
