uniapp踩坑

写在前面: 这是我使用uniapp框架进行多端开发时碰上的一些坑或者个人觉得出错率比较高的一些地方,所以记录下来以免再次碰到浪费时间.

引入iconfont，css文件是从main.js引入，但是自定义的global.css是在app.vue引入。
创建组件有时会被注册在packge.json文件里面，然后修改组件位置会报错，需要删掉配置信息。
swiper在使用的时候需要给swiper-item设置高度,也可以不设告诉让图片高度撑开.设置圆角只生效一半是因为图片的长度不够。
swiper禁止用户滑动切换，需要注册自定义事件并且return false。
icon设置背景图之后要设置background-size：cover，避免因为图片没居中导致的不显示。
uniapp有些伪类写法在小程序中会不生效，但是h5可以生效，如后代选择器。
小程序授权登录需清除缓存才会弹窗。
路径路由跳转路径前面加 / ：“/pages/index/index”
picker组件。全国地区调用：

<view class="address d-flex">
    <label>所属区域</label> 
    <view class="uni-list">
        <view class="uni-list-cell">
            <view class="uni-list-cell-db">
    			<picker @change="bindMultiPickerColumnChange" :value="aindex" mode = region>
    				<view class="uni-input"> {{aindex[0]}},{{aindex[1]}},{{aindex[2]}}</view>
    			</picker>
            </view>
        </view>
    </view>
</view>

// aindex的值为下标数组:  [0,0,0];
bindMultiPickerColumnChange: function(e) {
		console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
  this.multiIndex[e.detail.column] = e.detail.value
}

uniapp小程序下拉刷新:onPullDownRefresh()方法里面只放调用函数,不能在回调里面调用请求代码.
Parser富文本请求内容用 :html="article"
小程序未上线时web_view打不开,跳转外部链接可以通过跳转新页面,传入url地址进行跳转.
小程序打开pdf文件,通过downloadFile方法再openDocument方法传递filepath.
小程序分享和转发需要携带form_code,方便做邀请分享功能.
缩略图记得处理,横图设置长度拉满,竖图设置高度拉满.轮播图不能设置固定告诉,否则会出现显示不全的情况
微信拉取相册选择图片
uniapp小程序v-show不生效,用动态类或者v-if解决.
路由跳转传值:url="'/pages/admin/business?id=' + item.id",
全局引入scss,在最外层的uni.scss里面用import引入
可以在函数里面传入onclick($event,index)既能获取自带的数据,也能嵌入下标.
本地图片没有src值的时候用v-if控制渲染,否则报错;
number-box,在改变数值的时候会变成字符串导致计算价格错误.
购物车加购时,在传递商品规格的时候,select_info存在深拷贝问题.
主页分享朋友圈需要加一个朋友圈配置代码
动态类,可以传入一个数组,分别给每个值判断.
页面编译就需要使用的vuex的值,创建计算属性获取,然后watch监听,在onshow中判断如果成立才请求.
请求都要控制节流,特别是支付,提交表单.
分享主页,分享朋友圈,用户id需要读取缓存,不能通过this获取.
函数控制页面高度,可能会触发下拉刷新组件,同时发送两次请求以至于数据重复.
uni.setNavigationBarTitle({ title: '新的标题' });改变页面标题, pages.json:"navigationStyle": "custom",设置清除样式.
uni.getSystemInfoSync().platform可以获取设备系统,安卓或者苹果;
倒计时:进入页面循环器获取当前时间戳,用计算属性传参商品结束时间,计算时间差,毫秒到时分秒进制转换.
背景图:小于40k可以直接用,大于40k需要require引入.
函数类需要加一个" [] ";

<view :class="[status_color(item.status)]">{{ item.status | status_text }}</view>

事关uniapp多端开发的一些事

uniapp踩坑

End