uniapp学习

浑水摸虾

已于 2023-06-28 17:29:57 修改

阅读量180

点赞数

文章标签： uni-app javascript 开发语言

于 2023-06-15 21:04:03 首次发布

本文链接：https://blog.csdn.net/lzl0413/article/details/131235683

版权

uni-app框架介绍

介绍

uni-app 是一个跨端开发框架，一套代码运行多个平台，并可以使用条件编译实现不同平台的特性编码

快速入门

uni-app支持通过可视化界面，HBuilderX内置相关环境，开箱即用

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

uni-app 使用vue的语法+小程序的标签和API。

目录结构

一个uni-app工程，默认包含如下目录及文件：

│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─common                自建的通用目录，可以存放一些公用css\less\scss、js等文件
├─store                 数据state共享store目录，通常我们引入vuex使用的目录
│  ├─index.js
├─api                   自建的api目录，可以存放封装服务端API接口、通用网络请求的js等文件
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─node_modules          存放npm导入的第三方包
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

Tips

编译到任意平台时，static 目录下的文件均会被完整打包进去，且不会编译。非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。
static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。

详细参考：uni-app官网 (dcloud.net.cn)

单页面程序

uni-app 约定页面文件遵循Vue 单文件组件 (SFC) 规范，采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

<template>
    <view class="container">
        {{message}}
    </view>
</template>

<script>
    export default {
        data() {
            return {
                message: 'Hello World',
            }
        }
    }
</script>
<style>
  .container{
    background-color: #FFF;
  }
</style>

模版语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

模板语法，包含插值、指令

插值

文本，使用双大括号：<span>Message: {{ msg }}</span>

原始HTML，使用v-html指令：<p>Using v-html directive: <span v-html="rawHtml"></span></p>

使用 JavaScript 表达式，支持JavaScript 表达式：{{ number + 1 }}

指令

v-on与v-bind是常用的指令，用于绑定属性设置事件

Attribute，使用v-bind 指令（缩写可以直接省略v-bind）：<button v-bind:disabled="isButtonDisabled">Button</button>

事件，使用 v-on 指令（缩写@）：<a @click="doSomething">...</a>

条件与循环，v-if v-else-if v-else v-for

计算属性与侦听器

计算属性

计算属性是基于它们的响应式依赖进行缓存的

computed: {
  msg: function () {
    return this.message
  }
}

侦听属性

当你有一些数据需要随着其它数据变动而变动时，用 watch

watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  }

class与style绑定

通过动态绑定 style、class 属性来控制组件的样式。

style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view :style="{color:color, fontSize: fontSize + 'px'}" />

动态绑定 class

<view class="normal_view" />

对象语法：

<view :class="{ active: isActive }"></view>

上面的语法表示 active 这个 class 存在与否将取决于数据 isActive

数组语法：

<view v-bind:class="[activeClass, errorClass]"></view>   
data: {     
activeClass: 'active',     errorClass: 'text-danger'  
}

关于选择器注意：

在 uni-app 中不能使用 * 选择器。
目前vue支持的选择器有： .class #idelement ::after `::before
nvue页面、微信小程序自定义组件中仅支持 class 选择器

资源路径说明

模板内引入静态资源

template内引入静态资源，如 image、 video等标签的 src属性时，可以使用相对路径或者绝对路径，形式如下

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

js文件引入

js文件或 script标签内（包括renderjs等）引入 js文件时，可以使用相对路径和绝对路径，形式如下

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'

注意

js文件不支持使用/开头的方式引入

全局变量

globalData

在 App.vue 可以定义 globalData ，globalData支持vue和nvue共享数据

定义：App.vue

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        },  
        onLaunch: function() {  
            console.log('App Launch')  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }  
</script>  

<style>  
    /*每个页面公共css */  
</style>

js中操作globalData的方式如下：

getApp().globalData.text = 'test'//赋值：
console.log(getApp().globalData.text) // 取值：'test'

如果需要把globalData的数据绑定到页面上，可在页面的onshow声明周期里进行变量重赋值。

vue渲染原理

声明式响应，在初始化实例前声明所有根级响应式 property
Vue 在更新 DOM 时是异步执行的

npm支持

npm 是 JavaScript 世界的包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。

路由

uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：

属性	类型	描述
path	String	配置页面路径
style	Object	配置页面窗口表现，配置项参考下方 pageStyle

style：

用于设置每个页面的状态栏、导航条、标题、窗口背景色等。

页面中配置项会覆盖 globalStyle 中相同的配置项

路由跳转

uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。

navigator:

页面跳转组件类似HTML中的<a>组件，只能跳转本地页面。目标页面必须在pages.json中注册。

示例

<template>
    <view>
        <view class="page-body">
            <view class="btn-area">
                <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>
                <navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
                    <button type="default">跳转tab页面</button>
                </navigator>
            </view>
        </view>
    </view>

API：

uni.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

uni.redirectTo(OBJECT) 关闭当前页面，跳转到应用内的某个页面。

uni.reLaunch(OBJECT) 关闭所有页面，打开到应用内的某个页面。

uni.switchTab(OBJECT) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

uni.navigateBack(OBJECT) 关闭当前页面，返回上一页面或多级页面。

运行环境判断

开发环境和生产环境

if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}

页面样式与布局

uni-app的css与web的css基本一致。

uni-app有vue页面和nvue页面。vue页面是webview渲染的、app端的nvue页面是原生渲染的

尺寸单位

uni-app 支持的通用 css 单位包括 px、rpx

px 即屏幕像素
rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App 端和 H5 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算
px:，以750宽的屏幕为基准动态计算的长度单位，与 vue 页面中的 rpx 理念相同。（一定要注意 weex 模式的 px，和 vue 里的 px 逻辑不一样。）
wx：与设备屏幕宽度无关的长度单位，与 vue 页面中的 px 理念相同

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

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

    .uni-card {
        box-shadow: none;
    }
</style>

Flex布局

为支持跨平台，框架建议使用Flex布局，关于Flex布局可以参考外部文档阮一峰的flex教程等。

事件监听与页面通讯

uni.$emit(eventName,OBJECT)

触发全局的自定事件。附加参数都会传给监听器回调。

代码示例

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

uni.$on(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

uni.$once(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。