欢迎各位读者，这是新开发的笔记栏目。基于uni-app来进行开发前端项目：小兔鲜儿的微信小程序。笔记基于视频教程：https://www.bilibili.com/video/BV1Bp4y1379L 进行笔记记录。
一、Day1
1、01-uni-app小兔鲜儿导学视频
2、02-创建uni-app项目
我们的话要先来创建uni-app项目，我们只要用到的软件叫做： HBuilderX，下载地址：https://dcloud.io/hbuilderx.html
创建项目之后，我们查看项目的文件，并没有发现我们常见的ML和SSS文件后缀（微信小程序需要用的），这时候就需要我们去下载一个插件，在导航栏中点击工具：
可能有些同学没下载，根据引导来下载就行了，下载完后设定启动路经济课：
搞定完后来进行启动即可：
效果如图：
3、03-pages.json 和 tarBar 案例
那我们来到pages.json当中来进行修改：
接下来的话我们要创建新的页面：
创建之后也会发现软件已经为我们配置好了 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",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#1cac9d",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index", // page的路经
"text": "首页", // 显示的名称
"iconPath": "/static/tabs/home_default.png", // 未选中时显示的ICON图标
"selectedIconPath": "/static/tabs/home_selected.png" // 选中时显示的ICON图标
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "/static/tabs/user_default.png",
"selectedIconPath": "/static/tabs/user_selected.png"
}
]
},
"uniIdRouter": {}
}
同时的话你会发现图标是有根据点击后进行更改颜色的，但是文字部分没有变色
添加这个即可：
上小结：
4、04-uni-app和原生小程序开发区别
示例代码：
<template>
<swiper class="banner" indicator-dots circular :autoplay="false"> <!-- // indicator-dots 就是是否显示图标 circular就是能不能滑动 autoplay是自动播放 -->
<swiper-item v-for="item in pictures" :key="item.id">
<image @tap="onPreviewImage(item.url)" :src="item.url"></image>
</swiper-item>
</swiper>
</template>
<script>
export default {
data() {
return {
title: 'Hello uni-app',
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"},
]
}
},
onLoad() {
},
methods: {
onPreviewImage(url){ // 设置点击图片预览
uni.previewImage({
urls: this.pictures.map(v=>v.url),
current: url
})
}
}
}
</script>
<style> /* 设置图片大小 */
.banner image{
width: 750rpx;
height: 750rpx;
}
</style>效果展示：
温馨提示：调用接口能力，建议前缀wX替换为uni，养成好习惯，这样支持多端开发。
5、05-通过命令行方式安装uni-app
其他的东西直接跳过了，因为我想用HBuilderX（实际上我喜欢WebStorm）。大家可以点击视频链接查看详细步骤：点我跳转
6、用VSCode开发uni-app项目
我具体展示一下要下载哪三个VSCode插件：
三个插件安装完后基本能实现我们在微信小程序上的开发
另外多嘴一句，在WebStorm当中可能适配性不好
但是的话现在还没结束，因为我们现在还没有完成对TS的校验：
首先的话在我们的终端输入以下两个命令：
npm install -g pnpm
pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types然后如果说你找不到你的tsconfig 和 package 两个配置文件夹的话你可以重新git下来：
git clone -b vite-ts https://gitee.com/dcloud/uni-preset-vue.git uni-app-project更改tsconfig.json的内容：
{
"extends": "@vue/tsconfig/tsconfig.json",
"compilerOptions": {
"ignoreDeprecations": "5.0",
"sourceMap": true,
"verbatimModuleSyntax": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"lib": ["esnext", "dom"],
"types": [
"@dcloudio/types",
"@types/wechat-miniprogram",
"@uni-helper/uni-app-types"
]
},
"vueCompilerOptions": {
"nativeTags": ["block", "component", "template", "slot"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}设置关于manifest.json的文件关联：
7、07-拉取小兔鲜儿项目模版代码
直接 Git 直接拉取镜像下来：
git clone http://git.itcast.cn/heimaqianduan/erabbit-uni-app-vue3-ts.git heima-shop
pnpm install然后运行：
pnpm dev:mp-weixin
最后我们要到微信开发者工具来导入内容：
开发者工具就会加载我们的代码
8、基础架构
➀安装uni-ui组件库
根据官网的步骤来：https://uniapp.dcloud.net.cn/component/uniui/quickstart.html
首先在终端输入以下命令来下载uni-ui:
pnpm i @dcloudio/uni-ui接下来的话按照官方的指示，我们还需要配置一下easycom：
// 组件自动引入规则
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"^开头的就是指uni开头的东西，然后(.*)就是匹配uni-后面的所有东西直接把后面的$1替换掉
不过好消息是，社区的小伙伴开发出来一个uni-helper/uni-ui-types方便我们能够理解标签的意思，那如何安装呢？终端输入以下命令来安装：
pnpm i -D @uni-helper/uni-ui-types
上小结：
➁小程序端Pinia持久化
什么叫做Pinia持久化呢？Pinia 是 Vue 3（包括 UniApp）官方推荐的状态管理库，所谓 持久化（Persistence） 就是让你在刷新页面、重新打开小程序时，数据不会丢失，还能自动从本地恢复回来。
来到目录来进行配置：src/stores/modules/member.ts
persist:{
storage: { //getItem和 setItem是两个基本的数据
getItem: (key) => {
return uni.getStorageSync(key);
},
setItem: (key, value) => {
return uni.setStorageSync(key, value);
},
}
}黑马程序员这边已经配置好了，只额外说了下这个persist的配置
小程序开发吗？厉害