试试用VSCode开发uni-app，再加上使用DCloud插件市场的插件，你别提有多香

doudou5262023-11-03 10:36

俺滴创作格言： 俺写的不是文章，是心情，你看的不是文章，是文学，啥文学，废话文学，要记住，嗯！

VSCode开发uni-app

虽然说 HBuilder X 开发体验还算不错，但是有时候金窝银窝不如自己的狗窝，当俺们习惯了 VSCode 之后，有时候不太愿意换开发工具。俺从刚开始接触前端开发就用的是 VSCode。也用过 HBuilder X 开发过小程序，讲实话哈，是真的不习惯，还有就是它的那个编辑器界面真的，反正俺不喜欢，也可能是看 VSCode 看习惯了。

为啥选VSCode呢

  • VSCode开箱即用地支持Emmet 2.0。 这意味着您不需要任何其他扩展即可利用它；
  • 已经习惯了使用VSCode去敲代码，不想更换编辑器了。刚开始直接使用 vscode 开发 uni-app，体验可能并不是很好，但是用习惯了后，你就知道他的强大了；
  • 强大的语法提示、颜色块区分、写注释，插件拓展丰富，极大的提高了开发体验和效率；
  • 还有如果你开发的是关于TS的项目，VSCode 比 HBuilder X 的对TS的支持性更强；
  • 在实际开发中，我们知道Hbuilder写代码和调试非常麻烦，换到咱们的 VSCode，快捷键那些，界面插件调试，那叫一个舒服；

推荐文章

如果该文章上的创建项目的方法会报错的话，你可以试试下载uni-app官网提供的模板，俺这里就以Vue3/Vite版为例子吧Vue3/Vite模版。下载好后解压，然后通过VSCode打开模板。

微信小程序开发体验

刚接触微信小程序开发，你需要先注册一个微信公众平台账号，然后登录进去，点击开发管理找到开发设置，将AppID复制下来。

将appid复制到manifest.json：

cmd 复制代码 
cd uni-preset-vue-vite-ts
pnpm install
pnpm dev:mp-weixin

打开微信开发者工具并导入项目下的dist/dev/mp-weixin

点击确定后：

配置小程序环境

引入相关依赖： 如果启动时遇到错误"hasInjectionContext" is not exported by，可以卸载pinia重新安装指定指定版本。

cmd 复制代码 
# uni-ui 组件库
pnpm i @dcloudio/uni-ui
# pinia做持久化
pnpm i pinia@2.0.36 pinia-plugin-persistedstate
# 样式处理器
pnpm i sass -D
# 微信小程序 API 的 TypeScript 类型定义文件
pnpm i miniprogram-api-typings -D
# uni 类型声明文件
pnpm i -D @uni-helper/uni-ui-types @uni-helper/uni-app-types
  • (pnpm i -D eslint prettier eslint-plugin-vue @vue/eslint-config-prettier @vue/eslint-config-typescript @rushstack/eslint-patch @vue/tsconfig)这些都是关于代码规范的一些插件，如果不是做什么像团队项目呀，外包呀等一些比较大的项目，基本可以不用的，可装可不装。

自动导入组件

通过easycom在 pages.json文件中加入组件自动导入规则

json 复制代码 
// 组件自动导入
  "easycom": {
    "autoscan": true,
    "custom": {
      // uni-ui 规则如下配置
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
  },

类型声明文件

json 复制代码 
// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": [
      "@dcloudio/types", // uni-app API 类型
      "miniprogram-api-typings", // 原生微信小程序类型
      "@uni-helper/uni-app-types", // uni-app 组件类型
      "@uni-helper/uni-ui-types" // uni-ui 组件类型  
    ]
  },
  // vue 编译器类型，校验标签类型
  "vueCompilerOptions": {
    "nativeTags": ["block", "component", "template", "slot"]
  }
}

nativeTags，如果你不加入这个配置的话，代码中的view标签会报红，会影响你写代码时的心情吧，可能。

uni-app 微信小程序启用组件按需注入

json 复制代码 
"lazyCodeLoading": "requiredComponents"

底部导航配置

分别创建经营面板operator、就诊室treatment、药品零售drug 、系统维护install 四个基础页面；在pages.json下的pages配置项下引入四个页面，再通过tabBar设置路由跳转。

