wx miniprogram boilerplate
1.0.0
ขั้นตอนการพัฒนาแอปเพล็ต WeChat บน Gulp
รูปแบบการพัฒนาของโปรแกรมขนาดเล็กแบบเนทิฟนั้นเรียบง่ายเกินไป ในแง่ของสไตล์ นักเรียนที่คุ้นเคยกับการเขียนน้อย สไตลัสและหน้าด้านจะไม่สามารถทนต่อวิธีการเขียนของ wxss ได้ ด้วยเหตุนี้ ฉันจึงตัดสินใจใช้เครื่องมืออัตโนมัติ แบบอึก เพื่อสร้างชุดการพัฒนาโปรแกรมขนาดเล็กของ WeChat เทมเพลตพื้นฐานในขณะที่ยังคงฟังก์ชั่นและฟีเจอร์ของแอปเพล็ต WeChat ไว้อย่างครบถ้วน แต่ยังใช้สไตล์การเขียน less ขณะเดียวกัน ยังเพิ่มฟีเจอร์ต่างๆ เช่น การบีบอัดรูปภาพและคำสั่งด่วน การสร้างเทมเพลตเพื่อปรับปรุงประสิทธิภาพการพัฒนา!
gulp+lesspage template และ component อย่างรวดเร็วโดยใช้บรรทัดคำสั่ง $ npm install --global gulp-cli
$ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git
$ cd wx-miniprogram-boilerplate && npm install
$ npm run dev （开发环境打包）
$ npm run test (测试环境打包)
gulp auto -p mypage 创建名为mypage的page文件
gulp auto -t mytpl 创建名为mytpl的template文件
gulp auto -c mycomponent 创建名为mycomponent的component文件
gulp auto -s index -p mypage 复制pages/index中的文件创建名称为mypage的页面
$ npm run build （生产环境打包）
wx-miniprogram-boilerplate
├── dist // 编译后目录
├── node_modules // 项目依赖
├── src
│ ├── components // 微信小程序自定义组件
│ ├── env // 请求域名配置
│ ├── images // 页面中的图片和icon
│ ├── pages // 小程序page文件
│ ├── styles // ui框架，公共样式
│ ├── template // 模板
│ ├── utils // 公共js文件
│ ├── app.js
│ ├── app.json
│ ├── app.less
│ ├── project.config.json // 项目配置文件
│ └── api.config.js // 项目api接口配置
├── .gitignore
├── .eslintrc.js
├── package-lock.json
├── package.json
└── README.md
Tasks:
dev 开发编译，同时监听文件变化
test 整体编译，请求指向测试环境
build 整体编译
clean 清空产出目录
wxml 编译wxml文件（仅仅copy）
js 编译js文件，同时进行ESLint语法检查
json 编译json文件（仅仅copy）
wxss 编译less文件为wxss
img 编译压缩图片文件
watch 监听开发文件变化
devEnv/testEnv/prodEnv 生成对应环境的请求域名配置
auto 自动根据模板创建page,template或者component(小程序自定义组件)
gulp auto
选项：
-s, --src copy的模板 [字符串] [默认值: "_template"]
-p, --page 生成的page名称 [字符串]
-t, --template 生成的template名称 [字符串]
-c, --component 生成的component名称 [字符串]
--msg 显示帮助信息 [布尔]
示例：
gulp auto -p mypage 创建名为mypage的page文件
gulp auto -t mytpl 创建名为mytpl的template文件
gulp auto -c mycomponent 创建名为mycomponent的component文件
gulp auto -s index -p mypage 复制pages/index中的文件创建名称为mypage的页面
ถาม: เหตุใดการแปลง js การเติมสไตล์ให้สมบูรณ์ และการบีบอัดโค้ดจึงไม่รวมอยู่ในเวิร์กโฟลว์
ตอบ: เครื่องมือสำหรับนักพัฒนา WeChat มาพร้อมกับฟังก์ชันของ Babel ในการแปลง ES6 เป็น ES5 การเสร็จสิ้นรูปแบบ และการบีบอัดโค้ด js ไม่จำเป็นต้องเพิ่มเติมในขั้นตอนการทำงานนี้
ถาม: ไฟล์ในไดเร็กทอรี _template มีประโยชน์อย่างไร
ตอบ: ใช้คำสั่ง gulp auto เพื่อสร้างไฟล์โดยอัตโนมัติ พารามิเตอร์ -s สามารถระบุวัตถุคัดลอกได้ ตามค่าเริ่มต้น ไฟล์ในโฟลเดอร์ในไดเร็กทอรีที่เกี่ยวข้องจะเป็น _template เป็นวัตถุคัดลอก นักพัฒนาสามารถปรับแต่งไฟล์ภายใต้ _template ได้ตามความต้องการทางธุรกิจ
ถาม: ไฟล์ในไดเร็กทอรี _template จะถูกคอมไพล์ลงในไดเร็กทอรี dist หรือไม่
ตอบ: ไม่
หากคุณมีข้อเสนอแนะใหม่ คุณสามารถสร้างปัญหาหรือส่ง PR ได้ ขอบคุณสำหรับการสนับสนุนและการสนับสนุนของคุณ
