百度小程序踩坑日志汇总

百度小程序存在默认button边框

去掉button按钮默认的边框：

button::after{
	border:none;
}

在给元素设置点击事件的时候，事件函数名字最好不要使用 getData,全局的变量，也最好不要使用data字样。会发生不可预知的错误。还有css样式，最好不要设置相似的字眼

百度小程序开发者工具的f12可以看到，750rpx相当于100vm

注意：在自己写样式的时候，最好不要直接写 vm 或者 vh （未知错误）用 rpx 代替

小程序使用selectComponent获取自定义组件时，返回null（分析和解决方法）

一、原因：
组件所在的布局层级不同，该组件被创建的时间会有所不同，意味着ready（组件生命周期函数，组件布局完成后执行）被调用的时间有所不同。由于组件创建完成的时间晚于页面创建完成，即组件生命周期函数的ready被执行的时间晚于页面生命周期函数的onReady，无论在页面生命周期的onLoad函数还是onReady函数中，组件还没有创建完成就使用selectComponent去获取，自然获取结果为null。
二、分析：
首先，看一下页面生命周期函数onReady，官方解释是“页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。”。这里我有点困惑，“初次渲染完成”是不是指页面首次将所有组件渲染完成？从第二句话中“页面已经准备妥当，可以和视图层进行交互。”也应该是说明了这点，但实际在使用自定义组件时，只有组件位于第一层级才会先于页面的onReady函数调用组件的ready函数，否则，组件所在的层级深度将直接影响到组件创建完成的时间，通常会晚于页面的onReady函数，当然，有时也会早于。这就是为什么有些人说获取组件实例不稳定，在有些页面可以获取，有些页面就可以，偶尔可以，偶尔又不行，在不同页面可能该组件的布局层级不同，且运行环境性能不稳定，导致组件实际布局完成时间有所延迟。
三、解决方法：
在使用selectComponent函数获取组件实例时，应使用setTimeout函数适当延时，或者在页面交互事件中获取。保守点可以采用递归的方法去获取该组件实例，获取后判断是否已经取到，没有重试。点击按钮触发事件的时候 去获取事件实例，就可以获取到了。这个是因为百度小程序中不同页面可能该组件的布局层级不同，且运行环境性能不稳定，导致组件实际布局完成时间有所延迟。 亲测好用

//   点击 免费申办 按钮，弹出框
    tanHandle() {
        tanObj = that.selectComponent('#tan')
        console.log(tanObj)
        tanObj.show()
        this.setData({
            isAni: true,
            isS1: false
        })

    },

自定义组件中，点击图片（或按钮先获取到自定义组件的实例），然后如果自定义组件中有属性，在点击关闭按钮的时候，需要改变自定义组件中的属性值，注意是必须使用 自定义组件的实例. 属性名 ，才可以修改成功。（通过在父组件中向自定义组件传递函数）之前的版本是 在页面加载完成的时候，onLoad执行完毕之后，自定义的组件还没有显示出来，自定义组件是在页面的onLoad之后。但是2019.9月官方新版本更新之后，是先显示自定义组件然后 再onLoad页面。变成了和微信一样。这个bug 就不存在了

百度小程序中 自定义组件的名字 最好不要使用 下划线 _ 要使用短横线的方式来定义组件的名字，使用- 代替

input必须是单标签，并且必须最后有闭合 <input /> 不能使用<input> </input>

百度小程序中使用自定义组件的时候，除了有一个自定义的标签之外 默认还带一个 类名是middle__container ，隐藏的view 标签。但是微信小程序中是没有的

百度小程序中 radio默认的层级比较高

解决办法：

radio{
	z-index: 0;
}

页面已经设置了宽度和高度百分之一百，还是会出现溢出，能左右滑动bug

解决：

position: fixed; 

循环数组中的很多个对象 使用 for ( let item of orderList)

自定义动画bug

一定要先调用自定义的 显示 或者 隐藏 动画，然后再加定时器（延时）显示弹框。否则如果 在定时器中延时 调用动画，再 隐藏或者现实 弹框 就会出现问题：弹框的显示的时候会卡顿，因为弹框是闲显示，然后再延时器 做动画，会给人的感觉像是重叠了2个动画，一个覆盖了一个 弹框

解决方案：正确的步骤是：先调用动画 再显示弹框（如果想要弹框出来的更顺滑，可以把延时器去掉）

