تحميل wx miniprogram boilerplate - تنزيل كود المصدر wx miniprogram boilerplate

wx miniprogram boilerplate

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

1.0.0

تنزيل

️ يوضح

️ ️ ️ لقد تم إيقاف التحديثات وهي مخصصة للتعلم فقط، ويوصى باستخدام أطر تطوير البرامج الصغيرة الأخرى.

wx-miniprogram-boilerplate

سير عمل تطوير تطبيق WeChat الصغير استنادًا إلى Gulp

نموذج تطوير البرامج الصغيرة الأصلية بسيط جدًا من حيث الأسلوب، ولن يتمكن الطلاب الذين اعتادوا على الكتابة بشكل أقل والقلم وsass من تحمل طريقة الكتابة الخاصة بـ wxss. وبناءً على ذلك، قررت استخدام أدوات أتمتة gulp لبناء مجموعة من تطوير برامج WeChat الصغيرة استنادًا إلى القالب الأساسي، مع الاحتفاظ الكامل بوظائف وميزات تطبيق WeChat الصغير، يمكنك أيضًا استخدام أنماط less لكتابة، وفي نفس الوقت، إضافة ضغط الصور، وسطر الأوامر بسرعة. إنشاء قوالب وميزات أخرى لتحسين كفاءة التطوير!

مميزة

مشروع برنامج WeChat المصغر يعتمد على gulp+less
الضغط التلقائي لصور المشروع
فحص رمز ESLint
قم بإنشاء page template component بسرعة باستخدام سطر الأوامر
دعم التعبئة والتغليف بيئة الإنتاج

ابدء

0. قبل البدء، يرجى التأكد من تثبيت العقدة وnpm، ومن تثبيت gulp-cli عالميًا.

 $ npm install --global gulp-cli

1. قم بتنزيل الكود

 $ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git

2. أدخل الدليل وقم بتثبيت التبعيات

 $ cd wx-miniprogram-boilerplate && npm install

3. قم بتجميع التعليمات البرمجية وإنشاء دليل dist واستخدام أدوات المطور لفتح دليل dist.

 $ npm run dev （开发环境打包）
$ npm run test (测试环境打包)

4. قم بإنشاء صفحة أو قالب أو مكون جديد

  gulp auto -p mypage           创建名为mypage的page文件
  gulp auto -t mytpl            创建名为mytpl的template文件
  gulp auto -c mycomponent      创建名为mycomponent的component文件
  gulp auto -s index -p mypage  复制pages/index中的文件创建名称为mypage的页面

5. قم بالتجميع قبل تحميل الكود

 $ npm run build （生产环境打包）

6. قم بتحميل الكود ومراجعته وإصداره

الهيكل الهندسي

 wx-miniprogram-boilerplate
├── dist         // 编译后目录
├── node_modules // 项目依赖
├── src 
│    ├── components // 微信小程序自定义组件
│    ├── env        // 请求域名配置
│    ├── images     // 页面中的图片和icon
│    ├── pages      // 小程序page文件
│    ├── styles     // ui框架，公共样式
│    ├── template   // 模板
│    ├── utils      // 公共js文件
│    ├── app.js
│    ├── app.json
│    ├── app.less
│    ├── project.config.json // 项目配置文件
│    └── api.config.js       // 项目api接口配置
├── .gitignore
├── .eslintrc.js
├── package-lock.json
├── package.json
└── README.md

وصف الغول

 Tasks:
  dev              开发编译，同时监听文件变化
  test             整体编译，请求指向测试环境
  build            整体编译

  clean            清空产出目录
  wxml             编译wxml文件（仅仅copy）
  js               编译js文件，同时进行ESLint语法检查
  json             编译json文件（仅仅copy）
  wxss             编译less文件为wxss
  img              编译压缩图片文件
  watch            监听开发文件变化
  devEnv/testEnv/prodEnv 生成对应环境的请求域名配置

  auto             自动根据模板创建page,template或者component(小程序自定义组件)

gulp auto 

选项：
  -s, --src        copy的模板                     [字符串] [默认值: "_template"]
  -p, --page       生成的page名称                                       [字符串]
  -t, --template   生成的template名称                                   [字符串]
  -c, --component  生成的component名称                                  [字符串]
  --msg            显示帮助信息                                           [布尔]

示例：
  gulp auto -p mypage           创建名为mypage的page文件
  gulp auto -t mytpl            创建名为mytpl的template文件
  gulp auto -c mycomponent      创建名为mycomponent的component文件
  gulp auto -s index -p mypage  复制pages/index中的文件创建名称为mypage的页面

سؤال وجواب

س: لماذا لا يتم تضمين تحويل js وإكمال النمط وضغط التعليمات البرمجية في سير العمل؟
ج: تأتي أدوات مطور WeChat مزودة بوظائف babel المتمثلة في تحويل ES6 إلى ES5 وإكمال النمط وضغط تعليمات برمجية js. ولا يلزم وجود إضافات إضافية في سير العمل هذا.
س: ما هي استخدامات الملفات الموجودة في دليل _template ؟
ج: استخدم الأمر gulp auto لإنشاء الملفات تلقائيًا. يمكن للمعلمة -s تحديد كائن النسخ افتراضيًا، تكون الملفات الموجودة في المجلد الموجود في الدليل المقابل هي _template ككائن النسخ. يمكن للمطورين تخصيص الملفات ضمن _template وفقًا لاحتياجات العمل.
س: هل سيتم تجميع الملفات الموجودة في دليل _template في دليل dist ؟
ج: لا.