微信小程序原生开发实战技巧总结

本文目录：

• 1.小程序如何动态的改变数组的值
• 2.修改微信小程序原生组件的样式
• 3.自定义navigationBar顶部导航栏
• 4.小程序顶部导航栏全面屏适配问题解决方法

1.小程序如何动态的改变数组的值

argueArray:[{flag:false},{flag:false},{flag:false},{flag:false},{flag:false}]

    checkboxChoosed(e) {
        let ind = e.currentTarget.dataset.ind
        let temp = 'argueArray[' + ind + '].flag' 
        this.setData({
            [temp]: !this.data.argueArray[e.currentTarget.dataset.ind].flag
        });
    },

2.修改微信小程序原生组件的样式

修改微信小程序原生组件的样式，需要直接命中组件里面的class
如：

<checkbox value="{{item.value}}" checked="{{item.checked}}" />

修改代码示例：

checkbox .wx-checkbox-input {
  width: 28rpx;
  height: 28rpx;
  padding: 0;
  border-radius: 50%;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  width: 28rpx;
  height: 28rpx;
  border-radius: 50%;
  border-color: #09bb07;
  background-color: #09bb07;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  color: white;
  font-size: 30rpx;
}

3.自定义navigationBar顶部导航栏

思路

• 隐藏原生样式
• 获取胶囊按钮、状态栏相关数据以供后续计算
• 根据不同机型计算出该机型的导航栏高度，进行适配
• 编写新的导航栏
• 引用到页面

隐藏原生样式

app.json文件中window全局配置里有个参数：navigationStyle（导航栏样式），default=默认样式，custom=自定义样式。

"window": {
    "navigationStyle": "custom"
}

获取相关参数

app.js

App({
  onLaunch: function () {
    // 数据都是根据当前机型进行计算，这样的方式兼容大部分机器
    this.globalData = {
      navBarHeight: 0, // 导航栏高度
      menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
      menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）
      menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
    }
    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
    this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
    this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
    this.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
    this.globalData.menuHeight = menuButtonInfo.height;
  },
})

下面为组件代码： /components/navigation-bar/navigation-bar.wxml

<!-- 自定义顶部栏 -->
<view class="nav-bar" style="height:{{navBarHeight}}px;">
 <input class="search" placeholder="输入关键词！" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{menuHeight}}px; left:{{menuRight}}px; bottom:{{menuBotton}}px;"></input>
</view>
 
<!-- 
 内容区域：
 自定义顶部栏用的fixed定位，会遮盖到下面内容，设置好间距,标签内不要放任何内容
-->
<view class="content" style="margin-top:{{navBarHeight}}px;"></view>

/components/navigation-bar/navigation-bar.json

{
 "component": true
}

/components/navigation-bar/navigation-bar.js

// 获取全局变量
const app = getApp()
Component({
    /*组件的属性列表*/
    properties: {
        // defaultData（父页面传递的数据-就是引用组件的页面）
        defaultData: {
            type: Object,
            value: {
                title: "我是默认标题"
            },
            observer: function (newVal, oldVal) {}
        }
    },
    /*组件的初始数据*/
    data: {
        navBarHeight: app.globalData.navBarHeight,
        menuRight: app.globalData.menuRight,
        menuBotton: app.globalData.menuBotton,
        menuHeight: app.globalData.menuHeight,
    }
})

/components/navigation-bar/navigation-bar.wxss

.nav-bar {
    position: fixed;
    width: 100%;
    top: 0;
    color: #fff;
    background: #fff;
}
.nav-bar .search {
    width: 60%;
    color: #333;
    font-size: 14px;
    background: #fff;
    position: absolute;
    border-radius: 50px;
    background: #ddd;
    padding-left: 14px;
}

以下是调用页面的代码，也就是引用组件的页面： /pages/index/index.wxml

navigation-bar default-data="{{defaultData}}"></navigation-bar>

/pages/index/index.json

{
 "usingComponents": {
  "navigation-bar": "/components/navigation-bar/navigation-bar"
 }
}

/pages/index/index.js

const app = getApp();
Page({
 data: {
  // 组件参数设置，传递到组件
  defaultData: {
   title: "我的主页", // 导航栏标题
  }
 }
})

上面的设置是全局的设置，如果想要单页面自定义导航栏，在单页面的json文件加入"navigationStyle":"default"代码就可以实现。

4.小程序顶部导航栏全面屏适配问题解决方法

在手机web中通常会用一个导航栏固定在页面顶部，比如下面这种结构：

<view class="navigation-bar">
    <view>xxx</view>
    <view>yyy</view>
    <view>zzz</view>
</view>
<view class="main-body"></view>

将navigation-bar添加样式

  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 999;

这种布局在iphonex手机出来之前是没什么问题的，但是在全面屏和刘海屏手机下，会导致main-body的部分内容被navigation-bar遮挡，原因是全面屏和刘海屏顶部的状态栏的高度会导致navigation-bar会顶上去，如图所示的区域：

示意图.png

被覆盖了：

image.png

所以在进入navigation-bar布局的时候，需要加上一个nav-bar-placeholder，同时将导航栏的内容写在navigation-bar-inner中进行fixed，调整后的结构如下：

<view class="navigation-bar">
    <view class="navigation-bar-placeholder"></view>
    <view class="navigation-bar-inner">
        <view>xxx</view>
        <view>yyy</view>
        <view>zzz</view>
    </view>
</view>
<view class="main-body"></view>

同时定义ios和statusBarHeight两个变量，并借助wx.getSystemInfo接口进行赋值，小程序页面右上方的分享和关闭按钮，也可以动态计算出来其宽度，从而方便我们更好的对导航栏进行布局

const isSupport = !!wx.getMenuButtonBoundingClientRect;
const rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null;
wx.getSystemInfo({
  success: res => {
    const ios = !!(res.system.toLowerCase().search('ios') + 1);
    this.setData({
      innerWidth: isSupport ? `width:${rect.left}px` : '',
      ios,
      statusBarHeight: res.statusBarHeight,
      innerPaddingRight: isSupport ? `padding-right:${res.windowWidth - rect.left}px` : ''
    });
  }
});

动态改变元素的样式

<view class="navigation-bar">
    <view class="navigation-bar-placeholder {{ios ? 'ios' : 'android'}}"  style="padding-top: {{statusBarHeight}}px;visibility: hidden;"></view>
    <view class="navigation-bar-inner {{ios ? 'ios' : 'android'}}" style="padding-top: {{statusBarHeight}}px; color: {{color}};background: {{background}};{{innerPaddingRight}};{{innerWidth}};">
        <view>xxx</view>
        <view>yyy</view>
        <view>zzz</view>
    </view>
</view>
<view class="main-body"></view>

注意：navigation-bar-placeholder的高度要设置成和navigation-bar-inner的高度一样