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实现读取txt文档的脚本
Jul 20 Javascript
jQuery 技巧小结
Apr 02 Javascript
详解JS函数重载
Dec 04 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
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 购物车的例子
2009/05/04 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
jQuery前台数据获取实现代码
2011/03/16 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
python字符串对其居中显示的方法
2015/07/11 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
大学毕业生通用自荐信范文
2013/10/31 职场文书
小学校本培训方案
2014/06/06 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
师德师风个人总结
2015/02/06 职场文书
语文教师求职信范文
2015/03/20 职场文书
党员转正党支部意见
2015/06/02 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL