uni-app简易介绍

时间:2024-10-07 07:19:43

目录

一、什么是uni-app

二、uni-app适合什么样的开发者以及它有哪些优点

-app适合那些有开发经验的开发者

2.   uni-app的优点主要有以下几点:

三、uni-app开发环境配置

1.安装HBuilder X

​编辑

 2.安装插件

四、uni-app如何创建新的项目以及项目结构

1.新建项目

 2.项目结构

五、如何运行项目

1.浏览器运行

 2.内置浏览器运行(需先去“工具”→“插件安装”内安装才可使用)

3.在微信小程序(需要去官网下载)

六、uni-app组件的使用

1.什么是组件

2.基础组件

七、总结


前言:本学期我学习了uniapp这门课程,通过这门课程我学会了如何使用代码制作微信小程序

一、什么是uni-app

uni-app是一个使用  开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

二、uni-app适合什么样的开发者以及它有哪些优点

1.uni-app适合那些有开发经验的开发者

尤其是那些需要同时开发iOS、Android和Web应用程序的开发者。同时,uni-app也适合初学者,因为它的学习曲线比较平缓。

-app的优点主要有以下几点:

(1)跨平台开发,节省了开发成本和时间;

(2)基于框架,易于上手和学习;

(3)插件化的架构,可以灵活地扩展功能;

(4)支持原生API调用,可以满足更多的需求;

(5)自带一套UI组件库,可以快速构建UI界面。

三、uni-app开发环境配置

1.安装HBuilder X

进入官网下载安装正式版HBbuilder X。HBuilderX-高效极客技巧HBuilderX是当前最快的HTML开发工具,强大的代码助手帮你快速完成开发,最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛/

 2.安装插件

选择“工具”点击插件安装进入插件安装页面,选择“uni-app编译”并安装

 至此,使用HX开发uni-app项目所需要的开发环境均已具备。

四、uni-app如何创建新的项目以及项目结构

1.新建项目

第一步:启动HBuilder X,创建uni-app。单击文件菜单栏里的“文件”→“新建”→“项目”。

第二步:在弹出的面板中选择"uni-app"类型,在项目名称栏内输入自己需要搭建的项目名称,修改需要放置的修改路径点击创建即可

项目创建成功后会在软件右下角提示项目已创建成功

 2.项目结构

刚刚创建的项目结构如图所示

component目录(需自行创建):用于存放自定义组件

pages目录:用于存放页面

文件:用于项目的根组件

文件:项目的入口文件,也就是项目加载时,先加载文件

文件:配置页面的路由、底部导航、顶部标题按钮搜索框等页面类信息

文件:配置一些样式

五、如何运行项目

1.浏览器运行

 2.内置浏览器运行(需先去“工具”→“插件安装”内安装才可使用)

3.在微信小程序(需要去官网下载)

微信小程序小程序是一种新的开放能力,可以在微信内被便捷地获取和传播,同时具有出色的使用体验。小程序开发者可在小程序内提供便捷、丰富的服务,如预订、商品购买、游戏、信息查询等。/cgi-bin/wx1.首先进入微信开发者工具确认是否打开服务端口

2.在HBuilder X内配置微信小程序的路径地址

 3.配置微信小程序AppID(需要登录去微信小程序官网申请)

六、uni-app组件的使用

1.什么是组件

1.在uni-app中,组件是可复用的UI元素,可以作为页面的基本单位,以模块化的方式进行开发。组件可以包含HTML、CSS、JavaScript和其他资源,可以封装自己的功能和样式,可以与父组件之间进行数据和方法的传递。

2.组件分为两种:全局组件和局部组件。全局组件可以在所有页面中使用,局部组件只能在定义它的页面中使用。组件可以通过的组件机制进行定义和注册,可以使用的模板语法进行渲染和逻辑处理。

3.官方提供了一些内置的组件,如按钮、图片、图标等,也支持使用第三方UI库中的组件,如WeUI、MintUI等。开发者也可以自己开发和封装组件,以便在项目中进行复用,提高开发效率和代码的可维护性。

2.基础组件

view:视图容器,它类似于传统html中的div,用于包裹各种元素内容。

效果演示:

  1. <template>
  2. <view class="content">
  3. <view class="text-area">
  4. 123
  5. </view>
  6. <view class="text-area l1">
  7. 456
  8. </view>
  9. <view class="text-area l2">
  10. 789
  11. </view>
  12. </view>
  13. </template>

swiper:滑块视图容器,也就是轮播图,一般用于制作左右滑动或者上下滑动轮播图。

效果演示:

  1. <view class="index-swiper">
  2. <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
  3. <swiper-item v-for="(item,index) in swiperList" :key="index">
  4. <image :src="item.image_src" mode="widthFix"></image>
  5. </swiper-item>
  6. </swiper>
  7. </view>

 还有其他组件可以前往uni-app官网进行了解:

组件使用的入门教程 | uni-app官网uni-app,uniCloud,serverlesshttps:///component/

七、总结

  1. 学习是入门Uni-app的基础。是Uni-app的核心框架,如果你之前没有接触过,建议先学习的基础知识再学习Uni-app。

  2. 熟悉Uni-app的API和组件库。Uni-app的API和组件库是非常丰富的,学习并掌握这些API和组件库可以让你开发出更加高效、优雅的应用。

  3. 多看官方文档和社区贡献。Uni-app官方文档中提供了非常详细的指南和API文档,可以帮助你快速入门。同时,Uni-app社区也有很多优秀的贡献者,他们分享了很多实用的技巧和案例,可以帮助你解决实际开发中遇到的问题。

  4. 实践和积累经验。学习Uni-app最重要的是要实践。通过做项目、写代码,才能掌握Uni-app的技能,同时也能积累更多的经验和技巧。

  5. 不断更新知识和技术。移动端技术一直在不断更新,Uni-app也在不断更新和升级,因此学习Uni-app的过程也是不断更新知识和技术的过程。要跟上技术的发展,保持学习的热情,才能成为一名优秀的Uni-app开发者。