wechat h5 boilerplate
v0.3.6
"اجعل إنتاج H5 سهلاً مثل إنتاج PPT!"
Wechat-H5-Boilerplate (المشار إليه فيما يلي باسم WHB) هو قالب ديناميكي H5، تم تحسينه خصيصًا لـ WeChat ومناسب لإنشاء صفحة ترويجية H5 قابلة للتمرير بملء الشاشة بسرعة.
على سبيل المثال، لا يتطلب الأمر سوى سطر واحد من التعليمات البرمجية لتحريك جزء من النص:
<p class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>
استخدم هاتفك المحمول لزيارة العنوان أدناه أو قم بمسح رمز الاستجابة السريعة أدناه
https://panteng.github.io/wechat-h5-boilerplate/
/app
/dist --> 项目文件的分发版本，所有的文件均由Gulp任务生成，请勿手动修改
/audios --> 从app/src/audios复制而来
/fonts --> 从app/src/fonts和在config/vendors.js中指定的第三方字体复制而来
/images --> 由app/src/images下的图片经Imagemin压缩优化生成
/javascripts --> 由app/src/javascripts下的文件经Browserify打包生成
/stylesheets --> 由app/src/scss下的文件编译生成
index.html --> 由app/src/index.html经Gulp-inject插入bundle.(min.).css和bundle.(min.).js后生成
/src --> 项目的源码，所有文件都可编辑
/audios --> 存放音频、视频文件
/fonts --> 存放字体文件
/images --> 存放图片文件
/javascripts --> JS源文件，经Browserify打包后生成app/dist/javascripts/bundle.js
/scss --> SCSS文件，经过编译后生成app/dist/stylesheets/bundle.css
index.html --> 页面HTML，经过Gulp-inject处理后生成app/dist/index.html
/config
vendors.js --> 第三方CSS、JS、Fonts列表，详见vendors.js说明
.gitignore
gulpfile.js --> Gulp任务
package.json
استنساخ هذا المشروع محليا
تشغيل في وحدة التحكم:
git clone --depth=1 https://github.com/panteng/wechat-h5-boilerplate.git <your-project-name>
cd <your-project-name>
أو يمكنك تنزيل الحزمة المضغوطة لكود مصدر WHB مباشرة من صفحة الإصدار.
تثبيت حزم الطرف الثالث
يستخدم WHB NPM لإدارة حزم الطرف الثالث
تشغيل في وحدة التحكم:
npm install
ملاحظة 1: نظرًا لبيئة الشبكة السيئة في الصين، فإن تنزيل الحزم على NPM بطيء جدًا، يوصى باستخدام مرآة Taobao NPM CNPM. للتعرف على طريقة تثبيت CNPM، يرجى الرجوع إلى تعليمات الموقع الرسمي. يحتوي CNPM v4.2.0 على خطأ في أنظمة Windows (راجع #97). يجب على مستخدمي Windows عدم استخدام هذا الإصدار. على الرغم من أن المسؤول قال إنه تم إصلاحه، إلا أنني لا أزال أتلقى خطأ عندما أستخدم CNPM على Windows لتثبيت الحزم التي تتطلب ذلك تجميع العقدة-gyp. لا أوصي أيضًا باستخدام CNPM v3.4.1 لأن إصدار NPM المدمج فيه قديم جدًا. يوصى بتثبيت npm install --registry=https://registry.npm.taobao.org -d مباشرة باستخدام مستودع المرآة. (تتم إضافة -d لعرض معلومات مفصلة أثناء عملية التثبيت. أنا شخصياً أستخدم هذه الطريقة غالبًا لتحديد ما إذا كانت عملية التثبيت متوقفة بسبب مشاكل في الشبكة أو مشاكل أخرى).
ملاحظة 2: تعتمد بعض حزم الجهات الخارجية التي يطلبها WHB على العقدة gyp، قبل تثبيت هذه الحزم، يرجى التأكد من تثبيت العقدة gyp بشكل صحيح على جهازك. يرجى الرجوع إلى الوثائق الرسمية لـNode-gyp للتثبيت. قد يواجه مستخدمو Windows بعض المشاكل لأن تثبيت Node-gyp على Windows يعد أمرًا مؤلمًا.
ملاحظة 3: يرجى من مستخدمي Windows عدم وضع WHB في دليل عميق جدًا في المسار. نظرًا لأن Windows يدعم فقط المسارات التي يقل طولها عن 255 حرفًا، إذا قمت بوضع هذا المشروع في دليل بمسار عميق، فمن المحتمل جدًا أن تفشل عملية تجميع Node-gyp.
ملاحظة 4: بالنسبة لمستخدمي Windows، إذا قمت بتثبيت Node-gyp بشكل صحيح، ولكنك لا تزال تحصل على خطأ عند تشغيل npm install -d ، ورسالة الخطأ هي "EPERM، العملية غير مسموح بها"، يرجى تجربة npm install -d --force .
ابدأ التطوير
تشغيل على وحدة التحكم:
gulp dev
بعد لحظة، ستفتح نافذة المتصفح تلقائيًا وتشير إلى العنوان localhost:3000 . عندما تقوم بتعديل أي ملف ضمن app/src، سيتم تحديث صفحة المتصفح تلقائيًا.
تنفيذ مهمة gulp prod
تشغيل في وحدة التحكم:
gulp prod
ستقوم هذه المهمة بإنشاء ملفين جديدين Bundle.min.css وbundle.min.js في مجلد التطبيق/dist، وحذف Bundle.css وbundle.js الأصليين.
عند النشر، ما عليك سوى تحميل الملفات الموجودة في مجلد التطبيق/التوزيع إلى الخادم، ولا يلزم وجود ملفات أخرى. يتم ضغط وتحسين ملفات CSS وJS والصور الموجودة في التطبيق/التوزيع.
تحميل الرسوم المتحركة
تحتوي صفحات H5 عادةً على الكثير من الصور وموسيقى الخلفية، لذا من الضروري تحميل الرسوم المتحركة ذات المظهر الجيد.
يمكنك كتابة بعض رسوم CSS3 المتحركة بنفسك، وإدراج كود HTML المتعلق بالرسوم المتحركة في <div class="loading-overlay"></div> في app/src/index.html، ودمج كود CSS3 Animation ذي الصلة في app/ سرك / scss.
إذا كنت تريد توفير المتاعب، فيمكن أن يساعدك موقع التحميل.io في إنشاء رسوم متحركة للتحميل جاهزة (إذا لم تتمكن من فتحه، فيرجى المرور عبر الحائط). يوصى بإنشاء ملف صورة متحركة بتنسيق SVG، وتغيير الملف إلى upload.svg واستبدال الملف بنفس الاسم ضمن app/src/images/.
شارك أيضًا بعض مكتبات الرسوم المتحركة الممتازة لتحميل CSS3:
تأثير تبديل الصفحة
يدعم تبديل الصفحات حاليًا فقط الأنواع الأربعة التي تأتي مع Swiper: الشريحة، والتلاشي، والقلب، وتدفق الغلاف (لا يدعمه المكعب لأنه لا يلبي هذا السيناريو). راجع القسم الخاص بالتأثيرات في وثائق Swiper للحصول على التفاصيل.
لم يتمكن WHB بعد من تحديد طرق تبديل مختلفة للصفحات المختلفة، وسأفكر في إضافة هذه الميزة وطرق تبديل أكثر روعة في الإصدارات اللاحقة.
الرسوم المتحركة للعناصر (صور، نص) داخل الصفحة
تعد إضافة الرسوم المتحركة إلى الصور والنصوص في WHB أمرًا سهلاً للغاية.
على سبيل المثال، هناك فقرة من النص في الصفحة الأولى يجب عرضها في الرسوم المتحركة، ويكون الكود كما يلي:
<div class="swiper-slide slide-1">
<p class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>
</div>
ما عليك سوى إضافة اسم الفئة animated إلى هذا النص وتحديد السمات الثلاث data-ani-name (اسم الرسوم المتحركة)، data-ani-duration (وقت تنفيذ الرسوم المتحركة)، و data-ani-delay (وقت تأخير الرسوم المتحركة).
يتم توفير الرسوم المتحركة الخاصة بـ WHB بواسطة Animate.css. ويمكن الاطلاع على أسماء الرسوم المتحركة المدعومة على الموقع الرسمي لـ Animate.css.
رمز الخط
يوجد رمزان فقط في ملف رمز الخط الذي يأتي مع WHB، وهما رمز الموسيقى في الزاوية اليمنى العليا ورمز المطالبة بالسكتة الدماغية لأعلى في أسفل الشاشة. إذا كنت بحاجة إلى المزيد من الرموز، فمن المستحسن استخدام Icomoon.io للتخصيص، وتحديد الرموز التي تحتاجها (يمكنك أيضًا تصميمها وتحميلها بنفسك)، وتجميعها في ملفات الخطوط.
السبب وراء عدم التوصية باستخدام حزم الخطوط العامة مثل Font-Awesome هو أن هناك العديد من الرموز في Font-Awesome، وبالتالي سيكون ملف الخط كبيرًا نسبيًا، ولا يتم استخدام معظم الرموز. يمكن أن تؤدي ملفات الخطوط الأكبر حجمًا إلى إبطاء تحميل صفحات الويب على أجهزة المستخدم.
تحسين الصورة
يأتي WHB مزودًا بوظيفة الضغط مع فقدان الصور ضمن app/src/images، لكنني ما زلت أوصي بإجراء التحسين اليدوي الضروري على الصور قبل وضعها في مجلد app/src/images، مثل ضبط الحجم المناسب، والدمج بعض الصور الصغيرة إلى نقوش متحركة، وما إلى ذلك.
شارك بعض المواقع المفيدة لتحسين الصور ومعالجتها:
موسيقى خلفية
يوصى بأن يكون تنسيق ملف موسيقى الخلفية هو mp3 وألا يتجاوز الحجم 1 ميجابايت. يمكنك استخدام برامج تحرير الصوت الاحترافية مثل Adobe Audition لاعتراض موسيقى الخلفية وضغطها.
إذا لم يكن ذلك ضروريًا، يرجى عدم تعيين موسيقى خلفية لإزعاج المستخدمين.
تصحيح الأخطاء الطرفية المتنقلة
أولاً، قم بتشغيل مهمة gulp dev وابحث عن الفقرة التالية في مخرجات وحدة التحكم:
[BS] Access URLs:
----------------------------------------
Local: http://localhost:3000
External: http://192.168.187.101:3000
----------------------------------------
UI: http://localhost:3001
UI External: http://192.168.187.101:3001
----------------------------------------
بعد ذلك، تأكد من أن جهازك المحمول (الهاتف المحمول، الجهاز اللوحي، وما إلى ذلك) والكمبيوتر موجودان في نفس الشبكة المحلية (LAN) (أبسط طريقة هي توصيل الكمبيوتر والهاتف المحمول والكمبيوتر اللوحي بنفس شبكة WIFI؛ أو توصيل الكمبيوتر بجهاز التوجيه باستخدام كابل الشبكة، ويتم توصيل الهاتف المحمول والكمبيوتر اللوحي بنفس شبكة WIFI التي يرسلها جهاز التوجيه).
أخيرًا، افتح المتصفح على جهازك المحمول وقم بالوصول إلى عنوان URL المطابق للخارجي في السطر الثالث أعلاه (لاحظ أن عنوان URL الخاص بك قد يكون مختلفًا عما كتبته أعلاه، يرجى الرجوع إلى عنوان URL الخارجي المعروض في وحدة التحكم الخاصة بك).
الآن طالما قمت بتعديل الملف ضمن app/src، فإن جميع الأجهزة المحمولة وأجهزة الكمبيوتر التي تصل إلى عنوان URL هذا ستقوم تلقائيًا بتحديث صفحة المتصفح. تتم أيضًا مزامنة العمليات التي تجريها على أحد الأجهزة مع الأجهزة الأخرى في الوقت الفعلي (مثل التمرير لأعلى على الصفحة بإصبعك).
تصميم سريع الاستجابة
يوصى باستخدام rem بدلاً من px لتعيين حجم العناصر وهامشها وحجم خطها.
في WHB، ستتغير قيمة البكسل المقابلة لـ 1rem مع حجم شاشة الجهاز.
على الأجهزة التي يقل عرض شاشتها عن 400 بكسل، 1rem = 16 بكسل؛
على الأجهزة التي يزيد عرض الشاشة فيها عن 400 بكسل وأقل من 600 بكسل، 1rem = 22 بكسل؛
على الأجهزة التي يزيد عرض الشاشة فيها عن 600 بكسل، 1rem = 32 بكسل؛
راجع الكود الخاص باستعلام الوسائط في app/src/scss/base/_base.scss.
وصف التكوين/vendors.js
يتم استخدام ملف البائعين.js لتسجيل معلومات CSS وJS والخطوط التابعة لجهات خارجية. وستتم إضافة جميع ملفات الجهات الخارجية المسجلة في .js إلى المشروع بشكل ما. على سبيل المثال: إذا كان الموردون.js يبدو الآن بهذا الشكل:
module.exports = {
stylesheets: [
'node_modules/normalize.css/normalize.css',
'node_modules/swiper/dist/css/swiper.css',
'node_modules/animate.css/animate.css',
'node_modules/font-awesome/css/font-awesome.css'
],
javascripts: [
'node_modules/jquery/dist/jquery.js'，
'node_modules/swiper/dist/js/swiper.jquery.js'
],
fonts: [
'node_modules/font-awesome/fonts/*'
]
};
ستتم إضافة جميع ملفات CSS الموجودة في أوراق أنماط البائعين.js إلى Bundle.css الذي تم إنشاؤه أخيرًا بواسطة المشروع؛
ستتم إضافة جميع ملفات js الموجودة في نصوص جافا سكريبت الخاصة ببائعين.js إلى الحزمة.js التي تم إنشاؤها أخيرًا بواسطة المشروع؛
سيتم نسخ جميع الملفات الموجودة في خطوط البائعين.js إلى المجلد app/dist/fonts.
تذكر أن الملفات المسجلة في البائعين.js ستتم إضافتها إلى Bundle.css وbundle.js أولاً، لذلك لا داعي للقلق بشأن الكتابة فوق الأنماط الموجودة في SCSS التي كتبتها أو العثور على كائن من مكتبة تابعة لجهة خارجية. لم يتم العثور عليه في الوضع المحدد main.js. ستتم إضافة الملفات المسجلة في البائعين.js إلى Bundle.css وbundle.js بترتيب التسجيل، لذلك عليك التأكد من صحة ترتيب التسجيل. على سبيل المثال، يجب تسجيل jquery.js قبل swiper.jquery.js لأن swiper.jquery .js يعتمد على jquery.js.
ملاحظة 1: مسار الملف مرتبط بـ gulpfile.js، وليس البائعين.
ملاحظة 2: إذا كنت لا ترغب في استيراد ملفات JS لجهة خارجية بهذه الطريقة، وترغب في استخدام طريقة الكتابة التي تتطلبها CommonJS لاستيرادها، فهذا ممكن أيضًا. على سبيل المثال، قم بتقديم jQuery في app/src/javascripts/main.js بهذه الطريقة:
var $ = require('jquery');
مهام اللب
أثناء عملية التطوير، إذا وجدت أنك قمت بتعديل أو استبدال الصور والصوت والخطوط والملفات الأخرى ضمن ملف app/src، ولكن الصفحة في المتصفح لم تتغير وفقًا لذلك، فيرجى محاولة تشغيل gulp dev مرة أخرى في وحدة التحكم مهام gulp dev .
معهد ماساتشوستس للتكنولوجيا
