小程序踩坑指南

首先，遇到问题不要慌，大部分问题可以通过重启解决

flex布局失效：

display：flex在中失效
解决：在下再加一个容器

<scroll-view class="">
  <view class="scrOut1">
    <view class="scrbox">111view>
    <view class="scrbox">222view>
    <view class="scrbox">333view>
    <view class="scrbox">444view>
    <view class="scrbox">555view>
  view>
scroll-view>

样式：

.scrOut1{
  border: 1px solid #666;
  background: #999;
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
}
.scrbox{
  width: 90px;
  height: 90px;
  background: greenyellow;
  margin-right: 2px;
  flex: 1 0 100px;
}

使用Vant 组件 [“usingcomponents“][“van-button“]: “@vant/weapp/button/index“ 未找到：

和安装vant时输入的命令格式有关，
第一种情况：
输入：npm i vant-weapp -S --production 安装，并且完成了构建npm步骤（这时会自动生成一个miniprogram-npm文件夹）
使用官网的路径会报错，正确的命令形式是所用的组件在miniprogram_npm下的相对路径，比如：
“usingComponents”: {
“van-button”: “…/…/miniprogram_npm/vant-weapp/button/index”
}
或是使用绝对路径，开头的 “/” 表示跳到小程序最外层文件夹（小程序根目录）
“usingComponents”: {
“van-button”: “/…/miniprogram_npm/vant-weapp/button/index”
},
第二种情况：
输入：npm i @vant/weapp安装的时候，在app.json或index.json中引入组件，需要使用这样的路径：
“usingComponents”: {
“van-button”: “@vant/weapp/button/index”
}

如果使用Vant组件时没有报错，但组件样式没有生效，尝试重新打开小程序

小程序文件最大2M，意味着图片最好不要放到小程序的文件夹里，否则很有可能因为文件过大导致打包失败，建议上传到服务器或者云存储，或者用其他方法上传到云端，以链接的形式调用

 <image class="bg_img" 
  mode="widthFix"
  src="https://636c-cloud1-3g316xi3828dcd53-1309941655.tcb.qcloud.la/bg.png?sign=60b28c1f830145593cdf51cdae3f55a4&t=1650373427">
  image>

一些组件的值为boolean类型的属性，设置为false是不起效的（依然是true的效果）

例如view的hover-stop-propagation属性（阻止事件冒泡）

错误的写法：
正确的写法是直接把这个属性删除：
同理，如果要把boolean类型的属性设置为true，只需要写上属性名即可：

<swiper class="banner" 	indicator-dots="true"	
    indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" 
    autoplay	interval="2000" circular  previous-margin="20" 	next-margin="20">

autoplay、circular，都是boolean类型的属性，不用写全circular=“true”，只要写circular，是一样的效果

自定义组件的样式失效

1. 可能原因一：
   需要在自定义组件的js文件的Component中加入以下代码：

  options: {
    styleIsolation: 'shared',
  },

2. 可能原因2：
   把全局配置文件 app.json中的这一句删掉
   

数据渲染失败：先检查数据是数组还是对象

这是一个数组

错误的写法：

改正：

或者循环遍历：

拿不到云开发数据库里的数据

检查一下数据读写权限，默认是仅创建者可读写，改为所有用户可读

调用storage数据的函数定义为局部变量，定义为全局变量可能会失效

const openID=wx.getStorageSync(“openId”);
将这个变量定义为全局变量时，电脑端调试没有问题，但真机调试无法获取数据，原因不明

直接对swiper设置高度不生效

在swiper外面套一个view盒子

wxml：

  <view class="picBox">
    <swiper indicator-dots autoplay indicator-color="rgba(0, 0, 0, .6)"  indicator-active-color="#999" circular>
      <swiper-item wx:for="{{bookInfo.picurl2}}" wx:key="index">
        <image src="{{item}}" class="swiperImg" mode="aspectFit">image>
      swiper-item>
    swiper>
  view>

wxss：

.picBox{
  margin: 16rpx 30rpx;
  height: 700rpx;
}
.picBox swiper{
  width: 100%;
  height: 100%;
}
.picBox .swiperImg{
  height: 100%;
  width: 100%;
}