使用框架：uni-app介绍和开发方式

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

官网：https://uniapp.dcloud.net.cn/

快速上手

1. 通过 HBuilderX 可视化界面

可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。

开始之前，开发者需先下载安装如下工具：

• HBuilderX：官方IDE下载地址

2. 通过vue-cli命令行或官方模版（推荐）=> 演示和基本使用

除了HBuilderX可视化界面，也可以使用 cli 脚手架或官方模版方式去创建 uni-app 项目。

注意：vacode也可以开发，相对来说Hbuider X更加方便

创建项目

使用vue-cli创建uni-app项目

使用vue-cli或模版方式创建uni-app项目

1. 使用Vue3/Vite版，创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）

2. 安装依赖

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

pnpm install

注意⚠：因为网速原因，下载可能会失败

3.命令说明：微信小程序为例

npm run dev:mp-weixin
npm  dev:mp-weixin
# 或者
pnpm run dev:mp-weixin
pnpm dev:mp-weixin

//在package.json中 查看对应的命令 或 查看官方文档

执行小程序端开发命令

pnpm run dev:mp-weixin

说明：运行成功之后，项目根目录下会自动打包生成小程序项目代码，到dist/dev文件下 ，如图：

打开小程序开发者工具，导入上一步生成的小程序项目代码，查看效果

总结：

1. 运行：npm run dev:mp-weixin开启小程序开发服务器

2. 看效果：导入项目下dist\dev\mp-weixin目录到小程序开发者工具

3. 在项目src目录修改代码后，会自动重新打包小程序代码，实时查看最新效果

使用vscode开发

1. 安装插件支持

• uniapp-snippet：uni-app框架代码片段

2. 保存自动编译

• 小程序开发工具设置：实现保存自动编译，首先要在小程序设置中找到 编辑 选项卡，取消选中 修改文件时自动保存，然后选中 保存时自动编译小程序。

图 取消小程序保存5.png

注意⚠️：一定要关闭小程序模拟器上方的热重载，不然造成vscode修改代码不刷新模拟器问题

图 关闭热重载

目录结构

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─main.js               Vue初始化入口文件
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路由、导航条、选项卡等页面类信息

总结

vue+wechat(微信小程序)原生混合开发模式：

1.一个.vue格式文件：
   1. template=> 微信组件+数据和事件绑定用vue
   2. script => vue语法（定义变量、方法、监听等） + 微信生命周期钩子函数
   3. css => 没有变化
2. 图片必须放到static下（不能改名）
3. App.vue=》微信全局生命周期 + 全局样式
4. main.js=> 注册全局组件或方法
5. manifest.json => 微信小程序配置（"mp-weixin"节点下的appid配置开发者id、权限申请等）
6. pages.json => 配置：路由 + window窗体样式 + tabBar页面

package.json文件报错：重启vscode解决