uni-app下载和使用
是什么?
uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可以发布到ios,Android,web,以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手),快手多个平台
uni-app是一个框架,跟WePy一样,都是一个框架,区别就是WePy只支持微信小程序使用
为什么使用Uni-app?
uni-app在开发者数量,案例,跨端抹平父,扩展灵活性,性能体验,周边生态,学习成本,开发成本等八大关键指标上拥有很强的优势
最关键的就是一套代码,可以运行到多个平台
我们可以使用vue的代码进行编写,但是可以运行到我们的微信小程序中
下载
使用有两种方式,可以通过可视化界面,也可以使用命令行的形式
1,通过HBuilderX可视化界面
首先,我们需要下载安装HBuilderX:官方IDE下载地址
必须下载官方推荐的安装工具
HBuilderX是通用的前端开发工具,但为uni-app做了特别强化
创建uni-app
在点击工具栏里的文件-->新建-->项目(快捷键 Ctrl+N)
如上所示,我们选择基础的模板即可,也可以选择vue的版本
运行uni-app
在微信开发者工具里进行运行,进入我们的项目,点击工具栏的运行-->运行到小程序模拟器-->微信开发者工具即可
注意:如果是第一次进行使用,我们还需要首先去配置一下微信开发者工具的一个路径,才能运行成功
我们开始运行的时候,会有一个报错信息,如下所示
解决办法:
找到微信开发者工具,找到工具栏中的设置按钮,选择安全设置
然后把服务端口打开
最后,我们执行就不会有问题了
2,通过vue-cli命令行
环境安装
全局安装vue-cli
npm install -g @vue/cli
创建uni-app
使用正式版(对应HBuilderX最新正式版)
vue create -p dcloudio/uni-preset-vue my-project
运行
%PLATFORM% 可取值如下
值 |
平台 |
app-plus |
app平台生成打包资源(支持npm run build:app-plus,可用于持续集成。不支持run,运行调试仍需在HBuilderX中操作) |
h5 |
H5 |
mp-alipay |
支付宝小程序 |
mp-baidu |
百度小程序 |
mp-weixin |
微信小程序 |
mp-toutiao |
字节跳动小程序 |
mp-lark |
飞书小程序 |
mp-qq |
qq 小程序 |
mp-360 |
360 小程序 |
mp-kuaishou |
快手小程序 |
mp-jd |
京东小程序 |
mp-xhs |
小红书小程序 |
quickapp-webview |
快应用(webview) |
quickapp-webview-union |
快应用联盟 |
quickapp-webview-huawei |
快应用华为 |
npm run dev:%PLATFORM%
npm run build:%PLATFORM%
以上是uni-app的两种使用方式
分析总结
为什么使用HBuilderX能在微信开发者工具中执行
当我们运行在微信开发者工具之后,他会新增一个文件夹,如下
最底下有一个mp-weixin文件夹,这跟我们使用命令运行在微信开发者工具的命令一样,所以我们可以运行在我们微信开发者工具中
我们不需要关注我们微信开发者工具中的代码,我们只需要在HBuilderX中的代码即可
uni-app下载和使用相关推荐
- uni app中使用图表
关于在uni app中运用图表 今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
- HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
- uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验 项目创建及微信小程序AppId的申请 本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
- uni app 手机端导航栏自定义
uni app 手机端导航栏自定义 第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...
- uni app使用雷电模拟器进行真机调试
之前我用uni app真机调试时都是连接的自己的手机,每次都插根数据线,感觉不是很喜欢.今天又用真机调试想起来手机模拟器,就下了一个雷电.然后把配置真机调试的步骤分享出来吧. 一.安装手机模拟器 在这 ...
- uniapp开发app下载模板功能
业务需求是移动端提交各种申请时,需要下载提供的指定的模板进行,在进行提交. 但是当打包成app后,执行uni.downloadFile下载不是很好找到对应的下载文件,根据网上的说法,进行了另一种下载. ...
- vant 验证手机号_【uni app】vant weapp的引入和部分详细调用(表单输入框、验证码、弹出层搭配选择器、地图)...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下 引入 在github(https://github.com/youzan/vant-wea ...
- pythonapp下载-python编程狮app下载
Python编程狮app下载,这是一款全球通用的编程技术学习平台,让你从零基础到入门,更好实现学习和提升,后续办公更加的便捷,也是适合更多人使用的编程方法,赶紧来开启你的学习吧. Python编程狮a ...
- itunes app 下载链接的几种表现形式
第一种:itunes://itunes.apple.com/cn/app/id794862904 ,这是最普通的一种. 直接在浏览器中输入.就能够打开电脑上安装的itunes,并跳转到相应的app下载 ...
- 百斗度输入法linux,斗字输入法安卓版-斗字输入法app下载-最火软件站
斗字输入法安卓版是一款非常优质的手机输入法软件,用户不但可以通过这款软件来获取各种各样的文案发到自己的朋友圈,在聊天的时候还有很多有趣的快捷短语可以一键输入,省去自己打字的时间,想要连发的时候只需要一 ...
最新文章
- Gloomy对Windows内核的分析
- Cookie,Session,Token
- python八大选择排序_python之八大排序方法
- GIS工具篇(二):GIS最全数据下载指南
- python中正则表达式的默认匹配方式为_Python模式匹配与正则表达式
- 搭建属于自己的私有链,部署简单的智能合约
- 简单模拟QQ界面框架。
- ROS 5.12 上自动更新3322.org动态域名
- 大数据预测分析是否对企业有影响
- Matlab R2009b 版 license 到期问题
- 中国分布式光纤传感(DFOS)行业竞争现状与未来趋势预测报告2022-2027
- iPhone 各屏幕尺寸及解析
- 《Bible》各版本
- 判断字符串是否为null、是否为空
- cad2020打印样式放在哪个文件夹_压箱底!这些CAD打印设置技巧只能从老师傅身上学到...
- 让人糊里糊涂的HTTP、TCP、UDP、Socket
- 时空数据生成对抗网络研究综述(下)
- 修改360浏览器模式为极速模式
- Dubbo源码分析(一):Dubbo源码的结构概述
- some 和 every的区别和用法
热门文章
- WeGeek Talk | 美团外卖
- win7访问XP或者2003共享,提示密码错误的解决办法
- 离散型制造业数字化转型难点与转型方向
- 【Akka】Akka 学习 akka 两本书的读后感
- RabbitMQ第五个实操小案例——主题交换机(TopicExchange)
- 浙江海盐已经试行“核供暖”,南方到底该不该供暖?南方人顶起~
- 089day(JAVA变量输入输出,类型转换,运算符的练习和概念的内涵和外延)
- 华为过程可信cib是指_华为EMUI10取消IMEI?数字联盟可信ID——更可靠的移动设备唯一标识...
- 沐神点赞!同济子豪兄精读AI经典论文,包括图像分类、目标检测、生成对抗网络、轻量化卷积神经网络等领域...
- 关于碰到优盘插入电脑检测到病毒并且优盘里文件只显示System Volume Information文件夹的问题解决。