Uni-app基础

Posted 一只大黑洋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Uni-app基础相关的知识,希望对你有一定的参考价值。

Uni-app基础

一、Uni-app是什么?

uni-app是一个使用Vue.js开发跨平台应用的前端框架;开发者编写一套代码,uni-app将其编译到iosandroid、微信小程序等多个平台,保证其正确运行并达到优秀体验。

二、使用步骤

1.推荐使用软件Hbuilder X

下载地址:HBuilderX-高效极客技巧

2.创建项目及初始化步骤

(1)启动小程序 

(2)启动小程序 

1.微信公众平台查看自己的小程序id  开发 → 开发管理 → 开发设置 → 找到appid

2.在uniapp 中进行配置  目录下的manifest.json → 微信小程序配置 → 填写小程序appid

 

(3)目录结构

├── pages              # 页面  (每个页面可以作为一个文件)
├── static               # 静态资源 (图片、音视频)
├── unpackage      # 打包文件 
├── App.vue          # 主文件(可以定义全局方法、样式、变量)
├── main.js            #  入口 (引入插件)
├── pages.json      # 页面路由 
├── package.json   # npm相关文件 
└── uni.scss           # 常用于定义全局样式变量、第三方ui库的样式(插件)
 

四、一个.vue文件 和 .html文件的区别

可看见的区别:

1.uniapp里不使用div 使用 view 替换

2.html里面使用 img  uniapp里使用 image

3.script 跟我们平常写的格式不一样了

其他区别:

1.vue里的template 只能有一个 根标签 如果多个会报错

2.js 定义变量  : var a = 3;  vue里面 存放在data里 不需要声明

3.js里的this 指向  window  vue里面 指向当前的vue实例

4.想要获取变量、方法 要使用 this.

5.js修改元素的值 需要document. 获取再赋值  vue里直接使用变量就可以了 总结 减少操作DOM

vue:

1.插值表达式(胡子表达式)

变量、判断条件(三元)  如果里面想使用字符串加引号

2.data

定义初始数据用的

data()

            return

                键:值

           

        ,

3.methods 方法

作用:写一些我们自己定义的方法(函数)

<template> 
<!-- template 模板的意思 -->
	<view class="content">
		<view class="text-area">
			<text class="title">title</text>
		</view> -->
	</view>
</template>

<script>
	export default 
		data() 
			return 
				title : 'Hello',
				title1:'hello world'
			
		,
		onLoad() 
			console.log(12);
		,
		methods: 

		
	
</script>

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

html:

 <!DOCTYPE html>
   <html lang="zh-CN">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
   </head>
   <body>
       <script>
       </script>
   </body>
   </html>

总结

以上就是今天要讲的内容,本文仅仅简单介绍了利用Hbuilderx开发Uni-app和部分页面内容的使用。

2021-08-03 uni-app基础教程 生命周期

应用生命周期

uni-app 支持如下应用生命周期函数:

函数名说明
onLaunchuni-app初始化完成时触发(局部只触发一次)
onShowuni-app启动,或从后台进入前台显示
onHideuni-app从前台进入后台
onErroruni-app报错时触发
onUniNViewMessagenvue页面发送的数据进行监听,可参考 nvue 向 vue 通讯
onUnhandledRejection对未处理的 Promise 拒绝事件监听函数(2.8.1+)
onPageNotFound页面不存在监听函数
onThemeChange监听系统主题变化

注意:应用生命周期仅可在 App.vue 中监听,在其他页面监听无效

页面生命周期

uni-app 支持如下页面生命周期函数:

函数名说明平台差异说明最低版本
onInit监听页面初始化,其参数通onLoad参数,为上个页面传递的数据,参数类型为Object(用于页面传参),触发时机早于onLoad百度小程序3.1.0+
onLoad监听页面加载,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参)
onShow监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回进入当前页面
onReady监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发
onHide监听页面隐藏
onUnload监听页面卸载
onResize监听窗口尺寸变化App,微信小程序
onPullDownRefresh监听用户拖动动作,一般用于拖动刷新,参考示例
onReachBottom页面上拉触底事件的处理函数
onTabItemTap单击选项卡时触发,参数为对象,具体见以下注意事项微信小程序,百度小程序,H5,App(自定义组件模式)
onShareAppMessage用户点击右上角分享微信小程序,百度小程序,字节跳动小程序,支付宝小程序
onPageScroll监听页面滚动,参数为对象nvue 暂不支持
onNavigationBarButtonTap监听原生标题栏按钮点击事件,参数为对象5+ App,H5
onBackPress监听页面返回,返回事件= {from:backbutton,navigationBack},backbutton 表示来源是左上角返回按钮或android 返回键; navigateBack 表示来源是 uni.navigateBack;详细说明及使用:onBackPress 详解。支付宝小程序只有真机能触发,只能监听非 navigateBack 引起的返回,不可阻止默认行为。App,H5、支付宝小程序
onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件App,H51.6.0
onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。App,H51.6.0
onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件App,H51.6.0
onShareTimeline监听用户点击右上角转发到朋友去微信小程序2.8.1+
onAddToFavorites监听用户点击右上角收藏微信小程序2.8.1+

onInit使用注意

  • 仅百度小程序基础库 3.260 以上支持 onInit 生命周期
  • 其他版本或平台可以同时使用 onLoad 生命周期进行兼容,注意避免重复执行相同逻辑
  • 不依赖页面传参的逻辑可以直接使用 created 生命周期替代

组件生命周期

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

函数名说明平台差异说明最低版本
beforeCreate在实例初始化之后被调用。详见
created在实例创建完成后被立即调用。详见
beforeMount在挂载开始之前被调用。详见
mounted挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate数据更新时调用,发生在虚拟 DOM 打补丁之前。详见仅 H5 平台支持
updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见仅 H5 平台支持
beforeDestroy实例销毁之前调用。在这一步,实例仍然完全可用。详见
destroyedVue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。详见

以上是关于Uni-app基础的主要内容,如果未能解决你的问题,请参考以下文章

Uni-app基础

如何判断小程序是原生开发还是uniapp开发?

微信小程序 开发,uni-app 开发简介

vue和​uni-app微信小程序的区别比较 (基础)

vue和​uni-app微信小程序的区别比较 (基础)

使用uni-app开发非原生小程序微信/支付宝小程序