关于uniapp的学习

yellow 2023-05-25 10:33:10

目录

前言

1.开发环境

2.uniapp文件结构

3.接口的封装调用

4.页面路由与传值

5.心得体会


前言

这是一篇关于我这学期对uniapp的学习与归纳。

uni-app跨平台开发是使用vue.js 开发跨平台应用的前端框架,编写vue.js代码,uni-app 将其编译到iOS、Android、微信小程序等多个平台。现如今微信小程序使用得越发频繁,uni-app相对而言比较简单,各种系统的小程序应用,也不需要学习其他应用的框架,而且对于开发者来说减少了许多学习成本跟开发成本。

1.开发环境

uni-app,dcloud官方开发工具HBuilder X,小程序端运行需要微信开发者工具,APP端运行可安装各类模拟器,推荐使用的网易mumu。

2.uniapp文件结构

· pages文件夹存放页面

· static内的文件不会进行编译,不要放js文件,可放到common中(注意体积限制)

· unpackage文件夹存放打包的文件

· components文件夹存放各种组件

· App.vue代表应用,包括应用层的生命周期方法,全局样式等

 

· pages.json整个应用的页面集合,第一项为启动页,可配置页面路由及样式和标题

 

· manifest.json应用配置,包括图标配置、启动界面配置、权限配置及其他开发配置

· main.js应用入口文件

3.接口的封装调用

在common文件夹创建config.js和api.js文件

config.js

 

api.js

使用uni.request

 

4.页面路由与传值

Tips:

1.navigateTo, redirectTo只能打开非 tabBar 页面。

2.switchTab只能打开 tabBar页面。

3.reLaunch可以打开任意页面。页面底部的 tabBar由页面决定,即只要是定义为tabBar的页面,底部都有tabBar。不能在 App.vue 里面进行页面跳转。H5端页面刷新之后页面栈会消失,此时navigateBack不能返回,如果一定要返回可以使用history.back()。

uni.navigateTo(OBJECT)

保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

uni.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面。

uni.reLaunch(OBJECT)

关闭所有页面,打开到应用内的某个页面。

注意:如果调用了uni.preloadPage(OBJECT)不要关闭,仅触发生命周期onHide。

 

uni.switchTab(OBJECT)

跳转到tabar页面,并关闭其他所有非tabar页面。

注意:如果调用了uni.preloadPage(OBJECT)不会关闭,仅触发生命周期onHide。

页面间传参数在onLoad里得到,onLoad 的参数是其他页面打开当前页面所传递的数据。

5.心得体会

学习uniapp需要先了解和学习基本的vue.js的框架和语法,再学习开发模式和生命周期,再慢慢深入学习其他的用法,一步一步循序渐进的来,更有利于我们理解和更好的使用uniapp。学习uniapp对我们来说是非常有用的,uniapp支持多端开发,而且开发成本较低,开发效率高,又有优秀的性能和支持插件式开发,对未来我们的学习很有帮助。总之,不管是学习uniapp,还是其他语言,都需要不断去实践和累积经验,不断更新自己的知识和技能。

...全文
151 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

1,366

社区成员

发帖
与我相关
我的任务
社区描述
柳职院电子信息工程学院同学们的学习园地
社区管理员
  • c_university_1974
  • qq_39231145
  • zhuisir
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

各位加入社区的同学,请完善社区信息,把社区昵称改为【班级-姓名】,社区签名改为【班级-学号-姓名】的格式

如【社区昵称】20计应1班  张某某(班级用简称)

     【社区签名】2020级计算机应用技术1班 20201234567 张某某 (班级用全称)

试试用AI创作助手写篇文章吧