开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

🎈大家好，我是李乐一，新人初来乍到，请多多关照~
📝小小的前端一枚，分享一些日常的学习和项目实战总结~
😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~

页面栈

小程序的页面栈最多 10 层。也就是说使用 uni.navigateTo 最多只能跳转 9 层页面。

为了避免报错，在页面跳转的时候我们可以加个判断条件

📝举个栗子

// 页面跳转 toPage(url){ 
let pages = getCurrentPages() 
if(pages.length < 9){ 
    uni.navigateTo({url}) 
}else{ 
    uni.redirectTo({url})//根据实际情况选择路由方法 } 
}

分包优化

在 manifest.json 中对应平台下配置 "optimization":{"subPackages":true} 来开启分包优化。开启后分包目录下可以放置 static 内容。 📝举个栗子

// manifest.json源码
{
    "mp-weixin" : {// 以微信为例
      	...,
        "optimization" : {
            "subPackages" : true
        }
    }
}

页面生命周期

• Uniapp 的页面生命周期建议使用 onLoad、onShow、onReady、onHide 等，也可以使用 vue 生命周期 created、mounted 等，但是组件的生命周期只支持vue 生命周期的写法。

应用生命周期

onLaunch，onShow，onHide，onError

<script>
    // 只能在App.vue里监听应用的生命周期
    export default {
        onLaunch: function() {
             console.log('App Launch')
        },
        onShow: function() {
             console.log('App Show')
        },
        onHide: function() {
             console.log('App Hide')
        }
    }
</script>

注意

• 应用生命周期只能在App.vue中监听，在其它页面监听无效。
• 应用启动参数，可以在API uni.getLaunchOptionsSync获取
• App.vue 不能写模板

全局样式

在App.vue中，定义一些全局通用样式

<style>
    @import './common/uni.css';
</style>

easycom 组件模式

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其简化为一步操作。

说明： 只要组件安装在项目的 components 目录下或 uni_modules 目录下，并符合 components/组件名称/组件名称.vue 的目录结构，就可以不用引用、注册，直接在页面中使用。例如：存放在了目录/components/uni-rate/uni-rate.vue

easycom 为默认开启状态，可关闭。可以根据需求配置其他路径规则。

📝举个栗子

<template>
    <view>
       <uni-rate></uni-rate><!-- 这里会显示一个五角星，并且点击后会自动亮星 -->
    </view>
</template>
<script>
    // 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
    export default {
        data() {
            return {
            }
        }
    }
</script>