关于uni-app入门看完这篇就够了_uniapp入门-程序员宅基地

技术标签: uniapp  前端  vue.js  uni-app  

关于uni-app的入门

前言

这是一篇关于uni-app入门的文章,也是我对uni-app的总结与归纳,刚开始的时候在这个平台上面找寻同类型的文章的时候发现讲的都很片面不怎么详细,所以就写了一篇关于基本入门的文章,全文总计 7500 字 预计阅读时间约为 25分钟,推荐有Vue基础的朋友来阅读,否则可能听的有些困难,主要是uni-app是基于Vue来的嘛~

资源与扩展文章

Uni-app的基础目录

uniapp的文件目录属性

如图所示当我们创建好一个uni-app项目之后会有如下目录
在这里插入图片描述
接下来我们来大致说说这些目录下的文件和文件夹是干嘛的


pages文件夹

如下图所示
在这里插入图片描述
示范:单文件

<template>
    <view>
       hello world 阿山 !
    </view>
</template>

<script>
    export default {
      
        data() {
      
            return {
      

            }
        },
        methods: {
      

        }
    }
</script>

<style>

</style>

小程序架构+vue语法=uni-app

在pages文件夹下面其实有很多文件加,其效果就是存放页面效果和微信小程序下面的pages文件夹是一样的
虽然我这里的一个文件夹里面只有一个vue文件但是这个文件夹里面还可以写css,js,json文件命名方式和微信小程序是一样的(名字一般为和文件夹一样,我的习惯是只写一个vue文件,后面我会示范多文件的)

static文件夹

如下图所示
在这里插入图片描述

相当于public文件夹

这个文件夹存放的东西相当于原生html项目的public文件夹存放的文件是页面的静态文件
虽然


App.vue文件

如下图所示
在这里插入图片描述
同vue的根组件,是SPA项目的唯一页面,单网页应用的根组件

mian.js文件

如下图所示
在这里插入图片描述
和vue项目一样是住逻辑入口文件


manifest.json文件

在这里插入图片描述
项目的配置文件

pages.json文件

在这里插入图片描述

这个文件夹和微信小程序一样,属于页面配置文件,用于所有页面的配置

在这里插入图片描述


uni.scss文件

在这里插入图片描述
这个个文件下面写的是对全局生效的css代码对全局生效

利用HBuilder工具进行基本的操作

创建新的页面

1, 右键pages文件夹,点击新建页面
在这里插入图片描述
2,根据需求选择
在这里插入图片描述
3,制作hello word的页面
在这里插入图片描述
然后我们写一个简单的页面

<template>
	<view>
		demo
	</view>
</template>

<script>
	export default {
      
		data() {
      
			return {
      
				
			}
		},
		methods: {
      
			
		}
	}
</script>

<style>

</style>

4,然后按下图点击运行编译
在这里插入图片描述
5,编译完成后就会告诉你访问地址
在这里插入图片描述
6,运行结果
在这里插入图片描述

在uniapp的页面vue里面的书写注意事项

uni-app借鉴微信小程序组件库

在template标签下不能书写HTML标签,约为项目制作之后需要适配H5,APP和小程序,所以必须书写官方提供的专业组件(标签),写出来的代码才能直接编译到不同的客户端,

示例代码

在这里插入图片描述

显示效果

在这里插入图片描述

uni-app页面的跳转

主要的两种跳转方式
  • 组件方式:
<navigator :url="./xxxx"></navigator>

如图
在这里插入图片描述

  • 代码方式:
uni.navigateTo(url:'路径')

uniapp提供了强大的 uni 对象,里面有丰富的方法和属性

跳转传参与接收

参数的传递

url="xxx?参数=&参数=

接收参数
利用生命周期钩子函数

onLoad(e){
    
	xxxx
}

例如
在这里插入图片描述

页面传参示例
页面结构

在这里插入图片描述

实现需求

当我在hello页面输入一个名字和年龄时,当我返回index.vue
的时候需要传递回去
效果如图:
请添加图片描述

index.vue代码(首页组件)
<template>
	<view class="content">
		<view>index页面</view>
		<navigator :url="`../hello/hello`">去往hello</navigator>
	</view>
</template>

<script>
	export default {
      
		data() {
      
			return {
      
				title: 'Hello'
			}
		},
		onShow() {
      
			console.log(this.options);
		},
		methods: {
      

		}
	}
</script>

<style>
</style>

hello.vue代码
<template>
	<view>
		<view>
			hello页面
		</view>
		<input placeholder="用户名" v-model="name">
		<input placeholder="年龄" v-model="age">
		<navigator :url="`../index/index?name=${name}&age=${age}`">去往index</navigator>
	</view>
</template>

<script>
	export default {
      
		data() {
      
			return {
      
				name:null,
				age:null
			}
		},
		methods: {
      
			
		}
	}
