ดาวน์โหลด WeApp Workflow - ดาวน์โหลดซอร์สโค้ด WeApp Workflow

WeApp Workflow

โค้ดแหล่งที่มา AI

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 目录编译后生成的文件目录，也是小程序开发的项目目录

เริ่มต้นเลย

แนะนำให้ใช้เวอร์ชันโหนดเป็น 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

ไอเทอม

งานที่เหลืออยู่: gulp clean : clear dist , โฟลเดอร์ tmp

การกำหนดค่า

หลังจากดำเนินการข้างต้นเสร็จแล้ว คุณจะต้องทำการตั้งค่าที่เกี่ยวข้องใน "เครื่องมือสำหรับนักพัฒนาเว็บ WeChat" (อิงจาก v1.x และไม่สามารถทำงานร่วมกับ v0.x ได้อีกต่อไป)

1. สร้างโปรเจ็กต์ใหม่และเลือกไดเร็กทอรีโปรเจ็กต์ทั้งหมดโดยตรง ซึ่งก็คือไดเร็กทอรีที่ project.config.json ตั้งอยู่ เป็นไดเร็กทอรีโปรเจ็กต์

การกำหนดค่า WeApp-เวิร์กโฟลว์

พัฒนา

จากนั้นคุณสามารถเข้าสู่การพัฒนาตามปกติได้ ในระหว่างกระบวนการพัฒนา ให้ใช้โปรแกรมแก้ไขของบริษัทอื่น (WebStorm, Sublime Text ฯลฯ) เพื่อแก้ไขไฟล์ในไดเร็กทอรี src หลังจากบันทึกการแก้ไขแล้ว กระบวนการอึกจะคอมไพล์ไฟล์เหล่านั้นแบบเรียลไทม์ไปยังตำแหน่งที่เกี่ยวข้อง 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 เหมาะสำหรับการพัฒนาโปรแกรมขนาดเล็ก "ขนาดเล็ก" มากกว่าโปรแกรมขนาดเล็กที่ซับซ้อน ดังนั้น เมื่อพิจารณาถึงความเร็วการพัฒนา จำนวนโค้ด ฯลฯ จึงไม่มีขั้นตอนการพัฒนาพิเศษและงานเดียว (การพัฒนา) มีเพิ่มงานการคอมไพล์เพิ่มเติม (บิวด์) ในระหว่างขั้นตอนการทำให้เสร็จสมบูรณ์ แค่งานเดียวเท่านั้น