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
            });
        }
    },