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 Event学习第六章 事件的访问
Feb 07 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
微信小程序实现城市列表选择
Jun 05 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
js实现纯前端压缩图片
Nov 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
Discuz! Passport 通行证整合
2008/03/27 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
分享3个php获取日历的函数
2015/09/25 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
Python实现抓取网页并且解析的实例
2014/09/20 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
Django values()和value_list()的使用
2020/03/31 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
python爬虫请求头的使用
2020/12/01 Python
公司法人授权委托书范本
2014/09/12 职场文书
团结主题班会
2015/08/13 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python