微信小程序开发教程之新手“出坑”系列

这里不讲教程只讲如何避免入那些不必要或者容易出错而文档恰恰又没指明的坑。
一、导航栏
1、小程序在用app.json配置公共导航栏时，利用tabBar这个属性配置，这个对象是一个数组，只需配置即可，不需要添加节点。
注意点：
1.list属性只能配置2~5个，也就是说只支持2~5个导航按钮；
2. list属性值里的pagePath属性里，一定要有一个pages/index/index，不然导航栏出不来。我也不知道为什么。
2、在app.json里面的pages属性里面配置了的，称为应用内的页面；在tabBar的list属性里面配置了的是tabBar页面。
当你使用js绑定点击事件跳转页面时，如果你已经在使用导航时，跳转的那个页面不能够是tabBar页面。
3、小程序CSS里的 :focus 不生效，需要修改placehoder的样式，通过placeholder-class=”class”来定义。

.login .input-group input::-webkit-input-placeholder {
    color: #c0c0c0;
}
.login .input-group input:focus::-webkit-input-placeholder {
    color: transparent; 
}

 type="text"  placeholder="邮箱" placeholder-style="color:#c0c0c0" />
 password type="number" placeholder="密码" placeholder-class="placeholder"  />

4、导入外部文件的几个关键字的区分：
import可以使用导入的目标文件中的template；
but, C import B, Bimport A,在C中可以使用B中的template，在B中可以使用A中的template，但是C中不能使用A中的temlate。作用域不会再次继承。
include可以将目标文件除了<template>的整个代码引入，与import恰恰互补。
5、关于label跟input无法再统一水平线上显示：
代码：

<view class='newVositorInfoItem'>
      <label class='newVisitorLabel'>工作单位：</label>
      <input class='newVisitorInpt'placeholder='输入客人的姓名'></input>
    </view>
    <view class='newVositorInfoItem'>
      <label class='newVisitorLabel'>客人数：</label>
      <input class='newVisitorInpt' 
     maxlength="1" type='number' placeholder='输入客人的姓名'></input>
    </view>
    <view class='newVositorInfoItem'>
      <label class='newVisitorLabel'>来访目的：</label>
      <input class='newVisitorInpt'placeholder='输入客人的姓名'></input>
    </view>
    <view class='newVositorInfoItem'>
      <label class='newVisitorLabel'>来访时间：</label>
      <input class='newVisitorInpt'placeholder='输入客人的姓名'></input>
    </view>

css:

.newVositorInfoItem{
  margin: 3px 0px;
}
.newVisitorLabel{
  display: inline-block;
  text-align: right;
  padding: 0px;
  width: 32%;
  height: 35px;
  line-height: 35px;

  border: 1px solid darkcyan;
}
.newVisitorInpt{
  display: inline-block;
  width: 64%;
  height:35px;
  border: 1px solid seagreen;
}

效果如图：

解决办法：
在css里面加一句代码：

.newVositorInfoItem{
  margin: 3px 0px;
  **display:flex;**
}
.newVisitorLabel{
  display: inline-block;
  text-align: right;
  padding: 0px;
  width: 32%;
  height: 35px;
  line-height: 35px;

  border: 1px solid darkcyan;
}
.newVisitorInpt{
  display: inline-block;
  width: 64%;
  height:35px;
  border: 1px solid seagreen;
}

效果如图：

都是开发过程中遇到的问题，就贴出来了，以后遇到再补。

给大家推荐一篇文章，写的很好。
有关微信小程序，那些官方文档没有告诉你的事情
未完待续…..