uni-app 笔记

Yamy~

已于 2022-09-04 07:28:35 修改

阅读量211

点赞数

分类专栏： uni-app 文章标签： uni-app 前端

于 2022-08-17 00:11:13 首次发布

本文链接：https://blog.csdn.net/weixin_47287750/article/details/126373378

版权

uni-app 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

uni-app 官网

项目目录

一个uni-app项目默认的目录结构：

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb
│─components            符合vue组件规范的uni-app组件目录 !!!
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录
├─platforms             存放各平台专用页面的目录
├─pages                 业务页面文件存放的目录  !!!
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此  !!!
├─uni_modules           存放[uni_module](/uni_modules)。
├─wxcomponents          存放小程序组件的目录
├─nativeplugins         App原生插件 
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─main.js               Vue初始化入口文件  !!!
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期  !!!
├─manifest.json         配置应用名称、appid、logo、版本等打包信息  !!!
├─pages.json            配置页面路由、导航条、选项卡等页面类信息  !!!
└─uni.scss              这里是uni-app内置的常用样式变量

页面

新建页面

在pages目录下的page.json中注册。
使用HBuilderX开发时，在项目上右键"新建页面"，会自动在pages中完成页面注册

pages.json文件：

{
  "pages": [
     //pages数组中第一项表示应用启动页
     {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",//设置页面标题文字
        "enablePullDownRefresh":true//开启下拉刷新
      }
    },
    ...
  ]}

pages.json更多配置参考详见 pages.json 页面路由

删除文件

需要删除.vue文件和pages.json -> pages 列表项中的配置

页面生命周期

onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为Object(用于页面传参)
例：

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

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

onShow 监听页面显示。
onHide 监听页面隐藏
onUnload 监听页面卸载、
完整页面生命周期函数详见页面生命周期

组件生命周期

和vue标准组件的生命周期相同。详见组件生命周期

页面通讯

父子间和vue一样。
uni.$emit() 触发全局的自定义事件。(事件名, 携带的参数)
uni.$on() 监听全局的自定义事件，事件可以由uni.$emit触发（事件名，回调函数）下面两个也一样。
uni.$once() 监听全局的自定义事件。事件可以由uni.$emit触发，但只触发一次，在触发一次之后便移除监听器
uni.$off() 移除全局自定义事件监听器

add(e) {
    this.val += e.data
}
//
uni.$emit('add', {
    data: 2
})

uni.$on('add', {
    this.add
})

uni.$off('add', {
    this.add
})
//uni.$off
//如果没有提供参数，则移除所有的事件监听器；
//如果只提供了事件，则移除该事件所有的监听器；
//如果同时提供了事件与回调，则只移除这个回调的监听器；
//提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；

路由

uni-app页面路由为框架统一管理，在pages.json里配置每个页面的路径及页面样式。
- pages节点的第一项为应用入口页（首页）
- 应用中新增/删除页面，得需要对pages数组进行修改
- 文件名不需要写后缀，框架会自动寻找路径下的页面资源

subPackages 分包加载配置（即不在pages文件夹下的页面文件）

    "subPackages": [{
            "root": "pagesA",  //子包的根目录
            "pages": [{          //子包页面组成
                    "path": "list/list",
                    "style": { ...}
            }]
    }, {
            "root": "pagesB",
            "pages": [{
                    "path": "detail/detail",
                    "style": { ...}
            }]
    }]

路由跳转

 // 1.navigator组件跳转:类似于a标签，但只能跳转本地页面，且目标页面必须在pages.json中注册。
 <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>
        //跳转tabbar页面，必须设置open-type="switchTab"
      <navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
              <button type="default">跳转tab页面</button>
       </navigator>
</view>

// 2.调用API跳转:
       // -1 uni.navigateTo(OBJECT)  保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
        //在起始页面跳转到test.vue页面并传递参数
        uni.navigateTo({
            url: 'test?id=1&name=uniapp'
         });
         
		//-2 uni.redirectTo(OBJECT)   关闭当前页面，跳转到应用内的某个页面。
            uni.redirectTo({
                url: 'test?id=1'
             });
             
        //-3 uni.reLaunch(OBJECT)    关闭所有页面，打开到应用内的某个页面。(
注意： 如果调用了 uni.preloadPage(OBJECT) (opens new window)不会关闭，仅触发生命周期 onHide)
        uni.reLaunch({
            url: 'test?id=1'
        });
        
       //-4 uni.switchTab(OBJECT)   跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。(
注意： 如果调用了 uni.preloadPage(OBJECT) (opens new window)不会关闭，仅触发生命周期 onHide)
        // tabBar只能用switchTab跳转！！
        uni.switchTab({
            url: '/pages/index/index'
         });
         
        //-5 uni.navigateBack(OBJECT)   关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

// window.location.href 跳转站外，原生JS

页面栈

框架以栈的形式管理当前所有页面，当发生路由切换的时候，页面栈的表现详见页面栈表现

页面代码规范

支持在template模板中嵌套template和 block，用来进行列表渲染和条件渲染。（这两不是组件，只是一个包装元素，不会在页面中渲染，只接受控制属性）
统一使用。

<template>
        <view>
                <template v-if="test">
                        <view>test 为 true 时显示</view>
                </template>
                <template v-else>
                        <view>test 为 false 时显示</view>
                </template>
        </view>
</template>