万能前端框架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即可

一叶孤沙出品:一沙一世界,一叶一菩提
在这里插入图片描述

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值