uni-app基础用法

模板

<!-- 超链接 -->
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
                    <button type="default">跳转到新页面</button>
                </navigator>

                <navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
                    <button type="default">在当前页打开</button>
                </navigator>

uni API

uni.navigateTo //跳转页面但显示返回按钮
uni.redirectTo //完全跳转到另一个页面

uni.setStorage //异步存储数据
uni.setStorageSync //同步存储数据
uni.getStorage //异步读取数据
uni.getStorageSync //同步读取

uni.showToast 消息提示

页面跳转时传递参数

起始页：

uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});

接收页面：

<script setup>
import { ref, onMounted,getCurrentInstance } from 'vue';

const id = ref('');
const name = ref('');

//加载完成后运行
onMounted(() => {
  //获取当前组件的实列，并得到它的路由查询参数
  const options = getCurrentInstance().proxy.$route.query;
  //查询参数赋值
  id.value = options.id;
  name.value = options.name;
});
</script>

条件编译（条件代码开头结尾需在注释中）

条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用 // #ifdef 注释、css 使用 /* #ifdef */、模板里使用 <!-- #endif -->

//仅出现在 App 平台下的代码
#ifdef APP-PLUS
//需条件编译的代码.....
#endif

//除了 H5 平台，其它平台均存在的代码（注意if后面有个n）
#ifndef H5
//需条件编译的代码.....
#endif

//h5和微信小程序都存在的代码
#ifdef H5 || MP-WEIXIN
//需条件编译的代码.....
#endif

条件编译识别代码对应平台：

• APP App
• APP-PLUS uni-app js引擎版编译为App时
• APP-ANDROID App Android 平台 详情
• APP-IOS App iOS 平台 详情
• APP-HARMONY App HarmonyOS Next 平台

WEB web（同H5） HBuilderX 3.6.3+

MP 所有小程序
MP-WEIXIN 微信小程序
MP-ALIPAY 支付宝小程序
MP-BAIDU 百度小程序
MP-TOUTIAO 抖音小程序
MP-LARK 飞书小程序
MP-QQ QQ小程序
MP-KUAISHOU 快手小程序
MP-JD 京东小程序
MP-360 360小程序

QUICKAPP-WEBVIEW 快应用通用