文件-新建-项目
工具-安装插件
编译成微信小程序段代码
设置开发者路径,安装微信开发者工具目录
开启服务端口,微信开发者工具中开启
设置-通用设置-安全
├─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内置的常用样式变量
如何查看小程序****APPID
登录小程序平台【mp.weixin.qq.com】->开发->开发设置->开发者ID，即可查到AppID。如下图：
在manifest.json中微信小程序配置ID,就可以在手机查看了
uni-app 和原生小程序开发区别
开发区别
uni-app 项目每个页面是一个 .vue 文件，数据绑定及事件处理同 Vue.js 规范：
属性绑定
src="{ { url }}"升级成:src="url"事件绑定
bindtap="eventName"升级成@tap="eventName"，支持（）传参支持 Vue 常用指令
v-for、v-if、v-show、v-model等
其他区别补充
调用接口能力，建议前缀
wx替换为uni，养成好习惯，支持多端开发。<style>页面样式不需要写scoped，小程序是多页面应用，页面样式自动隔离。-
生命周期分三部分：应用生命周期(小程序)，页面生命周期(小程序)，组件生命周期(Vue)
image.png
pages页面布局
根节点为
<template>，这个<template>下只能且必须有一个根<view>组件。
<template>//页面布局
<view>
</view>
</template>
<script>//逻辑代码
export default {//data：template模板中需要使用的数据
data() {
return {
}
},
methods:{//methods方法，如按钮点击、屏幕滚动
}
}
</script>
<style lang="scss">//CSS渲染
</style>
<template>里面写页面布局,相当于写HTML
<view> 个人感觉与HTML的<div>十分类似
pages.json页面配置全局配置
{
"pages": [ // 'pages' 数组中的第一项表示应用的启动页面。参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页" // 导航栏标题文本
}
},
{
"path": "pages/my/my",
"style": {
"navigationBarTitleText": "我的"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white", // 全局设置以将导航栏标题字体颜色更改为'black'或'white'
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#26BB9B", // 全局设置以更改导航栏标题背景颜色
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"selectedColor": "#26BB9B",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabs/home_default.png",
"selectedIconPath": "static/tabs/home_selected.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "static/tabs/user_default.png",
"selectedIconPath": "static/tabs/user_selected.png"
}
]
},
"condition": { // 模式配置，仅在开发期间生效
"current": 0, // 当前激活的模式（在'list'数组中的索引）
"list": [
{
"name": "searchCity", // 模式名称
"path": "pages/index/index", // 启动页面（您要调试的页面） - 必填
"query": "name=searchCity" // 启动参数，在页面的onLoad函数里面得到。
}
]
},
"uniIdRouter": {}
}
condition
启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。
属性说明：
| 属性 | 类型 | 是否必填 | 描述 |
| current | Number | 是 | 当前激活的模式，list节点的索引值 |
| list | Array | 是 | 启动模式列表 |</byte-sheet-html-origin>
list说明：
| 属性 | 类型 | 是否必填 | 描述 |
| name | String | 是 | 启动模式名称 |
| path | String | 是 | 启动页面路径 |
| query | String | 否 | 启动参数，可在页面的 onLoad 函数里获得 |
注意： 在 App 里真机运行可直接打开配置的页面，微信开发者工具里需要手动改变编译模式，如下图：
index.Vue
不记得属性可以把鼠标悬停在标签可以出现官网链接直接抵达
<template>
<swiper class="banner" indicator-dots circular autoplay >
<swiper-item v-for="item in Pictures" :key="item.id">
<image @tap="onPoviewImage(item.url)" :src="item.url" ></image>
</swiper-item>
</swiper>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
//轮播图数据
Pictures:[
{id:'1',url:"../../static/img/xixi1.jpg"},
{id:'2',url:"../../static/img/xixi2.jpg"},
{id:'3',url:"../../static/img/xixi3.jpg"}
]
}
},
methods: {
onPoviewImage(url){
// console.log(url)
uni.previewImage({
urls:this.Pictures.map(v=>v.url),
current:url
})
}
}
}
</script>
<style lang="scss">
.banner{
width: 750rpx;
}
</style>
命令行创建 uni-app 项目
# 通过 git 从 gitee 克隆下载
git clone -b vite-ts https://gitee.com/dcloud/uni-preset-vue.git
常见问题
运行
npx命令下载失败，请尝试换成手机热点重试换手机热点依旧失败，请尝试从国内备用地址下载
在
manifest.json文件添加小程序 AppID 用于真机预览运行
npx命令需依赖 NodeJS 环境，Node.js
-
node.js安装一键式安装
测试安装是否成功，按下【win+R】键，输入cmd，打开cmd窗口
输入：node -v // 显示node.js版本
npm -v // 显示npm版本
显示版本说明安装成功
环境配置找到安装位置新建两个文件夹node_global和node_cache
image.png
创建完毕后，使用管理员身份打开cmd命令窗口
npm config set prefix "路径\node_global"
npm config set prefix D: node.js\node global
npm config set cache "路径\node cache"
npm config set cache D: node.js\node cache
image.png
配置环境变量
此电脑-单击右键-属性-高级系统设置-环境变量
image.pngimage.pngimage.png
点击新建
编辑用户变量中的Path编辑,将node_global路径放在AppData\Roaming\npm上面
变量名:NODE_PATH
变量值为:node_global路径\node_modules
D:\node.js\node_global\node_modules
在node_global下加一个文件夹node_modules
image.pngimage.png
或者系统变量Path编辑添加;%NODE_PATH%
image.png
测试是否安装成功
npm install express -g//(管理员命令)出现以下说明成功
下载安装pnpm(pnpm比npm快)
npm install express -g pnpm
刷新环境变量
新开cmd，输入命令提示符
set PATH=C: (刷新环境变量)
必须关闭这个cmd，再新开个cmd，输入
echo %PATH%(重新读取path的配置文件)
此时再直接输入pnpm-v即可成功
- 运行
git命令需依赖 Git 环境，Git 下载地址
下载依赖包下方打开命令行终端
image.pngimage.png
编译和运行 uni-app 项目
- 安装依赖
pnpm install(管理员身份运行否则报错)
右键HBuilderX管理员身份运行,开启终端之后会多一个node_modules文件夹
- 编译成微信小程序
pnpm dev:mp-weixin会多一个dist文件夹
-
导入微信开发者工具
image.png
image.png
提示
编译成 H5 端可运行 pnpm dev:h5 通过浏览器预览项目。
用 VS Code 开发 uni-app 项目
为什么选择 VS Code?
HbuilderX对TS类型支持暂不完善
VSCode对TS 类型支持友好，熟悉的编辑器
用 VS Code 开发配置
项目采用 Vue3 + TS 开发 uni-app 项目，所以需要分别安装 Vue3 + TS 插件 和 uni-app 插件。
安装 Vue3 + TS 插件
注意事项
没开发过 Vue3 + TS 项目的小伙伴注意，需要先安装 Vue3 和 TS 的插件，并完成以下配置 👇
安装 Vue Language Features (Volar) ：Vue3 语法提示插件
安装 TypeScript Vue Plugin (Volar) ：Vue3 的 TS 插件
工作区禁用 Vetur 插件(Vue2 插件和 Vue3 插件冲突)
工作区禁用 @builtin typescript 插件（禁用后自动开启 Vue3 的 TS 托管模式）
需禁用的插件
安装 uni-app 插件
-
👉 安装 uni-app 开发插件
-
uni-create-view ：快速创建 uni-app 页面,要进入改设置,否则只创建.vue
image.png
image.png
-
uni-create-view ：快速创建 uni-app 页面,要进入改设置,否则只创建.vue
-
uni-helper ：uni-app 代码提示,Ctrl+I可以唤醒代码提示
image.png
<meta charset="utf-8"> -
uniapp 小程序扩展 ：鼠标悬停查文档,出现属性官方文档可以直接到不懂的,不用一个一个找
image.png
新建页面
不设置uni-create-view不会有my的同名文件夹
- 👉 TS 类型校验
- 管理员身份快捷图标右键,打开vscode用Ctrl+`打开命令行终端
- 安装 类型声明文件 pnpm i -D miniprogram-api-typings @uni-helper/uni-app-types
- package.json中代码
"devDependencies": {
"@dcloudio/types": "^3.3.2",
"@dcloudio/uni-automator": "3.0.0-3080720230703001",
"@dcloudio/uni-cli-shared": "3.0.0-3080720230703001",
"@dcloudio/uni-stacktracey": "3.0.0-3080720230703001",
"@dcloudio/vite-plugin-uni": "3.0.0-3080720230703001",
"@uni-helper/uni-app-types": "^0.5.12",
"@vue/tsconfig": "^0.1.3",
"miniprogram-api-typings": "^3.12.1",
"typescript": "^4.9.4",
"vite": "4.0.4",
"vue-tsc": "^1.0.24"
}
- 管理员身份打开Windows PowerShell输入,最后选y,(如果进入终端后报错pnpm不能在系统运行)
- 配置 tsconfig.json
// 类型声明文件
"types": [
"@dcloudio/types", // uni-app API 类型
"miniprogram-api-typings", // 原生微信小程序类型
"@uni-helper/uni-app-types" // uni-app 组件类型
]
},
"vueCompilerOptions": {
// 原配置 `experimentalRuntimeMode` 现调整为 `nativeTags`
"nativeTags": ["block", "component", "template", "slot"]
// "experimentalRuntimeMode": "runtime-uni-app"
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
- 👉 JSON 注释问题
- 设置文件关联，把 manifest.json 和 pages.json 设置为 jsonc
-
其他json不能写注释
image.pngimage.png
