微信小程序总结篇

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添加禁止滚动

{
  \"navigationBar Text\":\"\",
  \"disableScroll\":true
}

5.在自定义导航栏的情况下，适配ios和andriod的标题栏

方法一：

小程序中， bar按钮在ios中的高度是24pt，在andriod中的高度是30pt（测试的时候，感觉ios有的偏下面点）
index.w

 <view class=\"{{ phoneIos ? \'iphone- \' : \'tef- \'}}\" bindtap=\"onBack\">
        <image src=\"../../public/img/arrow.png\"></image>
        <text>关卡</text>
</view>

index.js

/**
     * 页面的初始数据
     */
    data: {
        phoneInfo: false
    },
/**
     * 生命周期函数--监听页面加载
     */
     : function (options) {
            wx.getSystemInfo({
                success: function (res) {
                    //判断是否是ios
                    if (res.system.search(\'iOS\') != -1){
                        _this.setData({
                            phoneIos: true
                        });
                    }
                }
            })
    },

index.wxss

.tef- {
    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-  image{
    width: 26rpx;
    height: 44rpx;
    margin-right: 20rpx;
}

.iphone- {
    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-  image{
    width: 26rpx;
    height: 44rpx;
    margin-right: 20rpx;
}

方法二：

先根据微信小程序的api接口wx.getSystemInfoSync()获取手机状态栏的高度，再来定义我们头部的高度
index.w

<view class=\" \" 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

. {
    width: 100%;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    z-index: 10;
    color: #ffffff;
    text-align: center;
    font-size: 32rpx;
}

.  image{
    width: 26rpx;
    height: 44rpx;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px 15px;
}
.  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

/**
     * 生命周期函数--监听页面加载
     */
     : 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
            });
        }
    },