</script>

<style>

</style>

或者这样
在这里插入图片描述

结果效果

在这里插入图片描述

uni-app组件

在vue中,组件在使用时需要先引入->注册->使用
在uniapp中,官方提供了easycom机制,让组件使用起来更加方便
具体做法把组件放在component文件夹下面,这个组件就会自动全局注册

uni-app组件注意点
  • 在uniapp中不象在vue中那样组件名以大驼峰命名,而是以小写和-来命名
    在这里插入图片描述
    在这里插入图片描述
uniapp组件的导入
  • 首先在组件里写点东西(非必写)
    在这里插入图片描述

  • 然后在需要导入组件的页面写入组件名,然后利用props传参过去,不会的去看我往期的vue文章
    在这里插入图片描述

  • 结果如下
    在这里插入图片描述

uniapp的标签导航

什么是小程序的标签导航呢?

uni-app导航栏官方文档
如下图所示
在这里插入图片描述

当我点击小图标的时候就能切换页面的这种方式就叫标签导航

下载图标推荐是下载两个一个代表选中,一个代表没激活

接下来我们来实现下微信底部导航的效果

实现微信底部导航切换效果

实现效果

请添加图片描述

效果的实现
  • 我们首先需要8张图片和创建四个页面
页面名 激活时 未激活
msg.vue(消息) xxx.active.png xxx.png
phone.vue(通讯录) xxx.active.png xxx.png
find.vue(发现) xxx.active.png xxx.png
my.vue(我的) xxx.active.png xxx.png

在这里插入图片描述

  • 确保已经准备好了图标,在主目录下新建一个image文件夹
    在这里插入图片描述
  • 绑定与思路 在这里插入图片描述
  • 实现

首先我们可以去查看文档
在这里插入图片描述

通过查文档我们可以发现实现导航栏的方式为tabBar属性,但是我们只需要实现切换等功能,所以我们不需要那么多的参数和属性

"tabBar":{
    
	xxx	
}
实现代码

仔细看注释

"tabBar": {
    
		// 按钮文字颜色,选中时的按钮颜色边框颜色和背景颜色
		"color": "#7A7E83",
		"selectedColor": "#b3abb4",
		"borderStyle": "#b9b9b9",
		"backgroundColor": "#FFFFFF",
		// 按钮
		"list": [
			// 下面的就是按钮了
			// 消息
			{
    
				"pagePath": "pages/msg/msg",
				// 没选中时
				"iconPath": "static/image/msg.png",
				// 选中时
				"selectedIconPath": "static/image/msg-active.png",
				// 显示文字
				"text": "消息"

			},
			{
    
				"pagePath": "pages/phone/phone",
				// 没选中时
				"iconPath": "static/image/phone.png",
				// 选中时
				"selectedIconPath": "static/image/phone-active.png",
				// 显示文字
				"text": "通讯录"

			},
			{
    
				"pagePath": "pages/find/find",
				// 没选中时
				"iconPath": "static/image/find.png",
				// 选中时
				"selectedIconPath": "static/image/find-active.png",
				// 显示文字
				"text": "发现"

			},
			{
    
				"pagePath": "pages/my/my",
				// 没选中时
				"iconPath": "static/image/my.png",
				// 选中时
				"selectedIconPath": "static/image/my-active.png",
				// 显示文字
				"text": "我"
			}
		]

	},
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_50112395/article/details/126968525

智能推荐

懒加载问题,爬虫无法用src爬取图片问题_lay-src 不显示图片懒加载-程序员宅基地

文章浏览阅读5.3k次,点赞3次,收藏3次。_lay-src 不显示图片懒加载

