تنزيل wxapp boilerplate - تنزيل كود المصدر wxapp boilerplate

wxapp boilerplate

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

1.0.0

تنزيل

wxapp-boilerplate

تم تطوير سقالات مشروع برنامج WeChat/Alipay الصغير باستخدام webpack و babel scss

وظيفة

يدعم الرجوع إلى وحدات node_modules
دعم تكوين alias لتجنب مراجع الوحدة مثل ../../../
دعم التوافق الأكثر ثراءً مع ES6 من خلال babel ، بما في ذلك async/await
promise المدمج و lodash (يقدم lodash الوحدات المقابلة حسب الطلب، وليس كلها)
استخدم scss لكتابة ملفات .wxss ، مع بعض mixins extends المفيدة المضمنة
قم بتوفير الثوابت العامة __DEV__ و process.env.NODE_ENV للمساعدة في التطوير
يدعم التجميع التلقائي في تطبيقات WeChat وAlipay
قم بتوفير الثوابت العامة __WECHAT__ و__ __ALIPAY__ لتحديد ما إذا كان تطبيق WeChat الصغير أو تطبيق Alipay الصغير
قم بإنشاء صفحات برنامج WeChat بسرعة من خلال سطر الأوامر
دعم ضغط التعليمات البرمجية في بيئة production

ابدأ

تأكد من تثبيت Node.js (>= v4.2 ) وغزل أو npm

git clone هذا المشروع
استخدم أداة سطر الأوامر cd إلى هذا الدليل وتنفيذ yarn لتثبيت الوحدات التابعة.
تنفيذ yarn start لبدء التطوير
من خلال أدوات مطور WeChat، قم بإضافة دليل dist/wechat إلى المشروع

الأوامر المضمنة

يبدأ yarn start webpack لتطوير مشاريع تطبيقات WeChat الصغيرة، والتي يمكنها مراقبة تغييرات الملفات وإعادة ترجمتها تلقائيًا
yarn start:alipay webpack لتطوير مشروع برنامج Alipay الصغير، والذي يمكنه مراقبة تغييرات الملف وإعادة ترجمته تلقائيًا
yarn build بتجميع وإنشاء التعليمات البرمجية لبيئة production لـ dist/wechat و dist/alipay
yarn lint:build أمر yarn build ويستخدم eslint وstylelint للتحقق من مواصفات التعليمات البرمجية
يتم تنفيذ yarn prettier prettier لتنسيق التعليمات البرمجية في دليل src
تنشئ yarn create-page صفحة تطبيق WeChat بسرعة (لمزيد من استخدام create-page ، يرجى الاطلاع على صفحة إنشاء wxapp)

متوافق مع برامج WeChat وAlipay المصغرة

يمكن للمطورين اختيار مجموعة من أكواد المصدر لتطوير تطبيقات WeChat وAlipay. تدعم هذه السقالات التجميع التلقائي wxml إلى axml ، وتحويل wx:attr إلى a:attr ، وتحويل API wx إلى my ، والعكس. ومع ذلك، تختلف الواجهات الفردية قليلاً على النظام الأساسي، ويمكن للمطورين التعامل معها ديناميكيًا من خلال __WECHAT__ أو __ALIPAY__ .

نسخة الملف

إذا كان wxml أو axml يحتوي على ملفات مستوردة ديناميكيًا (مثل src="{{'images/' + type + '.png'}}" )، فلن يتمكن webpack من استيرادها ديناميكيًا، لذلك قد تكون هناك ملفات مفقودة بعد الحزم .

إذا واجهت هذا الموقف، فيمكنك حله من خلال Copy-webpack-plugin ونسخ دليل images بالكامل إلى dist .

يحتوي هذا المكون الإضافي بالفعل على هذا المكون الإضافي المدمج في هذه السقالات. لسهولة الاستخدام، يمكنك أيضًا إضافة مصفوفة سلسلة copyWebpack إلى package.json لنسخ الأدلة أو الملفات تلقائيًا. على سبيل المثال:

package.json

 {
  // ...
  "copyWebpack" : [ "images" , "icons" ]
}

من خلال تنفيذ yarn start أو yarn build ، سيتم نسخ مجلدات src/images و src/icons تلقائيًا إلى مجلدات dist/wechat/images و dist/wechat/icons (وينطبق الشيء نفسه على تطبيق Alipay الصغير).