如何提高网站关键词排名,国内 扁平化 网站,义乌多语言网站建设,网站开发需要哪些证书uni-app 基础
创建 uni-app 项目方式
uni-app 支持两种方式创建项目#xff1a; 通过 HBuilderX 创建#xff08;需安装 HBuilderX 编辑器#xff09; 通过命令行创建#xff08;需安装 NodeJS 环境#xff09;
HBuilderX 创建 uni-app 项目
创建步骤
1.下载安装 H…uni-app 基础
创建 uni-app 项目方式
uni-app 支持两种方式创建项目 通过 HBuilderX 创建需安装 HBuilderX 编辑器 通过命令行创建需安装 NodeJS 环境
HBuilderX 创建 uni-app 项目
创建步骤
1.下载安装 HbuilderX 编辑器 2.通过 HbuilderX 创建 uni-app vue3 项目 3.安装 uni-app vue3 编译器插件 4.编译成微信小程序端代码 5.开启服务端口 小技巧分享模拟器窗口分离和置顶 HBuildeX 和 微信开发者工具 关系 ::: tip 温馨提示 HBuildeX 和 uni-app 都属于 DCloud 公司的产品。 :::
pages.json 和 tabBar 案例
目录结构
我们先来认识 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: [{path: pages/index/index,// 页面样式配置style: {navigationBarTitleText: 首页}},{path: pages/my/my,style: {navigationBarTitleText: 我的}}],// 全局样式配置globalStyle: {navigationBarTextStyle: white,navigationBarTitleText: uni-app,navigationBarBackgroundColor: #27BA9B,backgroundColor: #F8F8F8},// tabBar 配置tabBar: {selectedColor: #27BA9B,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}]}
}uni-app 和原生小程序开发区别
开发区别
uni-app 项目每个页面是一个 .vue 文件数据绑定及事件处理同 Vue.js 规范 属性绑定 src{ { url }} 升级成 :srcurl 事件绑定 bindtapeventName 升级成 tapeventName支持传参 支持 Vue 常用指令 v-for、v-if、v-show、v-model 等
其他区别补充
调用接口能力建议前缀 wx 替换为 uni 养成好习惯支持多端开发。style 页面样式不需要写 scoped小程序是多页面应用页面样式自动隔离。生命周期分三部分应用生命周期(小程序)页面生命周期(小程序)组件生命周期(Vue)
案例练习
主要功能
滑动轮播图点击大图预览
效果预览
参考代码
templateswiper classbanner indicator-dots circular :autoplayfalseswiper-item v-foritem in pictures :keyitem.idimage taponPreviewImage(item.url) :srcitem.url/image/swiper-item/swiper
/templatescript
export default {data() {return {// 轮播图数据pictures: [{id: 1,url: https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_1.jpg,},{id: 2,url: https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_2.jpg,},{id: 3,url: https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_3.jpg,},{id: 4,url: https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_4.jpg,},{id: 5,url: https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_5.jpg,},],}},methods: {onPreviewImage(url) {// 大图预览uni.previewImage({urls: this.pictures.map((v) v.url),current: url,})},},
}
/scriptstyle
.banner,
.banner image {width: 750rpx;height: 750rpx;
}
/style命令行创建 uni-app 项目
优势
通过命令行创建 uni-app 项目不必依赖 HBuilderXTypeScript 类型支持友好。
命令行创建 uni-app 项目
vue3 ts 版
::: code-group
# 通过 npx 从 github 下载
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称# 通过 git 从 gitee 克隆下载 (备用地址)
git clone -b vite-ts https://gitee.com/dcloud/uni-preset-vue.git:::
创建其他版本可查看uni-app 官网
::: danger 常见问题
运行 npx 命令下载失败请尝试换成手机热点重试换手机热点依旧失败请尝试从国内备用地址下载在 manifest.json 文件添加 小程序 AppID 用于真机预览运行 npx 命令需依赖 NodeJS 环境NodeJS 下载地址运行 git 命令需依赖 Git 环境Git 下载地址
:::
编译和运行 uni-app 项目
安装依赖 pnpm install编译成微信小程序 pnpm dev:mp-weixin导入微信开发者工具
::: tip 温馨提示 编译成 H5 端可运行 pnpm dev:h5 通过浏览器预览项目。 :::
用 VS Code 开发 uni-app 项目
为什么选择 VS Code
VS Code 对 TS 类型支持友好前端开发者主流的编辑器HbuilderX 对 TS 类型支持暂不完善期待官方完善
用 VS Code 开发配置 前置工作安装 Vue3 插件点击查看官方文档 安装 Vue Language Features (Volar) Vue3 语法提示插件安装 TypeScript Vue Plugin (Volar) Vue3TS 插件工作区禁用 Vue2 的 Vetur 插件(Vue3 插件和 Vue2 冲突)工作区禁用 builtin typescript 插件禁用后开启 Vue3 的 TS 托管模式 安装 uni-app 开发插件 uni-create-view 快速创建 uni-app 页面uni-helper uni-app 代码提示uniapp 小程序扩展 鼠标悬停查文档 TS 类型校验 安装 类型声明文件 pnpm i -D miniprogram-api-typings uni-helper/uni-app-types配置 tsconfig.json JSON 注释问题 设置文件关联把 manifest.json 和 pages.json 设置为 jsonc
tsconfig.json 参考
// tsconfig.json
{extends: vue/tsconfig/tsconfig.json,compilerOptions: {sourceMap: true,baseUrl: .,paths: {/*: [./src/*]},lib: [esnext, dom],// 类型声明文件types: [dcloudio/types, // uni-app API 类型miniprogram-api-typings, // 原生微信小程序类型uni-helper/uni-app-types // uni-app 组件类型]},// vue 编译器类型校验标签类型vueCompilerOptions: {// 原配置 experimentalRuntimeMode 现调整为 nativeTagsnativeTags: [block, component, template, slot], // [!code ]experimentalRuntimeMode: runtime-uni-app // [!code --]},include: [src/**/*.ts, src/**/*.d.ts, src/**/*.tsx, src/**/*.vue]
}工作区设置参考
// .vscode/settings.json
{// 在保存时格式化文件editor.formatOnSave: true,// 文件格式化配置[json]: {editor.defaultFormatter: esbenp.prettier-vscode},// 配置语言的文件关联files.associations: {pages.json: jsonc, // pages.json 可以写注释manifest.json: jsonc // manifest.json 可以写注释}
}::: danger 版本升级
原依赖 types/wechat-miniprogram 现调整为 miniprogram-api-typings。原配置 experimentalRuntimeMode 现调整为 nativeTags。
:::
这一步处理很关键否则 TS 项目无法校验组件属性类型。
开发工具回顾
选择自己习惯的编辑器开发 uni-app 项目即可。
HbuilderX 和 微信开发者工具 关系
VS Code 和 微信开发者工具 关系
用 VS Code 开发课后练习
使用 VS Code 编辑器写代码实现 tabBar 案例 轮播图案例。
::: tip 温馨提示
VS Code 可通过快捷键 Ctrl i 唤起代码提示。
:::