java.lang.ClassCastException: [Ljava.lang.Object; cannot be cast to java.util.Map-程序员宅基地

文章浏览阅读1.9w次,点赞4次,收藏3次。在使用Hibernate进行数据库查询的时候报此_java.lang.classcastexception: [ljava.lang.object; cannot be cast to java.uti

mysql数据库查询实际扫描行数_mysql查询指定扫描行数-程序员宅基地

文章浏览阅读3.8k次。mysql数据库查询实际扫描行数例如我执行的语句是:SELECT iss_dt AS date,SUM( user_num ) AS count FROM ads_cusprofile_et_info WHERE label_id = 'sex' AND iss_dt >= '20181228' AND iss_dt <= '20191228' GROUP BY iss_dt;..._mysql查询指定扫描行数

用两个栈实现一个队列,完成push和pop函数_实验四栈和队列将push和pop函数补充完整-程序员宅基地

文章浏览阅读1.9k次。思路:(1)栈为后入先出,队列为先入先出;(2)进入队列的操作用栈1来完成,然后用栈2来完成出栈操作,把栈1的数据弹出后放入栈2,那么栈1中最后入栈的现在进入栈2的栈底最后出栈,正好实现队列的后入后出,最开始入栈1的数在栈2 的栈顶,最先出队列,相当于在队列的尾部class Solution{public: void push(int node) { stack1.pu..._实验四栈和队列将push和pop函数补充完整

Linux之编译make常识_make -j12-程序员宅基地

文章浏览阅读2.3k次,点赞2次,收藏5次。1,make -j:通过在make后加-j可以加快编译速度。在使用make进行编译时,若只执行make指令则效率较低,若用make -j后面跟一个数值,比如make -j8,make -j12等则可以提高编译效率。make -j命令后面跟着线程数,12表示这个命令使用12线路去执行编译。假设我们的系统是cpu是12核,在不影响其他工作的情况下,我们可以用make -j12(注意make -j线程数不能超过电脑cpu的线程数)。cpu_num=`cat /proc/stat | grep cpu[_make -j12

单独谈谈 Android Cursor 的使用细节-程序员宅基地

文章浏览阅读1.1k次。使用过 SQLite 数据库对 Cursor 应该不陌生,这里单独拿出来谈一下,加深对Android SQLite中使用 Cursor 的理解。在你理解和使用 Android Cursor 的时候你必须先知道关于Cursor的几件事情:Cursor 是每行的集合。使用 moveToFirst() 定位第一行。你必须知道每一列的名称。你必须知道每一列的数据类型。Cur..._cursor.movetoposition(i);为啥每次访问都是第一个数据

随便推点

gtest中小项目test_gtest使用哪个版本稳定-程序员宅基地

文章浏览阅读537次。一、概述  gtest是Google开源的一款跨平台的C++单元测试框架,支持自动发现测试、断言集、用户定义的断言、death测试、致命与非致命的失败、类型参数化测试、各类运行测试的选项和XML的测试报告,更多信息请参看官网,也可以参看这里。  二、安装  点击这里下载gtest,当前最新的稳定版本是gtest-1.7.0,如下来安装gtest:  #unzip g_gtest使用哪个版本稳定

牛顿迭代法(Newton)解方程数值解的python实现_迭代法解方程的python代码-程序员宅基地

文章浏览阅读5.8k次,点赞8次,收藏33次。事情过多,先放代码,有时间再补内容。import sympy as sydef FunValue(x0, f): result = f.subs(x, x0) return resultdef Newton(x0, f, g = 1e-6): times = 0 while True: tempx = x0 x0 = x0 ..._迭代法解方程的python代码

【web课程设计网页规划与设计】基于HTML+CSS+JavaScript制作大学网站(11页)_基于+javascript&mysgl&html的学校官网-程序员宅基地

文章浏览阅读447次。 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。️HTML静态网页设计作业使用dreamweaver制作,采用DIV+CSS布局,共有多个页面,首页使用CSS排版比较丰富,色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度,主体内容区域宽度 一套优质的网页设计应该包含 (具体可根据个人要求而定)网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语......_基于+javascript&mysgl&html的学校官网

JavaScript 之for循环打印金字塔图形_请用javascript编写一个程序,可以接收一个整数n层数,打印出金字塔一半。(使用for-程序员宅基地

文章浏览阅读9.4k次,点赞6次,收藏21次。需求:1、用for循环打印半个金字塔图形n=5:&lt;html&gt;&lt;head&gt;&lt;title&gt;打印半个金字塔&lt;/title&gt;&lt;script type="text/javascript"&gt;var n = window.prompt("请输入金字塔的高度(行数)"); for(var i=0;i&lt;=n;i_请用javascript编写一个程序,可以接收一个整数n层数,打印出金字塔一半。(使用for

Linux 2.6.18内核编译_编译linux2.6.18-程序员宅基地

文章浏览阅读1k次。2、下载2.6内核源码下载地址:http://www.kernel.org/pub/linux/kernel/v2.6/linux-2.6.18.tar.bz23、下载内核升级工具(1)下载module-init-tools-3.2.tar.bz2http://www.kernel.org/pub/linux/utils/kernel/module-init-tools/modul_编译linux2.6.18

auto-extending data file /ibdata1 is of a different size 17152 pages (rounded down to MB)_you need to use --log-bin to make --log-replica-up-程序员宅基地

文章浏览阅读1.6k次。问题描述:由于某一个mysql库经常性导致库崩溃,现在需要把该库迁移到另外一个库中,通过xtrabackup备份恢复,当恢复后无法正常启动mysql,查看日志提示如下内容:2018-09-05 10:01:29 20972 [Warning] You need to use --log-bin to make --binlog-format work.2018-09-05 10:01:29 ..._you need to use --log-bin to make --log-replica-updates work.

推荐文章

热门文章

相关标签