web

# uniapp开发

默认工程配置 

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

# 适配手机和小程序开发软件

  • 手机的话，如果配置完后无法运行启动，可以去在手机端和电脑端使用360手机助手。然后开发者模式和USB调试允许都打开
  • 小程序开发者工具在通用设置里=>安全=>需要打开端口，只需要在hbuilder里运行设置里配置好路径即可

# rpx

750rpx = 屏幕宽度，小程序设计稿按750px设计（最初的iPhone6尺寸），是个相对单位

# uniapp - pages.json

大体和小程序的app.json一致链接

  • pages部分将原来的路径数组扩充成具体的对象，包括path和style(原本需要单独页面的json去配置的信息)
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
	{
		"path": "pages/home/index",
		"style": {
			"navigationBarTitleText": "uni-app1"
		}
	}
],
  • tabBar没变化
  • condition:配置一个可以快速切换页面的方法
"condition": { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式（list 的索引项）
		
		"list": [
			{
				"name": "test1", //模式名称
				"path": "pages/index/index" //启动页面，必选
			},
		{
			"name": "test", //模式名称
			"path": "pages/home/index" //启动页面，必选
		}
		
		]
	}

# uniapp生命周期

  • 应用生命周期
  • 页面生命周期
函数名 说明
onLaunch 当uni-app 初始化完成时触发（全局只触发一次）
onShow 当 uni-app 启动，或从后台进入前台显示
onHide 当 uni-app 从前台进入后台
onError 当 uni-app 报错时触发
onUniNViewMessage 对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
onUnhandledRejection 对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound 页面不存在监听函数
onThemeChange 监听系统主题变化
<script>
    // 只能在App.vue里监听应用的生命周期
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>
函数名 说明 平台差异说明 最低版本
onInit 监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad 百度小程序 3.1.0+
onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide 监听页面隐藏
onUnload 监听页面卸载
onResize 监听窗口尺寸变化 App、微信小程序
onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap 点击 tab 时触发，参数为Object，具体见下方注意事项 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App（自定义组件模式）
onShareAppMessage 用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序
onPageScroll 监听页面滚动，参数为Object nvue暂不支持
onNavigationBarButtonTap 监听原生标题栏按钮点击事件，参数为Object App、H5
onBackPress 监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。 app、H5、支付宝小程序
onNavigationBarSearchInputChanged 监听原生标题栏搜索输入框输入内容变化事件 App、H5 1.6.0
onNavigationBarSearchInputConfirmed 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。 App、H5 1.6.0
onNavigationBarSearchInputClicked 监听原生标题栏搜索输入框点击事件 App、H5 1.6.0
onShareTimeline 监听用户点击右上角转发到朋友圈 微信小程序 2.8.1+
onAddToFavorites 监听用户点击右上角收藏 微信小程序 2.8.1+

# uniapp navigator

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

  • 这个页面是设置为tabbar的页面，别的页面使用navigator添加的参数是不会被接受的，
  • 跳转普通页面，open-type可以不配置，跳转到tabbar的页面，必须设置open-type='switchTab'
  • 跳转到普通页面可以带参数，使用props接受
  • delta:number默认为1,当 open-type 为 'navigateBack' 时有效，表示回退的层数
<template>
	<view class="content">
		<view class='first'>111236</view>
		<navigator url='/pages/test/index?id=30'>11111111111</navigator>
		<view>id{{id}}</view>
	</view>
</template>

<script>
	export default {
		props:['id']//id=>null
	}
</script>

<template>
	<view>
		<navigator url='/pages/index/index?id=50' open-type ='switchTab'>test</navigator>
		<view>id:{{id}}</view>
	</view>
</template>

<script>
	export default{
		props:['id']//=>30
	}
</script>

<style>
</style>

# uniapp基本api request 跳转页面

  • uni.request 请求
const requestTask = uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        name: 'name',
        age: 18
    },
    success: function(res) {
        console.log(res.data);
    }
});

// 中断请求任务
requestTask.abort();

uni.request封装响应器拦截器 (opens new window)

  • 跳转：可以使用navigator组件也可以使用api
    • uni.navigateTo()
    • uni.redirectTo()关闭当前页面，打开新页面
    • uni.reLaunch()关闭所有页面，打开新页面
    • uni.switchTab()跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
    • uni.navigateBack():关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
    • uni.preloadPage():预加载
// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
    delta: 2
});
  • 本地存储 stroage
    • 有同步异步之分
    • 可清空一条或者所有remove/clear
    • 可查看信息存储比例等等

# uniapp媒体相关API image video

  • image
  • uni.chooseImage:选择图片，返回图片列表，可多图
  • uni.getImageInfo:返回图片的相关信息
  • uni.previewImage:预览图片功能，不要拿本地地址去预览，可能会黑屏转圈
