uni-app知识点
uni-app简介
uni-app
是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
uni-app的优点
在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。
开发者/案例数量更多
平台能力不受限
性能体验优秀
周边生态丰富
学习成本低
开发成本低
创建uni-app文件
例如在HBuilder创建
新建项目
各文件作用
可在pages里边里建立新页面
新建目录,然后在目录里新建vue文件
然后在pages.json配置页面
若需要底部导航栏,可添加TabBar
pages.json属性
uni-app的传参
<view class="uni-input">{{time}}</view>
data() {
return {
time: "08:00",
}
},
uni-app的if判断
<view v-if="isLog">欢迎回来</view>
<view v-else>请登录</view>
uni-app的fou循环
<view v-for="(list,index) in lists" :key="index" class="item">
{{list.summary}}
</view>
uni-app的事件
<button v-on:click="num++" size="mini" type="primary">{{num}}事件绑定</button>
<button @click="num++" size="mini" type="default">{{num}}事件绑定</button>
<button @click="say()" size="mini" type="primary">响应事件</button>
<button @click="say('你好11111')" size="mini" type="primary">响应事件-传参</button>
<button @click="doit" :data-title="title" size="mini" type="primary">事件对象</button>
uni-app跳转
<navigator url="../options/options">跳转</navigator> //跳转时后边地址不可加.vue
<navigator url="../index/index?count=5&title=来自options" open-type="switchTab">跳转传参</navigator>
<navigator url="../index/index" open-type="switchTab">跳转没有返回按钮</navigator>
uni-app的大多数和vue2很相似
如果想引入图片,必须放入static里,要不然可能不起作用。
uni-app知识点相关推荐
- uni app页面传值
传值是很常见的知识点,刚开始接触uni app总会踩到很多传值的坑,不是这里传不过去,就是那边接收不到,以下是我遇到过的一些传值方式,实在不行,咱就一个一个试,总有一个能"干起". ...
- 切换 uniapp_万能前端框架uni app初探03:底部导航开发
前言 本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
- uni app map 地图 漂浮问题及方案
uni app map 地图 漂浮问题及方案 文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
- uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
- HBuilder X ——Uni app 学习笔记(一)
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
- uni app中使用图表
关于在uni app中运用图表 今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
- uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
- HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
- uni App+H5 实现人脸识别
uni App+H5 实现人脸识别 通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
- uni app 视频播放功能
视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器.安卓原生和iOS等 媒体组件video 首先使用video组件,然后高度需要自己设置 uni.createVideoContext 官 ...
最新文章
- 数据结构与算法实验祝恩_《数据结构与算法》实验教学大纲
- [jqpolt] formatString 日期格式化列表
- 利用jquery.form.js实现Ajax无刷新图片上传及预览功能
- linux查看python线程,Python多线程详解
- pytorch的一些函数
- 算法分析与设计-实验四 回溯算法设计
- ShopEx文章页增加上一篇下一篇功能
- Redis 存储分片之代理服务Twemproxy 测试
- NLP太难学了!?吃透NLP的方法来拿走
- c++ Primer plus 之c++学习
- 数学模型 商人过河问题 C++实现
- 三相坐标变换CLARK变换PARK变换
- 锐捷交换机VSU配置
- 怎么做自媒体,这份入门攻略,建议收藏
- REST Assured 4 - 第一个GET Request
- 紧急通知发布解决方案(互亿无线)
- constructor构造函数(React)
- 知网文献免费下载方法
- uva 1626 Brackets sequence
- 衡山 22/11/27 vue4