uni-app(五)小程序的一些注意事项,踩坑
- onPullDownRefresh 下拉刷新,使用时,需要注意,uni-app 官网有这么两段话:
- 需要在
pages.json
里,找到的当前页面的pages节点,并在style
选项中开启enablePullDownRefresh
- 当处理完数据刷新后,
uni.stopPullDownRefresh
可以停止当前页面的下拉刷新
- 需要在
pages.json 页面
"pages": [ { "path": "pages/index/index", "style": { "enablePullDownRefresh": true } }, ... ]
index.vue 页面
// 下拉刷新 onPullDownRefresh() { uni.showLoading({ title: '刷新中...' }) // 这里执行你设定的动作 ... // 定时关闭 setTimeout(function () { uni.hideLoading() uni.stopPullDownRefresh() }, 1000) }
- 段落换行、超过指定行用省略号代替
如果使用了破坏正常文档流的样式属性,比如定位,或者弹性盒 flex 等属性时,可以这样强制换行
word-wrap: break-word; word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; // 行数可以自行定义 -webkit-line-clamp: 2; -webkit-box-orient: vertical;
- 图片、文件上传、下载
使用 uploadFile、downloadFile 方法时,需要在 微信公众平台 里配置域名,否则,会报错
登录授权当前小程序后,开发管理 -> 开发设置 -> 服务器域名
- 隐藏底部 tab
pages.json 文件里配置的 tabBar 为小程序原生tab,有时候我们需要隐藏、显示:
隐藏tab,uni.hideTabBar()
显示tab,uni.showTabBar()
- 图片缩放展示
宽高等比缩放,mode="scaleToFill"
宽度铺满,高度继承原图片高,mode="widthFix"
- 图片间隙
当一组图片横铺、纵铺展开后,图片之间会莫名产生空白间隙,这时给予样式 vertical-align: top;
- 用户授权
首次让用户授权,用户拒绝后,需要再次授权怎么办?授权后,需要把数据本地缓存起来,如果用户清除掉了授权信息,怎么重新授权?
这时,我们不妨将授权封装成一个组件,主动调用
封装 getInfo 组件
<template> <view class="tip" v-show="show"> <view class="text">需要您授权信息才能获取相关服务</view> <view> <view class="tipBtn" @click="submit">确定</view> <button class="tipBtn" type="default" open-type="getUserInfo" @getuserinfo="getuserinfo">授权</button> </view> </view> </template> <script> export default { props: { show: { type: Boolean, default: false } } methods: { // 用户授权 getuserinfo(res) { let info = res.detail.userInfo || res.mp.detail.userInfo // 授权成功,则存储数据 if (info) { uni.setStorageSync('userInfo', info) } this.$emit('changeShow',false) } } } </script> <style lang="scss" scoped> // 此处样式,就不描述了 </style>
组件使用
<template>
<getInfo :show="getInfo @changeShow="changeShow" />
</template>
<script>
import getInfo from '@/components/getInfo/index'
export default {
props: {
show: {
getInfo: false
}
},
created() {
this.getUserInfo()
},
components: {
getInfo
},
methods: {
getuserinfo() {
this.info = uni.getStorageSync('userInfo')
if (this.info) {
// 成功的操作
...
} else {
// 不存在,则展示授权弹框
this.getInfo = true
}
},
changeShow(bool) {
this.getInfo = bool
this.info = uni.getStorageSync('userInfo')
if (this.info) {
// 成功的操作
...
}
}
}
}
</script>