试试用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>

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

相关推荐
y先森2 小时前
CSS3中的伸缩盒模型（弹性盒子、弹性布局）之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy2 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex，2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏（补充上一条）
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒5 小时前
如何在Vue项目中应用TypeScript？应该注意那些点？
前端·vue.js·typescript
小镇程序员6 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐6 小时前
前端图像处理(一)
前端
热门推荐
01ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04【音视频 | opus】opus编解码库(opus-1.4)详细介绍以及使用——附带解码示例代码05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07IT专业入门，高考假期预习指南08玄机平台应急响应—webshell查杀09RAG 实践- Ollama+RagFlow 部署本地知识库10〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