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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
Javascript MD4
Dec 20 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
vue-router单页面路由
Jun 17 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
详解package.json版本号规则
Aug 01 Javascript
vue实现弹幕功能
Oct 25 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 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
建立文件交换功能的脚本(一)
2006/10/09 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
JS 对象介绍
2010/01/20 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
Python实现八大排序算法
2016/08/13 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
pytorch中图像的数据格式实例
2020/02/11 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
Python 如何展开嵌套的序列
2020/08/01 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
大学生四个方面的自我评价
2013/09/19 职场文书
法定代表人授权委托书
2014/04/04 职场文书
抽样调查项目计划书
2014/04/24 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
员工工作能力评语
2014/12/31 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
会计做账心得体会
2016/01/22 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
Python实现天气查询软件
2021/06/07 Python
15个值得收藏的JavaScript函数
2021/09/15 Javascript
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript