uni-app使用教程

引文

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台，实现一套代码，多端使用的功能

创建项目

右键新建 -> 点击新建项目按钮，即可弹出创建面板，此时可以选择使用vue2或3以及是否使用模板创建项目，创建后即可使用vue语法编写静态页面

tab页面及路由配置

uni-app提供了通常小程序中都有的tabbar，以实现一级页面跳转的功能，需要在pages.json的tabbar数组中提供相应配置

"tabBar": {
     //tab样式和选中后效果
     "color": "#7A7E83",
     "selectedColor": "#2BD3DE",
     "borderStyle": "black",
     "backgroundColor": "#F8F8F8",
      //tab页面配置，包括图标路径，tab名称、路径
      "list": [{
            "pagePath": "pages/index/index",    // 页面路径
             "iconPath": "static/iconPath.png",    // 图标路径
             "selectedIconPath": "static/iconSelected.png",    // 选中时的图标路径
             "text": "首页"    // 文字
        }]
}

当创建了多个页面时，往往需要配置页面之间的跳转，此时需要在pages.json文件中配置，页面注册uni-app在右键新建页面时通常会自动创建，也可手动在pages数组中添加

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",    // 页面路径
            "style": {
                "navigationBarTitleText": "uni-app"    // 页面头部标题
                "enablePullDownRefresh": true    // 开启页面下拉刷新功能
            }
        }
    ]

分包可以有效实现在不干扰之前的编写的页面情况下新建新的页面，同时也提高了项目的可维护性

"subPackages": [{
     "root": "pages/test",
      "pages": [
        `{
           "path": "login/index",
            "style": {
             "navigationBarTitleText": "登录"
            }
         }
     ]
}]

uni-app中的本地缓存

本地缓存能够在不与数据库进行交互时长时间存储数据，对一些不需要存储到数据库但希望能够持久化保存的数据来说，使用本地缓存能够有效减少服务器的压力，并提高页面的响应速度

// 设置本地缓存数据
uni.setStorage({key:“属性名”，data:“值”})    // 异步
uni.setStorageSync(KEY,DATA)    // 同步

// 获取本地缓存数据
uni.getStorage({key:“属性名”,success(res){res.data}}) //异步
uni.getStorageSync(KEY) //同步

// 移除本地缓存指定 key 值的数据
uni.removeStorage(OBJECT)    // 异步
uni.removeStorageSync(KEY)    // 同步

// 清除本地缓存保存的所有数据
uni.clearStorage()    // 异步
uni.clearStorageSync()    // 同步

全局变量globalData

使用全局对象可与其他页面或组件直接共享数据，适合数据量较少并且需要直接传递数据的情况

// App.vue
export default {  
    globalData: {  
         msg: 'hello world'  
    }
} 

//在其他页面调用/修改全局变量
getApp().globalData.msg= 'hello world'

uni-app的生命周期

uni-app有三种生命周期，分别为：应用生命周期、页面生命周期、组件生命周期

应用生命周期

• onLaunch：应用初始化完成触发一次，全局只触发一次

• onShow：应用启动时，或从后台进入前台时触发

• onHide：应用从前台进入后台触发

页面生命周期

• onLoad：页面加载完成后触发

• onReady：页面渲染完成后触发

• onShow：页面显示时或从后台进入前台时触发

• onHide：页面进入后台时触发（进入其他页面）

• onUnload：页面卸载后触发（返回前一页）

组件生命周期

uni-app的组件生命周期遵循vue组件的生命周期

• beforeCreate

• created

• beforeMount

• mounted

• beforeUpdate

• updated

• beforeDestory

• destroyed

路由与页面跳转

uni-app提供了页面跳转的API，如果熟悉微信小程序则可轻松上手

值	说明	平台差异
navigate	uni.navigateTo
redirect	uni.redirectTo
switchTab	uni,switchTab
navigateBack	uni.navigateBack
relaunch	uni.relaunch	字节跳动与飞书小程序不支持

跨端适配—条件编译

开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。因此就有了条件编译这个模式，可以设置部分代码只在某一平台生效，或不生效，用以提高uni-app的跨平台的兼容性

// 满足对应平台(微信小程序)时执行的代码
#ifdef  MP-WEIXIN
...
#endif

// 不满足对应平台(app)时执行的代码
#ifndef  APP-PLUS
...
#endif

注：更多详细信息及平台适配请查阅官方文档

编写静态页面时与HTML的不同

uni-app参考小程序规范，提供了一批内置组件。初学者刚从html转为uniapp或者小程序很多时候感觉不适应，下方是html标签变动参考：

HTML	uni-app
div、ul、li	view
span、font	text
a	navigate
img	image
slect	piker
iframe	web-view
audio	uni.createInnerAudioContext()

注：CSS暂无特别多的变动，主要为两个部分：部分选择器无法使用以及根元素从html变为page