微信小程式總結篇
阿新 • • 發佈:2018-12-21
1.style繫結
<view style="background: url( {{ good.coverUrl }} ) no-repeat;"></view>
2.class繫結
<view class="{{is_checked === 0 ? 'is_checked' : ''}}"></view>
3.背景音樂
const innerAudioContext = wx.createInnerAudioContext() Page({ toPlayMusic: function (e) { const _this = this //_this指向問題要注意 const data = e.currentTarget.dataset innerAudioContext.src = data.url //音樂外鏈 innerAudioContext.play(function () { //播放音樂 const item = 'goods[' + data.index + '].is_play' _this.setData({ item: 1 //設定引數 }) innerAudioContext.destroy()//播放完結以後,進行銷燬 }) } })
4.ios下拉出現黑條
在page.json新增禁止滾動
{
"navigationBarTitleText":"",
"disableScroll":true
}
5.在自定義導航欄的情況下,適配ios和andriod的標題欄
方法一:
小程式中,Titlebar按鈕在ios中的高度是24pt,在andriod中的高度是30pt(測試的時候,感覺ios有的偏下面點)
index.wxml
<view class="{{ phoneIos ? 'iphone-title' : 'tef-title'}}" bindtap="onBack"> <image src="../../public/img/arrow.png"></image> <text>關卡</text> </view>
index.js
/** * 頁面的初始資料 */ data: { phoneInfo: false }, /** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { wx.getSystemInfo({ success: function (res) { //判斷是否是ios if (res.system.search('iOS') != -1){ _this.setData({ phoneIos: true }); } } }) },
index.wxss
.tef-title{
position: fixed;
top: 30pt;// andriod
height:44rpx;
line-height: 44rpx;
display: flex;
align-items: center;
color: #ffffff;
text-align: center;
font-size: 32rpx;
padding-left: 30rpx;
}
.tef-title image{
width: 26rpx;
height: 44rpx;
margin-right: 20rpx;
}
.iphone-title{
position: fixed;
top: 24pt; // ios
height:44rpx;
line-height: 44rpx;
display: flex;
align-items: center;
color: #ffffff;
text-align: center;
font-size: 32rpx;
padding-left: 30rpx;
}
.iphone-title image{
width: 26rpx;
height: 44rpx;
margin-right: 20rpx;
}
方法二:
先根據微信小程式的api介面wx.getSystemInfoSync()獲取手機狀態列的高度,再來定義我們頭部的高度
index.wxml
<view class="title" style="height:{{bar_Height+46}}px">
<image src="../../public/img/arrow.png"></image>//返回圖示
<text>關卡</text>
</view>
index.js
/**
* 頁面的初始資料
*/
data: {
bar_Height: wx.getSystemInfoSync().statusBarHeight
},
index.wxss
.title{
width: 100%;
overflow: hidden;
position: relative;
top: 0;
left: 0;
z-index: 10;
color: #ffffff;
text-align: center;
font-size: 32rpx;
}
.title image{
width: 26rpx;
height: 44rpx;
position: absolute;
bottom: 0;
left: 0;
padding: 10px 15px;
}
.title text{
width: 100%;
height: 45px;
line-height: 45px;
text-align: left;
font-size:36rpx;
letter-spacing:2px;
position: absolute;
bottom: 0;
left: 65rpx;
z-index: 10;
}
6.適配iphone x
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function () {
//iphonex
if (!app.globalData.phoneInfo) {
let _this = this
wx.getSystemInfo({
success: function (res) {
if (res.model.search('iPhone X') != -1) {
_this.setData({
phoneInfo: true
});
}
}
})
} else {
this.setData({
phoneInfo: app.globalData.phoneInfo
});
}
},