uniapp的基础知识

2023-01-14 264 阅读4分钟

1、uniapp简介

1-1、 `诞生于2018年9月`

1-2、`使用场景`：uniapp在企业中，更多时候用于做安卓App、做微信小程序。

1-3、`什么是跨平台技术呢？`一套代码，通过不同的打包方式，将其编译成能够运行在多个平台上的应用。

1-4、 `强调`：跨平台App虽然理念很高大上，但不要过渡使用。

1-5、`uniapp代码风格`：Vue风格 + 微信小程序风格。写uniapp代码的感觉，就像是在Vue，也像是在写微信小程序。

2、项目创建

2-1、 `安装HBX`：www.dcloud.io/hbuilderx.h…

2-2、 `项目创建`：在HBX中，新建，项目，选择uniapp，选择空模板。

2-3、 `导入项目`：在HBX中，文件，打开项目。

2-4、 `运行项目`：uniapp可以做很多不同类型的应用，不同类型的应用其运行方式是不一样的。咱们课程以微信小程序开发、安卓App开发为例。

2-5、 `运行成微信小程序`：你电脑上先安装微信开发者工具，

1.在HBX中配置微信开发者工具的安装路径（运行-运行小程序模拟器-运行配置），
2.手动打开微信开发者工具开启服务端口（设置-安全-服务端口），
3.在HBX中运行项目（运行-运行小程序模拟器-微信小程序）。写代码可以HBX中，也可以用VScode写，调试在微信开发者工具中进行。

2-6、 `目录分析`：

uni.scss全局样式，
page.json全局配置，
manifest.json项目配置，
main.js入口文件，
index.html是单页面，
App.vue是根组件，
unpackage是打包的结果，
static放置图片等资源的目录，
pages是页面目录。

2-7、 `运行成真机App（以华为手机为例）`：

1. 在电脑上安装“华为手机助理”，在真机上安装“华为手机助手”，在保证手机和电脑在同一个wifi环境下使用连接密码进行连接，
1. 在HBX中选中项目运行到真机（运行-运行到手机或模拟器-运行到android app基础-在对话框中选中你的真机）
1. Android平台签名证书(.keystore)生成指南：ask.dcloud.net.cn/article/357…

2-8、 `注册Dcloud开发者后台`：

做uniapp也需要唯一的appid，这个uniapp appid从哪里来？ 在Dcloud官网注册账号（开发者后台）、创建uniapp应用。

3、开发范式

3-1、`框架范式`：Vue2/Vue3风格 + 微信小程序风格。

（uniapp诞生于2018年下半年，那里只支持Vue2+小程序风格，从2021年下半年开始支持Vue3+小程序风格了。）现在，在做uniapp开发时，你有两种选择了。

3-2、`框架选择（2018年9月）`：Vue2 + 小程序 + uView(v2)

3-3、`框架选择（2021年10月）`：Vue3 + 小程序

3-4、`路由风格`：在uniapp中路由功能是内置，无须安装vue-router。uniapp路由风格和微信小微信是一样的。

3-5、`状态管理`：在uniapp中内置了vuex，可以直接用。

1. 新增store文件，使用createStore创建状态窗口并招出，在mian.js对store进行注册并挂载；
1. 在组合式写法的组件中，使用useStore来访问Vuex数据，使用store.commit/dispatch走流程；
1. 在选项式写法的组件中，可以使用this.$store/map*系列方法来访问Vuex数据和走流程。

3-6、`组件库`：在这里uniapp选择的是Vue3风格，暂时没有合适的UI组件，只能使用uniapp内置组件。

如何使用第三方uniapp插件？ （在Dcloud官网和HBX都先登录）在uniapp插件市场中找到合适的插件，
点击“使用HBX”导入，这样就可以把插件下载到uniapp的uni_modules目录。

3-7、`关于语法范式`：vue2语法、vue3语法、vue3迁移、条件编译、性能优化等文章。

4、打包部署

4-1、`微信小程序`：

前提是先得用微信小程序appid，还有要微信开发者工具。上线操作，和微信原生小程序一致。

4-2、`安卓APP打包`：

在manifest.json中做好App配置，还要添加Dcloud appid。在HBX中，点击“发行”（生成密钥）-“云打包”-“查询打包状态”。