json 复制代码 
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
            "path": "pages/operator/operator",
            "style": {
        "navigationStyle": "custom",
        // "navigationBarTextStyle": "white",
                "navigationBarTitleText": "经营面板"
            }
        },
    {
            "path": "pages/treatment/treatment",
            "style": {
                "navigationBarTitleText": "就诊室"
            }
        },
    {
            "path": "pages/appointment/appointment",
            "style": {
                "navigationBarTitleText": "预约挂号"
            }
        },
    {
            "path": "pages/drug/drug",
            "style": {
                "navigationBarTitleText": "药品零售"
            }
        },
    {
            "path": "pages/install/install",
            "style": {
                "navigationBarTitleText": "系统管理"
            }
        },
    {
            "path": "pages/login/login",
            "style": {
        "navigationStyle": "custom",
        "navigationBarTextStyle": "white",
                "navigationBarTitleText": "登录注册"
            }
        },
    ],
    ...
  "tabBar": {
    "color": "#1f1f22",
    "selectedColor": "#1448e0",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/operator/operator",
      "iconPath": "static/tabBar/operator.png",
      "selectedIconPath": "static/tabBar/operator_selected.png",
      "text": "经营"
    }, {
      "pagePath": "pages/treatment/treatment",
      "iconPath": "static/tabBar/treatment.png",
      "selectedIconPath": "static/tabBar/treatment_selected.png",
      "text": "就诊"
    },
    {
      "pagePath": "pages/appointment/appointment",
      "iconPath": "static/tabBar/appointment.png",
      "selectedIconPath": "static/tabBar/appointment_selected.png",
      "text": "预约"
    },
    {
      "pagePath": "pages/drug/drug",
      "iconPath": "static/tabBar/drug.png",
      "selectedIconPath": "static/tabBar/drug_selected.png",
      "text": "药品"
    },
    {
      "pagePath": "pages/install/install",
      "iconPath": "static/tabBar/install.png",
      "selectedIconPath": "static/tabBar/install_selected.png",
      "text": "系统"
    }]
  }

使用DCloud的插件

VSCode 不能像 Hbuilder X 一样一键导入DCloud 插件市场里的插件，但是如果你是使用 VSCode 用 cli 创建的项目要使用插件，一般有两种方式，第一种是支持 npm 安装的，那就用 npm 最好，如 uViewUI ，另一种不支持 npm 安装的，比如说 DCloud 插件市场里的插件大部分都不能用 npm 安装，而且你就要用它的，你讲这气不气人。那就下载对应的zip压缩包，放到项目中，这种一般会有两个版本，咱们一般会选择 非uni_modules版本 ，当然 uni_modules版本 ， 俺这里使用 uCharts 为例子。

使用uCharts

如果你的小程序需要使用到数据可视化，但 uni-app 无法直接使用 echarts ，显示错误无法找到echarts.js

下载后，找到非uni_modules目录，并找到下图的相关文件和目录，然后将他们统一放在components目录下

上面文件引入后，qiun-data-charts.vue里面的引入的js路径需要修改：

项目中引入，详细内容看官网：uCharts官网 - 秋云uCharts跨平台图表库

vue 复制代码 
<view class="trend_chart">
      <qiun-data-charts
        type="ring"
        :opts="opts"
        :chart-data="chartData"
        :canvas2d="true"
        canvasId="GIzkeOGMWvGRSzfPUfdANGOcgzQDyJan"
      />
    </view>
ts 复制代码 
<script setup lang="ts">
import { ref, onMounted } from 'vue'
// 引入ucharts
import qiunDataCharts from '@/components/ucharts/qiun-data-charts.vue'
​
const chartData = ref()
const opts = ref()
// 营业额
let turnover = ref<string>('9999')
// 挂号人次
let v1 = ref<number>(90)
​
onMounted(() => {
  setTimeout(() => {
    chartData.value = {
      series: [
        {
          data: [
            { name: '挂号人次', value: v1 },
            { name: '接诊人次', value: 45 },
            { name: '新增会员', value: 20 }
          ]
        }
      ]
    }
  }, 100)
​
  opts.value = {
    rotate: false,
    rotateLock: false,
    color: ['#4d7ee8', '#c64b70', '#d79957'],
    dataLabel: true,
    enableScroll: false,
    legend: {
      show: true,
      position: 'bottom',
      lineHeight: 24
    },
    title: {
      name: '营业额',
      fontSize: 14,
      color: '#666666'
    },
    subtitle: {
      name: turnover,
      fontSize: 24,
      color: '#7cb5ec'
    },
    extra: {
      ring: {
        ringWidth: 16,
        activeOpacity: 0.5,
        activeRadius: 18,
        offsetAngle: 0,
        labelWidth: 10,
        border: true,
        borderWidth: 3,
        borderColor: '#FFFFFF'
      }
    }
  }
})
</script>

俺暂时只知道这一种方法，如果你有其他方法或比这更好的方法，感谢你在评论区分享一下自己的方法。

相关推荐
莹雨潇潇9 分钟前
Docker 快速入门（Ubuntu版）
java·前端·docker·容器
Jiaberrr17 分钟前
Element UI教程：如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
Tiffany_Ho1 小时前
【TypeScript】知识点梳理（三）
前端·typescript
安冬的码畜日常2 小时前
【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签（上）
开发语言·前端·javascript·信息可视化·数据可视化·d3.js
小白学习日记3 小时前
【复习】HTML常用标签＜table＞
前端·html
丁总学Java3 小时前
微信小程序-npm支持-如何使用npm包
前端·微信小程序·npm·node.js
yanlele3 小时前
前瞻 - 盘点 ES2025 已经定稿的语法规范
前端·javascript·代码规范
懒羊羊大王呀4 小时前
CSS——属性值计算
前端·css
DOKE4 小时前
VSCode终端：提升命令行使用体验
前端
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07CTF网络安全大赛简单的web抓包题目：HEADache08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10springer 在线投稿编译踩坑