微信小程序小知识点集合

1. 微信小程序在IOS/真机上出现左右上下滑动页面出现空白解决？

　　在wxss中page标签加入overflow-x:hidden。

2.微信小程序wxss设置background的url后读取不到本地文件？

　　需要用网络地址，不能直接用相对/绝对路径设置图像背景哦。

3.在微信小程序的最后一个父元素中出现图片背景或者图片定位成背景的时候，底部总有一条小白边？

      可以尝试在这张图片的CSS中加入vertical-align:top;  或者在当前页面的page写入{height:100%; overflow:hideen;}

4.微信小程序顶部的标题栏怎么去除？也就是不要它自带的标题栏

　　在不需要标题栏的文件页面json中加入"navigationStyle":"custom"，则会消除掉标题栏，只留下右上角的胶囊按钮。

5.使用微信小程序的组件标签button时，在开发者工具显示正常，在真机上出现压缩或变大的情况。

　　因为小程序button等标签自带了部分CSS属性，所以最好是先覆盖掉原来的，button部分覆盖如下：（特别注意有些button因为不同type会出现下面:not的类）　　

button {
  border: none !important;
  width: 0;
  height: 0;
  background-color: none;
  color: none;
  padding: 0;
}

button:not([size='mini']) {
  min-height: 0;
}

 6.小程序在一些苹果机上底部tabbar被安全区（黑色线）挡住。

　　目前采用wx.getSystemInfo获得机型为iPhoneX系列的，更改底部tabbar的CSS，否则默认做为适配方法。

wx.getSystemInfo({
      success: res=>{
        let modelmes = res.model
        if (modelmes.search('iPhone X') != -1) {
          this.setData({
            isIphoneX: true
          })
        }
      }
})

 7.小程序imgae跟view有一段距离，设置margin为0也不能消除。

　　设置img的display为block，或者设置父元素的font-size为0

 8.怎么更改小程序swiper自带的提示点CSS。

.swiper .wx-swiper-dots.wx-swiper-dots-horizontal{
     margin-bottom: 2rpx;
}
.swiper .wx-swiper-dot{
    width:40rpx;
    display: inline-flex;
    height: 10rpx;
    margin-left: 20rpx;
    justify-content:space-between;
}
.swiper .wx-swiper-dot::before{
    content: '';
    flex-grow: 1; 
    background: rgba(255,255,255,0.8);
    border-radius: 8rpx
}
.swiper .wx-swiper-dot-active::before{
    background:rgba(244,0,0,0.8);   
}

 9. 自定义小程序navigationStyle头部bar怎么适配各种机型。

　　确定json的navigationStyle为true。然后在app.js中加入下列代码即可。（极少部分特殊机型需要上下加一两个像素做容差匹配）

App({
  onLaunch: function (options) {
  const that = this;
    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
    that.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
    that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
    that.globalData.menuHeight = menuButtonInfo.height;
    that.globalData.menuTop = menuButtonInfo.top;
  },
  globalData: {
    navBarHeight: 0, // 导航栏高度
    menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
    menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
    menuTop: 0 // 导航胶囊距上间距
  }
})

　　在对应页面上使用如下代码

const app = getApp()

Page({
  data: {
    navigationHeight: app.globalData.navBarHeight ? app.globalData.navBarHeight : 0, // 自定义导航栏高度
    navigationTop: app.globalData.menuTop, // 导航胶囊距上间距
    navigationRight: app.globalData.menuRight, // 导航胶囊距右间距
     menuHeight: app.globalData.menuHeight // 胶囊高度
  },
})

 10. 小程序https或websocket接口在模拟器上正常，在真机上请求出现Provislonal headers are shown的提示性错误导致获取不到数据或连接超时。

　　可能是SSL证书引起的，检查SSL证书是否无误或有无过期，同时记得在后台request确认协议和域名无误。如果websocket一直不行，建议采用https模式进行请求。网上查过资料也有网友说可以用axios代替request请求就可以。客官不妨试下

11. 使用scroll-view中的scroll-into-view失效，或scroll-into-view只触发了一次。

　　1、scroll-view必须设置上scroll-y或者scroll-x为true

　　2、scroll-view必须设置高度。

　　3、scroll-into-view初始化设置的时候，可能因为页面或者数据未加载不能跳转。需要在js里手动setData一下。

　　4、每次复制给scroll-into-view的值必须不同，因每次赋值相同则不会二次触发跳转。如果是相同值则最好在首次跳转后延时清空对应的变量。

12. 如何转换rpx与px之间的关系，适配各类机型。

　　需要先getSystemInfo获得当前设备的屏幕宽度，用iPhone6的750为基础进行计算。具体如下

onLoad () {
    wx.getSystemInfo({
      success (res) {
        const windowWidth = res.windowWidth // 这里输出的单位是px
        // 假如是平移666rpx，则计算如下，以此类推
        console.log(666 / 750 * windowWidth)
      }
    })
  },

 13. 小程序的textarea标签赋值value后没有显示出value值。

　　注意是否把disabled设置为true了，即禁用了输入框，禁用输入框后是不能显示赋值value的，可以在赋值给到之后再把disabled设置为true。也就是先赋值再禁用。