weapp
v2
ส่วนประกอบโปรแกรมขนาดเล็ก WeChat และการห่อหุ้มฟังก์ชัน การเขียนโปรแกรมส่วนประกอบอย่างง่าย
จากการห่อหุ้มส่วนประกอบแบบกำหนดเองของ WeChat การเขียนโปรแกรมส่วนประกอบอย่างง่าย โปรดดูที่ Component API สำหรับส่วนประกอบแบบกำหนดเองของส่วนประกอบ
โปรดทราบว่าคุณต้องเปิดใช้งานฟังก์ชัน ES6 ถึง ES5 ในเครื่องมือสำหรับนักพัฒนา WeChat โปรดใช้ไลบรารีฐานโปรแกรมขนาดเล็ก ที่มากกว่าเวอร์ชัน 1.6.3 และอัปเดต WeChat เป็นเวอร์ชันล่าสุด
หากคุณต้องการชุดรหัสเพื่อพัฒนาแอปเพล็ต WeChat และแอปเพล็ต Alipay ปลั๊กอิน mpapi อาจช่วยคุณได้ (ปลั๊กอินที่เข้ากันได้กับแอปเพล็ต WeChat และ Alipay แอปเพล็ต API)
โปรดใช้เครื่องมือสำหรับนักพัฒนา WeChat เพื่อเปิดไดเร็กทอรี src
├─images ---------- 公共图片
├─js -------------- 公共的JS
│ └─common ---------- 公共方法函数封装
├─components ------ 自定义组件和第三方组件
│ ├─libs ------------ 第三方库
│ └─weapp ----------- weapp组件
├─pages ----------- 页面目录
│ ├─index ----------- 首页
│ ├─libs ------------ 第三方库页面
│ └─weapp ----------- weapp组件页面
├─app.js
├─app.json
├─app.wxss
└─README.md
usingComponents // page.json
{
"usingComponents" : {
"weapp-toast" : "/components/weapp/toast/toast" ,
"weapp-tab" : "/components/weapp/tab/tab"
}
} <!-- page.wxml-->
< weapp-toast title =" {{ toastTitle }} " bind:hide =" onToastHide " />
< weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " /> ข้อมูลต่อไปนี้แสดงการใช้งานคอมโพเนนต์ Tab อย่างง่าย สำหรับตัวอย่างเฉพาะ โปรดดูโค้ดใน pages/weapp/tab ภายในโปรเจ็กต์ การใช้ส่วนประกอบประเภทอื่นโดยพื้นฐานแล้วจะคล้ายกับวิธีการเรียกนี้
// tab.json
{
"navigationBarTitleText" : "Tab" ,
"usingComponents" : {
"weapp-tab" : "/components/weapp/tab/tab"
}
} <!-- tab.wxml -->
< weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " /> // tab.js
Page ( {
data : {
list1 : [ '选项1' , '选项2' , '选项3' ]
} ,
handlerSelect ( ) {
this . setData ( {
activeIndex : 1
} ) ;
} ,
onTabChange ( event ) {
console . log ( event . detail . activeIndex )
}
} ) Floating prompt ซึ่งเป็นส่วนประกอบของ Toast ที่ใช้กันทั่วไปในการพัฒนาอุปกรณ์เคลื่อนที่ แตกต่างจาก showToast ของมินิโปรแกรม
titledelay เวลาหน่วงเวลาสำหรับการปิดเครื่องอัตโนมัติในหน่วยมิลลิวินาที ค่าเริ่มต้น: 1500 hide ถูกปิด < weapp-toast title =" {{ toastTitle }} " bind:hide =" onToastHide " />แท็บ
listactive-index อยู่ ค่าเริ่มต้น: 0theme ว่างเปล่าตามค่าเริ่มต้น สามารถส่งผ่านใน weapp-tab หรือสไตล์ที่กำหนดเองอื่นๆ ได้ change การสลับการโทรกลับ event พารามิเตอร์ โดยที่ event.detail.activeIndex เป็นดัชนีที่เลือกในปัจจุบัน < weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " />การเลือกเมือง
region change การสลับการโทรกลับ event พารามิเตอร์ โดยที่ event.detail.region เป็นข้อมูลภูมิภาคที่เลือก < weapp-city-picker show =" {{isCityPickerShow}} " bind:change =" onChangeCity " />โหลดเพิ่มเติม ไม่มีพรอมต์ข้อมูล มักใช้กับรายการข้อมูลแบบดึงขึ้น
icon-type ประเภทของส่วนประกอบไอคอนแอปเพล็ต ค่าเริ่มต้น: searchstatus สถานะปัจจุบัน, ค่าเผื่อเลือก: loading , nomore , empty , ยังไม่มีข้อมูล, ค่าเริ่มต้น: loadingempty-txt ไม่มีข้อความแจ้งข้อมูล ค่าเริ่มต้น:暂无数据loading-txt ข้อความแจ้งการโหลด ค่าเริ่มต้น:正在加载nomore-txt ไม่มีข้อความแจ้งอีกต่อไป ค่าเริ่มต้น:没有更多数据了 < weapp-loader status =" {{status}} " /> เมนูป๊อปอัปพร้อมทิศทางลูกศรที่รองรับสูงสุด 12 ทิศทาง ตอบสนองสถานการณ์ส่วนใหญ่ 
list เมนูpage-selector ตัวเลือก CSS สำหรับคอนเทนเนอร์ด้านนอกสุดของทั้งหน้า ค่าเริ่มต้นคือ .pageelem-id อยู่ในตำแหน่งตาม ID ขององค์ประกอบdir ค่าเผื่อเลือก tl tc tr rt rc rb bl bc br lt lc lb ตามลำดับซึ่งแสดงถึงชุดค่าผสม 12 แบบของบน, ขวา, ล่าง, ซ้ายและตรงกลางtl สอดคล้องกับ top-lefttc สอดคล้องกับ top-centertr สอดคล้องกับ top-rightrt สอดคล้องกับ right-toprc สอดคล้องกับ right-centerrb สอดคล้องกับ right-bottombl สอดคล้องกับ bottom-leftbc สอดคล้องกับ bottom-centerbr สอดคล้องกับ bottom-rightlt ตรงกับ left-toplc สอดคล้องกับ left-centerlb ตรงกับ left-bottom select การโทรกลับสำหรับแต่ละรายการ พารามิเตอร์ event โดยที่ event.detail.item คือรายการปัจจุบันที่เลือกshow การโทรกลับhide การโทรกลับที่ซ่อนอยู่ < weapp-popover list =" {{list}} " dir =" {{dir}} " elem-id =" {{elemId}} " show =" {{show}} " bind:select =" onSelectPopover " />เคล็ดลับยอดนิยม
titletype ประเภทพรอมต์, success , error , warn , ค่าเริ่มต้น: defaultdelay เวลาหน่วงเวลาสำหรับการปิดเครื่องอัตโนมัติในหน่วยมิลลิวินาที ค่าเริ่มต้น: 1500 hide ถูกปิด < weapp-toptip type =" {{ type }} " title =" {{ title }} " /> การเลือกปฏิทินรองรับการเลื่อนการแสดงการสลับหลายเดือน คลิกซ้ายและขวาเพื่อสลับเดือนและสลับเป็นวันนี้ 
start-date ที่เริ่มต้นend-date สิ้นสุดcurrent-date วันที่เลือกเริ่มต้นshow ตั้งแต่เริ่มต้นหรือไม่ ค่าเริ่มต้น: falsecurrent แสดงเดือนแรกตามค่าเริ่มต้น เดือน 0 จากวันที่เริ่มต้นคือเดือนแรก change ฟังก์ชันเรียกกลับของวันที่ที่เลือก พารามิเตอร์ event โดยที่ event.detail.currentDate คือวันที่ที่เลือกปัจจุบัน < weapp-calendar-picker start-date =" 2017-07-07 " end-date =" 2018-08-08 " show =" {{ isCalendarPickerShow }} " bind:change =" onChangeDate " />การส่งต่อและการแชร์เพจช่วยลดการกำหนดค่าที่ซับซ้อนของแต่ละเพจ ทำให้ใช้งานง่ายและมีประสิทธิภาพมากขึ้น โดยรองรับตัวเลือกพารามิเตอร์การส่งผ่านเพจ
title ที่แสดงurl ค่าเริ่มต้นคือที่อยู่หน้าปัจจุบัน import common from '../../assets/js/common' ;
// common.share([title], [url])
Page ( {
onShareAppMessage : common . share ( )
} ) ; การพิจารณาประเภท, การส่งคืน Number , String , Boolean , Array , Object , Function และสตริงประเภทอื่นๆ
value คือพารามิเตอร์ใดๆ ที่ต้องพิจารณา import common from '../../assets/js/common' ;
// common.type([value])
common . type ( 1 ) ; // Number
common . type ( 'abc' ) ; // String
common . type ( true ) ; // Boolean
common . type ( [ ] ) ; // Array
common . type ( { } ) ; // Object
common . type ( function ( ) { } ) ; // Function
common . type ( / d / ) ; // RegExp
common . type ( new Date ( ) ) ; // Dateแยกวัตถุเป็นสตริง URL
urlObject ซึ่งเป็นอ็อบเจ็กต์ที่จะแปลงเป็นพารามิเตอร์สตริงunEncodeURI ไม่ได้ใช้การเข้ารหัส encodeURIComponent จะถูกใช้เป็นค่าเริ่มต้น import common from '../../assets/js/common' ;
// common.param([urlObject], [unEncodeURI])
let obj = {
name : 'weapp' ,
uid : 8 ,
age : 24
} ;
let params = common . param ( obj ) ;
console . log ( params ) ; // ?name=weapp&uid=8&age=24 แยกสตริง URL ออกเป็นวัตถุ แทนที่จะใช้ common.param
urlString ที่อยู่พร้อมพารามิเตอร์ urlunDecodeURI ไม่ได้ใช้การถอดรหัส และใช้ decodeURIComponent เป็นค่าเริ่มต้น import common from '../../assets/js/common' ;
// common.unparam([urlString], [unDecodeURI])
let str = '?name=weapp&uid=8&age=24' ;
let obj = common . unparam ( str ) ;การข้ามหน้า ได้รับการปรับให้เหมาะสมเพื่อป้องกันการคลิกอย่างรวดเร็วเพื่อเปิดสองหน้า รองรับรูปแบบวัตถุเพื่อส่งพารามิเตอร์ URL ซึ่งสอดคล้องกับ wx.navigateTo, wx.redirectTo, wx.switchTab, wx.reLaunch ของมินิโปรแกรมตามลำดับ
urlparams import common from '../../assets/js/common' ;
// common.navigateTo([url], [params])
Page ( {
onTapElem ( ) {
common . navigateTo ( '/pages/weapp/popover/popover' , {
userid : 123 ,
info : 'Hello,weapp'
} ) ;
}
} ) ; ใช้ FontAwesome สำหรับไอคอนแบบอักษรและ WeUI สำหรับสไตล์ส่วนประกอบ CSS
MIT เพลิดเพลินไปกับโอเพ่นซอร์ส
