uni-app从安装到卸载的入门教程
uni-app实现了一套代码，同时运行到多个平台。支持iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具
工具安装
开发uni-app需要安装HBuilder X.下载地址。
下载成功后直接解压即可
简单的配置一下开发偏好：
创建第一个uni-app
点击左上角【文件】>>【新建】>>【项目】，选择uni-app模板。
uni-app目录结构
目录结构基本和小程序的目录结构相似，只是多了个基础组件的文件夹；
uni-app有自己的插件库，直接点击安装即可，而且，它也支持npm包管理，点击【工具】>> 【插件安装】即可配置
好了，基本的安装工作就是这么多，下面我们看一下如何调试
调试
浏览器
uni-app支持多个端同时调试，这也是它最便捷的地方，首先看一下浏览器端的调试：
调试之前我们首先要配置一下你的浏览器的安装路径，默认HBuilder是检测不到的
点击【运行】>>【运行到浏览器】>> 【配置web服务器】
把浏览器的安装路径粘贴在里边即可
然后就能够调试了
然后我们看一下真机
手机调试
以安卓手机为例，需要开启开发者模式才能进行调试，方法如下：
打开【设置】>> 【关于本机】，找到【软件版本】，连续点击五次，即可开启开发者选项
开发者选项的开启和关闭在【设置】 >> 【高级设置】>> 【开发者选项】，如下：
进入打开 【USB调试】，插上数据线连接手机，然后就能真机调试了。中途可能要进行一次授权，点击确认即可，授权成功后你的手机上会安装一个HBuilder app，你之后再开发环境中做的所有效果都会渲染到这个app中
点击，选择自己的手机即可调试
iphone手机更加简单，连接手机后直接运行，他会报错，然后在手机设置一下就行了，步骤如下：
【设置】>> 【通用】>> 【设备管理】,信任一下HBuilder即可。
小程序调试：
点击 【运行】 >> 【运行到小程序模拟器】>> 【运行设置】
打开后把微信开发者工具的安装路径粘贴多对应的地址栏即可
需要注意两点： 1）微信开发者工具必须是官方最新版。 2）微信开发者工具需要授权，方法如下：
打开微信开发者工具，点击设置图标
选择【安全】，服务端口选择开启
然后即可进行微信小程序调试
*百度，支付宝，字节跳动小程序步骤和微信类似
uni-app项目实战
我做了一个简单的demo，项目结构如下：
我把每个不同的功能分了不同的文件夹，相当于不同的层（每个文件夹里可以根据业务在进行细分）,请求工具我用的uni-app官方的api（uni.request），在此基础上我进行了简单的二次封装，代码如下：
// uni-app请求封装
export default class Request {
http (router,data={},method) {
// 基础地址
let path = 'http://mock.allhome.com.cn/mock/5c91b03a2add03001024c420/uni';
// 返回promise
return new Promise((resolve,reject) => {
// 请求
uni.request({
url: `${path}${router}`,
data: data,
method:method,
success: (res) => {
// 将结果抛出
resolve(res.data)
}
})
})
}
}
这个类接受三个参数，第一个是后端的路由地址，第二个是需要给后端传的实体，第三个是请求方法，该类返回一个Promise，请求成功后将结果抛出，最后在api.js文件中引用并实例化，代码如下：
import Request from '../static/js/request.js';
let request = new Request().http
export default {
getJobList: function () {
return request('/jobList',{},'GET')
}
}
然后就可以在组件里取结果了，代码如下：
import api from '../../api/api.js';
export default {
data() {
return {
listArr: []
}
},
onLoad() {
// 请求职位列表
api.getJobList().then(res => {
this.listArr = res.data
})
}
}
好了，基本的情况就是 这么多，最后是调试结果：
该项目代码我已经上传到了gitlab上：gitlab项目地址
好了，基本的安装和配置过程就这么多了，接下来的几个月我会继续踩坑，期待我后面的博客吧！
到此这篇关于uni-app从安装到卸载的入门教程的文章就介绍到这了,更多相关uni-app 安装内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！
相关文章
- 编译安装非常的简单了我们现在的php版本已经到了php7了，下文小编来为各位介绍一篇关于PHP7快速编译安装的步骤，希望文章能够帮助到各位。 一、安装必要一些依赖 yum...2016-11-25
- 这篇文章主要介绍了Rstudio中安装package出现的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06
- PHP-FPM我们相信各位用高版本的php经常使用到了，下面整理了一些关于PHP-FPM的笔记，有兴趣的可进来看看。 今天赶上了123System OPenVZ VPS全场半价的机会，购入了一...2016-11-25
安装和使用percona-toolkit来辅助操作MySQL的基本教程
一、percona-toolkit简介 percona-toolkit是一组高级命令行工具的集合，用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务，这些任务包括： 检查master和slave数据的一致性 有效地对记录进行归档 查找重复的索...2015-11-24Linux安装Pytorch1.8GPU(CUDA11.1)的实现
这篇文章主要介绍了Linux安装Pytorch1.8GPU(CUDA11.1)的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-25- 这篇文章主要介绍了vscode安装git及项目开发过程,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-05-19
- 这篇文章主要为大家详细介绍了Visual Studio 2015下载和安装图文教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-22
- 现在我们介绍一种在Node下检查简单错误的JS代码验证工具JSHint。 JSHint的具体介绍参考http://www.jshint.com/about/，说直白点儿，JSHint就是一个检查JS代码规范与否的工具，它可以用来检查任何（包括server端和client端...2014-05-31
Centos中彻底删除Mysql（rpm、yum安装的情况）
我用的centos6，mysql让我整出了各种问题，我想重装一个全新的mysql，yum remove mysql-server mysql之后再install并不能得到一个干净的mysql，原来的/etc/my.cnf依然没变，datadir里面的数据已没有任何变化，手动删除/etc/my.cn...2015-03-15- 这篇文章主要介绍了VSCode 配置uni-app的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
Ubuntu20.04安装cuda10.1的步骤(图文教程)
这篇文章主要介绍了Ubuntu20.04安装cuda10.1的步骤(图文教程)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-30- 这篇文章主要介绍了在PyCharm中安装PaddlePaddle的方法,本文给大家介绍的非常想详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-05
Postman安装与使用详细教程 附postman离线安装包
这篇文章主要介绍了Postman安装与使用详细教程 附postman离线安装包,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-03-05- 这篇文章主要介绍了linux服务器快速卸载安装node环境(简单上手)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-22
- 这篇文章主要介绍了vs2019安装和使用详细图文教程，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了uni-app从安装到卸载的入门教程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-15
- 这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
- 一、准备编译环境，安装所需依赖包yum groupinstall 'Development' -y yum install openssl openssl-devel zlib zlib-devel -y yum install readline-devel pcre-devel ncurses-devel bison-devel cmake -y二、编译安...2015-10-21
tomcat9 下载安装和配置+整合到eclipse的教程详解
这篇文章主要介绍了tomcat9 下载安装和配置+整合到eclipse,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-07-28- 本教程共分八篇：系统安装与设置篇、软件安装与设置篇、文件及文件夹权限篇、系统服务篇、安全策略篇、系统组件篇、注册表篇、软件安全篇。本篇讨论的是第二篇软件安装与设置篇的第七部分：安装软件之PHP 5 安装图解。 ...2016-01-27