微信小程序总结篇

1.style绑定

 <view style="background: url( {
  { good.coverUrl }} ) no-repeat;"></view>

2.class绑定

 <view class="{
  {is_checked === 0 ? 'is_checked' : ''}}"></view>

3.点击事件传值

例如： data-index="{ {index}}" data-id="{ {id}}"

<view class="good-main" wx:for="{
  {goods}}" data-index="{
  {index}}" wx:for-item="good" wx:key="good.ids" bindtap="toPlayMusic">
    <view class="good-main__list" style="background:url('../../public/image/music.jpeg') no-repeat">
    </view>
</view>

解决方案：data-index="{ {index}}"

4.背景音乐

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()//播放完结以后，进行销毁
        })
    }
})

5.ios下拉出现黑条

在page.json添加禁止滚动

{
  "navigationBarTitleText":"",
  "disableScroll":true
}

6.在自定义导航栏的情况下，适配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;
}

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

8.获取定位

效果展示： # xx市xx县xx镇xx村xx号
第一步：


第二步：引入腾讯位置服务的JDK https://lbs.qq.com/qqmap_wx_jssdk/index.html

const app = getApp()
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk;
Page({
   
  /**
   * 页面的初始数据
   */
  data: {