تنزيل WeApp Workflow - تنزيل كود مصدر WeApp Workflow

WeApp Workflow

كود الذكاء الاصطناعي

1.0.0

تنزيل

WeApp-Workflow: سير عمل تطوير الواجهة الأمامية لبرنامج WeChat الصغير استنادًا إلى Gulp

يقدم

WeApp-Workflow عبارة عن سير عمل لتطوير الواجهة الأمامية تم إنشاؤه خصيصًا لتطوير برامج WeChat المصغرة، وقد تم تطويره استنادًا إلى Gulp 4 ويهدف إلى حل نقاط الضعف المتعلقة بكتابة تعليمات برمجية للواجهة الأمامية في عملية تطوير برامج WeChat المصغرة من خلال سير العمل. .

الصفحة الرئيسية للمشروع: https://github.com/Jeff2Ma/WeApp-Workflow

مقدمة المقال: https://devework.com/weapp-workflow.html

وظيفة

تجميع SCSS في الوقت الحقيقي إلى WXSS

استخدم معالج Sass المسبق لجعل كتابة CSS أكثر سلاسة. سيتم تجميع ملف .scss في الوقت الفعلي إلى ملف .wxss الذي يدعمه تطبيق WeChat الصغير.

تحويل وحدة px إلى rpx في برنامج صغير في WXSS (CSS)

باستخدام iPhone 6 الموصى به رسميًا كتنسيق التصميم القياسي، يمكنك تحويله تلقائيًا إلى rpx عن طريق كتابة px مباشرة أثناء التطوير.

// Input: src/pages/index/index.scss
. index__header {
	font-size : 14 px ;
	margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}

// Output: dist/pages/index/index.wxss
. index__header {
	font-size : 28 rpx ;
	margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}

ضغط الصورة

ضغط الصور في الوقت الحقيقي واستخدام أساليب تدريجية لمنع الضغط المتكرر.

قم بتحميل الصور تلقائيًا إلى CDN وتحديث المسار إلى المسار المطلق https

لا يدعم التطبيق الصغير مراجع الصور ذات المسارات النسبية، ولكنه يدعم فقط المسارات المطلقة ذات رؤوس بروتوكول https . يمكن لسير العمل هذا تحميل صور المسار النسبي المشار إليها في ملفات WXML وWXSS إلى CDN للتخزين السحابي أو تحميلها إلى مساحة الخادم الشخصية من خلال بروتوكول FTP/SFTP. يدعم حاليًا Tencent Cloud وQiniu Cloud.

// Input: src/pages/index/index.wxml
< image src =" %ASSETS_IMG%/t.png " > </ image >

// Output: dist/pages/index/index.wxml
< image src =" https://cdn.devework.com/weapp/devework/t.png " > </ image >

تحويل ملفات الخطوط إلى ترميز Base64

لا يدعم التطبيق الصغير ملفات الخطوط ذات المسارات النسبية. يمكن لسير العمل هذا تحويل ملفات الخط المشار إليها في CSS إلى base64 واستبدال المسارات الأصلية.

 // Input: src/pages/index/index.scss
@font-face {
  font-family: 'fontello';
  src: url("assets/fonts/fontello.ttf") format('truetype');
}

// Output: dist/pages/index/index.wxss
@font-face {
  font-family: 'fontello';
  src: url(data:application/font-sfnt;charset=utf-8;base64,AAEAAAAPAIAA....FsASNsQIARAAA) format("truetype");
}

إنشاء صور متحركة تلقائيًا بالكامل وإنشاء CSS مطابق

يتم تشغيل هذه الميزة بواسطة البرنامج الإضافي postcss-lazysprite. بعد إعداد الصورة أثناء التطوير، ما عليك سوى كتابة رمز مثل @lazysprite "xxxx" لإنشاء صورة الكائن تلقائيًا وإنشاء ملف CSS المقابل.

// Input: src/app.scss
@lazysprite "filetype" ;

/ / Output : d is t / app. wxss
. icon-filetype-doc {
    background-image : url(.. / sprites/filetype.png);
    background-position : 0 0 ;
    width : 80 px ;
    height : 80 px ;
}

. icon-filetype-pdf {
    background-image : url(.. / sprites/filetype.png);
    background-position : -90 px 0 ;
    width : 80 px ;
    height : 80 px ;
}

