博客

Uni-app 笔记


uni-app

是一个使用

Vue.js

开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

环境安装

按照 vue-cli 脚手架

npm install -g @vue/cli

创建demo

# 正式版本
vue create -p dcloudio/uni-preset-vue 项目名称
# 使用alpha版
vue create -p dcloudio/uni-preset-vue#alpha 项目名称

执行后选择模板，这边选择

默认模板(TypeScript)

完成进入项目，使用

npm run serve

运行

主要文件、目录

src: 主要编码目录

main.ts: 入口文件

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new App().$mount()

App.vue: 根文件

<script lang="ts">
    import Vue from 'vue';
    export default Vue.extend({
        mpType: 'app',
        onLaunch() { // 当uni-app 初始化完成时触发（全局只触发一次）
            console.log('App Launch')
        },
        onShow() { // 当 uni-app 启动，或从后台进入前台显示时触发
            console.log('App Show')
        },
        onHide() { // 当 uni-app 从前台进入后台时触发
            console.log('App Hide')
        }
    });
</script>

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

应用生命周期

应用生命周期仅可在App.vue中监听，在其它页面监听无效。

页面生命周期

组件生命周期

uni-app 组件支持的生命周期，与vue标准组件相同。这里没有页面级的onLoad等生命周期：

pages: 页面模板目录

​ 一般以文件夹作为区分不同页面

static: 静态资源目录

manifest.json: 项目整体环境配置文件

pages.json: 页面配置文件

​

pages.json

文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

​ 它类似微信小程序中

app.json

的

页面管理

部分。注意定位权限申请等原属于

app.json

的内容，在uni-app中是在manifest中配置。

{
    "pages": [{
        // pages[0] 为首页项
		// 应用中新增/减少页面，都需要对 pages 数组进行修改
		// 文件名不需要写后缀，框架会自动寻找路径下的页面资源
        "path": "pages/component/index",  
        "style": {
            "navigationBarTitleText": "组件", // 导航栏名称
            "enablePullDownRefresh": true, // 启用下拉刷新 触发 onPullDownRefresh() 钩子
        }
    }, {
        "path": "pages/API/index",
        "style": {
            "navigationBarTitleText": "接口"
        }
    }, {
        "path": "pages/component/view/index",
        "style": {
            "navigationBarTitleText": "view"
        }
    }],
    "condition": { //模式配置，仅开发期间生效
        "current": 0, //当前激活的模式（list 的索引项）
        "list": [{
            "name": "test", //模式名称
            "path": "pages/component/view/index" //启动页面，必选
        }]
    },
    "globalStyle": {
        "navigationBarTextStyle": "black", // 导航栏文字颜色 black/white
        "navigationBarTitleText": "演示", // 导航栏全局Title
        "navigationBarBackgroundColor": "#F8F8F8", // 导航栏背景颜色
        "backgroundColor": "#F8F8F8", // APP 底部背景颜色
        "onReachBottomDistance": 50 // 上拉多少 px 触发，上拉加载钩子 onReachBottom()
        "usingComponents":{
            "collapse-tree-item":"/components/collapse-tree-item"
        },
        "renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
        "pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
        "rpxCalcMaxDeviceWidth": 960,
        "rpxCalcBaseDeviceWidth": 375,
        "rpxCalcIncludeWidth": 750
    },
    "tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "height": "50px",
        "fontSize": "10px",
        "iconWidth": "24px",
        "spacing": "3px",
        "list": [{
            "pagePath": "pages/component/index", // 对应的页面路径
            "iconPath": "static/image/icon_component.png", // 默认图标
            "selectedIconPath": "static/image/icon_component_HL.png", // action图标
            "text": "组件" // 名称
        }, {
            "pagePath": "pages/API/index",
            "iconPath": "static/image/icon_API.png",
            "selectedIconPath": "static/image/icon_API_HL.png",
            "text": "接口"
        }],
        "midButton": {
            "width": "80px",
            "height": "50px",
            "text": "文字",
            "iconPath": "static/image/midButton_iconPath.png",
            "iconWidth": "24px",
            "backgroundImage": "static/image/midButton_backgroundImage.png"
        }
    },
  "easycom": {
    "autoscan": true, //是否自动扫描组件
    "custom": {//自定义扫描规则
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue", // 导入uView UI
        "^c-(.*)": "@/components/c-$1.vue", // 导入 Vue 组件
    }
  },
}

参考

pages.json配置

sfc.d.ts: ts声明文件

declare module "*.vue" {
    import Vue from 'vue'
    
    export default Vue
}
declare module 'uview-ui' // uView-Ui 声明

uni.scss: 全局样式

.gitignore: git 忽略

tsconfig.json: tslink

自己创建的目录

api: 接口文件夹

config: 系统配置文件夹

components: 组件文件夹

// pages.json 配置 easycom 进行全局导入
"easycom": {
    "autoscan": true, //是否自动扫描组件
    "custom": {//自定义扫描规则
        "^c-(.*)": "@/components/c-$1.vue", // 导入 Vue 组件
    }
},

store:

Vuex