开通VIP，畅享免费电子书等14项超值服
首页
好书
留言交流
下载APP
联系客服
2024.10.20
通俗易懂解释：
现在有了uniapp这个框架之后，我们只需要懂vue，就可以通过vue开发出一个app应用。
我们使用uniapp开发应用一般使用官方提供的HBuilderX开发工具。
HBuilderX是Dcloud公司开发的一个轻便、极速、强大的IDE工具。
这个开发工具内置了uniapp、vue框架，非常的好用。
公司官网：
1.设置主题
2.设置代码字体和大小
工具-》设置
工具=》插件安装
HbuilderX内置了很多常用的插件，我们也可以去插件市场单独下载安装其他插件
文件-》新建-》项目
新建基于Vue3的项目
启动项目
这里选择在chrome浏览器中打开
F12，切换到手机预览模式
我们运行项目之后，默认展示的是index.vue里面的内容
打开页面我们发现script里面默认是Vue2的选项式API，接下来我们新建Vue3的组合式API页面。
新建页面默认会创建同名目录
page.json会自动添加该页面的配置
在uniapp的项目中，不能写div和span标签，只能用官方提供的组件标签代替。
其中view标签代替div标签，text代替span标签。
我们新建两个页面：index.vue和order.vue
配置项中的第一个页面，作为当前工程的首页（启动页）
运行项目，展示的是index.vue页面的内容
这是因为index.vue的配置属性在最前面
我们将order.vue的配置属性放在最前面
保存之后，项目会优先展示order.vue的内容
单个页面的配置主要是配置style属性
单页面配置主要事项：
1.navigationStyle默认是default，如果设置为custom，表示自定义，也就不会显示默认的页面导航栏。
2.enablePullDownRefresh默认是false，不刷新。当页面需要重新加载新数据的时候可以设置为true。
当单个页面没有配置页面样式时，就展示全局页面设置的样式
例：index.vue沒有配置style样式，默认显示全局页面的配置
底部导航栏需要在pages.json里面配置tabBar属性。
tabBar中的list是一个数组，只能配置最少2个、最多5个tab，tab按数组的顺序排序。
这里设置index.vue、message.vue、user.vue三个页面为底部导航栏。
官网关于内部组件的文档：
内置组件有很多，大家可以去官网查看文档学习，这里只列举几个常用的组件
为了满足大部分公司的功能需求，uniapp的公司DLCOUD提供了的一个跨端的ui库：uni-ui。
uni-ui是基于vue组件的、flex布局的跨全端ui框架，它不包括内置组件，它是内置组件的补充。
uni-ui官方文档：
接下来介绍一下uni-ui的使用方法
方式一：直接新建内置uni-ui的项目
在代码区输入u，拉出各种内置或uni-ui的组件列表，选择其中一个，即可使用该组件。
下载导入
接着就可以在代码里面使用了
关于页面和路由的官方文档：
uni.navigateTo()
参数：
例如:
要跳转TabBar(底部导航)页面，只能使用switchTab方法跳转，例如：
1.跳转页面
2.获取参数
从uniapp的周期函数onLoad获取，后续会详细介绍uniapp的生命周期
uni.navigateBack()：关闭当前页面，返回上一页面或多级页面