uniapp学习笔记

已于 2024-07-07 12:21:36 修改
阅读量1k 收藏 7
点赞数 1
文章标签： uni-app 学习 笔记
于 2023-09-08 16:57:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l1513949626/article/details/132755889
版权

有一定HTML,CSS,vue基础,记录方便自己记忆学习,自己觉得很经常用不会错的就没记

官网

uni-app快速上手 | uni-app官网

学习网站

uniappVue3版本+咸虾米壁纸: uniappVue3版本基础demo及咸虾米壁纸项目的开源代码

文件-新建-项目

新建-页面

pages右键新建页面

工具-安装插件

运行

然后就可以配置需要的地址，例如

不需要保存，自动保存，直接x掉就行

编译成微信小程序段代码

设置开发者路径,安装微信开发者工具目录

开启服务端口,微信开发者工具中开启

设置-通用设置-安全  端口打开，重启

 重启

┌─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              内置的常用样式变量

如何查看小程序APPID

登录小程序平台【mp.weixin.qq.com】->开发->开发设置->开发者ID，即可查到AppID。如下图：

在manifest.json中微信小程序配置ID,就可以在手机查看了

uni-app 和原生小程序开发区别

开发区别

uni-app 项目每个页面是一个 .vue 文件，数据绑定及事件处理同 Vue.js 规范：

  1. 属性绑定 src="{ { url }}" 升级成 :src="url"

  2. 事件绑定 bindtap="eventName" 升级成 @tap="eventName"，支持（）传参

  3. 支持 Vue 常用指令 v-for、v-if、v-show、v-model 等

其他区别补充

  1. 调用接口能力，建议前缀 wx 替换为 uni ，养成好习惯，支持多端开发。

  2. <style> 页面样式不需要写 scoped，小程序是多页面应用，页面样式自动隔离。

  3. 生命周期分三部分：应用生命周期(小程序)，页面生命周期(小程序)，组件生命周期(Vue)

condition

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

属性说明：

属性类型是否必填描述
currentNumber是当前激活的模式，list节点的索引值
listArray是启动模式列表

list说明：

属性类型是否必填描述
nameString是启动模式名称
pathString是启动页面路径
queryString否启动参数，可在页面的 onLoad 函数里获得

注意： 在 App 里真机运行可直接打开配置的页面，微信开发者工具里需要手动改变编译模式，如下图：

index.Vue

不记得属性可以把鼠标悬停在标签可以出现官网链接直接抵达

<template>
        <swiper class="banner" indicator-dots circular autoplay >
                <swiper-item v-for="item in Pictures" :key="item.id">
                        <image @tap="onPoviewImage(item.url)" :src="item.url" ></image>
                </swiper-item>
        </swiper>
</template>

<script>
        export default {
                data() {
                        return {
                                title: 'Hello',
                                //轮播图数据
                                Pictures:[
                                        {id:'1',url:"../../static/img/xixi1.jpg"},
                                        {id:'2',url:"../../static/img/xixi2.jpg"},
                                        {id:'3',url:"../../static/img/xixi3.jpg"}
                                ]
                        }
                },
                methods: {
                        onPoviewImage(url){
                                // console.log(url)
                                uni.previewImage({
                                        urls:this.Pictures.map(v=>v.url),
                                        current:url
                                })
                        }
                }
        }
</script>

<style lang="scss">
        .banner{
                width: 750rpx;
        }
</style>

命令行创建 uni-app 项目

 

# 通过 git 从 gitee 克隆下载 git clone -b vite-ts https://gitee.com/dcloud/uni-preset-vue.git
 

常见问题
 

  •  
    运行 npx 命令下载失败，请尝试换成手机热点重试
     
  •  
    换手机热点依旧失败，请尝试从国内备用地址下载
     
  •  
    在 manifest.json 文件添加 小程序 AppID 用于真机预览
     
  •  
    运行 npx 命令需依赖 NodeJS 环境，Node.js
     
 

  1.  
    node.js安装一键式安装
     
 

>测试安装是否成功，按下【win+R】键，输入cmd，打开cmd窗口
 

输入：node -v // 显示node.js版本
 

npm -v // 显示npm版本
 

 

>显示版本说明安装成功
 

环境配置找到安装位置新建两个文件夹node_global和node_cache
 

 

