【Uniapp】简单入门1. 静态资源引入路径使用绝对路径统一引入图片资源，在H5平台，小于4kb会被转为base6

1. 静态资源引入路径

使用绝对路径统一引入
图片资源，在H5平台，小于4kb会被转为base64，其它平台不会转为base64

<image src="@/static/logo.png"></image>

import add from '@/common/add.js'

export default {
    data() {
        return {
            imgUrl: '/static/logo.png'
        }
    }
}

@import url('@/common/uni.css');

background-image: url(@/static/logo.png);

2. 生命周期

应用声命周期

函数名	说明	平台兼容
onLaunch	当`uni-app` 初始化完成时触发（全局只触发一次），参数为应用启动参数，同 uni.getLaunchOptionsSync 的返回值
onShow	当 `uni-app` 启动，或从后台进入前台显示，参数为应用启动参数，同 uni.getLaunchOptionsSync 的返回值
onHide	当 `uni-app` 从前台进入后台
onError	当 `uni-app` 报错时触发	app-uvue 不支持
onUniNViewMessage	对 `nvue` 页面发送的数据进行监听，可参考 nvue 向 vue 通讯	app-uvue 不支持
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+ app-uvue 暂不支持）	app-uvue 不支持
onPageNotFound	页面不存在监听函数	app-uvue 不支持
onThemeChange	监听系统主题变化	app-uvue 不支持
onLastPageBackPress	最后一个页面按下Android back键，常用于自定义退出	app-uvue-android 3.9+
onExit	监听应用退出	app-uvue-android 3.9+

页面声命周期

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例。
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序、快手小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage	用户点击右上角分享	微信小程序、QQ小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序、京东小程序
onPageScroll	监听页面滚动，参数为Object	nvue不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack；详见	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）	App、H5	1.6.0
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
onAddToFavorites	监听用户点击右上角收藏	微信小程序、QQ小程序	2.8.1+

3. 页面路由

页面跳转

<template>
    <div>
        <navigator url="/pages/index/index">首页</navigator>
    </div>
</template>

<script>
    export default {
        onLoad() {
            // 跳转页面
            uni.navigateTo({
                url: 'pages/index/index' 
            })
            
            // 跳转底部tabBar页面
            uni.### switchTab({
                url: 'pages/index/index' 
            })
        }
    }
</script>

获取当前页面栈

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，数组中的元素为页面实例，第一个元素为首页，最后一个元素为当前页面。

路由传参

1. 基本使用

//在起始页面跳转并传递参数
uni.navigateTo({
    url: 'test?id=1&name=lucy'
});

// 在页面test里接受参数
export default {
    onLoad: function (option) { // option为object类型，会序列化上个页面传递的参数
        console.log(option.id);
        console.log(option.name);
    }
}

2. url有长度限制，太长的字符串传递失败的情况

方法一：页面通讯

uni.$emit('update',{
    msg:'页面更新'
})

uni.$on('update',function(data){
    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})

方法二：全局变量

在 uni-app 项目根目录下创建 common 目录，然后在 common 目录下新建 helper.js 用于定义公用的方法。

const websiteUrl = 'http://uniapp.dcloud.io';  
const now = Date.now || function () {  
    return new Date().getTime();  
};  
const isArray = Array.isArray || function (obj) {  
    return obj instanceof Array;  
};  

export default {  
    websiteUrl,  
    now,  
    isArray  
}

接下来在 pages/index/index.vue 中引用该模块

<script>  
    import helper from '@/common/helper.js';  

    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log('now:' + helper.now());  
        },  
        methods: {  
        }  
    }  
</script>

其它全局变量方案ask.dcloud.net.cn/article/350…

3. 参数中出现空格等特殊字符时需要对参数进行编码的情况

<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>

复制代码

// 在test页面接受参数
onLoad: function (option) {
    const item = JSON.parse(decodeURIComponent(option.item));
}

4. 小程序路由分包配置

因为小程序有体积和资源加载限制，各家小程序平台提供了分包方案，优化小程序的下载和启动速度。

小程序启动时，默认会下载主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示，此时终端界面会有等待提示。

截屏2024-06-15 下午6.43.54.png

5. 常用组件和API

常用组件

view 对应 div 标签
text 对应 span 标签
navigator 对应 a 标签
input 对应 input 标签
...

常用API

发起网络请求: uni.request(OBJECT)
保留当前页面，跳转到应用内的某个页面: uni.navigateTo(OBJECT)
将 data 存储在本地缓存中指定的 key 中: uni.setStorageSync(KEY,DATA)
从本地相册选择图片或使用相机拍照: uni.chooseImage(OBJECT)
将页面滚动到目标位置: uni.pageScrollTo(OBJECT)
...

6. vue-cli 创建 uni-app 项目

全局安装 vue-cli

npm install -g @vue/cli

使用正式版（对应HBuilderX最新正式版）
```
vue create -p dcloudio/uni-preset-vue my-project
```

使用Vue3/Vite版

创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）
```
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
```
创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）
```
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
```

7. 运行环境判断及跨端兼容

（1）生产环境与开发环境

截屏2024-06-16 下午3.52.59.png

（2）判断平台

截屏2024-06-16 下午3.56.27.png

截屏2024-06-16 下午4.02.04.png