小程序踩坑总结

1.长按保存图片，我们遇到过：IOS什么都不用做长按就会弹出保存的弹窗，安卓却不会。在此总结两种方式：

1）监听图片的点击（tap）或长按（longpress）事件，调用小程序预览图片api，再长按就可以保存了，除了保存还能实现识别图中小程序码（不是同个主体的小程序码也能跳转）、发送给朋友等功能。备注：不需要用户授权

scan:function(e){
  　　var current = e.target.dataset.src;
      console.log(current, 'current')
  　　wx.previewImage({
  　　　　current: current,//当前显示图片的http链接，我这边是把图片转成了base64
  　　　　urls: [current] //需要预览的图片http链接列表
  　　})
  },

2）监听图片的点击（tap）或长按（longpress）事件，调用小程序保存到相册api. 备注：此法只有保存功能，必须要用户授权。 

    scan: function() {
      wx.getImageInfo({
        src: '../../pic_home_sao2.png',
        success: function (res) {
          console.log(res);
          var path = res.path;
          wx.saveImageToPhotosAlbum({
            filePath: path,
            success: function (res) {
              console.log('图片已保存');
            },
            fail: function (res) {
              console.log('保存失败');
            }
          })
        }
      });
    },

2.轮播图不显示，可能是没有给外层容器设置高度

swiper {
  width: 100vw;
  height: 254rpx;
  .slide-image {
    width: 100%;
    height: 100%;
  }
}

3.水平滚动没有效果，外层容器需要设置为white-space: nowrap;  子项需要设置display: inline-block;

     <scroll-view
          scroll-x="true"
          class="type"
        >
          <view
            id="type1"
            class="item"
          >xxx</view>
        </scroll-view>


    .type {
      width: xxx;
      white-space: nowrap;
      .item {
        display: inline-block;
        ...
      }
    }

4.小程序rich-text组件解析富文本，安卓上图片无法长按保存到本地 通过使用富文本插件 Parse 来解析富文本可以解决

5.改变小程序右上角自带的“胶囊”颜色 通过设置navigationBarTextStyle属性。

6.wepy2中引入vant组件方式 例： "van-overlay": "module:@vant/weapp/dist/overlay"

7.如何让遮罩全屏（顶部和底部tabBar一起遮住），1.自定义顶部可以让顶部被遮住 2.对于底部有两种方式： 1）不用自带的tabBar，自定义组件模拟其功能 2）折中办法 在遮罩弹起的时候调用wx.hideTabBar隐藏tabBar, 关闭时再调wx.showTabBar显示

8.position:absolute 有时变成了fixed的效果，场景是我相对页面定位，没有给包裹元素设置 position: relative，设置一下就可以解决。

9.textarea placeholder设置样式无效，我的场景是在vant-weapp的popup组件中使用。解决办法：一开使用view标签模拟，点击之后显示textarea。(用的wepy框架所以可以用html标签及类似vue语法)

            <div
              class="textarea placeholder-class"
              v-if="showPlaceholder"
              @tap="onPlaceholderTap"
            >请补充您要说明的原因</div>
            <textarea
              bindinput="onReasonInput"
              placeholder="请补充您要说明的原因"
              placeholder-class="placeholder-class"
              focus="{{focus}}"
              v-else
            />

   onPlaceholderTap() {
      this.showPlaceholder = false;
    }

10. 小程序自定义字体 
1）把自定义字体转为base64  工具
2).wxss自定义字体

@font-face {
  font-family: 'Biko';
  src: url(data:application/octet-stream;base64,T1RUTwALAIAAAwAwQ0ZGIHhTaRQAAG8sAAA6XUdQT1OGj4AfAAArOAAAQ/RPUy8yhgs32AAAASAAAABgY21hcESoJ5AAAAgsAAAFHmhlYWT9k略
}

用到的页面引入使用

@import '../assets/style/biko.wxss';

.english {
    font-family: Biko;
  }

11.小程序接入第三方客服 美恰

按美恰文档配置好后(关于配置有疑问也可以向美恰客服咨询)，小程序用户的客服消息都会转发到美恰。使用很简单，小程序button组件就可以打开客服会话。

<button
   id="contact"
   open-type="contact"
>
</button>

12.小程序隐藏滚动条
很多说法是后3行就可以，但IOS有时候无效，加上display:none 就好了

::-webkit-scrollbar {
  display: none; 
  width: 0;
  height: 0;
  color: transparent;
}