>创建完毕后，使用管理员身份打开cmd命令窗口
 

npm config set prefix "路径\node_global"
 

npm config set prefix D: node.js\node global
 

npm config set cache "路径\node cache"
 

npm config set cache D: node.js\node cache
 

 

配置环境变量
 

此电脑-单击右键-属性-高级系统设置-环境变量
 

 

 

 

点击新建
 

变量名:NODE_PATH
 

变量值为:node_global路径\node_modules
 

D:\node.js\node_global\node_modules
 

在node_global下加一个文件夹node_modules
 

 

编辑用户变量中的Path编辑,将node_global路径放在AppData\Roaming\npm上面
 

 

 

然后在系统变量Path编辑添加%NODE_PATH%
 

 

 

或者系统变量Path编辑添加;%NODE_PATH%
 

 

测试是否安装成功
 

npm install express -g//(管理员命令)出现以下说明成功
 

 

下载安装pnpm(pnpm比npm快)
 

 

npm install express -g pnpm
 

刷新环境变量 新开cmd，输入命令提示符
 

set PATH=C: (刷新环境变量)
 

必须关闭这个cmd，再新开个cmd，输入
 

echo %PATH%(重新读取path的配置文件)
 

此时再直接输入pnpm-v即可成功
 

 
 

下载依赖包下方打开命令行终端
 

 

 

编译和运行 uni-app 项目
 

  1.  
    安装依赖 pnpm install(管理员身份运行否则报错)
     
 

右键HBuilderX管理员身份运行,开启终端之后会多一个node_modules文件夹
 

  1.  
    编译成微信小程序 pnpm dev:mp-weixin会多一个dist文件夹
     
 

 

 

  1.  
    导入微信开发者工具
     
 

提示
 

编译成 H5 端可运行 pnpm dev:h5 通过浏览器预览项目。
 

用 VS Code 开发 uni-app 项目
 

为什么选择 VS Code?
 

HbuilderX对TS类型支持暂不完善
 

VSCode对TS 类型支持友好，熟悉的编辑器
 

用 VS Code 开发配置
 

项目采用 Vue3 + TS 开发 uni-app 项目，所以需要分别安装 Vue3 + TS 插件 和 uni-app 插件。
 

安装 Vue3 + TS 插件
 

注意事项
 

没开发过 Vue3 + TS 项目的小伙伴注意，需要先安装 Vue3 和 TS 的插件，并完成以下配置 👇
 
 

查看 Vue3 官方文档
 

需禁用的插件
 

 

