【uni-app从入门到实战】条件编译、导航学习

web小门神 lv.1

发布时间：2022-09-22 01:51:16 319

相关标签： # vue.js# css# 小程序# 信息

文章目录

条件编译
导航

声明式导航
编程式导航
传参

条件编译

跨端兼容介绍

条件编译是利用注释实现的，在不同语法里注释写法不一样，vue/nvue 模板里使用

<template>
  <view class="content">
    
    <view>我希望只在H5看见</view>
    
    
    <view>我希望只在微信小程序看见</view>
    
  </view>
</template>

运行在浏览器：

【uni-app从入门到实战】条件编译、导航学习_h5

运行在微信小程序：

【uni-app从入门到实战】条件编译、导航学习_#endif_02

API 的条件编译，js使用 // 注释

<script>export default {
    ......
    onLoad() {
      // #ifdef  H5
      console.log("我只希望在H5中打印")
      // #endif
      
      // #ifdef  MP-WEIXIN
      console.log("我只希望在微信小程序中打印")
      // #endif
    }
  }</script>

运行在 H5 和微信小程序，分别打印对应内容

css 使用 /* 注释 */

<style>/* h5 样式*/
  /* #ifdef H5*/
  view{
    color: pink
  }
  /* #endif */
  
  /* #ifdef MP-WEIXIN */
  view{
    color: blue
  }
  /* #endif */</style>

运行在浏览器：

【uni-app从入门到实战】条件编译、导航学习_vue.js_03

运行在小程序：

【uni-app从入门到实战】条件编译、导航学习_uni-app_04

声明式导航

路由与页面跳转：navigator

<navigator url="../detail/detail">跳转至详情页</navigator>
<navigator url="/pages/message/message" open-type="switchTab">跳转至信息页</navigator>
<navigator url="/pages/detail/detail" open-type="redirect">跳转至详情页</navigator>

【uni-app从入门到实战】条件编译、导航学习_h5_05

1、点击跳转详情页，会跳转详情页，其中 url 是应用内的跳转链接，值为相对路径或绝对路径，如：../detail/detail，/pages/detail/detail，注意不能加 .vue 后缀
2、第二个跳转的链接是信息页，是一个 tabbar页面，需要注意的是，跳转 tabbar 页面，必须设置open-type="switchTab" 3、第三个还是跳转详情页，不过open-type="redirect"，这回关闭当前页再打开要跳转的页，所以左上角没有返回按钮了

编程式导航

uni.navigateTo(OBJECT)uni.switchTab(OBJECT)

<button @click="goDetail">跳转至详情页</button>
<button @click="goMessage">跳转至信息页</button>
<button @click="redirectDetail">跳转至详情页，并关闭当前页面</button>

【uni-app从入门到实战】条件编译、导航学习_uni-app_06

1、给跳转至详情页增加 click 事件 goDetail，方法里使用uni.navigateTo保留当前页面，跳转到应用内的某个页面

2、给跳转至信息页增加 click 事件 goMessage，方法里使用uni.switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

3、给跳转至详情页，并关闭当前页面增加 click 事件 redirectDetail，方法里使用uni.redirectTo关闭当前页面，跳转到应用内的某个页面

传参

声明式导航传参

<navigator url="../detail/detail?id=80&name=Lily">跳转至详情页</navigator>

编程式导航传参

goDetail(){
  uni.navigateTo({
    url:'/pages/detail/detail?id=80&name=Lily'
  })
}

跳转页面接收参数

export default{
  onLoad(options) {
    console.log(options)
  }
}

这样当我们点击跳转后，会输出：

【uni-app从入门到实战】条件编译、导航学习_#endif_07

文章来源： https://blog.51cto.com/u_14496797/5627456

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。