记uni-app开发踩过的坑

 

1.微信小程序在微信开发者工具中，手机预览，页面空白问题

把unpackage / mp-weixin / app.json 这个文件夹最这部分删除掉

"usingComponents": {
  "rwj-tabbar": "/components/rwj-tabbar",
  "hx-navbar": "/components/hx-navbar/hx-navbar"
 }

2.微信小程序pdf预览

ios使用webview,直接预览后下载

安卓不能直接预览，需先下载，后打开实现预览

<template>
    <view class="page">
        <web-view :src="src" v-if="iOS"></web-view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                pdf_url: 'https://xxx.xxx.xxx', //url前缀
                src: '', // PDF地址
                iOS: true,
            }
        },
        onLoad: function (option) {
            console.log('00000', option)
            // 上一个页面传过来的url参数，与前缀拼接
            this.src = this.pdf_url + option.src
            uni.setNavigationBarTitle({
                title: option.title,
            })
        },
        onShow() {
            // 判断操作系统
            let src = this.src;
            uni.showLoading({
                title: '加载中......',
                mask: true
            });
            uni.getSystemInfo({
                success: res => {
                    if (res.system.includes('iOS')) {
                        uni.hideLoading();
                        this.iOS = true
                        // iOS 可直接查看
                    } else {
                        this.iOS = false
                        // Android 需要下载后再打开
                        uni.downloadFile({
                            url: src,
                            success: res => {
                                const path = res.tempFilePath
                                uni.openDocument({
                                    filePath: path,
                                    fileType: 'pdf',
                                    success: res => {
                                        uni.hideLoading();
                                        uni.navigateBack({
                                            delta: 1,
                                        })
                                    },
                                    fail: err => {
                                        uni.hideLoading();
                                        uni.showToast({
                                            title: '打开文件失败:' + JSON.stringify(err),
                                            icon: 'none',
                                            duration: 2000,
                                        })
                                    },
                                })
                            },
                            fail: err => {
                                uni.hideLoading();
                                console.log(JSON.stringify(err))
                                uni.showToast({
                                    title: '下载文件失败:' + JSON.stringify(err),
                                    icon: 'none',
                                    duration: 2000,
                                })
                            },
                        })
                    }
                },
            })
        },
    }
</script>

3.微信小程序域名添加：

登录https://mp.weixin.qq.com/——>开发——>开发管理——>开发设置——>服务器域名