一、新建项目
1.全局安装 vue-cli,如果有用vue-cli构建过项目可跳过该步
npm install -g @vue/cli
2.创建uni-app+vue3项目
vue create -p dcloudio/uni-preset-vue#vue3 uni-vue3-project
uni-app模板选择:默认模板(TypeScript)
二、添加配置
1.做一些对应飞书小程序的配置,可参考官网说明
package.json中加入如下配置:
"uni-app": {
"scripts": {
"mp-feishu": {
"title": "飞书小程序",
"env": {
"UNI_PLATFORM": "mp-toutiao"
},
"define": {
"MP-FEISHU": true
}
}
}
}
代码中使用自定义的条件编译:
// #ifdef MP-FEISHU
飞书端特有的API实现
// #endif
2.进入项目目录
cd uni-vue3-project
3.运行
npm run dev:custom mp-feishu
如果出现 Error: Cannot find module '@dcloudio/uni-cli-i18n',装插件
npm i @dcloudio/uni-cli-i18n -D
再运行。
可以看到项目中多了文件夹:dist/dev/mp-toutiao,可以放到飞书开发者工具或在HBuilderX中选择运行->飞书小程序调试项目。
4.至此基本的构建已经完成,但是不够完美,如果我们有另外一个平台字节跳动小程序,比如编译到抖音的小程序,运行之后也会到dist/dev/mp-toutiao文件夹下,同一类型不同平台的包会互相覆盖,如此肯定是非常不方便,做如下配置可以运行到不同的包:
package.json中的scripts添加:
"build:mp-feishu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao UNI_OUTPUT_DIR=dist/build/mp-feishu vue-cli-service uni-build",
"dev:mp-feishu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao UNI_OUTPUT_DIR=dist/dev/mp-feishu vue-cli-service uni-build --watch",
命令行执行:
npm run dev:mp-feishu
npm run build:mp-feishu
可以在dist文件夹下看到飞书端的包已经和一般字节跳动小程序包分开了:
大功告成,愉快编码。如果本文对你有些许帮助,动动手指点个赞吧,你的鼓励是我创作的动力,笔芯♥。