安装 uni-app 插件
 

  •  
    👉 安装 uni-app 开发插件
     
  
    •  
      uni-create-view ：快速创建 uni-app 页面,要进入改设置,否则只创建.vue
       
 

 

  •  
    uni-helper ：uni-app 代码提示,Ctrl+I可以唤醒代码提示
     
  •  
    uniapp 小程序扩展 ：鼠标悬停查文档,出现属性官方文档可以直接到不懂的,不用一个一个找
     
     
  
     
    pages.json页面配置全局配置
     
  •  
    👉 TS 类型校验
     
  
    •  
      管理员身份快捷图标右键,打开vscode用Ctrl+`打开命令行终端
       
    •  
      安装 类型声明文件 pnpm i -D miniprogram-api-typings @uni-helper/uni-app-types
       
    •  
      package.json中代码
       
      "devDependencies": {
    "@dcloudio/types": "^3.3.2",
    "@dcloudio/uni-automator": "3.0.0-3080720230703001",
    "@dcloudio/uni-cli-shared": "3.0.0-3080720230703001",
    "@dcloudio/uni-stacktracey": "3.0.0-3080720230703001",
    "@dcloudio/vite-plugin-uni": "3.0.0-3080720230703001",
    "@uni-helper/uni-app-types": "^0.5.12",
    "@vue/tsconfig": "^0.1.3",
    "miniprogram-api-typings": "^3.12.1",
    "typescript": "^4.9.4",
    "vite": "4.0.4",
    "vue-tsc": "^1.0.24"
  }
       
       
    •  
      管理员身份打开Windows PowerShell输入,最后选y,(如果进入终端后报错pnpm不能在系统运行)
       
    •  
      配置 tsconfig.json
       
    •  
      // 类型声明文件
     "types": [
      "@dcloudio/types", // uni-app API 类型
      "miniprogram-api-typings", // 原生微信小程序类型
      "@uni-helper/uni-app-types" // uni-app 组件类型
    ]
  },
  "vueCompilerOptions": {
    // 原配置 `experimentalRuntimeMode` 现调整为 `nativeTags`
    "nativeTags": ["block", "component", "template", "slot"]
    // "experimentalRuntimeMode": "runtime-uni-app"  
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
       
    •  
      👉 JSON 注释问题
       
    
      •  
        设置文件关联，把 manifest.json 和 pages.json 设置为 jsonc
         
      •  
        其他json不能写注释
         
      •  
         
      •  
          pages页面布局
         
      
         
       
        根节点为 <template>，必须要有<template>，vue2这个 <template> 下只能且必须有一个根 <view> 组件。vue3可以放多个<view> 组件
         
      
         
        //vue2中
<template>//页面布局
  <view>
  </view>
</template>

<script>//逻辑代码 选项式api
	export default {//data：template模板中需要使用的数据
	  data() {
	    return {
	    }
	  },
       methods:{//methods方法，如按钮点击、屏幕滚动
        }
	}
</script>

<style lang="scss">//CSS渲染 如果不可以运行安装scss插件
	
	
</style>

         
        //vue3
<template>
	<view class="box" hover-class="boxHover" hover-stay-time="0">view页面布局</view>
	<!-- hover-stay-time="0"松开后立马恢复 -->
</template>

<script setup>//组合式api
	
</script>

<style lang="scss">
	.box{
		width: 200rpx;
		height: 200rpx;
		background:#ccc;
	}
	.boxHover{
		background: skyblue;
	}
	
</style>
         
      
         
       
        <template>里面写页面布局,相当于写HTML
         
       
        <view> 与HTML的<div>十分类似
         
       
        <tetxt>与HTML的<span>十分类似
         
       
        hover-class       指定按下去的样式类
         
       
        像这样敲回车，可以自动补全
         
       
         
      
         
        pages页面配置
         
        {
    "pages": [ 
// 'pages' 数组中的第一项表示应用的启动页面。参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",//路径
            "style": {
                "navigationBarTitleText": "首页" // 导航栏标题文本
            }
        },
        {
            "path": "pages/my/my",
            "style": {
                "navigationBarTitleText": "我的"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "white", // 全局设置以将导航栏标题字体颜色更改为'black'或'white'
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#26BB9B", // 全局设置以更改导航栏标题背景颜色
        "backgroundColor": "#F8F8F8"
    },
    "tabBar": {
        "selectedColor": "#26BB9B",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "static/tabs/home_default.png",
                "selectedIconPath": "static/tabs/home_selected.png"
            },
            {
                "pagePath": "pages/my/my",
                "text": "我的",
                "iconPath": "static/tabs/user_default.png",
                "selectedIconPath": "static/tabs/user_selected.png"
            }
        ]
    },
    "condition": { // 模式配置，仅在开发期间生效
        "current": 0, // 当前激活的模式（在'list'数组中的索引）
        "list": [
            {
                "name": "searchCity", // 模式名称
                "path": "pages/index/index", // 启动页面（您要调试的页面） - 必填
                "query": "name=searchCity" // 启动参数，在页面的onLoad函数里面得到。
            }
        ]
    },
    "uniIdRouter": {}
}


         
        uni-app官网 属性一定多看文档
         
 

CSS 支持 | uni-app官网
 

选择器
 

目前支持的选择器有：
 

选择器样例样例描述
.class.intro选择所有拥有 class="intro" 的组件
#id#firstname选择拥有 id="firstname" 的组件
elementview选择所有 view 组件
element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件
::afterview::after在 view 组件后边插入内容，仅 vue 页面生效
::beforeview::before在 view 组件前边插入内容，仅 vue 页面生效
 

注意：
 

  •  
    在 uni-app 中不能使用 * 选择器。
     
  •  
    微信小程序自定义组件中仅支持 class 选择器
     
 

尺寸单位
 

uni-app 支持的通用 css 单位包括 px、rpx
 

  • px 即屏幕像素
  • rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。
 

nvue 还不支持百分比单位。
 

App 端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。
 

注意此时不支持 rpx
 

style绑定以及随机色
 

<template>
	<view>
		<view class="box" :style="{background:bgcolor}" @click="clickbg"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgcolor:"#c00"
			};
		},
        methods:{
            clickbg(){
				let color = "#"+String(Math.random()).substr(3,6)//随机色的值
				console.log(color)
				this.bgcolor = color
			}
		}
    }
</script>

<style lang="scss">

.box{
	width: 100rpx;
	height: 100rpx;
	background: #167;
}
</style>
 

v-bind:class
 

可以传给 v-bind:class 一个对象，实现动态地切换 class。
 

也可以在对象中传入更多字段来动态切换多个 class。
 

:class指令也可以与普通的 class 共存。
 

vue
 

 
 
v-if和v-else
 
 
中间不允许加除空格回车以外的,可加v-else-if
 
 
v-if 和 v-show 区别
 
 
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
 
 
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。
 
 
相比之下，v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换，来控制元素的显示和隐藏。
 
 
v-for
 
 
v-for 指令可以实现基于一个数组来渲染一个列表。
 
 
  • v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 
   
    • 第一个参数 item 则是被迭代的数组元素的别名。
    • 第二个参数，即当前项的索引 index ，是可选的。
    • :key="index"(index唯一)
 
 
v-bind
 
 
动态地绑定一个或多个属性
 
 
  • v-bind缩写为":"
 
 
v-html
 
 
支持HTML标签渲染
 
 
v-on
 
 
v-on 指令，它用于监听 DOM 事件。v-on缩写为‘ @ ’
 
 
 

 

自定义组件
 

在uni-app工程根目录下的 components 目录，创建并存放自定义组件：
 

项目-右键新建目录components-新建组件可以自定义组件名称
 

 

一个名为pubTitle的自定义组件
 

<template>
	<view class="pubTitle">
		<view class="time">{{time}}</view>
		<view class="big">{{title}}</view>
		<view class="small">{{smalltile}}</view>
		<view class="list">{{list}}</view>
		<view class="user">{{user}}</view>
		<view class="line">
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"pubTitle",
		// props:["title","smalltile"],
			
		props:{
			title:{
				type:String,
				default:"默认标题"
			},
			smalltile:{
				type:String,
				default:"默认副标题"
			},
			time:{
				type:Number,
				default:Date.now()
			},
				
			list:{
				type:Array,
				default(){
					return [1,2,3]
				}
			},
				
			user:{
				type:Object,
				default(){
					return {name:"匿名",gender:"保密"}
				}
			}
		},
		
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.pubTitle{
	padding: 30rpx 30rpx;
	text-align: center;
	background: #e9f1f6;
	.big{
		font-size: 50rpx;
		font-weight: 600;
		color: #333;
	}
	.small{
		font-size: 28rpx;
		font-weight: 400;
		color: #888;
	}
	.line{
		display: inline-block;
		width: 80rpx;
		height: 10rpx;
		border-radius: 20%;
		background: #289;
	}
}
</style>
 

pages中的部分代码
 

<template>
	<view>
		<pubTitle title = "消息" smalltile = "来消息了"></pubTitle>
    </view>
</template>
//这样自定义组件就引入了
 

自定义组件效果
 

 

父组件
 

 
 
当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。 
 

 

//父组件
<template>
	<view>
		<mytitle title="消息" titles="消息通知"></mytitle>
		<button @click="onclickbtn">开启{{state}}</button>
		<myitem :state = "state" @stateEvt="onstateEvt"></myitem>
		<!-- <mypop :state.sync="state"></mypop>
		:state.sync = @update:state 标识符  相当于v-model-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state:false
			};
		},
		methods:{
			onclickbtn(){//改变父组件开启state状态
				this.state = true
			},
			onstateEvt(e){//接收来自子组件的值
				console.log(e)
				this.state = e
			}
		}
	}
</script>

<style lang="scss">
</style>
 

//子组件
<template>
	<view class="myitem">
		<view>---弹出框样式---</view>
		<view class="box"  :style="{height:state?'300rpx':'0'}"></view>
		<button size="mini" @click="onclose">关闭</button>
	</view>
</template>

<script>
	export default {
		name:"myitem",
		data() {
			return {
				
			};
		},
		props:{
			state:{//子组件接收父组件的state
				type:Boolean,
				default:false
			}
		},
		methods:{
			onclose(){//子组件props不能直接修改父组件的值
				this.$emit("stateEvt",false)//点击关闭,将false值传给父组件
				// this.$emit("update:state",false)子组件可以通过自定义事件修改父组件数据
			}
		}
	}
</script>

<style lang="scss">
.box{
	width: 300rpx;
	height: 300rpx;
	background: #00FFFF;
}
</style>
 

轮播图效果代码
 

//直接放在一个自定义组件方便看
<template>
	<view class="gundong">
		<swiper class="swi" indicator-dots indicator-color="#e9f1f6" indicator-active-color="#00BFFF" circular autoplay>
//indicator-dots 是否显示面板指示点 
//indicator-color  指示点颜色
//indicator-active-color 选中指示点颜色
//circular  相当于可以循环滚动 autoplay  自动轮播切换
			<swiper-item v-for="item in Images" :key="item.id">
				<image @tap="on(item.url)" :src="item.url"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name:"gundong",
		data() {
			return {
				Images:[
					{ id: "1", url: "../../static/xixi1.jpg" },
					{ id: "2", url: "../../static/xixi2.jpg" },
					{ id: "3", url: "../../static/xixi3.jpg" }
				]
			};
		},
		methods:{
			on(url){
				uni.previewImage({
					urls:this.Images.map(v=>v.url),
					current:url,
					count:url
				})
			}
		}
	}
</script>

<style lang="scss">
.swi{
	image{
		width: 750rpx;
		height: 500rpx;
	}
}
</style>
 

创建了一个名为 "gundong" 的组件，其中包含一个轮播图（swiper）和一些图片。
 

在模板中，使用了 v-for 指令来遍历 Images 数组，并为每个图像创建一个 swiper-item。
 

使用了 @tap 事件监听器来绑定点击事件，并调用 on 方法来预览图像。
 

在脚本部分，定义了名为 "Images" 的数组，其中包含三个图像对象。
 

on 方法使用 uni.previewImage 方法来预览图像，传递了需要预览的图像链接列表和当前点击的图像链接。
 

使用了 SCSS 编写样式规则，设置了轮播图的宽度和高度。
 

这段代码的作用是在页面上展示一个包含轮播图的滚动视图，并实现了点击图像预览的功能。
 

页面和路由(目前只学了怎么用,参数没学)
 
 

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
 

参数类型必填默认值说明平台差异说明
urlString是需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数
animationTypeString否pop-in窗口显示的动画效果，详见：窗口动画App（uni-app x 不支持）
animationDurationNumber否300窗口动画持续时间，单位为 msApp（uni-app x 不支持）
eventsObject否页面间通信接口，用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）
 

uni.redirectTo
 

关闭当前页面，跳转到应用内的某个页面。
 

参数类型必填说明
urlString是需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）
 

uni.reLaunch
 

关闭所有页面，打开到应用内的某个页面。
 

注意： 如果调用了 uni.preloadPage 不会关闭，仅触发生命周期 onHide
 

参数类型必填说明
urlString是需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，如果跳转的页面路径是 tabBar 页面则不能带参数
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）
 

uni.switchTab
 

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
 

注意： 如果调用了 uni.preloadPage 不会关闭，仅触发生命周期 onHide
 

参数类型必填说明
urlString是需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）
 

<template>
  <view>
		<navigator url = "/pages/dome/dome">跳转dome</navigator><!-- 跳转到当前页面 -->
		<view class="oo" @click="godome"></view>
		
  </view>
</template>

<script>
	export default {
	  data() {
	    return {
	      
	    }
	  },
		methods:{
			godome(){
				uni.navigateTo({//不关闭当前页面，跳转到应用内的某个页面。
					url:"/pages/dome/dome",//跳转到到当前页面
					success:res=>{
						console.log(res)//跳转成功
					}
				})
				// uni.redirectTo({//关闭当前页面，跳转到应用内的某个页面。
				// 	url:"/pages/dome/dome",//跳转到到当前页面
				// 	success:res=>{
				// 		console.log(res)//跳转成功
				// 	}
				// })
				// uni.reLaunch({//关闭所有页面，打开到应用内的某个页面。可以跳转导航
				// 	url:"/pages/my/my",//跳转到到当前页面,路径后可以带参数。跳转的页面路径是 tabBar 页面则不能带参数
				// 	success:res=>{
				// 		console.log(res)//跳转成功
				// 	}
				// })
			}
			}
		}
</script>

<style lang="scss">
	.oo{
		width: 750rpx;
		height: 500rpx;
		background: #068;
	}
</style>

 
 

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
 

参数类型必填默认值说明平台差异说明
deltaNumber否1返回的页面数，如果 delta 大于现有页面数，则返回到首页。
animationTypeString否pop-out窗口关闭的动画效果，详见：窗口动画App（uni-app x 不支持）
animationDurationNumber否300窗口关闭动画的持续时间，单位为 msApp（uni-app x 不支持）
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）
 

 

<template>
	<view>
		<image src="../../static/xx.jpg" mode=""></image>
		<view @click="goback"><返回上一页</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			goback(){//关闭当前页面，返回上一页面或多级页面。
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">

</style>
 

route和onLoad的区别
 

route不支持小程序
 

onLoad支持小程序
 

交互反馈
 

显示消息提示框。
 

参数类型必填说明平台差异说明
titleString是提示的内容，长度与 icon 取值有关。
iconString否图标，有效值详见下方说明，默认：success。
imageString否自定义图标的本地路径（app端暂不支持gif）App、H5、微信小程序、百度小程序、抖音小程序（2.62.0+）
maskBoolean否是否显示透明蒙层，防止触摸穿透，默认：falseApp、微信小程序、抖音小程序（2.47.0+）
durationNumber否提示的延迟时间，单位毫秒，默认：1500
positionString否纯文本轻提示显示位置，填写有效值后只有 title 属性生效，且不支持通过 uni.hideToast 隐藏。有效值详见下方说明。App
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）
 

icon 值说明
 

值说明平台差异说明
success显示成功图标，此时 title 文本在小程序平台最多显示 7 个汉字长度，App仅支持单行显示。支付宝小程序无长度无限制
error显示错误图标，此时 title 文本在小程序平台最多显示 7 个汉字长度，App仅支持单行显示。支付宝小程序、快手小程序、抖音小程序、百度小程序、京东小程序、QQ小程序不支持
fail显示错误图标，此时 title 文本无长度显示。支付宝小程序、抖音小程序
exception显示异常图标。此时 title 文本无长度显示。支付宝小程序
loading显示加载图标，此时 title 文本在小程序平台最多显示 7 个汉字长度。支付宝小程序不支持
none不显示图标，此时 title 文本在小程序最多可显示两行。
 

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png" @click="clickimg"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view>
			<navigator url="/pages/my/my">跳转my</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			clickimg(){//显示消息提示框。
				uni.showToast({
					title:"发布失败",//提示的内容，长度与 icon 取值有关。
					icon:"none",//图标，默认：success。none没有图标
					// image:"/static/logo.png",//自定义图标的本地路径（app端暂不支持gif）
					mask:true,//是否显示透明蒙层，防止触摸穿透，默认：false
					// duration:500//提示的延迟时间，单位毫秒，默认：1500
				})
				setTimeout(()=>{//定时器
					uni.navigateTo({
						url:"/pages/my/my"
					})
				},1500)//显示之后再跳转走
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

 


                

        

        

    

  


    

      

        

            

              
                
                  东小黑
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
uni.app学习笔记

				
			

			

				

					q13217740213的博客
				

				

					06-17
					
					165
					
				

			

		

		

			
				
本文基于 HBuilderX 3.1.22 + 微信开发者工具 1.05.2106300为主要内容进行说明。

文档版本：1.0.2

			
		

	



                

              
                



	

		

			

				
					
uniapp学习笔记之知识点大总结

				
			

			

				

					Qiuxuntao的博客
				

				

					08-24
					
					1932
					
				

			

		

		

			
				
uniapp学习笔记之知识点大总结

			
		

	



                


  
              

                


	

		

			

				
					
黑马程序员前端项目uniapp小兔鲜儿微信小程序项目笔记

				
			

			

				

					JayChouyyds589的博客
				

				

					05-21
					
					1406
					
				

			

		

		

			
				
黑马程序员uniapp小程序 笔记整理集合

			
		

	





	

		

			

				
					
执行`npm i -D @uni-helper/uni-app-types`命令报错npm error ERESOLVE unable to resolve dependency tree

					
最新发布

				
			

			

				

					听海边涛声
				

				

					09-12
					
					316
					
				

			

		

		

			
				
执行`npm i -D @uni-helper/uni-app-types`命令报错npm error ERESOLVE unable to resolve dependency tree

			
		

	



		

			
		



	

		

			

				
					
uni-app 学习笔记

				
			

			

				

					niuroufen5的博客
				

				

					08-29
					
					816
					
				

			

		

		

			
				
官方网页文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等文件是应用的配置文件，用于指定应用的名称、图标、权限等。`App.vue`是我们的根组件，所有页面都是在`App.vue`下进行切换的，是页面入口文件，可以调用应用的生命周期函数。`main.js`是我们的项目入口文件，主要作用是初始化`vue`实例并使用需要的插件。文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，`uni.scss`...

			
		

	





	

		

			

				
					
uni-app学习笔记

				
			

			

				

					小朱的博客
				

				

					06-05
					
					3034
					
				

			

		

		

			
				
什么是UniApp

Union Application
前端框架
基于Vue.js
开发规范同小程序
一端开发，多端运行

开发工具
HBuilderX

框架基础


MVC

M model - 模型层，数据的增删改查
V view - 视图层，前端页面
C controller - 控制层，处理业务



MVVM

V view - HTML页面
VM viewmodel -  调度者
...

			
		

	





	

		

			

				
					
快速上手uni-app,基础知识，基本使用

					
热门推荐

				
			

			

				

					搬砖猴哥
				

				

					12-26
					
					1万+
					
				

			

		

		

			
				
####uni-app的基本使用
视频链接：uni-app配套视频
知识介绍：

环境搭建
页面外观配置
数据绑定
uni-app的生命周期
组件的使用
uni-app中样式学习
在uni-app中使用字体图标和开启scss
条件注释跨端兼容
uni中的事件
导航跳转
组件创建和通讯，及组件的生命周期
uni-app中使用uni-ui库

uni-app介绍 官方网页
uni-app 是一个使用 ...

			
		

	





	

		

			

				
					
uniapp学习笔记黑马

				
			

			

				

					09-19
				

			

		

		

			
				
相对于其他开发框架，uni-app减少了学习成本，因为只需要学会uni-app，就可以开发出iOS、Android、H5以及各种小程序的应用，不需要再学习其他框架。这也大大减少了开发成本。使用HBuilderX作为开发工具，可以方便地...

			
		

	





	

		

			

				
					
uniapp学习实战笔记uniapp学习实战笔记

				
			

			

				

					01-19
				

			

		

		

			
				
uniapp学习实战笔记uniapp学习实战笔记

			
		

	





	

		

			

				
					
uni-app的基本使用学习笔记（简记）

				
			

			

				

					m0_66148802的博客
				

				

					03-10
					
					751
					
				

			

		

		

			
				
主要讲解学习uni-app的基本使用，详细文档还需要看uni-app官网。

			
		

	





	

		

			

				
					
uniapp 学习笔记

				
			

			

				

					qq_26800875的博客
				

				

					02-01
					
					232
					
				

			

		

		

			
				
第一天学学习

1、看了官方文档

2、去插件市场下载了封装的网络框架 luch

3、研究了下colorui

4、下载了一个登录界面、

总结：超快猛的东西，太爽了。

第二天：大老说 colorui 不太爽，换uview，

1、研究这个框架研究了一上午，按官网git说明引用不好用，最后使用了绝招，直接复制main.js。他的文档就是大坑，浪费我三个小时。

2、自己改界面写自己需要的界面，太次了自己不会写界面布局，想找一个按比例设置的东西找不到，最后研究下了啥叫flex布局，看了以后感觉又要起飞了。

			
		

	





	

		

			

				
					
Uniapp学习笔记

				
			

			

				

					weixin_52102446的博客
				

				

					10-11
					
					241
					
				

			

		

		

			
				
uniapp 是 DCloud 公司于 2015 年开发的一款基于 vue 的跨端框架，编写一套代码就可以运行到 web、小程序（各种小程序）和 app（Android 和 iOS）端，使得开发一个项目的成本很小，效率很高，方便快捷。uniapp官网。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 4

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值