一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

Uniapp 新手教程

初次见面

1.前言

uni-app是一个跨平台的开发框架,它基于Vue.js,可以同时开发运行在多个平台(包括iOS、Android、H5等)的应用程序。使用uni-app可以使用一套代码编写多端应用,大大减少了开发成本和工作量。你只需要用Vue语法编写页面,然后通过uni-app提供的编译工具将代码编译成对应平台的源代码。

2.uniapp的介绍

  1. uni-app采用了一种编译和转换的方式,将开发者编写的代码转换为不同平台的原生代码,从而实现真正的跨平台效果。开发者只需要使用Vue的语法进行开发,无需关心具体的平台差异,就可以轻松地开发出高质量的应用程序。
  2. 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中配置。

Uniapp  新手教程
在这里面就是vuerouter文件 但是在用vue写项目的时候,要配置路由,引用路由,在main.js中声明一下,而在uniapp中不要配置路由,uniapp会自己创建

Uniapp  新手教程
这就方便了很多,在我们跳转页面的时候,不再和vue里面一样啦我们只要

Uniapp  新手教程
用uniapp中特有的标签 navigatorurl 直接写pages.json中要跳转的页面, 还有按钮跳转

Uniapp  新手教程

不再像原先那样
Uniapp  新手教程

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项目结构

借用一下官方图片

Uniapp  新手教程

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。

示例

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  新手教程

Uniapp  新手教程
项目名自己取, 时间有限 只能写到这里啦 下一篇续写与# uniapp恋爱生活

总而言之,uni-app是一个强大而灵活的跨平台开发框架,适用于不同类型的应用程序开发。通过使用uni-app,开发者可以节省开发成本和时间,同时为用户提供一致且优质的跨平台体验。喜欢的来个关注 点赞 这个也是以后写文章的动力所在 谢谢大家能观看我的文章 咱下期再见 拜拜

原文链接:https://juejin.cn/post/7325370003191758875 作者:梦依小盆友

(0)
上一篇 2024年1月19日 下午4:58
下一篇 2024年1月20日 上午10:01

相关推荐

发表评论

登录后才能评论