Bootstrap

uni-app跨平台开发心得

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。uniapp是为了解决跨平台开发的问题。在移动应用开发中,不同平台(如iOS、Android)有不同的开发语言和技术栈,这导致开发者需要针对不同平台开发多套代码,增加了开发和维护的成本。DCloud公司正是看到了这些问题,因此决心打造一款终极的跨平台解决方案,此时,uni-app就应运而生,Uni-app的出现使得开发者可以使用同一套代码,快速地部署到多个平台,提高了开发效率和降低了开发成本。

uni-app开发规范遵循以下原则:

1、页面文件遵循Vue单文件组件

2、组件标签规范类似于微信小程序规范。

3、接口能力(JS API)规范类似微信小程序规范,但需要将wx前缀改为uni。

4、数据绑定及事件处理同Vue.js规范,同时额外补充了uniapp本身的App及页面的生命周期的规范。

5、为了更好的兼容多端运行,建议使用Flex布局进行开发。

1、目录结构规范

          • 建议按照 uni-app 默认的目录结构组织项目,以保持统一性和易读性。

          • 将不同功能和模块的文件放置在对应的目录下,如 pages 存放页面,components 存放组件等。

2、命名规范

          • 文件名、组件名、变量名等统一使用小写字母,多个单词之间可以使用中划线连接,例如:my-page.vue、login.vue等等

3、代码规范

        • 遵循 Vue.js 官方的代码规范,保持代码风格的统一性。

        • 注意代码的缩进和格式,提高代码的可读性。

        • 避免在模板中直接编写过多逻辑,尽量将逻辑处理移到 JS 部分。

        • 合理使用生命周期函数,避免在页面加载时做过多的初始化操作。

4、样式规范

        • 推荐使用预处理器编写样式,如 Less、Sass 等,以提高样式代码的可维护性。

        • 统一使用 rpx 作为尺寸单位,以便在不同设备上进行适配。

        • 避免在样式中直接使用颜色值和尺寸值,建议提取出来作为变量统一管理

在关键代码和复杂逻辑处添加必要的注释,方便其他开发者理解代码意图。注释应该清晰简洁,描述代码的功能、参数和返回值等信息。行uni-app项目需要安装HBuilderX前端开发工具。浏览器运行:进入uniapp项目,点击工具栏的运行-运行到浏览器-选择浏览器,即可在浏览器里面体验uni-app 的 H5 版。真机运行:连接手机,开启USB调试,进入uniapp项目,点击工具栏的运行-真机运行-选择运行的设备,即可在该设备里面体验uni-app。 在微信开发者工具里运行:进入uniapp项目,点击工具栏的运行-运行到小程序模拟器-微信开发者工具,即可在微信开发者工具里面体验uni-app。 

概述:uni-app完全支持Vue实例的生命周期,同时还新增了应用的生命周期和页面的生命周期。

uni-app项目的路由由框架统一管理,每新增一个页面,都需要在page.json里面进行配置,uni-app路由的跳转有2种方式

uni.request 是一个在uni-app框架中用来发起网络请求的API。通过这个API,开发者可以在uni-app中实现向服务器端发送HTTP请求并获取响应数据的功能。uni.request允许开发者指定请求的URL、请求方法、请求头部信息、请求数据等内容,以及定义请求成功和失败时的处理逻辑。开发者可以利用uni.request来实现与服务器端进行数据交互的功能,例如获取远程数据、上传文件等操作。 在uni-app中,uni.request是一种常用的实现网络请求的方法,开发者可以根据自己的需求灵活运用该API来实现网络请求功能。

云函数即在云端(服务器端)运行的函数,开发者无须购买、搭建服务器,只需编写函数代码并部署到云端即可在客户端(App、H5、小程序等)调用,同时云函数之间也可以相互调用。

一个云函数的写法与一个在本地定义的JavaScript方法无异,当云函数被客户端调用时,定义的代码会被放在Node.js运行环境中执行。

开发者可以和在Node.js环境中使用JavaScript一样在云函数中进行网络请求等操作,而且还可以通过云函数服务端SDK搭配使用多种服务,如使用云函数SDK中提供的数据库和存储API操作数据库和存储。

在使用路由操作进行页面跳转时,可以在跳转的同时传递参数到下一个页面中,并同时在下一个页面接收参数。具体步骤如下:

步骤一:使用API的方式进行页面的跳转

以下是我完成的作业

在 uni-app 中,可以通过判断运行平台的方式来实现特定平台下的逻辑处理。uni-app支持多个平台,包括H5、App(包括iOS和Android)、小程序(包括微信小程序、百度小程序、支付宝小程序、头条小程序等)等。判断平台主要有两种方式:编译期判断、运行期判断。

一、编译期判断,即条件编译,通过编译期判断可以在不同平台的代码包构建阶段针对不同平台编写不同的代码,以优化应用程序在不同平台上的运行效果。

;