十一. uniapp

816 阅读5分钟

第一章 基础

1.特色

1.1 条件编译

#ifdef
#endif

#ifndef
#endif

1.2 App端的Nvue开发

  • uni-app App端内置了一个基于 weex改进的原生渲染引擎,提供了原生渲染能力.
  • 在App端,如果使用vue页面,则使用webview渲染;
  • 如果使用nvue页面,则使用原生渲染.

1.3 HTML5+

  • uni-app App端内置了HTML5+引擎,让js可以直接调用丰富的原生能力, 一些复杂的功能,可以直接调用App原生的插件来实现.
  • 只能在App端使用, 无法在H5和小程序中使用

2.创建项目

  • vue create -p dcloudio/uni-preset-vue mypro
  • 用Hbuilderx创建

第二章 框架

1. 配置

1.1 pages.json页面路由

1.2 manifest.json 应用配置

1.3 package.json

1.4 vue.config.js

1.5 uni.scss

1.6 App.vue

1.7 main.js

1.8 env

1.9 plugin.json 生成小程序插件

2. 框架接口 (参考第四章API)

2.1 日志打印

  • console
  • debug
  • log
  • info
  • warn
  • error

2.2 定时器

2.3 生命周期

2.4 页面

2.5 页面通讯

3. SSR服务端渲染

4. 国际化

4.1 vue界面和js内容国际化

  • vue和js里的内容国际化是与web同行的方案
  • main.js引入并初始化VueI18n
  • 国际化json文件内容

4.2 nvue页面国际化

  • nvue目前的国际化方案需要在每个页面单独引入uni-i18n,后续框架会抹平差异,抹平差异后和猪儿页面一样只需要在main.js中引入

4.3 pages.json国际化

4.4 框架内置组件和API国际化

  • 自动适配手机或浏览器语言
  • 自定义国际化内容

4.5 manifest.json国际化

4.6小程序国际化

4.7 schema国际化

4.8 App第三方SDK界面的国际化

4.9 应用名称及IOS隐私提示语的国际化

4.10 语言API

4.11 国际化实力项目

5. 自动化测试

5.1 快速开始

5.2 API

5.3 HBuilderX自动化测试插件

5.4 ClI项目自动化测试

第三章 组件

  • 参考uniapp官网

第四章 API

1. 基础

1.1 uni.base64ToArrayBuffer

1.2 uni.arrayBufferToBase64

1.3 生命周期

(1)应用生命周期: (仅在App.vue中监听,在其他页面监听无效)
    onLaunch,初始化完成时触发 (全局只触发一次)
    onShow, 启动或从后台切到前台
    onHide, 从前台切入后台
    onError,报错时触发
    onUniNViewMessage, 对nvue页面发送的数据进行监听 ###
    onUnhandleRejection, 对未处理的Promise拒绝事件监听函数 ###
    onPageNotFound, 页面不存在监听函数 ###
    onThemeChange, 监听系统主题变化
(2)页面生命周期:
	onInit, 监听页面初始化,其参数同onLoad参数,为上个页面传递的参数,参数类型是obj
	onLoad, 监听页面加载,其参数为上个页面传递的参数,参数类型是obj
	onShow, 监听页面显示,页面每次出现在屏幕上都会触发
	onReady, 监听页面初次渲染完成.
	onHide, 监听页面隐藏
	onUnload,监听页面卸载
	onResize, 监听窗口尺寸变化
	onPullDownRefresh,监听用户下拉
	onReachBottom, 监听用户触底
	onTabItemTap, 	点击 tab 时触发,参数为Object
	onShareAppMessage, 用户点击右上角分享
	onPageScroll, 监听页面的滚动
	onNavigationBarButtonTap, 监听原生标题栏按钮点击事件,参数为obj ###
	onBackPress, 监听页面返回
	onNavigationBarSearchInputChanged, 监听原生标题栏搜索输入框输入内容变化事件 ###
	onNavigationBarSearchInputConfirmed, 监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。 ###
	onNavgationBarSearchInputClicked, 监听原生标题栏搜索输入框点击事件(pages.json 中的 searchInput 配置 disabled 为 true 时才会触发) ###
	onShareTimeLine, 监听用户点击右上角转发到朋友圈
	onAddToFavorites, 监听用户点击右上角收藏
(3) 组件生命周期:与vue相同
	beforeCreate,
	created,
	beforeMount,
	mounted,
	beforeUpdate, 
	updated,
	beforeDestroy,
	destroyed,

