【Uni-App】關於獲取手機系統信息的項目實踐

 

原因是這里APP下載方式的問題

安卓 和 IOS都可以寫A標簽跳轉訪問附件資源

但是甲方對這種下載方式並8滿意【安卓行 蘋果8行， 蘋果行，安卓又8行】

 

通過 uni.getSystemInfo來判斷手機系統，動態提供下載方式

        onLoad(opt) {
            /*
                獲取手機型號
             */
            let _this = this
            uni.getSystemInfo({
                success: function (res) { // console.log(res)
                    console.log(res)
                    _this.phoneSystem = res.system.split(' ')[0] // 獲取系統信息的首個字符串 Android || iOS
                }
            })
            console.log(`phoneSystem => ${_this.phoneSystem}`)
        },

我取這個system還是不太好，要截取第一個字符串

這個系統信息還有platform字段可以獲取，這是更優解（臨時改的BUG，咱也懶）

 

 

這里標簽元素就可以使用這個字符變量來動態渲染了

            <view class="margin-xs">
                <view class="cu-bar bg-white solid-bottom" @tap="toggerOpen8()">
                    <view class="action">
                        <text class="cuIcon-title text-blue"></text>
                        附件：
                    </view>
                    <view class="action"><text :class="[open8 ? 'cuIcon-fold' : 'cuIcon-unfold']"></text></view>
                </view>
                <view class="flex flex-wrap" v-if="open8">
                    
                    <view style="overflow: scroll;" >
                        <table border="1px" v-show="'iOS' == phoneSystem" style="background-color: white; border: 1px solid rgb(238, 238, 238); width: 150%; text-align: center;">
                            <thead>
                                <tr>
                                    <th>序號</th>
                                    <th>操作</th>
                                    <th>附件名稱</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, index) in fileData"> 
                                    <td>{{index + 1}}</td>
                                    <td><button class="cu-btn bg-red shadow cuIcon-delete" @click="deleteFile(item.ATTACHMENT_ID, item.NAME, index)"></button></td>
                                    <td><a :href="genDownloadLink(item.URL,item.NAME)">{{item.NAME}}</a></td>
                                </tr>
                                <tr v-show="attachList.length == 0">
                                    <td colspan="9">無結果</td>
                                </tr>
                            </tbody>
                        </table>
                    </view>
                    
                    <view v-show="'Android' == phoneSystem">
                        <z-table @onClick="fileClick"  class="radius shadow bg-white shadow-lg" :tableData="fileData" :columns="fileColumns" stickSide :showLoading="false"></z-table>
                    </view>
                </view>
            </view>