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


Posted in Javascript onMay 15, 2020

uni-app实现了一套代码,同时运行到多个平台。支持iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具

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

工具安装

开发uni-app需要安装HBuilder X.下载地址。

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

下载成功后直接解压即可

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

简单的配置一下开发偏好:

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

创建第一个uni-app

点击左上角【文件】>>【新建】>>【项目】,选择uni-app模板。

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

uni-app目录结构

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

目录结构基本和小程序的目录结构相似,只是多了个基础组件的文件夹;

uni-app有自己的插件库,直接点击安装即可,而且,它也支持npm包管理,点击【工具】>> 【插件安装】即可配置

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

好了,基本的安装工作就是这么多,下面我们看一下如何调试

调试

浏览器

uni-app支持多个端同时调试,这也是它最便捷的地方,首先看一下浏览器端的调试:

调试之前我们首先要配置一下你的浏览器的安装路径,默认HBuilder是检测不到的

点击【运行】>>【运行到浏览器】>> 【配置web服务器】

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

把浏览器的安装路径粘贴在里边即可

然后就能够调试了

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

然后我们看一下真机

手机调试

以安卓手机为例,需要开启开发者模式才能进行调试,方法如下:

打开【设置】>> 【关于本机】,找到【软件版本】,连续点击五次,即可开启开发者选项

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

开发者选项的开启和关闭在【设置】 >> 【高级设置】>> 【开发者选项】,如下:

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

进入打开 【USB调试】,插上数据线连接手机,然后就能真机调试了。中途可能要进行一次授权,点击确认即可,授权成功后你的手机上会安装一个HBuilder app,你之后再开发环境中做的所有效果都会渲染到这个app中

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

点击,选择自己的手机即可调试

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

iphone手机更加简单,连接手机后直接运行,他会报错,然后在手机设置一下就行了,步骤如下:

【设置】>> 【通用】>> 【设备管理】,信任一下HBuilder即可。

小程序调试:

点击 【运行】 >> 【运行到小程序模拟器】>> 【运行设置】

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

打开后把微信开发者工具的安装路径粘贴多对应的地址栏即可

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

需要注意两点: 1)微信开发者工具必须是官方最新版。 2)微信开发者工具需要授权,方法如下:

打开微信开发者工具,点击设置图标

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

选择【安全】,服务端口选择开启

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

然后即可进行微信小程序调试

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

*百度,支付宝,字节跳动小程序步骤和微信类似

uni-app项目实战

我做了一个简单的demo,项目结构如下:

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

我把每个不同的功能分了不同的文件夹,相当于不同的层(每个文件夹里可以根据业务在进行细分),请求工具我用的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
   })
  }
 }

好了,基本的情况就是 这么多,最后是调试结果:

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

该项目代码我已经上传到了gitlab上:gitlab项目地址

好了,基本的安装和配置过程就这么多了,接下来的几个月我会继续踩坑,期待我后面的博客吧!

到此这篇关于uni-app从安装到卸载的入门教程的文章就介绍到这了,更多相关uni-app 安装内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
WEB 浏览器兼容 推荐收藏
May 14 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
table行随鼠标移动变色示例
May 07 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
layui使用label标签的方法
Sep 14 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
Vue数据双向绑定原理实例解析
May 15 #Javascript
JavaScript鼠标悬停事件用法解析
May 15 #Javascript
JavaScript enum枚举类型定义及使用方法
May 15 #Javascript
Vue如何基于es6导入外部js文件
May 15 #Javascript
JavaScript onclick事件使用方法详解
May 15 #Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 #Javascript
用Angular实现一个扫雷的游戏示例
May 15 #Javascript
You might like
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
python实现聚类算法原理
2018/02/12 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
python生成特定分布数的实例
2019/12/05 Python
python识别验证码图片实例详解
2020/02/17 Python
大数据分析用java还是Python
2020/07/06 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
大学生毕业自我鉴定范文
2013/11/03 职场文书
开业主持词
2014/03/21 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
办理房产证委托书
2014/09/18 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
员工手册编写范本
2015/05/14 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
Java Socket实现多人聊天系统
2021/07/15 Java/Android