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>