methods: {
	fun(){
		uni.chooseImage({
			success(res){
				console.log(res)
				//{errMsg: "chooseImage:ok", tempFilePaths: Array(1), tempFiles: Array(1)}
				let arr=res.tempFilePaths
				uni.getImageInfo({
					src:arr[0],
					success(img){
						console.log(img)
					}
				})
			}
		})
	}
}

<template>
	<view class="content">
		<image :src="menu" mode="" @click="fun"></image>
	</view>
</template>

<script>
	export default {
		
		data() {
			return{
				menu:"https://weishell.gitee.io/img/logo.jpg"
			}
		},
		onLoad() {

		},
		methods: {
			fun(){
				console.log(1)
				uni.previewImage({
					urls:['https://weishell.gitee.io/img/logo.jpg'],
					longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
			}
						})
			}
		}
	}
</script>

<style>
.first{
	/* width:375rpx; */
	background: #007AFF;
}
.img{
	width:200px;
	height:100px
}
</style>
  • video
  1. 使用uni.createVideoContext获取上下文，调用方法
<template>
	<view>
		<video src="../../static/1-1.mp4" controls id='king'></video>
		<button type="default" @click='stop'>stop</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				app:''
			}
		},
		mounted(){
			this.app=uni.createVideoContext('king')
		},
		methods:{
			stop(){
				this.app.pause()
			}
		}
	
	}
</script>
  1. video循环播放
<video 
	id="myVideo" 
	class="video" 
	:controls="false" 
	:loop="true" 
	:src="'http://192.168.11.164:80/video/'+video.src" 
	:autoplay="autoplay"
	@click="click"
	>
</video>

# 设备相关

可以查看手机的型号，屏幕宽高，网络和网络切换，网络状态，拨打电话，加速器，扫码，剪切板，屏幕亮度等等 链接 (opens new window)

# uniapp界面相关

弹窗，动态显示隐藏和修改tabbar，以及下拉刷新功能

# 下拉刷新

  • packjson配置："enablePullDownRefresh": true
{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
                "enablePullDownRefresh": true
            }
        }
    ]
}

onLoad: function (options) {
	setTimeout(function () {
		console.log('start pulldown');
	}, 1000);
	uni.startPullDownRefresh();
},
onPullDownRefresh() {
	console.log('refresh');
	setTimeout(function () {
		uni.stopPullDownRefresh();
	}, 1000);
}

# uniapp组件传值和页面传值

组件传值和vue一样，页面传值使用uni.$emit uni.$on等等，和vuebus一致

# uniapp兼容各端编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称

参考 (opens new window)

  • 仅在 App 下出现

  • 修改样式特定的端

还可以在package.json中进行某些配置，参考官方文档

# uni.share

分享需要考虑兼容性，事件只支持app或者H5，小程序则需要通过监听事件的方式

# uniapp 原生子窗体 subnvue

subNvue，是 vue 页面的原生子窗体，把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上。它不是全屏页面，它给App平台vue页面中的层级覆盖和原生界面自定义提供了更强大和灵活的解决方案。它也不是组件，就是一个原生子窗体。

video等标签层级是无法覆盖的( 小程序可以，app不行 )，如果需要在video上加一些文字啊等等就需要用到了，所以app需要设置原生子窗体覆盖

  1. 创建一个nvue页面
|-- pages  
    |-- index               // index 目录  
    |   |-- subNVue         // subNVue 目录  
    |       |-- nav.nvue    // 自定义导航栏  
    |       |-- popup.nvue  // 弹出层子窗体  
    |-- index.vue           // index 页面
  1. 使用 subNVue 子窗体的 pages.json 配置
    • id: [String], 全局唯一，不能重复。
    • path: [String], subNVue 子窗体的路径。
    • style: [Object], 配置子窗体的位置，背景等样式属性。
    • type 属性目前只有导航栏 (navigationBar) 和弹出层 (popup) 类型，且级别最高，一旦设置 type 为 navigationBar 或 popup， position 和 dock 的值都会被忽略。(可以不设置)
{  
    "pages": [{  
        "path": "pages/index/index", //首页  
        "style": {  
            "app-plus": {  
                "subNVues":[{  
                    "id": "concat", // 唯一标识  
                    "path": "pages/index/subnvue/concat", // 页面路径  
                    /*"type": "popup",  这里不需要*/  
                    "style": {  
                        "position": "absolute",  
                        "dock": "right",  
                        "width": "100upx",  
                        "height": "150upx",  
                        "background": "transparent"  
                    }  
                }]  
            }  
        }  
    }]  
}

// 通过 id 获取 nvue 子窗体  
const subNVue = uni.getSubNVueById('map_widget')  
// 打开 nvue 子窗体  
subNVue.show('slide-in-left', 300, function(){  
    // 打开后进行一些操作...  
    //   
});  
// 关闭 nvue 子窗体  
subNVue.hide('fade-out', 300)

编辑于：2021年8月29日12:13:48

最后更新: 5/29/2024, 8:12:51 AM

← uniapp开发抖音项目 →