小程序开发遇坑tips

1. 关于遮罩层滚动穿透问题

   <!--wxml-->
   <view class="mask" wx:if="{{hasMask}}">
       我是遮罩层
   </view>
   <view class="content" style="{{hasMask?'height:100%;overflow:hidden':''}}">
       我是页面内容
   </view>
   <!-- js -->
   Page{
       ...
       showMask(e){
           //显示遮罩
           this.setData({
               hasMask:true
           })
       },
       hideMask(e){
       //隐藏遮罩
           this.setData({
               hasMask:false
           })
       },
   }

   也可以参考下面链接：点击打开链接
2. 小程序background-image 只能用网络url或者base64 . 本地图片要用image标签才行。也可以使用将文字定位在image标签上方的方法。
   可参考下面链接：点击打开链接
3. 开发过程中遇到一个问题，怎么实现通知动画的循环效果，目前只是做到了一个初步效果，但是不能达到满意效果

   <view animation="{{animationOut}}">
       <image src="背景图片地址"></image>
       <text>文字</text>
   </view>
   
   async onShow() 
         // animation效果
         let that = this
         let allLen = that.announceList.length
         let num = 0
         that.interval = setInterval(() => {
           this.animationInterval(allLen, num)
           num++
           if (num === allLen) {
             clearInterval(that.interval)
           }
         }, 6000)
         that.$apply()
       }
   
       async animationInterval(allLen, num) {
         let animationOut = wepy.createAnimation({duration: 3000})
         this.animationOut = animationOut
         animationOut.opacity(0.99).step()
         animationOut.opacity(0).step({delay: 1500})
         this.name = this.announceList[num].name
         this.amount = this.announceList[num].amount
         this.animationOut = animationOut.export()
         this.animationOut.t = num
         this.$apply()
       }

    

4. web-view标签使用时要单独新建页面newPage，在通过navigaTo标签的url带参数传输时，如遇到传输链接使用encodeURLComponent(url)对链接进行加密，在newPage页面要使用decodeURLComponent(url)进行解密

5. 倒计时问题：每次在onLoad()或者onShow()函数中调用倒计时函数时，会导致倒计时出现混乱，乱跳的问题
   解决思路：只在初次进入页面时调用倒计时函数，之后不再调用该函数
   解决方法：在page外定义i=0，在page内i++，if(i == 1){调用倒计时函数}

6. 在ios使用position：absolute在父元素上必须用position：relative

7. 将图片信息转换为base64：查看链接

8. 小程序引入iconfont字体需要先将css文件下载到本地，然后在使用的页面@import，切记，是在.wpy页面，在.css和.less等页面引入有时会出现无法使用的问题