uniapp小兔鲜

发表于 | 分类于 |

B站视频
操作笔记 09_vue/视频3：uni-app 小兔鲜
2023-09-07 08:34:13（开始）
2023-09-11 18:34:08（结束） 项目3天（8 9 11）
.
.
.
本文相关链接：
项目文档
接口文档
uniapp官网

HBuilderX项目 创建并运行

1、下载、安装 下载 微信开发者工具
2、打开 => 微信扫描登录
3、设置 打开端口
在这里插入图片描述

微信开发者工具 => 预览、调试
HBuilderX => 撸代码

1、下载zip、解压并运行
下载 HBuilderX

2、创建 uni-app、并运行、热更新
创建 uni-app、并运行、热更新

新建页面my、配置tabbar

新建页面my、配置tabbar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
{
  "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": "#278A9B",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "selectedColor": "#278A9B",
    "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"
      }
    ]
  },
  "uniIdRouter": {}
}

轮播图案例

1
2
+ 调用接口能力，建议前缀 wx 替换为 uni ，养成好习惯，支持多端开发。
+ <style> 页面样式不需要写 scoped，小程序是多页面应用，页面样式自动隔离。

// index.vue 报错：记得刷新（微信开发者工具：重新编译）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<template>
  <swiper class="banner" indicator-dots circular :autoplay="false">
    <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 {
        // 轮播图数据
        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,
        })
      },
    },
  }
</script>

<style>
  .banner,
  .banner image {
    width: 750 rpx;
    height: 750 rpx;
  }
</style>

命令行创建

命令行创建 参考文档

1
2
3
4
5
6
7
npx degit dcloudio/uni-preset-vue#vite-ts uni-app-vue3-ts

cd uni-app-vue3-ts

yarn install   # 开着我的代理   我试了 pnpm install 会报错

yarn dev:mp-weixin   # 微信开发者工具打开项目  dist/dev/mp-weixin

命令行创建uni-app

VS Code

1、VS Code 下载
在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
安装插件
Chinese (Simplified) (简体中文) --- 下载后重启
GitHub Copilot --- 需要登录 GitHub
uni-create-view  --- 作者:毛先生   【快速创建页面】
    ===> 扩展设置： 
            1. 勾选 '创建视图时是否创建同名文件夹'
            2. '创建文件夹中生成的文件名' ===> '与文件夹同名'
uni-helper       --- 作者:Uni Helper   【pages.json 代码提示（Ctrl + i  代码提示）】
    ===> WebStorm 'Uniapp Tool'
uniapp小程序扩展   --- 作者:evils   【鼠标悬停显示文档】
Vue Language Features (Volar)   --- 作者:Vue   【.vue语法高亮】
Auto Rename Tag --- 作者:Jun Han   选下载量最多的   【HTML 标签修改】



设置同步已打开 --- GitHub登录
设置 --- '资源管理器'   => Explorer:Compact Folders  去除勾选

Windows PowerShell 以管理员身份运行
'set-ExecutionPolicy RemoteSigned'   输入'A'
【设置后，重启 VS Code】

设置 --- 'git path'   setting.json
    "git.path": "C:/Everythings/Git/Git/Git/bin/git.exe"


Ctrl + i  代码提示

右键 pages ‘新建uniapp页面’ ===> 输入 ‘my 我的’

1
2
3
4
5
6
7
8
9

<template>
  <view class="my">my</view>
</template>

<script lang="ts" setup>
</script>

<style></style>

