Uni-App方向：路由跳转-view组件 平台代码编译

在uni的页面中，设置一个按钮，给按钮添加跳转方法的路由导航即可跳转页面

        <view class="content">
            <button type="primary" @click="goPage()">跳转至我的页面</button>
        </view>

        methods: {
            goPage() {
                uni.navigateTo({
                    url:'../mine/mine'
                })
            }
        }

然后新建的路由页面去page.json文件中去配置一下，其中需要说明的一点是navigationBarBackgroundColor该属性只能配置十六进制的颜色值，否则不会生效。

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页"
            }
        },
        {
            "path": "pages/mine/mine",
            "style": {
                "navigationBarTitleText": "我的",
                "navigationBarBackgroundColor":"#F55C23", //记住该处的样式只能配置十六进制的
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}

uni中也可以使用动态绑定的style样式

<template>
    <view class="list">
        <view v-for="(item,index) in list" :style="[{backgroundColor: colorType[colorType.length - 1 - index]}]" :key="item.id">
            {{item.title}}
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                colorType: ['#f76260', '#09bb07', '#007aff'],
                list: [{
                        id: 1,
                        title: '两名裁判串谋作弊被篮协严厉处罚',
                        author: '佚名'
                    },
                    {
                        id: 2,
                        title: '杨元庆首次回应终止科创板IPO：联想远超上市标准',
                        author: '佚名'
                    },
                    {
                        id: 3,
                        title: 'A股反弹，深成指涨1.3%！但需警惕行情持续反复',
                        author: '佚名'
                    }
                ]
            }
        },
        methods: {

        }
    }
</script>

<style class="scss">
.list {
    border: 1rpx solid #E5E5E5;
}
</style>

如果某部分内容只希望在某个指定的平台显示，比如：微信小程序端，那么可以使用条件编译去控制

        <view>
            <!-- #ifdef MP-WEIXIN -->
                <image src="../../static/logo.png" mode=""></image>
            <!-- #endif -->
            
            <!-- #ifdef APP-PLUS -->
                <text>如果是app端就显示这行文字</text>
            <!-- #endif -->
            
            <!-- #ifdef H5 -->
                <text>如果是H5端就显示这行文字</text>
            <!-- #endif -->
        </view>