uni-app 官网：uni-app 官网

微信小程序开发文档：微信开放文档

官方介绍 uni-app:

uni-app  是一个使用  Vue.js  开发所有前端应用的框架，开发者编写一套代码，可编译到 iOS、Android、H5、以及各种小程序等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。

个人感受（功能很丰富，bug 也很丰富）*

接下来我会将在项目中用到的一些我感觉还不错的东西记录一下，以供分享以及自己的积累=。=如有不足，请大佬们指教！！

1.环境介绍

编译器就用官方的 HBuilderX 编译器, 然后好像没了，创建一个 uni-app 项目就可以开始撸了。

2.首先要先去除小程序自带的头部导航，在 page.json 文件里的对应的页面的 style 配置项里加上：

"style":{
    "navigationStyle":"custom"
}

就可以开始自定义导航了。

3.为了适配不同型号手机的头部高度，所以要通过（异步）uni.getSystemInfo()或者（同步）uni.getSystemInfoSync()获取顶部状态栏的高度

得到的状态栏高度可以存 vuex 里。

（增加，获取头部高度，定义在全局）

/*main.js*/
import Vue from 'vue'
import App from './App'
import store from './store'
 
Vue.prototype.$store = store
Vue.config.productionTip = false
 
 
Vue.prototype.isBarHeight999 = function() {
    return new Promise((resolve, reject) => {
        var that = this
        var isTemp = {}
        uni.getSystemInfo({
            success(res) {
                let totalTopHeight = 68
                if (res.model.indexOf('iPhone X') !== -1) {
                    totalTopHeight = 88
                } else if (res.model.indexOf('iPhone') !== -1) {
                    totalTopHeight = 64
                }
                isTemp['statusBarHeight'] = res.statusBarHeight
                isTemp['titleBarHeight'] = totalTopHeight - res.statusBarHeight
                isTemp['allHeight'] = totalTopHeight
                resolve(isTemp)
            },
            fail(e) {
                reject(e)
            }
        })
    })
}
 
App.mpType = 'app'
 
const app = new Vue({
    store,
    ...App
})
app.$mount()

4.在 components 文件里创建头部导航组件，名字自己起，我这边是 navTop.vue，直接上代码：
/*navTop.vue*/

<template>
    <view>
        <view class="nav_top" :style="{height:barHeight.allHeight+'px','background-color':hasBgc}">
            <view class="status-bar" :style="{height:barHeight.statusBarHeight+'px'}"></view>
            <view class="topContent">
                <view v-if="isBack" class="goBack" @click="goBack(backUrl)" hover-class="bgBlack999">
                    <image :src="'../static/icon_back_'+backColor+'.png'" mode=""></image>
                </view>
                <view class="title" :style="{color:color}">{{title}}</view>
            </view>
        </view>
        <view v-if="isHeight" class="marginBox" :style="{height:barHeight.allHeight+'px'}"></view>
    </view>
</template>
 
<script>
    import {mapState} from 'vuex'
    
    export default {
        props:{
            title:{
                type:String,
                default:'XXX'
            },
            hasBgc:{   //背景色
                type:String,
                default:'#5FCBAD'
            },
            color:{ //字体颜色
                type:String,
                default:'#fff;'
            },
            isBack:{   //是否有返回箭头
                type: Boolean,
                default:false
            },
            backColor:{ //回退箭头颜色
                type:String,
                default:'white'
            },
            isHeight:{   //头部撑开高度
                type:Boolean,
                default:true
            },
            isNavBack:{   //固定返回前面的页面
                type:Boolean,
                default:true
            },
            backUrl:{    //返回到那个页面
                type:String,
                default:'index'
            },
            backNum:{   //返回几个页面
                type:Number,
                default:1
            }
        },
        computed:{
            ...mapState(['barHeight'])
        },
        data() {
            return {
            };
        },
        methods:{
            goBack(url){
                if(this.isNavBack){
                    const that = this
                    uni.navigateBack({
                        delta:that.backNum
                    })
                }else{
                    var isUrl = `/pages/${url}/${url}`
                    console.log(isUrl)
                    uni.switchTab({
                        url: isUrl
                    })
                }
            }
        },
        created() {
            if(!this.barHeight.allHeight||!this.barHeight.statusBarHeight){
                this.isBarHeight999().then((isTemp)=>{
                    this.$store.state.barHeight = isTemp
                })
            }
        }
    }
</script>
 
<style lang="scss">
.nav_top{
        width: 100vw;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 900;
        display: flex;
        flex-direction: column;
        background-color: transparent;
        &.bgColor{
            background-color: #5FCBAD;
        }
        .topContent{
            width: 100vw;
            height: 100upx;
            position: relative;
            .goBack{
                position: absolute;
                top: 0;
                left: 0;
                width: 10vw;
                height: 100upx;
                display: flex;
                align-items: center;
                padding-left: 20upx;
                box-sizing: border-box;
                image{
                    width: 40upx;
                    height: 42upx;
                }
            }
            .title{
                text-align: center;
                width: 100%;
                height: 100%;
                line-height: 100upx;
                font-size: 40upx;
                font-family:'自定义字体';
            }
        }
    }
</style>

使用：

/*test.vue*/

<template>
    <view>
        <navTop :title="navtop.title" :isHeight="false" hasBgc="red" :color="navtop.color" :isBack="true"></navTop>
    </view>
</template>
 
<script>
    import navTop from '../../components/navTop.vue'
    
    export default {
        components: {
            navTop
        },
        data() {
            return {
                navtop: {
                    title: 'XXX',
                    color: '#024230'
                }
            };
        }
    }
</script>

效果图如下：

已适配大部分机型，具体尺寸可以根据需求自行调整。。

（还有不足之处，慢慢完善吧 o(∩_∩)o 哈哈）