下載開發工具

1、小程序開發工具

登錄釘釘開發平臺，根據自己的需求下載合適的版本，我這里下載的是Windows （64位）版本

小程序開發工具 - 釘釘開放平臺

2、HBuilder X?

HBuilderX-高效極客技巧

新建項目及相關配置

新建項目

在HBuilder X中新建一個uniapp項目，使用默認模板，Vue版本根據自己的需求選擇

配置小程序開發工具路徑

在項目根目錄下新建package.json配置文件，用來啟動釘釘小程序開發者工具

{"uni-app": {"scripts": {"mp-dingtalk": {"title": "釘釘小程序","env": {"UNI_PLATFORM": "mp-alipay"},"define": {"MP-DINGTALK": true}}}}
}

按上面配置好后就能看到運行-釘釘小程序了

運行好后會自動啟動小程序開發工具，有時也會啟動失敗，需要手動打開。如果是第一次打開小程序開發工具，需要自己選擇項目（根目錄下-unpackage-dist-dev-mp-alipay），如果不是首次打開直接選擇歷史項目即可，等待編譯完成。

釘釘小程序創建及配置

打開釘釘開放平臺，用自己的賬號選擇組織登錄釘釘小程序后臺

釘釘開放平臺

創建小程序

創建好小程序后回到小程序開發者工具，關聯小程序

引入uView組件

安裝依賴

npm install uview-ui@2.0.31

在main.js中，引入并使用uView的JS庫，注意這兩行放在 import Vue 之后

import uView from "uview-ui";
Vue.use(uView);

在項目根目錄的uni.scss中引入此文件

@import 'uview-ui/theme.scss';

在App.vue樣式首行的位置引入，注意給style標簽加入lang="scss"屬性

<style lang="scss">/* 注意要寫在第一行，同時給style標簽加入lang="scss"屬性 */@import "uview-ui/index.scss";
</style>

配置easycom組件模式，在pages.json設置

{"easycom": {"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"},   // 此為本身已有的內容"pages": [// ......]
}

?如果出現scss方面的報錯，可以重新安裝下sass

// 安裝sass
npm i sass -D// 安裝sass-loader，注意需要版本10，否則可能會導致vue與sass的兼容問題而報錯
npm i sass-loader@10 -D

這世界很喧囂，做你自己就好