小程序开发中的那些小坑

最近专门作小程序开发中，跟你们分享下遇到那些不得不处理的小坑，欢迎指正

1.小程序用 WxParse 在手机上不能正确解析 html 代码并显示

解决办法：

这个是 wxparse 代码的一个 bug，在一些特殊的手机里面，在 wxparse/html2json.js 中的第 112 和 119 行，都有一个 console.dir 这个函数的使用，把这个函数注释掉，内容就能够正常显示出来了。

2.小程序textarea组件问题

• 小程序textarea组件字数限制问题

  解决办法：
       <view class="title content">
           <image src="/images/icon/import.png"></image>
           <text>内容：</text>
           <textarea name="content" maxlength='-1'></textarea>
         </view>

• scroll-view 中不能使用 textarea 组件。swiper和swiper-item是继承scroll-view的,因此在他们里面使用textarea的时候会出现很奇怪的现
  象，好比placeholder错位。

  解决方法：用view组件替换swiper组件，用微信小程序的wx.animation()实现点击切换效果
  
   除此以外，  在 scroll-view 中也不能使用 map、canvas、video 组件。不然会出现不少奇怪的现象

3.input组件的问题：

• placeholder 文字与 input 的值重叠 暂无解决方法

• 获取焦点 和 失去焦点 时，光标和文字跳动 暂无解决方法

• 当 input 设置为居中对齐时，光标会出如今奇怪的位置 暂无解决方法

• bindconfirm 事件在失去焦点时也会触发，相似于 blur 暂无解决方法

• 对 input 作动画时，若是是获取焦点状态，会失效 暂无解决方案，由于 input 在获取焦点时是
  native 组件，失去焦点后改回 web 组件

• type 为 idcard, digit 时并非调用数字键盘 暂无解决方案，目前起做用的只有 number

• 在input聚焦期间，不能作css动画，不然input中的placeholder会错位，若是动画和聚焦都想要的话，那么能够在动画完成以后，再设置聚焦

4.new Date跨平台兼容性问题：

在Andriod使用new Date(“2018-05-30 00:00:00”)木有问题，可是在ios下面识别不出来。

由于IOS下面不能识别这种格式，须要用2018/05/30 00:00:00格式。可使用正则表达式对作字符串替换，将短横替换为斜杠。

var iosDate= date.replace(/-/g, '/');

5.wx.getUserInfo()接口更改问题：

微信小程序最近被吐槽最多的一个更改，就是用户使用wx.getUserInfo（开发和体验版）时不会弹出受权，正式版不受影响。如今受权方式是须要引导用户点击一个受权按钮，而后再弹出受权。

• 解法很长，请参考:

  微信小程序不支持wx.getUserInfo受权的解决方法
  连接描述

• 微信小程序不支持wx.getUserInfo受权的解决方法

  getUserInfo兼容解决方案

  *只有在调试模式下，才能发送数据到本身的正式服务器
  其实，只要注意配置合法域名，这个问题就解决了。有的时候，由于一上来就开发，忘记掉去配置域名。后来发现数据无法出去，可能半天没想来忘记配置了！*

  没法获取UnionID的问题

  部分小程序没法获取UnionId缘由
  给产品经理讲技术：微信的openid和unionid

  login获取UID必须知足两个条件：
  
  把小程序和公众号都绑定在开放平台；用户必须已经关注公众号。
  用wx.getUserInfo获取知足一个条件：把小程序和公众号都绑定在开放平台；

6.wx.getSystemInfoSync获取windowHeight不许确：

主要缘由在于获取是时机，wx.getSystemInfoSync是在页面初始化的时候就计算了，基本上能够理解为是屏幕高度。因此，最好的方法是使用异步接口，而且在onReady函数中调用。

onReady() {
  wx.getSystemInfo({
    success({windowHeight}) {
      // todo
    }
  });
}

7.图片本地资源名称，尽可能使用小写命名：

在解决iPhone X适配时，底部多余部分使用图片时

<image src="/imgs/iphoneX.png" mode="aspectFill">
路径是 src='imgs/iphoneX.png'></image>

发如今pc IDE上面能够显示出来，可是真机调试时，图片找不到，

而后将图片名称改成iphonex.png真机调试就能够了

<image src="/imgs/iphonex.png" mode="aspectFill"></image>

8.小程序转发

默认状况下，咱们须要点击小程序右上角的...才能看到转发，这样并不能对用户起到引导做用，一般的作法是使用一个button，而且设置open-type为share，这样就能够经过按钮启动分享。

可是原生按钮很难看，咱们能够设置一个图片，在wxml内的代码通常以下

<button open-type="share"><image src="/images/icon-share.png"></image></button>

固然须要经过wxss将button的样式去掉，背景、边框等等，代码以下

button {
    padding:0;
    margin:0 auto;
    width:70rpx;
    height:70rpx;
    display:block;
    border:0;
    background: transparent;
}
button::after {
    border:0; 
}

注意：尤为是对 button::after 要进行设置，不然按钮的边框是没法去掉的。