1.4 应用级事件

  • uni.onPageNotFound监听应用要打开得页面不存在事件.该事件与App.onPageNotFound得回调时机一致.
  • uni.onError
  • uni.onAppShow
  • uni.onAppHide
  • uni.offPageNotFound
  • uni.offError
  • uni.offAppShow
  • uni.offAppHide

1.5 拦截器

  • uni.addInterceptor(Str, obj) str是需要拦截的api名称,
  • obj参数: invoke拦截前触发, success请求成功回调拦截, fail请求失败回调拦截, complete 请求完成回调拦截
  • uni.removeInterceptor(Str) 删除拦截器
uni.request({
    url: 'request/login', 
    success: (res) => {
        console.log(res.data);
        // 打印: {code:1,...}
    }
});


uni.addInterceptor('request', {
  invoke(args) {
    // request 触发前拼接 url 
    args.url = 'https://www.example.com/'+args.url
  },
  success(args) {
    // 请求成功后,修改code值为1
    args.data.code = 1
  }, 
  fail(err) {
    console.log('interceptor-fail',err)
  }, 
  complete(res) {
    console.log('interceptor-complete',res)
  }
})


1.6 全局API

  • uniIDHasRole, 用于判断当前用户是否拥有某角色.
  • uniIDHasPermission, 用于判断当前用户是否拥有某权限, admin角色的用户拥有所有权限.

2. 网络

2.1 发起请求

  • uni.request
  • uni.configMTLS, https请求配置自签名证书 ###

2.2 上传下载

  • uni.uploadFile
  • uni.downloadFile

2.3 WebSocket

  • uni.connectSocket
  • uni.onSocketOpen
  • uni.onSocketError
  • uni.sendSocketMessage
  • uni.onSocketMessage
  • uni.closeSocket
  • uni.onSocketClose

2.4 SocketTask

2.5 mDNS

2.6 UDP通信

3. 路由与页面跳转

3.1 uni.navigateTo

3.2 uni.redirectTo

3.3 uni.reLaunch

3.4 uni.switchTab

3.5 uni.navigateBack

3.6 uni.preloadPage

3.7 窗口动画

  • 窗口的显示/关闭 动画效果,支持在API 组件 pages.json 中配置, 优先级为API == 组件 > pages.json
  • animatinType
  • animationDuration

4. 数据缓存

4.1 uni.setStorage

4.2 uni.setStorageSync

4.3 uni.getStorage

4.4 uni.getStorageSync

4.5 uni.removeStorage

4.6 uni.removeStorageSync

4.7 uni.clearStorage

4.8 uni.clearStorageSync

5. 位置

5.1 获取位置

  • uni.getLocation(obj) 获取当前的地理位置,速度
  • uni.chooseLocation(obj) 打开地图选择位置

5.2 查看位置

  • uni.openLocation(obj)

5.3 地图组件控制

  • uni.createMapContext(mapId, this), 创建并返回map上下文mapContext对象.在自定义组件下,第二个参数传入组件实力this,以操作组件内map组件
  • mapSearch 模块

6. 媒体

6.1 图片

6.2 文件

6.3 录音管理

6.4 背景音频播放管理

6.5 音频组件控制

6.6 视频

6.7 视频组件控制

6.8 相机组件控制

6.9 直播组件控制

6.10 富文本

6.11 音视频合成

7.设备

7.1 .... 7.20

8. 键盘

8.1 uni.hideKeyboard

  • 隐藏软键盘

8.2 uni.onKeyboardHeightChange

  • 监听键盘高度变化

8.3 uni.offKeyboardHeightChange

  • 取消监听键盘高度变化事件

8.4 uni.getSelectedTextRange(obj)

  • 在input、textarea等focus之后,获取输入框的光标位置。

9.界面

9.1 交互反馈

  • uni.showToast
  • uni.hideToast
  • uni.showLoading
  • uni.showModal
  • uni.ShowActionSheet

9.1 设置导航条

9.2 设置Tabbar

9.3 背景

9.4 动画

9.5 滚动

9.6 窗口

9.7 宽屏适配

9.8 字体

9.9 下拉刷新

9.10 节点信息

9.11 节点布局相交状态

9.12 媒体查询

9. 13自定义组件

9. 14菜单

9. 15语言

10.页面和窗体

10.1 页面

  • getApp() 函数用于获取当前应用实例, 一般用于获取globalData
  • getCurrentPages
  • $getAppWebview

10.2 页面通讯

  • uni.$emit
  • uni.$on
  • uni.$once
  • uni.$off

10.3 subNVue原生子窗体

11.文件

12.绘画

13.广告

14.第三方服务

15.平台扩展

16.其他