小程序踩坑之路(总结不易，可能很多坑忘记或没有遇到)

一、安卓和ios时间兼容问题

一般后台所用的时间格式为（2020-01-01），但ios只支持2020/01/01 这种日期格式，因此需要将格式统一转换为（2020/01/01）

const format = ordTime.replace(/-/g, '/')

二、安卓和ios中padding和margin

在小程序中，页面最下面的一个元素如果想距离底部一定距离要用padding-bottom，用 margin-bottom IOS无效

三、在手机中页面打开PDF页面

PDF为一个链接，想着把PDF的链接嵌到web-view中，就像一个h5页面一样，实际情况是ios显示正常，安卓打开页面空白

<web-view src="{{link}}"></web-view>

于是就使用了以下方法，安卓和ios都有效 

        wx.downloadFile({
          // 示例 url，并非真实存在
          url: contractUrl,
          success: function(res) {
            const filePath = res.tempFilePath
            wx.openDocument({
              filePath: filePath,
              success: function(res) {
                console.log('打开文档成功')
              }
            })
          }
        })//可参考官方的openDocument方法

四、修改图片调取小程序相机和相册功能

官方提供了wx.chooseImage（从本地相册选择图片或使用相机拍照）

按照官方说的，应该直接能够调起来以下这样的选择入口（可是ios能调起来，安卓手机调不出来这样的选择地方），于是就只能自己写一个这的的popup，去结合调取相册还是相机

        <view class="itemTwoChild rightView" aria-hidden="true" bindtap="showChoosePop">
          修改
        </view>
<!-- 给个触发事件显示下面 -->
<van-action-sheet
  show="{{ show }}"
  actions="{{ actions }}"
  bind:close="onClose"
  bind:select="onSelect"
/>

   
data:{
    show: false,
 actions: [
      {
        name: '拍照',
        // method:this.isPhoto
      },
      {
        name:'从相册选择',
        // method:this.isAlbum

      },
      {
        name: '取消',
        // method:this.onClose

      }
    ],
}
  //选择相片
  showChoosePop() {
    this.setData({
      show: true

    })
  },
  onSelect(event){
    this.setData({ show: true })
    if (event.detail.name == "拍照"){
      this.setData({
        type:'camera'
      })
      this.chooseImage()
    } else if (event.detail.name == "从相册选择"){
      this.setData({
        type: 'album'
      })
      this.chooseImage()
    }else{
      this.setData({
        show: false
      })
    }
  },
  // 修改图片
  chooseImage(e) {
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],  //可选择原图或压缩后的图片
      sourceType: [this.data.type], //可选择性开放访问相册、相机//动态控制选择相册或相机
      success: res => {
        const imagesFile = res.tempFilePaths
        var str = imagesFile.toString()
        var format = str.substr(str.length - 3, 3).toUpperCase()
        // 截取三位，jpeg为peg
        if (format == 'JPG' || format == 'PEG' || format == 'PNG') {
          wx.showLoading({
            title: '上传中...',
            mask: true
          })
          wx.uploadFile({
            url: api.getAddressUrl('/member/upload?memberId=75'),
            filePath: imagesFile[0],
            name: 'file',
            header: { 'content-type': 'multipart/form-data','X-Auth-Token': getApp().globalData.Cookie  },
            success: (resp) => {
              var str = resp.data //返回的结果，可能不同项目结果不一样
              var pic = JSON.parse(str)
              if (pic.code === 200) {
                this.setData({
                  avatarUrl: pic.data.avatarUrl
                })
              }
            },
            fail: (res) => {
            },
            complete: () => {
              wx.hideLoading()
              this.setData({
                show: false

              })
            }
          });
        } else {
          // this.setData({
          //   avatar: url
          // })
          Toast("只能上传JPG/JPEG/PNG格式的图片");
        }
      },
      fail:res =>{
        this.setData({
          show: false

        })
        
      }
    })
  },

五、安卓和ios手机textarea最高级问题

textarea属于原生组件，层级太高且无法改变，导致textarea怎么做都像一直浮在上面一样（安卓机显示这样可能要多，苹果也有部分机型显示）

解决方法目前只查到三种（万事不敢绝对，大厂有解决的我也没看到过代码，狗头）：

1.cover-view

覆盖在原生组件之上的文本视图，层级大于textarea，正所谓一山更比一山高，可以覆盖住textarea

优点：从根本上解决textarea层级过高浮在最上面

缺点：cover-view里面只支持嵌套 cover-view、cover-image，嵌套其他的则无效

用于按钮之类的层级问题再好不过，把view改成cover-view就能解决大部分问题，因为嵌套其他的无效所以用组件则嵌套不进去，如果我想写一个popup层里面包含想三级联动，时间选择器这种复杂的组件拿来用还好，用cover-view写一个原生的想想就好，做起来.....

<cover-view class="btn">提交</cover-view>
<!--//用cover-view替换层级低的view-->

2.隐藏textarea

举个例子：就拿popup层来说，textarea的层级要比popup层高，这时候textarea里面的文字就会浮动在popup层上面，如果当popup层显示的时候，把textarea隐藏掉就好了

优点：单纯的解决bug

缺点：如果在设计上popup出现时textarea本身就看不见了，这个是可以接受，因为当你出现后，textarea就看不见了，用户在视觉上没有发现变化，但是当popup和textarea同时在一个页面存在，设计上可以同时看见他们两，你去隐藏textarea就能看到变化了，视觉上不友好了

3.替换textarea

就是在不同时候，用东西把textarea替换掉

优点：基本能解决textarea层级过高的问题

缺点：替换textarea可能有细微抖动，解决好textare的样式问题，做到一比一精仿textare，让人看不出你替换了textarea

      <view class="desc-box">
        <view class='text desc-text' wx:if="{{show}}" >
         <text>{{duty}}</text>
        </view>
        <textarea wx:else placeholder="描述你在该项目中起到的作用或主要职责" maxlength="1000" class='text' name="textarea" bindinput="dutyInput" value="{{duty}}"  />
      </view>
<!--通过控制show来控制是显示text还是textarea，我这边做的就是展示popup层时用text，关闭popup层时用textarea-->

六、Picker与input在一起使用时，先点击input获取焦点，再点击Picker时input焦点没有消失,键盘覆盖在picker上面

选择器覆盖到键盘下面，同时输入框聚焦可以输入，贴原本代码，使用了vant-weap组件

<!-- van-field为输入框,和input一样 -->
<van-field required  value="{{ name }}" label="姓名" placeholder="输入姓名" border="{{ false }}" class="form-input-item" bind:input="nameInput" />
<!-- 输入框为做工作年限值的点击显示picker层和选择值得显示 -->			
<van-field required  value="{{ workValue  }}" label="工作年限" placeholder="选择工作年限" readonly border="{{ false }}" class="form-input-item" right-icon="arrow" icon="arrow" bindtap="showPopup1"></van-field>
<!-- 把picker放进popup层中使用 -->
<van-popup show="{{show}}" position="bottom">
	<van-picker show-toolbar title="请选择工作年限" columns="{{ columns1 }}" value-key="dictValue" bind:cancel="onCancel" bind:confirm="onConfirm" />
</van-popup>

解决方法：

1.给picker绑定点击事件并且input为readonly(如果还是有问题就加上disabled，把禁用的文字颜色再调回只读颜色)。点击后调用wx.hideKeyboard()隐藏掉键盘。
2.使用view模拟input的placeholder（input组件没有真正的使用到，只有值的显示和点击事件）
3.给input绑定focus变量，点击后设置focus的变量为false