关于uni-app的一些坑（日后再做补充）

1，关于标签：input与小程序不同，是闭合
2，一个class 不用{}  遍历需要[index]
3优点 小程序中不允许
this.setdata({
  that.isSelecte[index].selected = !that.isSelecte[index].selected;
})
这种带‘.’操作
但是uni-app就可以了。

4,类名绑定与小程序不同，同样方式小程序生效  但 h5不生效

5，三目运算符绑定类名竟然用的是数组符号[]

6,json文件中 "navigationBarTextStyle": "white", 不允许设置#fff

7,页面间传参方便 类似hash 在地址后面加参数传递，比vue父子组件通信方便很多。

8.文件夹中不要有@

9.在支付宝小程序中，textarea有默认的计数 需要自己配置支付宝终端样式条件编译（可以将自己写的样式：<span class="page-num"><span class="textnum">{{limitNum}}</span>/1000</span>设
置成display：none;但是缺点就是  自带的计数会有“抖动”，就是当打入中文汉字没有键入的时候，就会进行随你打字边计数，然后键入后会重新根据value个数计数，这是不想要的。）
并且，有些样式兼容性问题

 

 

7-26更新一波，在此之前忘记总结了，实属抱歉，把 我最近记得的先记录下来

10.uni 调起打电话功能 兼容app
uni.makePhoneCall({
   phoneNumber: item2 //仅为示例
});    

11.iphoneX 头帘样式兼容
uni.getSystemInfo({
success: function (res) {
    console.log(res.statusBarHeight);
    that.paddingTop = res.statusBarHeight+120;
    }
});

12.返回上一页
uni.navigateBack({
    delta: 1 //1就是上一页 2就是两页
});

 

 

9月3号 更新一波，由于最近做了一个小程序，领导要求转换uni，所以走了一边坑

13.富文本转换：

<rich-text :nodes="item.Detail"></rich-text>

小程序我用的是wxParse，但是uni中是不支持wxParse的。

关于rich-text uni官网就很详尽了：https://uniapp.dcloud.io/component/rich-text?id=rich-text

14.轮播图组件

<swiper class="banner" @animationfinish="changeGoodsSwip" @change="swiperChange" :indicator-dots="indicatorDots"
                 :autoplay="autoplay" :interval="interval" :duration="duration" :vertical="vertical" :circular="circular">
                    <block v-for="(item, index) in imgUrls" :key="index">
                        <swiper-item @tap="goDetail" :data-SourceUrl="item.SourceUrl" :data-summary="item.Summary" :data-titleEN="item.TitleEN">
                            <image :src="item.PreviewImage" class="banner"></image>
                        </swiper-item>
                    </block>
                </swiper>

需要强调的就是 这是 swiper 不是 scroll-view！！！

这也是很好用的，官网也是很详尽：https://uniapp.dcloud.io/component/swiper?id=swiper

15.设置代理

代理是在下图路径

16. 关于video

video中的属性:show-center-play-btn="true"，在安卓中获取总时长有bug，显示为NaN. 目前没找到解决办法，只有样式隐藏了，如果某神有好的解决方案可以贴在评论区，以供大家更好的交流互助学习。

17，@touchmove.stop.prevent="catchTouchMove"

当你用到swiper但是又不想它可以划动，你可以在swiper-item上设置@touchmove.stop.prevent="catchTouchMove"

 catchTouchMove: function (e) {
       
         return false;
        
        
    },