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 安装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • uni-app微信小程序登录并使用vuex存储登录状态的思路详解

    微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的

  • uni-app 组件里面获取元素宽高的实现

    遇到的问题:直接在组件的mounted里面创建选择器,获取元素的宽高,即使扔到定时器里面执行,还是偶尔会有获取不到的情况 解决办法: // 写法一: getDescBox() { uni.createSelectorQuery().in(this).select('.top .desc').boundingClientRect(result => { if (result) { console.log('==========',result) }else { this.getDescBox();

  • uni-app实现点赞评论功能

    模拟朋友圈实时点赞及评论功能 点赞思路:点击的时候,使用push(点赞)以及slice(取消赞)方法处理数组,并且调用点赞接口 评论思路:点击的时候,写多一个评论列表,当点击发送的时候commentStatus=true,且索引等于点击的索引.同时调用获取评论列表的接口 html <view class="toolbar"> <view class="timestamp">{{item.timetype}}</view> <

  • 十步搞定uni-app使用字体图标的方法

    uni-app简介 uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台.   uni-app框架由Dcloud即数字天堂(北京)网络技术有限公司推出,该公司主要产品有Web开发IDE Hbuiler.HbuilderX,前端框架mui.uni-app,增强版的手机浏览器引擎H5plus等. uni-app中使用字体图标图标的下载 首先去阿里图标库选择要用的图标,并且打包下载下来,步骤如下 1. 2. 3. 4.

  • uni-app之APP和小程序微信授权方法

    uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 适用平台:Android.iOS.微信小程序.实现了一套代码,同时发布到Android.iOS.微信小程序. 参考官方:https://uniapp.dcloud.io/ APP微信授权 检测服务商 检测手机上是否安装微信.QQ.新浪微博等. uni.getProvider({ service: 'oauth', success: function (res) { console.log(res.prov

  • 基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能

    一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.App端) 且兼容效果一致. 二.效果预览 在H5.小程序.App端测试效果如下:(后续大图均为APP端) 三.使用技术 编码器+技术:HBuilderX + vue/NVue/uniapp/vuex iconfont图标:阿里字体图标库 自定义导航栏 + 底部Tabbar 弹窗组件:uniPop(un

  • 详解vue或uni-app的跨域问题解决方案

    常见解决方案有两种 服务器端解决方案 服务器告诉浏览器:你允许我跨域 具体如何告诉浏览器,请看: // 告诉浏览器,只允许 http://bb.aaa.com:9000 这个源请求服务器 $response->header('Access-Control-Allow-Origin', 'http://bb.aaa.com:9000'); // 告诉浏览器,请求头里只允许有这些内容 $response->header('Access-Control-Allow-Headers', 'Author

  • uni-app从安装到卸载的入门教程

    uni-app实现了一套代码,同时运行到多个平台.支持iOS模拟器.Android模拟器.H5.微信开发者工具.支付宝小程序Studio.百度开发者工具.字节跳动开发者工具 工具安装 开发uni-app需要安装HBuilder X.下载地址. 下载成功后直接解压即可 简单的配置一下开发偏好: 创建第一个uni-app 点击左上角[文件]>>[新建]>>[项目],选择uni-app模板. uni-app目录结构 目录结构基本和小程序的目录结构相似,只是多了个基础组件的文件夹: uni

  • Android在一个app中安装并卸载另一个app的示例代码

    Android在一个app中安装并卸载另一个app 1.在app→src→main下新建文件夹asserts,将准备安装的apk文件放在asserts内 2.在app→src→main→res下新建文件夹xml,右击xml文件夹,选择new→XML Resource File,File name为文件名,可随意,本文中为filepaths:Root element为资源类型,输入paths,确定并编辑以下代码: <?xml version="1.0" encoding="

  • Docker安装和简单使用入门教程

    安装 由于我本人使用的linux系统,原生支持docker,相对安装还是比较简单的 1:使用下面的官方脚本安装: wget -qO- https://get.docker.com/ | sh 2:输入下面的命令验证是否可以查看版本号,可以就是安装成功 sudo docker version 3:建议把当前使用的用户加到Docker用户组,就可以不用很次都sudo了 sudo usermod -aG docker your_username 4:重新登录,sudo权限才会成效 logout 至此,

  • vue3.0 CLI - 1 - npm 安装与初始化的入门教程

    node 开发环境请先自行准备 npm install -g @vue/cli 安装完成之后命令行则存在 vue 命令 vue -V 查看本地 vue 版本 vue -h 输出帮助 vue create <project-name> 进入工程文件夹,创建项目. 如:cd studyVue ( 进入工程文件夹 ) vue create config ( 创建 config 项目 ) 选择 default 配置项,下面没什么可介绍的,自行尝试. 下面介绍选择 manually select fea

  • MinGW-w64 C/C++编译器下载和安装的方法步骤(入门教程)

    MinGW-w64 C/C++编译器下载和安装的方法步骤(入门教程)

    目录 1.安装包下载 2.环境变量配置 3.小试牛刀 如果电脑没有安装MinGW-w64 C/C++编译器,在Windows的命令窗口键入gcc会提示 “"gcc"不是内部或外部命令,也不是可运行的程序或批处理文件”. 1.安装包下载 方法一:下载Installer在线安装(费时) 第一步:点击此链接:http://www.mingw-w64.org/doku.php,然后依次进行图1.图2.图3和图4操作,以完成mingw-w64-install.exe下载. 图1 图2 图3 图4

  • MySql安装与卸载的详细教程

    本文为大家分享了MySql安装与卸载的教程,供大家参考,具体内容如下 一.MYSQL的安装 1.打开下载的mysql安装文件,双击运行mysql-5.5.40-win32.msi. 2.选择安装类型,有"Typical(默认)"."Complete(完全)"."Custom(用户自定义)"三个选项,选择"Custom",按"next"键继续. 3.在"Developer Components(开发

  • Oracle 11g数据库安装与卸载的方法图解

    Oracle 11g数据库安装与卸载的方法图解

    一.Oracle 11g安装 安装之前要先确定自己的电脑配置,以windows为例,如果是win7以下系统如xp等,可以选择Oracle 10g.因为10g的程序文件只有200多兆,而11g及达到了2G,具体文件官方下载路径已经找不到了,只能去一些软件下载平台下载.如果是win7最好采用11g,否则很可能10g出现不兼容安装不成功的情况,本文以win7为例. Oracle 11g官方下载地址如下: http://www.oracle.com/technetwork/database/enterp

  • docker-compose教程之安装使用和快速入门

    教程基于ubuntu下最新的compose版本3 参考: https://docs.docker.com/compose/overview/ 1.Compose介绍 Docker Compose是一个用来定义和运行复杂应用的Docker工具.一个使用Docker容器的应用,通常由多个容器组成.使用Docker Compose不再需要使用shell脚本来启动容器. Compose 通过一个配置文件来管理多个Docker容器,在配置文件中,所有的容器通过services来定义,然后使用docker-

  • android实现静默安装与卸载的方法

    本文实例讲述了android实现静默安装与卸载的方法.分享给大家供大家参考.具体如下: 方法1:[使用调用接口方法,由于安装卸载应用程序的部分API是隐藏的,所以必须下载Android系统源码,在源码下开发并编译之后使用MM命令编译生成APK文件] import java.io.File; import android.app.Activity; import android.os.Bundle; import android.content.Intent; import android.con

  • Android实现用代码简单安装和卸载APK的方法

    本文实例讲述了Android实现用代码简单安装和卸载APK的方法.分享给大家供大家参考,具体如下: public class TestInstallAPK extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); // this.unInstallFi

随机推荐