@media only screen and ( -webkit-min-device-pixel-ratio : 2 ) , only screen and ( min-device-pixel-ratio : 2 ) {
    . icon-filetype-doc {
        background-image : url (.. / sprites / filetype@ 2 x.png);
        background-position : 0 0 ;
        background-size : 170 px 170 px ;
    }

    . icon-filetype-pdf {
        background-image : url (.. / sprites / filetype@ 2 x.png);
        background-position : -90 px 0 ;
        background-size : 170 px 170 px ;
    }
}

أبرز

غالب4

استخدم الميزات الجديدة لأحدث إصدار من Gulp 4 لجعل سير عملك يعمل بشكل أسرع.

موجزة ولكنها ليست بسيطة

يحتوي النواة على مهمة افتراضية واحدة فقط، وتعمل آلية مطابقة المهام المعقولة على تقليل العمليات المرهقة والتشغيل ذهابًا وإيابًا للمحطة، مما يجعل التطوير أكثر ملاءمة.

تعمل آلية التحديث التزايدي بشكل أسرع

تقديم التجميع المتزايد لـ Sass وآلية التحديث المتزايد للمهام المتعلقة بالصور لجعل سير العمل يعمل بشكل أسرع.

هيكل المشروع

 .
├── config.custom.js // gulp自定义配置，会覆盖config.js
├── config.js // gulp 配置文件
├── gulpfile.js
├── package.json
├── src // 开发目录
│   ├── app.js
│   ├── app.json
│   ├── app.scss
│   ├── assets // 开发相关的静态文件原始资源
│   │   ├── fonts //字体文件
│   │   ├── images // 图片文件，可被上传到CDN
│   │   ├── scss // 一般放置SCSS 的minxins 等被import 的SCSS 文件
│   │   └── sprites // 生成雪碧图小图的目录
│   ├── image // 小程序专用的图片资源（如tabbar icon）目录
│   ├── pages
│   └── utils
├── tmp //  通过src 目录编译后生成的缓存目录
└── dist // 通过src 目录编译后生成的文件目录，也是小程序开发的项目目录

ابدأ

يوصى بأن يكون إصدار Node هو الإصدار v4 أو أعلى. ونظرًا لأن سير العمل هذا يتضمن تبعيات جهات خارجية، فمن المستحسن العمل في بيئة إنترنت علمية.

ثَبَّتَ

0. يرجى اتباع Gulp-cli عالميًا أولاً.

 npm install gulp-cli -g

1. قم بتنزيل ملف المشروع من خلال git clone .

 git clone https://github.com/Jeff2Ma/WeApp-Workflow

2. يوصى بحذف دليل .git (يرجى من مستخدمي Windows حذفه يدويًا)

 cd WeApp-Workflow
rm -rf .git

3. قم بتثبيت الوحدات الضرورية

 npm i

4. ابدأ التطوير

يوصى بنسخ config.js وإعادة تسميته إلى config.custom.js ، ثم إعادة كتابة معلومات التكوين ذات الصلة وفقًا لاحتياجاتك الفعلية (يحتوي كل عنصر تكوين على تعليق). بعد ذلك، قم بتشغيل الأمر التالي في الوحدة الطرفية لتمكينه:

 gulp

com.iterm

المهام المتبقية: gulp clean : مسح مجلدات dist و tmp .

إعدادات

بعد إكمال العمليات المذكورة أعلاه، تحتاج إلى ضبط الإعدادات ذات الصلة في "أدوات مطور الويب WeChat" (استنادًا إلى الإصدار 1.x، ولم يعد متوافقًا مع الإصدار 0.x).

1. قم بإنشاء مشروع جديد وحدد دليل المشروع بأكمله مباشرة، أي الدليل الذي يوجد به project.config.json ، كدليل المشروع.

تكوين WeApp-Workflow

يطور

بعد ذلك، يمكنك الدخول في التطوير المنتظم. أثناء عملية التطوير، استخدم محررًا تابعًا لجهة خارجية (WebStorm، Sublime Text، وما إلى ذلك) لتحرير الملفات في دليل src . بعد حفظ التعديلات، ستقوم عملية gulp بتجميعها في الوقت الفعلي إلى الموقع المقابل dist دليل. سيتم تجميع وتحديث أداة مطور الويب WeChat تلقائيًا، وتعمل فقط كوظيفة معاينة في الوقت الحالي .

