miniprogram template

มินิโปรแกรม-เทมเพลต

เทมเพลตมินิโปรแกรม Wechat โปรเจ็กต์แนวทางปฏิบัติที่ดีที่สุดกับ TypeScript และ VSCode

[แนวปฏิบัติที่ดีที่สุดสำหรับเทมเพลตมินิโปรแกรม (TypeScript+VSCode) สร้างขึ้นโดยใช้เครื่องมือสร้างโปรแกรมขนาดเล็ก]

---

จำเป็น [สภาพแวดล้อมที่จำเป็น]

• nodejs: npm >= 6.0 (หรือ yarn ) Node >= 10
• บรรณาธิการ: VSCode
• Wechat-Devtools: เครื่องมือพัฒนาโปรแกรมขนาดเล็ก (และเปิด服务端口)

เริ่มต้นอย่างรวดเร็ว [ใช้]

1. สร้างโครงการ [สร้างโครงการใหม่ได้ด้วยคลิกเดียว]

คลิกใช้เทมเพลตนี้เพื่อใช้เทมเพลตนี้ด้วยการคลิกเพียงครั้งเดียว หรือใช้บรรทัดคำสั่ง:

 # 不指定`[本地目录]`则在当前目录创建,`-n`表示使用最新模板
npm create miniprogram NewFuture/miniprogram-template -n [本地目录]
# 或者
# yarn create miniprogram NewFuture/miniprogram-template -n [本地目录]

2. เริ่มต้น [ทำงานภายใต้ไฟล์โครงการ]

 # cd [本地目录名]
npm start
# 或者
# yarn start

หลังจากเริ่มต้นระบบตามปกติ เครื่องมือแก้ไขข้อบกพร่องจะเปิดการแสดงตัวอย่าง dist โดยอัตโนมัติ

สคริปต์ [คำสั่ง]

npm สามารถถูกแทนที่ด้วย yarn

• npm start : คอมไพล์โปรเจ็กต์ใหม่และอัปเดตแบบเรียลไทม์ [นามแฝง npm run start ]
  • npm run start:test : ใช้ไฟล์การกำหนดค่าสภาพแวดล้อมการทดสอบเพื่อการพัฒนา
  • npm run start:prod : ใช้ไฟล์คอนฟิกูเรชันสภาพแวดล้อม build สำหรับการพัฒนา
• npm run upload : จัดทำแพ็คเกจและอัพโหลดโปรเจ็กต์ไปยังพื้นหลังมินิโปรแกรม (การกำหนดค่าสภาพแวดล้อมการพัฒนา)
  • npm run upload:test : ใช้การกำหนดค่าสภาพแวดล้อมการทดสอบเพื่อจัดทำแพ็กเกจและอัปโหลดโปรเจ็กต์ไปยังพื้นหลังมินิโปรแกรม
  • npm run upload:prod : ใช้การกำหนดค่าสภาพแวดล้อมบิลด์เพื่อจัดทำแพ็กเกจและอัปโหลดโปรเจ็กต์ไปยังพื้นหลังมินิโปรแกรม
• npm run build : ทำแพ็กเกจใหม่และคอมไพล์ (การกำหนดค่าสภาพแวดล้อมการพัฒนา)
  • npm run build:test : ทำแพ็คเกจใหม่และคอมไพล์
  • npm run build:prod : ทำแพ็กเกจใหม่และคอมไพล์
• npm test : ทดสอบ [นามแฝง npm run test ]
• npm run check : การตรวจสอบสไตล์โค้ดและรูปแบบ (รองรับการตรวจสอบ lint แยกต่างหากในภาษาต่างๆ)
• npm run fix : แก้ไขปัญหาผ้าสำลีและสไตล์โค้ดที่แก้ไขได้โดยอัตโนมัติ
• npm run help : ดูการใช้งานโดยละเอียดของเครื่องมือการคอมไพล์ mp

คำสั่งทางลัดทั้งหมด package.json

