zoukankan      html  css  js  c++  java
  • 移动端开发基础【9】路由和运行环境判断

    一、      路由

    uni-app项目中页面路由使用框架统一管理,开发者需要在pages.json里面配置每个路由页面的路径和页面样式。类似的小程序在app.json中配置页面路由相同,所以uni-app的路由用法与Vue Router不同。

    uni-app有两种页面路由跳转方式;第一种是使用导航器(navigator)组件扩展;第二种是调用API跳转。

    1.使用导航器(navigator)组件扩展

    常用的属性说明:

    (1)   url :类型是String, 表示应用内的跳转链接,值为相对路径或者绝对路径。例如:”../index/index”, “/pages/index/index”.

    (2)   open-type : 类型是String, 默认值是navigate,表示那种跳转方式。

    (3)   delta : 类型是Number, 当open-type为 ‘navigateBack’时有效,表示回退的层数。

    (4)   hover-class : 类型是String,默认值是navigator-hover,表示指定点击时的样式类,当hover-class=”none”时,没有点击效果。

    跳转方式open-type的有效值:

    (1)   navigate :使用<navigator open-type=”navigate”/>,表示打开新页面。

    (2)   redirect :使用<navigator open-type=” redirectTo”/>,表示页面重定向。

    (3)   switchTab :使用<navigator open-type=” switchTab”/>,表示Tab切换。

    (4)   reLaunch : 使用<navigator open-type=” reLaunch”/>,表示重加载

    (5)   navigateBack : 使用<navigator open-type=” navigateBack”/>,表示页面返回。

    (6)   exit :退出小程序,target=”miniProgram”时生效并且只在微信2.1.0+、百度2.5.2+、QQ1.4.7+上支持。

    2.调用API

    (1)   uni.navigateTo

    (2)   uni.redirectTo

    (3)   uni.switchTab

    (4)   uni.reLaunch

    (5)   uni.navigateBack

    以上的五种API跳转方式对应组件的五种跳转方式,都可以实现不同的路由跳转。

    二、      运行环境判断

    1.开发环境和生产环境

    uni-app可通过process.env.NODE_ENV判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

    (1)在HBuilderX中,点击“运行”编译出来的代码是开发环境,点击“发行”编译出来的代码是生产环境。

    (2)cli模式下,是通行的编译环境处理方式。

    (3)在HBuilderX中敲入代码块 uEnvDev 、uEnvProd 可以快速生成对应的 development 、production 的运行环境判定代码。

    // uEnvDev
    
    If (process.env.NODE_ENV === ‘development’) {
    
                 console.log(‘开发环境’)
    
    }
    
    // uEnvProd
    
    If (process.env.NODE_ENV === ‘production) {
    
                console.log(‘生产环境’)
    
    }
    
        
    

     

    如果我们需要自定义一个测试环境,并对单一的平台进行配置,可以在package.json中配置,并且会在HBuilderX的运行和发行菜单里面多出来一个如果是对所有平台进行配置,可以在vue-config.js中配置。

    1.判断平台

    第一种:编译期判断。也就是条件编译,不同的平台编译打包后已经是不同的代码。

     

     这里只是简单的展示以下,后期会详细的分享条件编译这部分内容。

    第二种:运行期判断。代码打包后,在运行的时候使用uni.getSystemInfoSync().platform 判断客户端环境是Android 、iOS和小程序开发工具。但是在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用uni.getSystemInfoSync().platform,他的返回值都为devtools.

    官网:http://www.lenbor.com
  • 相关阅读:
    cf914D. Bash and a Tough Math Puzzle(线段树)
    RNQOJ [stupid]愚蠢的矿工(树形依赖背包)
    BZOJ4552: [Tjoi2016&Heoi2016]排序(线段树 二分)
    多项式系数学习笔记
    BZOJ4653: [Noi2016]区间(线段树 双指针)
    洛谷P3372 【模板】线段树 1(树状数组)
    BZOJ3261: 最大异或和(可持久化trie树)
    BZOJ4260: Codechef REBXOR (01Tire树)
    Android 关于显示键盘,布局错乱网上顶的问题
    Java 输入流读取文本文件换行符问题
  • 原文地址:https://www.cnblogs.com/lenbor/p/12924138.html
Copyright © 2011-2022 走看看