النقاط الرئيسية للتنمية:

تطوير SCSS : قم بتحرير page-name.scss مباشرةً ضمن src/pages/page-name ، وسيتم تحويله تلقائيًا إلى page-name.wxss ووضعه في الموقع المقابل لدليل dist . أثناء عملية التطوير، عندما يتعلق الأمر بالقيم الرقمية، اكتب وحدات px مباشرة (وفقًا لـ iPhone6 كمسودة تصميم قياسية)، وسيتم حسابها تلقائيًا وتحويلها إلى وحدات rpx . إذا كنت لا تريد التحويل في ظل ظروف خاصة، يرجى كتابة PX بأحرف كبيرة.
تطوير WXML : لا توجد متطلبات خاصة إلا أن وظيفة صورة CDN تتطلب كتابة مسار صورة خاص.
WebFont : قم أولاً بإنشاء صورة مجسمة على موقع ويب مثل Fontell.com، ثم احصل على ملف بتنسيق ttf إلى src/assets/fonts ، وبعد ذلك يمكن تحويل ترميزه إلى base64 تلقائيًا عن طريق الاقتباس منه بالطريقة العادية.
صور CDN : (يتم إيقاف تشغيل هذه الوظيفة افتراضيًا ويجب تشغيلها في الإعدادات.) لا يدعم wxss أو wxml في تطبيق WeChat الصغير الصور ذات المسارات النسبية ويتطلب مسارًا مطلقًا يبدأ بـ https. يتيح لك سير العمل هذا كتابة المسارات النسبية مباشرة أثناء التطوير، وسيساعد سير العمل في التحميل إلى CDN واستبدال المسار الأصلي. يجب وضع هذه الصور ضمن src/assets/images ، ثم كتابة المسار في wxml أو CSS باستخدام %ASSETS_IMG%/filename.png . %ASSETS_IMG% هو دليل مخصص لاستبدال السلسلة اللاحقة.
الصور المتحركة : أولاً، لا يُنصح باستخدام الصور المتحركة في البرامج الصغيرة، ومن الأفضل استخدام الصور الفردية أو WebFont مباشرة. إذا كان يجب عليك استخدامه، فاتبع مثال البرنامج الصغير الموجود في الكود لوضع دليل الصورة الصغيرة ضمن src/assets/sprites ثم اتصل به من خلال @lazysprite "xxxx" في SCSS (يوصى بوضع رمز الاتصال ضمن app.scss ). للاستخدام المتقدم لصور الكائنات، يرجى النقر هنا.

سؤال وجواب

س: لماذا لا توجد وظيفة AutoPrefixer في سير العمل؟
ج: لأن خيار "إكمال النمط" في "مشروع" أدوات مطور WeChat يوفر هذه الوظيفة بالفعل؛
س: لماذا لا توجد وظيفة تحويل من ES6 إلى ES5 لـ babel تم تكوينها في سير العمل؟
ج: كما هو مذكور أعلاه، تم توفير أدوات مطور WeChat.
س: ما هي المزايا مقارنة بأطر تطوير البرامج الصغيرة مثل WePY؟
ج: إن WePY الذي طوره فريق الدفع WeChat هو بالفعل أداة جيدة. إذا ما قورنت بـ WePY على نفس المستوى، فإن WeApp-Workflow ليس لديه أي ميزة على الإطلاق. WeApp-Workflow هي أداة لسير العمل، وليست إطار عمل للتطوير، فهي تركز على تطوير CSS في البرامج الصغيرة. بالنسبة لبعض المطورين، لا تحتاج برامجهم الصغيرة إلى إطار تطوير ثقيل مثل WePY.
س: ليس لدى WeApp-Workflow مهام تجميع خاصة مقابلة (على غرار gulp build و npm run build )؟
ج: نعم، لأن WeApp-Workflow مناسب لتطوير البرامج الصغيرة "الصغيرة" بدلاً من البرامج الصغيرة المعقدة، لذلك، بالنظر إلى سرعة التطوير وكمية التعليمات البرمجية وما إلى ذلك، لا توجد مرحلة تطوير خاصة ومهمة واحدة (تطوير). تتم إضافة مهمة ترجمة إضافية (buid) أثناء مرحلة الإكمال. مهمة واحدة فقط.