uniapp开发app总结

最近公司需要开发app，作为前端开发，选择了uniapp，因为他结合了vue和小程序，上手难度不大，但因为是第一次开发app，中途也是遇到了很多小问题，在此总结一下。
首先是根据不同登录用户返回不同菜单，这里就不能直接在page.json里写si了，我使用的是动态

<template>
    <view class="uni-tabbar">
        <view class="uni-tabbar__item" v-for="(item, index) in tabbar" :key="index" @tap="changeTab(item)">
            <view class="uni-tabbar__bd">
                <view class="uni-tabbar__icon">
                    <image v-if="item.pagePath == pagePath" class="icon-img" mode="aspectFit" :src="item.selectedIconPath"></image>
                    <image v-else class="icon-img" mode="aspectFit" :src="item.iconPath"></image>
                    <!-- <image class="icon-img" mode="aspectFit" :src="item.selectedIconPath"></image> -->
                </view>
            </view>
            <view class="uni-tabbar__label" :class="{'active': item.pagePath == pagePath}">
                {{item.text}}
            </view>
        </view>
    </view>

</template>
                    
<script>
export default {
    props: {
        pagePath: String
    },
    data() {
        return {
            page: 'contact',
            showPage: false,
            containerHeight: 400,
            tabbar: [
                //动态切换的菜单，先隐藏，动态插入
                {
                    "pagePath": "/pages/mine/index",
                    "iconPath": "/static/mine_notchoose.png",
                    "selectedIconPath": "/static/mine_choose.png",
                    "text": "个人中心"
                }
            ]
        };
    },
    watch: {
        pagePath: {
            handler(val) {
                console.log('pagePath监听===val', val)
            },
            immediate: true
        }
    },
    mounted() {
        // 根据自己的业务需求判断条件为true，替换即可
        if (uni.getStorageSync('userInfo').roles[0] == '超级管理员' || uni.getStorageSync('userInfo').roles[0] == '管理员') {
            this.tabbar.splice(0, 0, {
                "pagePath": "/pages/parkManagement/index",
                "iconPath": "/static/park_notchoose.png",
                "selectedIconPath": "/static/park_choose.png",
                "text": "规划管理"
            }, {
                "pagePath": "/pages/expertManagement/index",
                "iconPath": "/static/expert_notchoose.png",
                "selectedIconPath": "/static/expert_choose.png",
                "text": "专家管理"
            }, {
                "pagePath": "/pages/examineManagement/index",
                "iconPath": "/static/examine_notchoose.png",
                "selectedIconPath": "/static/examine_choose.png",
                "text": "复核管理"
            })
        } else {
            this.tabbar.splice(0, 0, {
                "pagePath": "/pages/examine/index",
                "iconPath": "/static/exam_notchoose.png",
                "selectedIconPath": "/static/exam_choose.png",
                "text": "小组复核"
            }, {
                "pagePath": "/pages/examined/index",
                "iconPath": "/static/examd_notchoose.png",
                "selectedIconPath": "/static/examd_choose.png",
                "text": "团队复核"
            })
        }
    },
    methods: {
        changeTab(item) {
            console.log(item.pagePath)
            this.page = item.pagePath;
            // 使用reLaunch关闭所有的页面，打开新的栏目页面
            uni.reLaunch({
                url: this.page
            });
        },
    }
}
</script>

<style lang="scss" scoped>
    .uni-tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        display: flex;
        justify-content: space-around;
        height: 98upx;
        padding: 16upx 0;
        box-sizing: border-box;
        border-top: solid 1upx #ccc;
        background-color: #fff;
        box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32);

        .uni-tabbar__item {
            display: block;
            line-height: 24upx;
            font-size: 20upx;
            text-align: center;
            width: 25%;
        }

        .uni-tabbar__icon {
            height: 24px;
            line-height: 24px;
            text-align: center;
        }

        .icon {
            display: inline-block;
        }

        .uni-tabbar__label {
            line-height: 24upx;
            font-size: 24upx;
            color: #999;

            &.active {
                color: #1ca6ec;
            }
        }

        .icon-img {
            height: 24px;
            width: 24px;
        }
    }
</style>

其次是打包问题，新手打包我建议使用云打包，只需生成证书傻瓜式下一步就可以，如果需要打本地包，就需要jdk配置环境变量，下载andriod studio，还要更改许多配置，相对比较麻烦
最后就是打包成apk不能使用代理，样式会丢失，所以建议开发的时候真机调试，没问题后再打包
ok！！！今天先写到这里