万能前端框架uni app初探01（搭建开发环境）
前言： 【万能前端框架uni app初探01（搭建开发环境）】从本节开始，我来带领大家学习uni app,这是一款逆天的前端框架，基于vue.js，同一套代码，可发布到iOS、Android、H5、以及各种小程序等多个平台，本节，我们部署在微信小程序和Android上面，体验下这款强大的前端框架。
一、基础知识
1.uni app简介
?uni-app? 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
?uni-app?在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。
文章图片
2.安装HBuilder X工具
下载HBuilder X工具，地址：https://www.dcloud.io/hbuilderx.html
文章图片
本文使用的是开发版本。
二、搭建步骤
1.创建项目
点击文件 -> 新建 -> 项目：
文章图片
选择uni-app，并且模板选择uni-ui项目，然后点击创建
文章图片
2.运行到Web端
运行到浏览器
文章图片
浏览器效果如下
文章图片
文章图片
3.运行到Android
首先需要打开手机开发者选项，并且开启USB调试
文章图片
点击运行->运行到手机或模拟器，选择连接到的手机设备
文章图片
编译安装过程如下
文章图片
手机状态如下：
文章图片
安装后界面如下：
文章图片
4.运行到微信小程序
点击运行->运行小程序模拟器
文章图片
指定微信开发者工具路径
文章图片
出现错误，按照提示应该打开微信开发者工具，进行配置即可
文章图片
点击微信IDE菜单栏下安全设置
文章图片
开启服务端口
文章图片
重新运行，可以看到小程序端已经正式运行起来了
文章图片
三、结语 如您在使用过程中有任何问题，请加QQ群进一步交流。
QQ交流群：906015840 (备注：物联网项目交流)
资料获取：关注下方公众号，回复risc-v即可
一叶孤沙出品：一沙一世界，一叶一菩提
文章图片
推荐阅读
- android第三方框架（五）ButterKnife
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- Jsr303做前端数据校验
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 前端代码|前端代码 返回顶部 backToTop
- Spring|Spring 框架之 AOP 原理剖析已经出炉！！！预定的童鞋可以识别下发二维码去看了
- 构建App（一）（框架与结构）
- laravel框架泛解
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 前端自学笔记01