初次见面
1.前言
uni-app是一个跨平台的开发框架,它基于Vue.js,可以同时开发运行在多个平台(包括iOS、Android、H5等)的应用程序。使用uni-app可以使用一套代码编写多端应用,大大减少了开发成本和工作量。你只需要用Vue语法编写页面,然后通过uni-app提供的编译工具将代码编译成对应平台的源代码。
2.uniapp的介绍
- uni-app采用了一种编译和转换的方式,将开发者编写的代码转换为不同平台的原生代码,从而实现真正的跨平台效果。开发者只需要使用Vue的语法进行开发,无需关心具体的平台差异,就可以轻松地开发出高质量的应用程序。
- uni-app提供了丰富的组件和API,方便开发者进行界面布局、数据绑定、事件处理等常见功能的实现。同时,uni-app还支持调用原生API,以满足更高级的功能需求。这使得开发者可以利用已有的Vue知识和技能,快速构建出优秀的跨平台应用程序。
3.开始牵手啦
- 由于uniapp 采用vue开发,首先要求你有相应的vue基础
- 准备好官方开发工具HBuilderX
没错,就这2样你就能开发了,这里不需要你对webpack 理解多深,也不需要安装npm,得益于编辑器帮我们做了这些工作。下面对主要知识点简单介绍,有个印象。
3.1 pages.json 页面路由
pages.json
文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
它类似微信小程序中app.json
的页面管理 部分。注意定位权限申请等原属于app.json
的内容,在uni-app中是在manifest中配置。
在这里面就是vue
router文件 但是在用vue写项目的时候,要配置路由,引用路由,在main.js中声明一下,而在uniapp中不要配置路由,uniapp会自己创建
这就方便了很多,在我们跳转页面的时候,不再和vue里面一样啦我们只要
用uniapp中特有的标签 navigator
url 直接写pages.json
中要跳转的页面, 还有按钮跳转
不再像原先那样
3.2视图容器
组件名 | 说明 |
---|---|
view | 视图容器,类似于HTML中的div |
scroll-view | 可滚动视图容器 |
swiper | 滑块视图容器,比如用于轮播banner |
match-media | 屏幕动态适配组件,比如窄屏上不显示某些内容 |
movable-area | 可拖动区域 |
movable-view | 可移动的视图容器,在页面中可以拖拽滑动或双指缩放。movable-view必须在movable-area组件中 |
cover-view | 可覆盖在原生组件的上的文本组件 |
cover-image | 可覆盖在原生组件的上的图片组件 |
这些标签是uniapp独有的,跟我们用vue写项目中不一样,大家要记忆一下
3.3项目结构
借用一下官方图片
3.4、页面生命周期
函数名 | 说明 | 平台差异说明 | 最低版本 |
---|---|---|---|
onInit | 监听页面初始化,其参数同 onLoad 参数,为上个页面传递的数据,参数类型为 Object(用于页面传参),触发时机早于 onLoad | 百度小程序 | 3.1.0+ |
onLoad | 监听页面加载,该钩子被调用时,响应式数据、计算属性、方法、侦听器、props、slots 已设置完成,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参),参考示例。 | ||
onShow | 监听页面显示,页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面 | ||
onReady | 监听页面初次渲染完成,此时组件已挂载完成,DOM 树($el)已可用,注意如果渲染速度快,会在页面进入动画完成前触发 | ||
onHide | 监听页面隐藏 | ||
onUnload | 监听页面卸载 | ||
onResize | 监听窗口尺寸变化 | App、微信小程序、快手小程序 |
3.5 应用生命周期
函数名 | 说明 | 平台兼容 |
---|---|---|
onLaunch | 当uni-app 初始化完成时触发(全局只触发一次),参数为应用启动参数,同 uni.getLaunchOptionsSync 的返回值 |
|
onShow | 当 uni-app 启动,或从后台进入前台显示,参数为应用启动参数,同 uni.getLaunchOptionsSync 的返回值 |
|
onHide | 当 uni-app 从前台进入后台 |
3.6请求数据
data 数据说明
最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String。转换规则如下:
- 对于
GET
方法,会将数据转换为 query string。例如{ name: 'name', age: 18 }
转换后的结果是name=name&age=18
。 - 对于
POST
方法且header['content-type']
为application/json
的数据,会进行 JSON 序列化。 - 对于
POST
方法且header['content-type']
为application/x-www-form-urlencoded
的数据,会将数据转换为 query string。
示例
arduino
uni.request({
url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。
data: {
text: 'uni.request'
},
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
console.log(res.data);
this.text = 'request success';
}
});
如果还想了解更多请看官方文档 zh.uniapp.dcloud.io/api/request...
4、开启uniapp恋爱生活吧
经过上面的介绍,如果你没有的任一种经验,相信你能模仿着写代码了,接下来我们简单练习下。 打开HBuilderX工具,依次点击 文件------------新建---------项目
\
项目名自己取, 时间有限 只能写到这里啦 下一篇续写与# uniapp恋爱生活
总而言之,uni-app是一个强大而灵活的跨平台开发框架,适用于不同类型的应用程序开发。通过使用uni-app,开发者可以节省开发成本和时间,同时为用户提供一致且优质的跨平台体验。喜欢的来个关注 点赞 这个也是以后写文章的动力所在 谢谢大家能观看我的文章 咱下期再见 拜拜