uni-app—从安装到卸载
uni-app实现了一套代码,同时运行到多个平台。支持iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具
工具安装
开发uni-app需要安装HBuilder X.下载地址。
下载成功后直接解压即可
简单的配置一下开发偏好:
创建第一个uni-app
点击左上角【文件】>>【新建】>>【项目】,选择uni-app模板。
uni-app目录结构
目录结构基本和小程序的目录结构相似,只是多了个基础组件的文件夹;
uni-app有自己的插件库,直接点击安装即可,而且,它也支持npm包管理,点击【工具】>> 【插件安装】即可配置
好了,基本的安装工作就是这么多,下面我们看一下如何调试
调试
浏览器
uni-app支持多个端同时调试,这也是它最便捷的地方,首先看一下浏览器端的调试:
调试之前我们首先要配置一下你的浏览器的安装路径,默认HBuilder是检测不到的
点击【运行】>>【运行到浏览器】>> 【配置web服务器】
把浏览器的安装路径粘贴在里边即可
然后就能够调试了
然后我们看一下真机
手机调试
以安卓手机为例,需要开启开发者模式才能进行调试,方法如下:
打开【设置】>> 【关于本机】,找到【软件版本】,连续点击五次,即可开启开发者选项
开发者选项的开启和关闭在【设置】 >> 【高级设置】>> 【开发者选项】,如下:
进入打开 【USB调试】,插上数据线连接手机,然后就能真机调试了。中途可能要进行一次授权,点击确认即可,授权成功后你的手机上会安装一个HBuilder app,你之后再开发环境中做的所有效果都会渲染到这个app中
点击,选择自己的手机即可调试
iphone手机更加简单,连接手机后直接运行,他会报错,然后在手机设置一下就行了,步骤如下:
【设置】>> 【通用】>> 【设备管理】,信任一下HBuilder即可。
小程序调试:
点击 【运行】 >> 【运行到小程序模拟器】>> 【运行设置】
打开后把微信开发者工具的安装路径粘贴多对应的地址栏即可
需要注意两点: 1)微信开发者工具必须是官方最新版。 2)微信开发者工具需要授权,方法如下:
打开微信开发者工具,点击设置图标
选择【安全】,服务端口选择开启
然后即可进行微信小程序调试
*百度,支付宝,字节跳动小程序步骤和微信类似
uni-app项目实战
我做了一个简单的demo,项目结构如下:
我把每个不同的功能分了不同的文件夹,相当于不同的层(每个文件夹里可以根据业务在进行细分),请求工具我用的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';// 返回promisereturn 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().httpexport 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})}}
好了,基本的情况就是 这么多,最后是调试结果:
该项目代码我已经上传到了gitlab上:gitlab项目地址
好了,基本的安装和配置过程就这么多了,接下来的几个月我会继续踩坑,期待我后面的博客吧!
原文地址:https://www.cnblogs.com/qisi007/p/10489176.html
转载于:https://www.cnblogs.com/best-coder/p/11550390.html
uni-app—从安装到卸载相关推荐
- android 代码 卸载app,Android在一个app中安装并卸载另一个app的示例代码
Android在一个app中安装并卸载另一个app 1.在app→src→main下新建文件夹asserts,将准备安装的apk文件放在asserts内 2.在app→src→main→res下新建文 ...
- 通过ADB命令实现App的安装、卸载、覆盖
在Android设备的调试中,总会对现有的Android版本的APK进行安装.卸载.覆盖当前App,尤其是大屏设备的时候,用命令行去操作更为简洁方便. 连接Android设备 adb connect ...
- 使用AccessibilityService实现APP的自动安装与卸载
使用AccessibilityService实现APP的自动安装与卸载 作者: 蒋东国 时间: 2016年12月6日 星期二 应用来源: hqt APP(测试机型:三星 Note4) 博客地址: ...
- gifrecord可以卸载吗_频繁的安装和卸载app会不会伤害苹果手机?
逼乎上看到一个xx的回答,转一下 作者:齐枫 问:频繁的安装和卸载app会不会伤害苹果手机?答:你好,会的知道为什么卸载APP的时候,所有APP图标都会一起抖动吗?除了被删的那个,其他的都被吓得瑟瑟发 ...
- APP静默安装卸载管理器实现与上架到应用宝和豌豆荚
APP静默安装卸载管理器是本花了两天时间开发的第一个上架到应用宝和豌豆荚Android App 程序, 并集成了豌豆荚广告SDK, 腾讯广告SDK还在审批中.APP静默安装卸载管理器主要包含如下功能 ...
- APP安装与卸载测试点
一.安装与卸载测试 安装测试点: 软件安装后是否能正常运行,安装目录和文件是否正常建立. App的版本覆盖测试(v1.0>v2.0)和版本回退测试(v2.0>1.0). 安装过程中取消,下 ...
- APP的安装卸载测试
学习的时候,看到某位大神写的,觉得总结的很好的,有心学习的可以看一下的哦 APP的安装卸载测试 安装 1)软件在不同操作系统(Palm OS.Symbian.Linux.Android.iOS.Bla ...
- App安全测试-软件权限/安装与卸载安全性
APP的安全测试点 -----------转摘某位大神,看过之后,觉得比一些介绍APP测试的书籍都要写的好,若是测试APP完全可以参考,并结合自己的工作,看是否有漏测或者自己工作需要改进的地方 软件权 ...
- MATLAB Appdesigner开发独立桌面App用户如何安装与卸载
利用MATLAB Appdesigner开发独立桌面App发给用户后,用户如何安装与卸载? 1.解压,将app压缩包解压后如下图所示 2.进入for_redistribution文件夹,点击MyApp ...
- android app的安装和android app的卸载
背景Android应用安装涉及到如下几个目录 1.system/app 系统自带的应用程序,无法删除. 2.data/app 用户程序安装的目录,有删除权限.安装时把apk文件复制到此目录. data ...
最新文章
- 《强化学习周刊》第19期:ICCV-2021强化学习的最新研究与应用
- 论信息系统的项目范围管理
- Face Alignment at 3000 FPS via Regressing Local Binary Features(CVPR2014)读后感(first pass)
- 11月29号例会记录
- Python 计算机视觉(十四)—— OpenCV 进行霍夫变换
- MyBatis创建SqlSession-有没有更好的拿到SqlSessionTemplate 的方法?
- Java常用API例子_Java常用API及Math类
- uva 1615——Highway
- 小白创建网站的曲折之路
- 什么都不懂的学java难不难_零基础转行学java到底难不难
- MongoDB学习笔记~官方驱动的原生Curd操作
- windows + hadoop + eclipse 过程记录
- 中学计算机教室怎么布置,初中功能教室设置标准及数量
- 网站建设php的心得和体会,网页设计心得体会
- PAT (Basic Level) 1045 柳婼、旭神两大思路分析【测试点】样例
- PHP从入门到能用(十)创建新闻网站数据库
- Google浏览器更改默认路径为D盘路径
- 关于 负反馈放大电路,你需要了解这些
- Android动画内置插值器
- 谈谈基于深度相机的三维重建
热门文章
- 联想记忆计算机网络,什么是双向联想记忆神经网络
- linux 查看zookeepr所在路径,Linux系统:Centos7下搭建ZooKeeper3.4中间件,常用命令总结...
- php 自动验证类,Thinkphp实现自动验证和自动完成
- 【牛客 - 157D】插排树(dfs,树形dp)
- Python求一个整数位数的方法
- 【蓝桥杯官网试题 - 基础练习】 矩形面积交 (几何)
- 【hihocoder - offer编程练习赛60 A】hohahola(贪心,二分)
- 数论中的无数公式 总结
- 【bzoj 1754】【POJ - 2389 】Bull Math (高精度运算)
- 百度顶会论文复现(1):课程概述