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>