yarn add -D @types/wechat-miniprogram @uni-helper/uni-app-types
配置 tsconfig.json 测试失败

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom"
    ],
    "types": [
      "@dcloudio/types",
      "@types/wechat-miniprogram",
      "@uni-helper/uni-app-types"
    ]
  },
  "vueCompilerOptions": {
    "nativeTags": [
      "block",
      "component",
      "templatge",
      "slot"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

JSON 注释问题 ===> 设置 搜索’文件关联’

  • manifest.json jsonc
  • tsconfig.json jsonc
  • pages.json jsonc

项目起步

项目初始化

git clone http://git.itcast.cn/heimaqianduan/erabbit-uni-app-vue3-ts.git uni-app-rabbit-shop

pnpm install
pnpm dev:mp-weixin

uni ui组件

uni组件 - 开始使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 组件
pnpm i @dcloudio/uni-ui
        // pages.json
        {
          // 组件自动导入
          "easycom": {
            "autoscan": true,
            "custom": {
              // uni-ui 规则如下配置
              "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
            }
          },
          "pages": [...]
        }


# 组件标签提示
pnpm i -D @uni-helper/uni-ui-types
        // tsconfig.json
        "types": [
          ...
          "@uni-helper/uni-ui-types" // -----------------新增
        ]

持久化

pinia持久化 — 官方文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
pnpm i pinia-plugin-persistedstate

          // TODO: 持久化
          {
            // 网页端
            // persist: true,
            // 调整为兼容多端的API
            persist: {
              storage: {
                getItem: (key) => uni.getStorageSync(key),
                setItem: (key, value) => uni.setStorageSync(key, value),
              }
            }
          },

关键记录

插件市场

1
2
3
4
5
6
todo 商品详情：立即购买（校验地址选择）   地址选择 && 立即购买跳转渲染地址



HbuildX => 运行 => 运行到手机 => 运行到 Android基座 （数据线连接 && USB调试 && 开发者模式）
升级 uni-app 版本 => HbuildX版本        npx @dcloudio/uvm@latest 3.2.0

部署

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
pnpm install
pnpm dev:mp-weixin # 微信开发者工具打开项目  dist/dev/mp-weixin

# 打包
pnpm build:h5
    manifest.json
    export default defineConfig({
        {
          "name": "小兔鲜儿",
          "appid": "",
          "versionName": "1.0.0",
          /* 网页端 H5特有相关 */
          "h5": {
            "router": {
              //"base": "./"
              "base": "/uni-app-rabbit-shop"// ------------------配置地址
            }
          },

# 部署
    1. FinalShell 进入此目录 /app/docker/nginx/html
    2. 右键新建文件夹 uni-app-rabbit-shop
    3. 进入 uni-app-rabbit-shop 文件夹，把打包后的 h5 文件夹拖进来，重命名为 dist
    4. FinalShell 进入此目录 /app/docker/nginx/conf/conf.d
    5. 选中 ssl.conf，右键【打开】，添加下面内容，Ctrl + S 保存
            location /uni-app-rabbit-shop {
                    alias /usr/share/nginx/html/uni-app-rabbit-shop/dist/;
                    index index.html index.html;
                    try_files $uri $uri/ /uni-app-rabbit-shop/index.html;
            }# 006-uni-app小兔鲜
    6. docker restart nginx01
    7. blog/themes/next/_config.yml
            links:
              006-uni-app小兔鲜: https://taopanfeng.com/uni-app-rabbit-shop
              【说明，接口是 https，这里就不用改为 http 了】
# git 问题
    1. 创建文件夹   09_vue/视频3：uni-app 小兔鲜/uni-app-rabbit-shop
    2. 把内容复制到文件夹下（除了 dist 和 node_modules）
    3. 顶部栏 Git -> Manage Remotes
    4. 鼠标右击文件夹 uni-app-rabbit-shop   ->   Git   ->   Push      origin : uni-app-rabbit-shop
    5. 新建文件   '视频3：uni-app 小兔鲜'   ->   '代码 == 参考分支 uni-app-rabbit-shop.md'
       内容 ===> [uni-app-rabbit-shop 点击打开链接](https://gitee.com/taopanfeng/front-end/tree/uni-app-rabbit-shop/)
    6. 新建文件夹   'uni-app-rabbit-shop'   ->   'md'        复制md文件