小程序斷斷續(xù)續(xù)搞了有一段時(shí)間了,發(fā)現(xiàn)在某些情況下,第一次消耗 30 分鐘,而后則幾分鐘即可。
短暫微小積累,做一個(gè)積累,也希望幫助有需要的小伙伴~
話不多說,立刻開搞~
"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ù)制代碼
.price_detail .img_info button::after { border: none; } .price_detail .img_info button { background: none; } 復(fù)制代碼
/* 重寫 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; } /* 選中后的 對(duì)勾樣式 (白色對(duì)勾 可根據(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; /* 對(duì)勾顏色 白色 */ background: transparent; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); } 復(fù)制代碼
如下所示:
先來看下效果:
使用全角空格即可,Mac 上使用方式如下:
<van-field clearable label="微  信" placeholder="請(qǐng)輸入微信號(hào)碼" /> 復(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ù)制代碼
傳值的話,一般可概括為如下倆種:
首先來看單值傳值方式:
<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ù)組或者對(duì)象傳值類似,區(qū)別在于傳遞對(duì)象 or 數(shù)組需要對(duì)傳遞的數(shù)據(jù)轉(zhuǎn)換為字符串類型的 Json 串,如下:
wx.navigateTo({ url: '/pages/xx/xx?activeTempList=' + JSON.stringify(this.data.activeTempList), }) 復(fù)制代碼
而取值的地方則是需要將值再次轉(zhuǎn)回去,這里需要注意傳遞值 key 是什么,獲取的時(shí)候就 options. 什么:
/** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function(options) { this.setData({ orderInfo: JSON.parse(options.orderInfo), }) }, 復(fù)制代碼
官方地址:developers.weixin.qq.com/miniprogram…
附上一張未兼容和已兼容的效果圖:
適配步驟:
Step 1: App.js 中檢測(cè)當(dāng)前設(shè)備是否為 iPhone X
globalData: { // 是否為 iPhoneX 以上版本 isIphoneX: false }, /** * 檢測(cè)當(dāng)前設(shè)備是否為 iPhone X 及以上 */ checkIsiPhoneX: function() { const self = this wx.getSystemInfo({ success: function(res) { // 根據(jù) model 進(jìn)行判斷 if (res.model.search('iPhone X') != -1) { self.globalData.isIphoneX = true } // 或者根據(jù) screenHeight 進(jìn)行判斷 // if (res.screenHeight == 812) { // self.globalData.isIphoneX = true // } } }) }, onLaunch: function() { // 判斷設(shè)備是否為 iPhone X 及以上 this.checkIsiPhoneX() } 復(fù)制代碼
Step 2: 設(shè)置兼容以及普通機(jī)型下的樣式
/* 提交按鈕 */ .submit_btn { background: #d04801; color: #fff; border-radius: 50rpx; margin: 30rpx; font-size: 32rpx; padding: 15rpx; bottom: 0; left: 0; right: 0; position: absolute; } /* 點(diǎn)擊效果 */ .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è)置對(duì)應(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)容參考自如下鏈接:
先來看一波效果:
模擬器有毒,不要在意細(xì)節(jié)啦~
分布拆解實(shí)現(xiàn)步驟:
此處忽略集成 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ù)制代碼
隨后附上實(shí)際碼子:
<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)惠卷價(jià)格,為了演示,后續(xù)直接接口獲取 }, 。。。 /** * 點(diǎn)擊空白消失 */ getHaveOffer: function() { console.log("---> getHaveOffer") this.setData({ isShow: false }) }, /** * 點(diǎn)擊獲取優(yōu)惠卷 */ giveMoneyNow: function() { console.log("---> giveMoneyNow") this.setData({ isShow: false }) }, 復(fù)制代碼
就這樣,Bye~
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)