uni-app 框架的使用
简介
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
官方网站：https://uniapp.dcloud.io/
开始使用
开发工具
推荐使用 HBuilderX
优点：
- HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。能直接创建uni-app项目。
- 专为vue打造，提供比其他工具更优秀的vue支持，大幅提升vue开发效率
- 自动安装项目所需插件
安装插件
sass / scss 编译，less 编译，uni-app 编译
创建项目
点击 文件 --> 点击 新建 --> 点击 1.项目 --> 输入项目名称 --> 选择模板 --> 点击创建
项目目录
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录，详见
├─platforms 存放各平台专用页面的目录，详见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录，详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见
页面配置
全局配置
"globalStyle": {"navigationBarTextStyle": "black", //导航栏标题颜色"navigationBarTitleText": "app", //导航栏标题文字"navigationBarBackgroundColor": "#F8F8F8", //导航栏背景颜色"backgroundColor": "#F8F8F8", //下拉窗口背景颜色"backgroundTextStyle":light, //下拉 loading 的样式"enablePullDownRefresh":true, //开启下拉刷新"onReachBottomDistance":60,//页面上拉触发距页面底部距离为60"usingComponents":{"collapse-tree-item":"/components/collapse-tree-item"},//引用小程序组件"pageOrientation": "auto"//支持屏幕旋转
},页面配置
{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首页", //设置页面标题文字"disableScroll": true, //设置为true则页面整体不能上下滚动"enablePullDownRefresh":true, //开启下拉刷新"navigationBarShadow": { "colorType": "green"},//导航栏阴影}},...]
}tabbar
"tabBar": {"list": [{"text":"首页","pagePath": "pages/home/home","iconPath": "static/icon/home.png","selectedIconPath":"static/icon/home-active.png"},{"text":"资讯","pagePath": "pages/new/new","iconPath": "static/icon/news.png","selectedIconPath":"static/icon/news-active.png"}],"color":"#dadadb","selectedColor":"#d81e06"}常用api
uni.navigateTo(OBJECT)
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({url: 'test?id=1&name=uniapp'
});
uni.switchTab(OBJECT)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.switchTab({url: '/pages/index/index'
});
uni.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
uni.setStorage({key: 'storage_key',data: 'hello',success: function () {console.log('success');}
});
uni.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
const value = uni.getStorageSync('storage_key');if (value) {console.log(value);}
uni.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。
uni.chooseImage({count: 6, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: function (res) {console.log(JSON.stringify(res.tempFilePaths));}
});
uni.previewImage(OBJECT)
预览图片。
// 预览图片previewImg(current) {uni.previewImage({urls: [current], // 需要预览的图片链接列表 current // current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张})},
uni.showToast(OBJECT)
显示消息提示框。
uni.showToast({title: '标题',duration: 2000
});
uni.showLoading(OBJECT)
显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。
uni.showLoading({title: '加载中'
});
uni.showModal(OBJECT)
显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。
uni.showModal({title: '提示',content: '这是一个模态弹窗',success: function (res) {if (res.confirm) {console.log('用户点击确定');} else if (res.cancel) {console.log('用户点击取消');}}
});
组件库uni-ui
下载地址：https://ext.dcloud.net.cn/plugin?id=55
代码示例地址 ：https://ext.dcloud.net.cn/plugin?id=4941
组件演示地址：https://hellouniapp.dcloud.net.cn
组件文档地址：https://uniapp.dcloud.io/component/uniui/uni-ui
推荐使用HBuilder X直接创建uni-ui项目
uni-app 框架的使用相关推荐
- 切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言 本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
- HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
- 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 ...
- 使用cordova + vue搭建混合app框架
1. 前言:在进行hybrid app开发时,可以采用vue.js前端框架进行h5页面开发,然后使用跨平台cordova工具打包成app,如android或ios等,再h5页面也可以使用cordova ...
- 简易集成的MVP模块化App框架（1/3）
前言 一直想整理一个自己app框架,现在刚好不是很忙就整理一下,尚不成熟还有待改进 大纲 1.整体结构:MVP模式+模块化 2.网络框架:Retrofit+Rxjava 3.屏幕适配方案:头条的And ...
- uni App+H5 实现人脸识别
uni App+H5 实现人脸识别 通过h5的视频video管理设备摄像头(不要关),在打开视频摄像时快照截取人脸照片传送到后台通过API接口调用百度人脸识别结果并通过返回数据解析自己业务需求. 1. ...
最新文章
- Nginx与PHP（FastCGI）的安装、配置、优化
- 计算机组成原理 — FPGA 现场可编程门阵列
- ArrayAdapter的使用
- 通过LDAP验证Active Directory服务
- Unity3damp;amp;C#分布式游戏服务器ET框架介绍-组件式设计
- kotlin 判断数字_Kotlin程序检查给定数字是正数，负数还是零
- （转）SpringMVC学习(八)——SpringMVC中的异常处理器
- java实现kmp_java 实现KMP算法
- tomcat的localhost_access_log日志文件
- postman访问abp接口因cookies问题导致400错误
- SQL Cookbook（读书笔记）No.2
- 1055 集体照 (25 分)
- 【测试开发】Python—zipfile库文件压缩封装
- nps+Proxifier搭建socks5代理隧道进行内网穿透
- “奇点”临近：2045，人类永生
- php curl couldnt connect to host,linux curl命令:curl: (7) couldn't connect to host ？
- 股市逃顶的技巧和方法
- Eclipse安装插件的方法
- python如何逐行读取文件_Python逐行读取文件中内容的简单方法
- 苹果ll是什么版本_新的iPad Pro和旧版本有什么区别？苹果背后的策略是什么？...