初次见面

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中配置。

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

这就方便了很多，在我们跳转页面的时候，不再和vue里面一样啦我们只要

用uniapp中特有的标签 navigatorurl 直接写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。

示例

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，开发者可以节省开发成本和时间，同时为用户提供一致且优质的跨平台体验。喜欢的来个关注 点赞 这个也是以后写文章的动力所在 谢谢大家能观看我的文章 咱下期再见 拜拜