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(quest),在此基础上我进⾏了简单的⼆次封装,代码如下:
// uni-app请求封装
export default class Request {
http (router,data={},method) {
// 基础地址
let path = 'mock.allhome/mock/5c91b03a2add03001024c420/uni';
// 返回promise
return new Promise((resolve,reject) => {
// 请求
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() {
// 请求职位列表
this.listArr = res.data
})
}
}
好了,基本的情况就是这么多,最后是调试结果:
该项⽬代码我已经上传到了gitlab上:(内含uni-app/ts框架)
好了,基本的安装和配置过程就这么多了,接下来的⼏个⽉我会继续踩坑,期待我后⾯的博客吧!
更多前端资料关注【凤凰城下的⼩码农】领取
欢迎关注我的开源项⽬,,欢迎star 我的个⼈主页,
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论