miniprogram template

قالب برنامج صغير

يعرض قالب برنامج wechat الصغير أفضل الممارسات باستخدام TypeScript وVSCode

[أفضل الممارسات لقوالب البرامج المصغرة (TypeScript+VSCode)، التي تم إنشاؤها باستخدام أداة إنشاء البرامج المصغرة]

---

مطلوب [البيئة المطلوبة]

• العقدة: 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 : استخدم ملف تكوين بيئة البناء للتطوير
• 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

الترميز [الترميز]

اللغات [لغات البرمجة]

js

• .ts (TypeScript) أو .js (JavaScript) ( يوصى بـ ts )
• Eslint + Prettier يتحقق من نمط الكود والتنسيق التلقائي
• يدعم TS / استيراد نموذج المسار المطلق

wxml

• .wxml أو .html
• Htmlhit + Prettier يتحقق من نمط الكود والتنسيق التلقائي
• استخدم vscode-minapp لفحص التعليمات البرمجية وتنسيقها

com.wxss

• .scss أو .sass أو .css (يوصى باستخدام scss )
• يتحقق Stylelint + Prettier من نمط التعليمات البرمجية والتنسيق التلقائي
• فرز خصائص CSS تلقائيًا بترتيب محدد
• يمكن لـ scss @import محتويات دليل الأصول مباشرةً

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 بتعديل التكوين.travis.yml حسب الحاجة
• إجراءات Github تعديل التكوين حسب الحاجة.github/workflows/nodejs.yml