第一部分
uni-app 和 原生小程序开发区别
- 每个页面是一个 .vue 文件,
数据绑定及事件处理同 Vue.js 规范:
- 1、属性绑定 src=“{
{ url }}”
升级成 :src=“url”
- 2、事件绑定 bind:tap=“eventName”
升级成 @tap=“eventName”。支持()传参
- 3、支持 Vue 常用指令
v-for、v-if、v-show、v-model
等 -
温馨提示:调用接口能力,建议前缀 wx 替换为
uni
,养成好习惯,这样支持多端开发。
- 1、属性绑定 src=“{
{ url }}”
适合人群
- 已经学过原生小程序,想要进阶 uni-app 技术栈的小伙伴
- 想要一套代码,同时覆盖小程序、H5、App 多端
- 学过 Vue3 + TS 基础,但是苦于没有项目练手的小伙伴
- 想要做小程序毕业设计的小伙伴
uni-app 项目文件结构目录说明
pages
:业务页面文件存放的目录index
index.vue
:index 页面
static
:存放应用引用的本地静态资源的目录(注意:静态资源只能存放于此文件夹)unpackage
:非工程代码,一般存放运行或发行的编译结果index.html
:H5 端页面main.js
:Vue 初始化入口文件App.vue
:配置 App 全局样式、监听应用生命周期pages.json
:配置页面路由、导航栏、tabBar 等页面类信息manifest.json
:配置 appid、应用名称、logo、版本等打包信息uni.scss
:uni-app 内置的常用样式变量
入门案例 - pages.json
和 tabBar
pages.json
:文件内容节点说明pages
:页面路由及窗口表现,示例代码如下:
"pages": [{ "path": "pages/A/A", "style": { "navigationBarTitleText": "A", "navigationStyle": "custom" // 自定义导航 } }, { "path": "pages/B/B", "style": { "navigationBarTitleText": "B" } }, { "path": "pages/C/C", "style": { "navigationBarTitleText": "C" } }, { "path": "pages/D/D", "style": { "navigationBarTitleText": "D" } }],
globalstyle
:默认窗口表现,示例代码如下:
"globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "uni-app study project", "navigationBarBackgroundColor": "#1AAA9B", "backgroundColor": "#F8F8F8" },
tabBar
:至少两个菜显示,示例代码如下:
"tabBar": { "color": "#13227a", // tab 上的文字默认颜色 "selectedColor": "#d81e06", // tab 上的文字选中时的颜色 "list": [{ "pagePath": "pages/A/A", // 页面路径 "text": "A", // 页面标题 "iconPath": "./static/img/A.png", // tab 图标默认颜色 "selectedIconPath": "static/img/_A.png" // tab 图标选中时的颜色 }, { "pagePath": "pages/B/B", "text": "B", "iconPath": "./static/img/B.png", "selectedIconPath": "static/img/_B.png" }, { "pagePath": "pages/C/C", "text": "C", "iconPath": "./static/img/C.png", "selectedIconPath": "static/img/_C.png" }, { "pagePath": "pages/D/D", "text": "D", "iconPath": "./static/img/D.png", "selectedIconPath": "static/img/_D.png" }] },
第二部分(重点)
创建 uni-app
项目
- 第一种创建方法:
通过 HbuilderX 创建
- 未做笔记
- 第二种创建方法:
通过命令行创建
创建 JavaScript 开发的工程:
npx degit dcloudio/uni-preset-vue#vite(项目名称)
首先创建 uni-app 项目。笔记中通过命令行创建的项目,项目创建后安装依赖,并运行npm run dev:mp-weixin
打包项目。
VSCode 开发 vue3 + ts + uni-app 项目
为什么选择 VS Code?
- HbuilderX 对 TS 类型支持暂不完善
- VS Code 对 TS 类型支持友好,熟悉的编辑器
配置 VS Code
- 安装 uni-app 插件