that.fadeIn();  // 调用显示动画 
setTimeout(function () {
      that.setData({
            mask1: false,
            isShowTop: false
      })  //200毫秒之后调用显示动画 
}, 200)

这里的动画就是：调用了这个动画，这个动画会显示到后面的操作上去。也就是说后面的操作会出现动画

收获地址 填写手机号码 拉取 字符键盘和关闭文字大小有变化。由于系统使用的字体不一致，难免会有不同的情况（目前官方还没有解决）

收获地址 小三角 css手写一个小三角

.rightSelect{
    position: absolute;
    top: 50%;
    right: 50rpx;
    width: 15rpx;
    height: 15rpx;
    border-top: 2rpx solid #ccc;
    border-right: 2rpx solid #ccc;
    transform: rotate(45deg);
}

百度小程序真机测试！！！安卓手机ADB模式

真机调试只可以安卓设备，首先需要有开发权限，打开手机上的开发者选项（点5下手机上的设置里面的手机版本按钮，就自动打开开发者选项，然后选择，使用usb调试！）ADB模式

• 电脑上下载 pp手机助手
• 第一步插数据线，手机会弹出一个类似授权框，点击同意
• 第二步点击预览生成二维码手机扫码进入小程序（点击真机调试按钮，扫描二维码）
• 第三部 启动真机调试会自动打开浏览器

如果第一步没有弹框就在手机的开发者选项里面打开usb调试

如果电脑是window本的话可能需要配合pp手机助手来进行连接

远程调试

必须工具的登陆账号和手机百度的账号保持一致，并且拥有开发权限，在同一网段内（部分公司可能局域网会有多个网段）才可以正常调试。

添加页面信息（利于搜索引擎，在网页中搜索到小程序）

    onShow() {
        // 添加页面的描述信息
        swan.setPageInfo({
            title: 'ETC办理',
            keywords: '全国ETC办理,etc,ETC,ETC办理中心,高速ETC办理',
            description: '高速ETC办理',
            image: [
                'https://etc-app.oss-cn-beijing.aliyuncs.com/_system/banner/alipay/0808_04.png',
            ]
        })
    },

tab栏切换

<!-- 滑动开始 bindchange:current 改变时会触发 change 事件   current:当前所在页面的 index-->
			<swiper bindchange="getCurrent" current="{{id}}">
				<swiper-item>
					<view class="rule">
						<view class="row">
							1.活动期间，受邀人通过邀请人的专属邀请码，在“高速ETC办理-跨度”小程序首次申办（7天内）和成功激活ETC，邀请人可获得红包奖励；
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="myExtend">
						<view class="noExtend" s-if="{{recordList.length == 0}}">
							<image mode="widthFix" src="../../assets/images/noExtend.png" />
							<view>暂时没有成功邀请喔</view>
						</view>
						<view class="extend" s-if="{{recordList.length >0}}">
							<block s-for="{{recordList}}">
								<view class="one flexR">
									<view class="left">
										<view>{{item.content}}</view>
										<view>{{item.time}}</view>
									</view>
									<view class="right">{{item.orderStatus}}</view>
								</view>
							</block>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 滑动结束 -->

tips: data-id=“0” 向js逻辑层传递当前id号，js逻辑拿到当前的id号，就可以进行判断 当前用户点击的是哪一个按钮，从而id号控制 swiper-item 是序号id为0的显示还是 序号 id为1 的显示。从而实现了swiper的切换

基础库与百度APP之间的关系

• 小程序的能力需要微信客户端来支撑，每一个基础库都只能在对应的客户端版本上运行，高版本的基础库无法兼容低版本的微信客户端

• 很多刚开始开发小程序的开发者经常会遇到在开发者工具的模拟器里面可以正常使用小程序的某个API，但是在预览（真机测试）时打开调试发现使用的API报错，但是开发工具里面的基础库是支持这个API的问题。

  这个问题产生的原因是开发者没有区分清楚基础库版本。在开发者工具里面选择的基础库版本（假如是1.1.0），如果你的手机微信基础库版本是1.1.0或者以上，那么这款小程序就可以在微信上完美运行，但是如果你的手机微信的基础库版本是1.1.0以下的，那么很有可能你的手机在运行这款小程序时会出现各种问题，因为你的手机微信基础库版本低，不支持某些新的API，如果小程序里面使用了，在手机微信上是无法使用的。
  原文链接：https://blog.csdn.net/u012477877/article/details/87968311