หลายสภาพแวดล้อม [การตั้งค่าสภาพแวดล้อมหลายรายการ]

แต่ละสภาพแวดล้อมสามารถกำหนดค่าได้แตกต่างกัน (การกำหนดค่าสภาพแวดล้อมสามารถเพิ่มหรือลดได้ตามต้องการ)

• .mpconfig.jsonc สภาพแวดล้อมแบบรวมการพัฒนา
• การกำหนดค่าสภาพแวดล้อมการทดสอบ env/test.jsonc
• การกำหนดค่าสภาพแวดล้อมการผลิตออนไลน์ env/prod.jsonc

หากมีสภาพแวดล้อมเดียว คุณสามารถลบไดเร็กทอรี env และกำหนดค่าได้โดยตรงโดยใช้ .mpconfig.jsonc

การเข้ารหัส [การเข้ารหัส]

ภาษา [ภาษาการเขียนโปรแกรม]

เจส

• .ts (TypeScript) หรือ .js (JavaScript) ( แนะนำให้ใช้ ts )
• Eslint + Prettier ตรวจสอบรูปแบบโค้ดและการจัดรูปแบบอัตโนมัติ
• TS รองรับ / การนำเข้าแบบฟอร์มเส้นทางแบบสัมบูรณ์

wxml

• .wxml หรือ .html
• Htmlhit + Prettier ตรวจสอบรูปแบบโค้ดและการจัดรูปแบบอัตโนมัติ
• ใช้ vscode-minapp เพื่อตรวจสอบและจัดรูปแบบโค้ด

wxss

• .scss , .sass หรือ .css (แนะนำ scss )
• Stylelint + Prettier ตรวจสอบสไตล์โค้ดและการจัดรูปแบบอัตโนมัติ
• จัดเรียงคุณสมบัติ CSS ตามลำดับที่ระบุโดยอัตโนมัติ
• scss สามารถ @import เนื้อหาของไดเร็กทอรีทรัพย์สินได้โดยตรง

json.json

• รองรับคำอธิบายประกอบ .jsonc , .json หรือ .json5
• การตรวจสอบโค้ดที่สวยยิ่งขึ้นและการจัดรูปแบบอัตโนมัติ

wxs

• .wxts (TypeScript), .wxs (JavaScript) (แนะนำ wxts )
• การตรวจสอบโค้ดที่สวยยิ่งขึ้นและการจัดรูปแบบอัตโนมัติ
• miniprogram-wxs ทำการตรวจสอบประเภทและคุณสมบัติ

บรรณาธิการ [บรรณาธิการ]

ใช้ VSCode และติดตั้งปลั๊กอินที่แนะนำโดยอัตโนมัติ

1. ติดตั้งปลั๊กอินที่แนะนำโดยอัตโนมัติ ตามคำแนะนำเมื่อใช้งานครั้งแรก
2. ปลั๊กอินทั้งหมดได้รับการกำหนดค่าแล้ว และข้อความแจ้งการตรวจสอบโค้ดจะดำเนินการโดยอัตโนมัติ และจะได้รับการซ่อมแซมโดยอัตโนมัติเมื่อทำการบันทึก
3. เมื่อสร้าง Page ใหม่ Component wxs จะสร้างไฟล์เทมเพลตโดยอัตโนมัติ (เทมเพลตสามารถแก้ไขได้)

CI [บูรณาการอย่างต่อเนื่อง]

Auzre Pipelines, Travis CI และ Github Actions ได้รับการกำหนดค่าตามค่าเริ่มต้น และสามารถเปิดและแก้ไขได้ตามต้องการ

• Azure Pipelines แก้ไขการกำหนดค่า azure-pipelines.yml ตามต้องการ
• Travis-CI แก้ไข configuration.travis.yml ตามต้องการ
• Github Actions แก้ไขการกำหนดค่าตามความจำเป็น.github/workflows/nodejs.yml