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 相关文章推荐
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
微信小程序实现点赞业务
Feb 10 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生成静态页面的简单示例
2014/04/17 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
JavaScript入门教程 Cookies
2009/01/31 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
jstree的简单实例
2016/12/01 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
python操作 hbase 数据的方法
2016/12/18 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
白血病捐款倡议书
2014/05/14 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
大学活动总结模板
2014/07/10 职场文书
公司证明怎么写
2014/09/22 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
教师教育教学随笔
2015/08/15 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python