技术标签: uniapp 前端 vue.js uni-app
这是一篇关于uni-app入门的文章,也是我对uni-app的总结与归纳,刚开始的时候在这个平台上面找寻同类型的文章的时候发现讲的都很片面不怎么详细,所以就写了一篇关于基本入门的文章,全文总计 7500 字 预计阅读时间约为 25分钟,推荐有Vue基础的朋友来阅读,否则可能听的有些困难,主要是uni-app是基于Vue来的嘛~
如图所示当我们创建好一个uni-app项目之后会有如下目录
接下来我们来大致说说这些目录下的文件和文件夹是干嘛的
如下图所示
示范:单文件
<template>
<view>
hello world 阿山 !
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
在pages文件夹下面其实有很多文件加,其效果就是存放页面效果和微信小程序下面的pages文件夹是一样的
虽然我这里的一个文件夹里面只有一个vue文件但是这个文件夹里面还可以写css,js,json文件命名方式和微信小程序是一样的(名字一般为和文件夹一样,我的习惯是只写一个vue文件,后面我会示范多文件的)
如下图所示
这个文件夹存放的东西相当于原生html项目的public文件夹存放的文件是页面的静态文件
虽然
如下图所示
同vue的根组件,是SPA项目的唯一页面,单网页应用的根组件
如下图所示
和vue项目一样是住逻辑入口文件
项目的配置文件
这个文件夹和微信小程序一样,属于页面配置文件,用于所有页面的配置
这个个文件下面写的是对全局生效的css代码对全局生效
1, 右键pages文件夹,点击新建页面
2,根据需求选择
3,制作hello word的页面
然后我们写一个简单的页面
<template>
<view>
demo
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
4,然后按下图点击运行编译
5,编译完成后就会告诉你访问地址
6,运行结果
在template标签下不能书写HTML标签,约为项目制作之后需要适配H5,APP和小程序,所以必须书写官方提供的专业组件(标签),写出来的代码才能直接编译到不同的客户端,
<navigator :url="./xxxx"></navigator>
如图
uni.navigateTo(url:'路径')
uniapp提供了强大的 uni
对象,里面有丰富的方法和属性
参数的传递
url="xxx?参数=值&参数=值
接收参数
利用生命周期钩子函数
onLoad(e){
xxxx
}
例如
当我在hello页面输入一个名字和年龄时,当我返回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>
<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>
或者这样
在vue中,组件在使用时需要先引入->注册->使用
在uniapp中,官方提供了easycom机制,让组件使用起来更加方便
具体做法:把组件放在component文件夹下
面,这个组件就会自动全局注册
-
来命名首先在组件里写点东西(非必写)
然后在需要导入组件的页面写入组件名,然后利用props传参过去,不会的去看我往期的vue文章
结果如下
uni-app导航栏官方文档
如下图所示
当我点击小图标的时候就能切换页面的这种方式就叫标签导航
下载图标推荐是下载两个一个代表选中,一个代表没激活
接下来我们来实现下微信底部导航的效果
页面名 | 激活时 | 未激活 |
---|---|---|
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 |
首先我们可以去查看文档
通过查文档我们可以发现实现导航栏的方式为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": "我"
}
]
},
文章浏览阅读5.3k次,点赞3次,收藏3次。_lay-src 不显示图片懒加载
文章浏览阅读1.9w次,点赞4次,收藏3次。在使用Hibernate进行数据库查询的时候报此_java.lang.classcastexception: [ljava.lang.object; cannot be cast to java.uti
文章浏览阅读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查询指定扫描行数
文章浏览阅读1.9k次。思路:(1)栈为后入先出,队列为先入先出;(2)进入队列的操作用栈1来完成,然后用栈2来完成出栈操作,把栈1的数据弹出后放入栈2,那么栈1中最后入栈的现在进入栈2的栈底最后出栈,正好实现队列的后入后出,最开始入栈1的数在栈2 的栈顶,最先出队列,相当于在队列的尾部class Solution{public: void push(int node) { stack1.pu..._实验四栈和队列将push和pop函数补充完整
文章浏览阅读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
文章浏览阅读1.1k次。使用过 SQLite 数据库对 Cursor 应该不陌生,这里单独拿出来谈一下,加深对Android SQLite中使用 Cursor 的理解。在你理解和使用 Android Cursor 的时候你必须先知道关于Cursor的几件事情:Cursor 是每行的集合。使用 moveToFirst() 定位第一行。你必须知道每一列的名称。你必须知道每一列的数据类型。Cur..._cursor.movetoposition(i);为啥每次访问都是第一个数据
文章浏览阅读537次。一、概述 gtest是Google开源的一款跨平台的C++单元测试框架,支持自动发现测试、断言集、用户定义的断言、death测试、致命与非致命的失败、类型参数化测试、各类运行测试的选项和XML的测试报告,更多信息请参看官网,也可以参看这里。 二、安装 点击这里下载gtest,当前最新的稳定版本是gtest-1.7.0,如下来安装gtest: #unzip g_gtest使用哪个版本稳定
文章浏览阅读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代码
文章浏览阅读447次。 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。️HTML静态网页设计作业使用dreamweaver制作,采用DIV+CSS布局,共有多个页面,首页使用CSS排版比较丰富,色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度,主体内容区域宽度 一套优质的网页设计应该包含 (具体可根据个人要求而定)网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语......_基于+javascript&mysgl&html的学校官网
文章浏览阅读9.4k次,点赞6次,收藏21次。需求:1、用for循环打印半个金字塔图形n=5:<html><head><title>打印半个金字塔</title><script type="text/javascript">var n = window.prompt("请输入金字塔的高度(行数)"); for(var i=0;i<=n;i_请用javascript编写一个程序,可以接收一个整数n层数,打印出金字塔一半。(使用for
文章浏览阅读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
文章浏览阅读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.