wuss weapp

wuss weapp

ห้องสมุดส่วนประกอบ UI ของ WeChat Apple ที่มีคุณภาพสูงและปรับแต่งได้สูง

เอกสาร

https://phonycode.github.io/wuss-weapp

Wuss Weapp อย่างเป็นทางการกลุ่มการสื่อสาร

หมายเลขกลุ่ม QQ 787275772

สแกนรหัส QR เพื่อสัมผัส

ใช้ WeChat เพื่อสแกนเพื่อสัมผัสตัวอย่างส่วนประกอบของโปรแกรม mini

ภาพสาธิต

เริ่มต้นอย่างรวดเร็ว

ก่อนที่คุณจะเริ่มใช้ Wuss Weapp คุณต้องอ่านเอกสารที่เกี่ยวข้องสำหรับส่วนประกอบที่กำหนดเองของแอปเพล็ต WeChat

วิธีใช้

วิธีที่ 1 [แนะนำ] (ติดตั้งการพึ่งพาผ่าน NPM และสร้างโมดูล NPM ใน Applets)

1. ค้นหาไดเรกทอรีการพัฒนาแอปเพล็ตปัจจุบันโดยใช้คำสั่งเชลล์หรือ GIT จากนั้นติดตั้งการอ้างอิงโดยใช้ NPM หรือเส้นด้าย

npm init && npm install --production wuss-weapp

หรือ

yarn init && yarn add --production wuss-weapp

2. หลังจากการติดตั้งการพึ่งพาเสร็จสมบูรณ์คุณสามารถคลิก [เครื่องมือ] => [build npm] ในเครื่องมือนักพัฒนา Applet WeChat หากหน้าต่างป๊อปอัพปรากฏขึ้นอย่าลืม "ใช้โมดูล NPM" เพื่อตรวจสอบ หากไม่มีหน้าต่างป๊อปอัพให้ตรวจสอบด้วยตนเองในรายละเอียดหลังจากบิลด์เสร็จสมบูรณ์

3. หลังจากบิลด์เสร็จสมบูรณ์คุณสามารถเพิ่มส่วนประกอบที่ต้องการได้ กำหนดค่าในหน้า JSON:

 "usingComponents" : {
  "w-button" : " wuss-weapp/w-button/index " ,
  "w-toast" : " wuss-weapp/w-toast/index " ,
  "w-alert" : " wuss-weapp/w-alert/index "
}

4. ใช้ส่วนประกอบใน WXML:

 < w-button type =" info " bind:onClick =" buttonClick " >这是一个按钮</ w-button >
< w-toast id =" wuss-toast " />
< w-alert id =" wuss-alert " />

5. ใช้ใน JavaScript:

 import { Alert , Toast } from 'wuss-weapp' ;

Alert ( {
  title : '提示' ,
  content : 'wuss weapp is good' ,
} ) ;

Toast . show ( {
  message : 'wuss小程序UI库' ,
} ) ; 

วิธีที่ 2 (คัดลอก Dist ของโครงการปัจจุบันไปยังโครงการของคุณเอง)

1. ไปที่ GitHub เพื่อดาวน์โหลดรหัสของ Wuss WeApp และคัดลอกไดเรกทอรี dist ไปยังโครงการของคุณ จากนั้นใช้ส่วนประกอบด้วยวิธีต่อไปนี้ การรับปุ่มเป็นตัวอย่างส่วนประกอบอื่น ๆ จะถูกดูในหน้าเอกสารที่เกี่ยวข้อง:

2. เพิ่มส่วนประกอบที่ต้องการ กำหนดค่าในหน้า JSON (เส้นทางได้รับการกำหนดค่าตามตำแหน่งของโครงการของคุณ):

 "usingComponents" : {
  "w-button" : " /dist/w-button/index "
}

2. ใช้ส่วนประกอบใน WXML:

 < w-button type =" info " bind:onClick =" buttonClick " >这是一个按钮</ w-button >

ดูตัวอย่างส่วนประกอบทั้งหมด

เรามีตัวอย่างในตัวของส่วนประกอบทั้งหมดคุณสามารถสแกนรหัสแอปเพล็ตด้านบนเพื่อสัมผัสได้หรือดูในเครื่องมือนักพัฒนา WeChat ดังต่อไปนี้:

git clone https://github.com/phonycode/wuss-weapp.git

จากนั้นเปิดโครงการโดยตรงในเครื่องมือนักพัฒนา WeChat

มีส่วนช่วย

หากคุณมีความคิดเห็นหรือคำแนะนำใด ๆ โปรดอย่าลังเลที่จะพูดถึงปัญหา โปรดอ่านว่ามีปัญหาที่เกี่ยวข้องก่อนที่คุณจะพูดถึงปัญหาหรือไม่ หรือหากมีปัญหาที่เกี่ยวข้อง แต่ปัญหาถูกปิดมันเป็นเพียงเวอร์ชันที่ยังไม่ได้รับการปรับปรุง โปรดอย่าตอบกลับด้านล่างปัญหานี้ หากเวอร์ชันที่อัปเดตยังคงมีอยู่หลังจากการอัปเดตโปรดส่งปัญหาใหม่ ขอบคุณ

ใบอนุญาต

มิกซ์