WeChat แอพส่งข้อความชั้นนำของจีนเปิดตัวสิ่งที่ค่อนข้างรุนแรง: มินิโปรแกรม แอพที่ฝังไว้ซึ่งไม่จำเป็นต้องดาวน์โหลดไม่ต้องติดตั้ง เปิด ใช้ แชร์ เสร็จ!
มีการถกเถียงกันมากมาย - และคลิกเบตมากมาย - เกี่ยวกับการใช้งานแอปเหล่านี้ได้จริง... แท้จริงแล้วเฟรมเวิร์กที่มอบให้กับนักพัฒนานั้นยังอยู่ในช่วงเริ่มต้นเท่านั้น ยังมีข้อ จำกัด และจริงๆ แล้วค่อนข้างน่าหงุดหงิด อย่างไรก็ตาม Tencent กำลังลงทุนทรัพยากรที่ไม่เคยมีมาก่อนในการนำช่องทางนี้ไปใช้ สร้างแรงผลักดัน และเปิดโอกาสให้กับผู้ที่เคลื่อนไหวรายแรก เราเชื่อว่าแฮกเกอร์เหล่านี้อาจได้รับชัยชนะอย่างรวดเร็วหากพวกเขากล้าที่จะลองใช้มัน
มีแนวคิดเกี่ยวกับบริการที่คุณต้องการปรับใช้ใน WeChat โดยเร็วที่สุดหรือไม่ มีความรู้พื้นฐานเกี่ยวกับ Javascript และต้องการทดลองกับเฟรมเวิร์กนี้หรือไม่? หลงทางในการแปลเอกสารของ Google หรือไม่? ต้องการความช่วยเหลือเล็กน้อยเพื่อถอดรหัสสิ่งที่เป็นไปได้หรือไม่? สวัสดีและยินดีต้อนรับ.
การค้นหาเส้นทางผ่านเอกสารอย่างเป็นทางการไม่ใช่เรื่องง่าย ในความเป็นจริง ต้องใช้การลองผิดลองถูกจำนวนมาก การค้นคว้าเกี่ยวกับโค้ดโอเพ่นซอร์ส และสมมติฐานหลายประการเพื่อทำบางสิ่งบางอย่างให้สำเร็จ คุณเอาหัวโขกกำแพง เราเข้าใจแล้ว
ภารกิจของเราคือการช่วยให้ผู้ประกอบการที่มีความคิดสร้างสรรค์สร้างผลิตภัณฑ์เทคโนโลยีที่ยอดเยี่ยม เราจะช่วยคุณก้าวเล็กๆ
เนื้อหาด้านล่างไม่ใช่การแปลเอกสารและจะล้าสมัยอย่างรวดเร็วอย่างแน่นอน เราเป็นเพียงการสนับสนุนในการช่วยเหลือใครก็ตามในการเริ่มต้นและสร้างโปรแกรม WeChat Mini เจ๋งๆ ได้อย่างรวดเร็ว ทำตอนนี้.
คุณกำลังทำมินิโปรแกรมอยู่หรือเปล่า? ติดต่อเราหากคุณต้องการแบ่งปันงานของคุณ พบกับทีมงานของเรา ขอความช่วยเหลือ!
หากคุณต้องการมีส่วนร่วม คุณสามารถส่ง Pull Request ที่นี่ หรือส่งข้อเสนอแนะมาที่เซี่ยงไฮ้ (at) lewagon.com!
ผลงานต้นฉบับนี้เขียนโดยศิษย์เก่าของ Le Wagon: Adrien Pelegri (ชุดที่ 30) โดยได้รับการสนับสนุนจาก Thibault Genaitay (นักขับในจีน) และ Stephane Delgado (ชุดที่ 61)
ขั้นตอนการลงทะเบียนนั้นยากมาก โดยเฉพาะอย่างยิ่งหากคุณไม่มีประสบการณ์กับโลกการบริหารของจีนที่น่าอัศจรรย์ กระบวนการยืนยัน WeChat จะใช้เวลานาน รักษาความสงบของคุณ
ตั้งแต่การลงทะเบียนมินิโปรแกรม WeChat จนถึงรุ่นการพัฒนา คุณต้องทำตามขั้นตอนเหล่านี้:
นี่คือรายการเอกสารที่คุณจะต้องใช้ในการลงทะเบียนมินิโปรแกรมในฐานะบริษัท:
เราขอแนะนำให้คุณปฏิบัติตามคู่มือภาษาอังกฤษที่ครอบคลุมเกี่ยวกับวิธีการลงทะเบียนและสร้างโปรเจ็กต์มินิโปรแกรม: บทความขนาดกลาง หรือตรวจสอบเอกสาร WeChat อย่างเป็นทางการนี้ (อัปเดตล่าสุด: 08/02/2017)
IDE (สภาพแวดล้อมการพัฒนาแบบรวม) คือชุดเครื่องมือการเขียนโปรแกรมสำหรับการเขียนแอปพลิเคชัน ประกอบด้วยโปรแกรมแก้ไขโค้ด คอมไพเลอร์ และดีบักเกอร์ ซึ่งสามารถเข้าถึงได้ผ่านอินเทอร์เฟซผู้ใช้แบบกราฟิกเดียว
ดาวน์โหลด WeChat IDE ที่นี่: Mac, Windows 64, Windows 32
ต่อไปนี้เป็นบทช่วยสอนสั้นๆ เพื่อฝึกฝน WeChat IDE และใช้ประโยชน์สูงสุดจากมัน
โปรแกรมแก้ไขโค้ด ที่มีแผนผังไฟล์ของคุณที่ด้านข้างและ โปรแกรมจำลอง ทางด้านซ้าย ซึ่งแสดงตัวอย่างแอปของคุณ
นี่คือรายการปุ่มทั้งหมดเพื่อดำเนินการเมื่อคุณอยู่ในการพัฒนา:
1. โปรไฟล์: คลิกเพื่อออกจาก IDE 2. การแก้ไขโค้ด 3. ดีบัก / ตรวจสอบ: ดูด้านล่าง 4. ข้อมูลโครงการ: ดูด้านล่าง 5. คอมไพเลอร์: มีประโยชน์ในการคอมไพล์แอปเมื่อการรีเฟรชมุมมองอัตโนมัติไม่ทำงาน
6. ค่าฉาก 7. แคช 8. ปิดเครื่อง: ออกจากโปรเจ็กต์ที่คุณกำลังดำเนินการอยู่และย้ายไปที่โปรเจ็กต์อื่น 9. ซ่อนเครื่องจำลอง 10. อุปกรณ์: แสดงรายการอุปกรณ์สำหรับทดสอบการตอบสนองของมินิโปรแกรม 11. คุณสามารถทำงานบน: wifi, 4G, 3G, 2G 12. ซ่อนต้นไม้ 13. จัดการไฟล์ของคุณ: ค้นหา เพิ่ม และลบโฟลเดอร์หรือไฟล์
ดีบักเกอร์ / ตัวตรวจสอบ: เครื่องมือนี้เป็นส่วนสำคัญของ IDE ดูเหมือนว่า Chrome DevTools รุ่นเก่าที่ดี
1. เครือข่ายแถบด้านบน: แผงนี้มีไว้เพื่อแก้ปัญหาคำขอและปัญหาซ็อกเก็ตหรือประสิทธิภาพการโหลดเพจ ที่เก็บข้อมูล: อนุญาตให้เข้าถึงข้อมูลทั้งหมดที่คุณมีในแคชของคุณ AppData: ใช้เพื่อแสดงข้อมูลโครงการปัจจุบัน คุณสามารถแก้ไขข้อมูลในแผงและดูตัวอย่างได้โดยตรง Wxml: ให้คุณตรวจสอบและแก้ไขทุกองค์ประกอบของเพจได้ทันที เซ็นเซอร์: คุณสามารถจำลองตำแหน่งและประสิทธิภาพของอุปกรณ์เคลื่อนที่เพื่อตรวจแก้จุดบกพร่องในการตรวจจับแรงโน้มถ่วง
2. แผงแหล่งที่มา แผง แหล่งที่มาจะแสดงไฟล์สคริปต์โครงการปัจจุบัน
3. คอนโซล คอนโซลจะแจ้งให้คุณทราบข้อผิดพลาดที่คุณมีในโค้ดของคุณโดยการบันทึกข้อมูลการวินิจฉัยและโต้ตอบกับจาวาสคริปต์ในหน้าเป็น console.log() ที่คุณวางไว้และอื่นๆ
ข้อมูลโครงการ: หน้านี้เป็นที่ที่คุณจะพบรายละเอียดโครงการปัจจุบัน เช่น AppID ข้อมูลไดเรกทอรี และอื่นๆ เมื่อคลิกที่ ตัวเลือกแสดงตัวอย่าง คุณจะสามารถทดสอบมินิโปรแกรมได้โดยตรงบนโทรศัพท์ของคุณหลังจากสแกนโค้ด QR
หมายเหตุ: ขณะที่คุณกำลังทดสอบมินิโปรแกรมบนโทรศัพท์ของคุณ คุณสามารถเปิดใช้งานเครื่องมือดีบักเกอร์ได้โดยตรงบนอุปกรณ์ของคุณ
ส่วนนี้จะแนะนำโครงสร้างของ "การเริ่มต้นอย่างรวดเร็ว" ที่ได้รับจาก WeChat (ต้นแบบ) และพื้นฐานที่คุณต้องปฏิบัติตามกรอบการทำงานนี้
ดาวน์โหลด WeChat Quickstart.zip
การเริ่มต้นอย่างรวดเร็วของต้นไม้:
- ├── app.js ├── app.json ├── แอป.wxss ├── หน้า │ ├── ดัชนี │ │ ├── index.js │ │ ├── index.json │ │ ├── ดัชนี.wxml │ │ └── ดัชนี.wxss │ └── บันทึก │ ├── บันทึก.js │ ├── บันทึก.json │ ├── บันทึก.wxml │ └── บันทึก.wxss └── ยูทิลิตี้ └── util.js
หน้าดัชนีของต้นแบบนี้จะแสดงหน้าต้อนรับพร้อมข้อมูลโปรไฟล์ผู้ใช้ปัจจุบัน การคลิกที่รูปประจำตัวของคุณจะเปลี่ยนเส้นทางไปยังหน้าใหม่ที่แสดงบันทึกมินิโปรแกรมปัจจุบันของคุณ
มินิโปรแกรม WeChat เริ่มต้นด้วย ไฟล์ "app" (ดูภาพหน้าจอด้านล่าง) ไฟล์เหล่านี้เป็นไดเร็กทอรีรากของมินิโปรแกรม ซึ่งเป็นทางเข้าของมินิโปรแกรมของคุณ (นี่คือเอกสาร WeChat อย่างเป็นทางการ)
app.js คือโค้ดสคริปต์ ซึ่งเป็นตรรกะสากลของมินิโปรแกรมของคุณ คุณสามารถตั้งค่าและจัดการฟังก์ชันวงจรชีวิตของ MP ของคุณ ประกาศตัวแปรร่วม หรือเรียกใช้ API ได้
Code snippet of the "app.js" file.
// app.js
App ( {
onLaunch : function ( ) {
// API call to get data from the local cache
var logs = wx . getStorageSync ( 'logs' ) || [ ]
logs . unshift ( Date . now ( ) )
wx . setStorageSync ( 'logs' , logs )
} ,
// Get user information
getUserInfo : function ( cb ) {
var that = this
if ( this . globalData . userInfo ) {
typeof cb == "function" && cb ( this . globalData . userInfo )
} else {
// Call login interface
wx . login ( {
success : function ( ) {
wx . getUserInfo ( {
success : function ( res ) {
that . globalData . userInfo = res . userInfo
typeof cb == "function" && cb ( that . globalData . userInfo )
}
} )
}
} )
}
} ,
// Global variable
globalData : {
userInfo : null
}
} )
app.json คือการกำหนดค่าส่วนกลางของมินิโปรแกรมโดยรวม คุณสามารถกำหนดค่า เส้นทางของหน้า MP (มินิโปรแกรม) รูปแบบหน้าต่าง MP ตั้งค่าการหมดเวลาของเครือข่าย และการกำหนดค่าการดีบัก
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/logs/logs"
] ,
"window" : {
"backgroundTextStyle" : "gray" ,
"navigationBarBackgroundColor" : "#fff" ,
"navigationBarTitleText" : "Hello World" ,
"navigationBarTextStyle" : "black"
}
}
หมายเหตุ: ไม่อนุญาตให้แสดงความคิดเห็นในไฟล์ app.json
app.wxss เป็นสไตล์ชีตสากลของมินิโปรแกรม คุณควรประกาศกฎสไตล์ทั่วไปที่นี่
การเริ่มต้นอย่างรวดเร็วของ WeChat สองหน้า คือ:
โฟลเดอร์ Pages คือที่ที่คุณมีหรือสร้างเพจมินิโปรแกรมของคุณ แต่ละเพจที่คุณสร้างจะ ต้องมีสองไฟล์:
คุณสามารถเพิ่มไฟล์ได้อีกสองไฟล์ในแต่ละเพจที่คุณสร้าง:
ไฟล์ .json สำหรับการกำหนดค่าเพจ
ไฟล์ .wxss สำหรับสไตล์ชีตของอินเทอร์เฟซของคุณ
กฎ: แต่ละหน้าของมินิโปรแกรมของคุณสามารถประกอบด้วยนามสกุลไฟล์ที่แตกต่างกันได้สี่นามสกุล (js ; json ; wxml ; wxss) แต่ ควรมีชื่อเหมือนกัน
รายละเอียดเพิ่มเติม: หน้าใหม่จะมีไฟล์ .js และไฟล์ .wxml ขั้นต่ำเสมอ นามสกุลไฟล์ .json ถูกใช้ในกรณีที่คุณต้องการแทนที่การกำหนดค่าหน้าต่างในหน้านี้โดยเฉพาะ เพิ่ม .wxss หากคุณต้องการเพิ่มสไตล์ชีทให้กับเพจของคุณ
มาดูกันว่าเกิดอะไรขึ้นในแต่ละหน้าของโครงการเริ่มต้นอย่างรวดเร็ว
Code snippet of the "index.js" file.
// index.js
// Get application instance
var app = getApp ( )
Page ( {
data : {
motto : 'Hello World' ,
userInfo : { }
} ,
// Event that redirect user to logs page
Tapped : function ( ) {
console . log ( "tapped" ) ;
wx . navigateTo ( {
url : '../logs/logs'
} )
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
// Call the application instance to get data
app . getUserInfo ( function ( userInfo ) {
// Updates userInfo data
that . setData ( {
userInfo : userInfo
} )
} )
}
} )
ความคิดเห็นตัวอย่าง:
Page()
ในภายหลังเพื่อรวบรวมข้อมูลผู้ใช้Page()
และตั้ง data:
เพื่อผูกข้อมูลเข้ากับมุมมองแบบไดนามิกTapped
จะเปลี่ยนเส้นทางผู้ใช้ปัจจุบันไปยังหน้าบันทึกของเขาonLoad
รับข้อมูลผู้ใช้และอัปเดตข้อมูล userinfo
Code snippet of the "logs.js" file.
// logs.js
var util = require ( '../../utils/util.js' )
Page ( {
data : {
logs : [ ]
} ,
onLoad : function ( ) {
console . log ( wx . getStorageSync ( 'logs' ) )
this . setData ( {
logs : ( wx . getStorageSync ( 'logs' ) || [ ] ) . map ( function ( log ) {
return util . formatTime ( new Date ( log ) )
} )
} )
}
} )
ความคิดเห็นตัวอย่าง:
formatTime
ในภายหลังPage()
และตั้ง data:
.onLoad
ดึงบันทึกผู้ใช้ปัจจุบัน จากแคช wx.getStorageSync('logs')
จากนั้นเรนเดอร์บันทึกในรูป formatTime
ซึ่งจัดทำโดย need ของ util.js Code snippet of the "utils.js" file.
function formatTime ( date ) {
var year = date . getFullYear ( )
var month = date . getMonth ( ) + 1
var day = date . getDate ( )
var hour = date . getHours ( )
var minute = date . getMinutes ( )
var second = date . getSeconds ( )
return [ year , month , day ] . map ( formatNumber ) . join ( '/' ) + ' ' + [ hour , minute , second ] . map ( formatNumber ) . join ( ':' )
}
function formatNumber ( n ) {
n = n . toString ( )
return n [ 1 ] ? n : '0' + n
}
module . exports = {
formatTime : formatTime
}
บันทึก:
ใน Utils จะถูกจัดเก็บ ไลบรารีที่นำเข้า ซึ่งคุณอาจต้องการจากที่อื่น (ในตัวอย่างของเรา จำเป็นต้องใช้ util.js ใน log.js) ในข้อมูลโค้ดด้านบน ฟังก์ชัน formatTime
ถูกกำหนดไว้ใน util.js เพื่อแสดงวันที่ของบันทึกของคุณอย่างถูกต้อง
ถึงตอนนี้คุณทราบแล้วว่าคุณจะมี สองชั้นในแต่ละหน้า:
เลเยอร์ลอจิคัล (.js): ประมวลผลข้อมูลและส่งไปยังเลเยอร์มุมมอง ในขณะที่รับเหตุการณ์ที่ทริกเกอร์จากเลเยอร์มุมมอง
ดูเลเยอร์ (.wxml/.wxss): แสดงข้อมูลที่ประมวลผลโดยเลเยอร์ลอจิคัลลงในมุมมอง ขณะเดียวกันก็ส่งเหตุการณ์ของเลเยอร์มุมมองไปยังเลเยอร์ลอจิคัล
เราสามารถแบ่งวงจรชีวิตของโปรแกรมขนาดเล็กออกเป็นสองรอบ ได้แก่ รอบแอปพลิเคชันและรอบหน้า วงจรชีวิต App()
เป็น จุดเริ่มต้นและจุดสิ้นสุด ของมินิโปรแกรม ในขณะที่วงจรชีวิต Page()
จะถูกเปิดใช้งานเมื่อผู้ใช้เรียกดูผ่านมินิโปรแกรม
ฟังก์ชัน App()
ใช้สำหรับลงทะเบียนมินิโปรแกรม ใช้วัตถุเป็นพารามิเตอร์ที่ระบุฟังก์ชันวงจรชีวิตของ MP
ความคิดเห็น:
onLaunch
และเริ่มต้น MPonShow
จะถูกทริกเกอร์onHide
จะถูกทริกเกอร์เมื่อผู้ใช้ปัจจุบันออกจากมินิโปรแกรม Code snippet of the "App()" life cycle functions.
App ( {
onLaunch : function ( ) {
// Do something when launch.
} ,
onShow : function ( ) {
// Do something when show.
} ,
onHide : function ( ) {
// Do something when hide.
} ,
onError : function ( msg ) {
console . log ( msg )
} ,
globalData : 'I am global data'
} )
กรอบงาน WeChat นำเสนอฟังก์ชันระดับโลกที่เรียกว่า getApp()
ซึ่งเป็นอินสแตนซ์ของ App()
Code snippet "getApp()" function.
// .js
var appInstance = getApp ( )
console . log ( appInstance . globalData ) // I am global data
ฟังก์ชัน getApp()
จะมีประโยชน์ด้วยเหตุผลง่ายๆ ที่คุณไม่สามารถกำหนดฟังก์ชัน App()
ภายในฟังก์ชัน Page()
ได้ ในการเข้าถึงอินสแตนซ์ของแอป คุณต้องเรียกใช้ฟังก์ชัน getApp()
ฟังก์ชัน Page()
ใช้ในการลงทะเบียนเพจ โดยยอมรับออบเจ็กต์เป็นพารามิเตอร์ที่ระบุข้อมูลเริ่มต้นสำหรับเพจ ฟังก์ชันวงจรชีวิต ตัวจัดการเหตุการณ์ และอื่นๆ
ความคิดเห็น:
onLoad
onShow
onShow
จะเรียก onReady
เพื่อเรนเดอร์มุมมองonShow
จะแสดงผลมุมมองโดยตรงonHide
จะถูกทริกเกอร์เมื่อมินิโปรแกรมข้ามไปยังหน้าอื่นonUnload
จะถูกเรียกเมื่อคุณออกจากเพจโดยใช้ wx.redirectTo()
และ wx.navigateBack()
หรือเมื่อมีการเปิดเพจปัจจุบันอีกครั้ง wx.reLaunch
Code snippet of "Page()" life cycle functions.
Page ( {
data : {
text : "This is page data."
} ,
onLoad : function ( options ) {
// Do some initializations when page load.
} ,
onReady : function ( ) {
// Do something when page ready.
} ,
onShow : function ( ) {
// Do something when page show.
} ,
onHide : function ( ) {
// Do something when page hide.
} ,
onUnload : function ( ) {
// Do something when page close.
} ,
// Event handler
viewTap : function ( ) {
this . setData ( {
text : 'Set some data.'
} )
}
} )
เมื่อวงจรชีวิต App()
เสร็จสมบูรณ์ เพจจะโหลดโดยการเรียก onLoad
เป็นครั้งแรก และจะเรียกเพียงครั้งเดียวเท่านั้น
เมื่อมินิโปรแกรมทำงานจากพื้นหลัง (วงจรชีวิตแอป) ไปยังเบื้องหน้า (วงจรชีวิตหน้า) ขั้นแรกจะเรียกใช้ฟังก์ชัน App()
onShow
จากนั้นจึงเรียกใช้ฟังก์ชัน Page()
onShow
เมื่อสลับไปที่เบื้องหน้า
คำแนะนำ WeChat:
App()
ไม่สามารถนำมาใช้ซ้ำได้ และควรลงทะเบียนเพียงครั้งเดียวใน app.jsonLaunch
เมื่อยังไม่ได้สร้างเพจ getCurrentPages()
getApp()
คุณสามารถรับ อินสแตนซ์ของ App() ได้ แต่ฟังก์ชันวงจรชีวิตจะไม่พยายามเรียกใช้ฟังก์ชัน App()
การตั้งค่ามินิโปรแกรมของคุณนั้นเรียบง่ายและออกแบบมาเพื่อประหยัดเวลาและความยุ่งยากเมื่อมีความต้องการปรับแต่ง
WeChat แบ่ง การกำหนดค่า app.json ออกเป็นห้าส่วน:
ในส่วนนี้เราจะ แจกแจง ตัวอย่าง การตั้งค่า app.json ที่สมบูรณ์นี้
Code snippet "app.json complete setup" example
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon" ,
] ,
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true
} ,
"tabBar" : {
"backgroundColor" : "#FFFFFE" ,
"borderStyle" : "#D3D3D3" ,
"selectedColor" : "#D03232" ,
"color" : "#131313" ,
"list" : [ {
"pagePath" : "pages/index/index" ,
"iconPath" : "image/form.png" ,
"selectedIconPath" : "image/form-hover.png" ,
"text" : "Form"
} , {
"pagePath" : "pages/wagon/wagon" ,
"iconPath" : "image/about.png" ,
"selectedIconPath" : "image/about-hover.png" ,
"text" : "About"
} ]
}
}
บทบาท pages
ใน app.json คือการ กำหนดเส้นทางทั้งหมด ของมินิโปรแกรมของคุณ การกำหนดค่าของรายการนี้เป็น ข้อบังคับ และ ต้องใช้อาร์เรย์ของสตริง แต่ละโฟลเดอร์ย่อยและไฟล์ภายในโฟลเดอร์เพจหลักจะสอดคล้องกับ เส้นทางการกำหนดเส้นทาง
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon"
]
}
เคล็ดลับ: แต่ละครั้งที่คุณ เพิ่มเส้นทางเส้นทาง ไปยัง "pages"
IDE จะ สร้างโฟลเดอร์และไฟล์ที่สอดคล้องกับเส้นทางที่คุณเพิ่งสร้างขึ้นโดยอัตโนมัติ
กรอบงาน WeChat นำตรรกะการกำหนดเส้นทางหลายอย่าง:
คำอธิบายโหมดเส้นทาง:
การเริ่มต้น: เมื่อเปิดตัวมินิโปรแกรม หน้าแรกจะถูกโหลดโดยฟังก์ชัน onLoad
และ onShow
เปิดหน้าใหม่: การเปิดหน้าใหม่จะซ่อนหน้าปัจจุบันและข้ามไปยังหน้าอื่นโดยใช้ wx.navigateTo
เบื้องหลังหน้าแรกจะถูกซ่อนไว้โดยการเรียกใช้ฟังก์ชัน onHide และข้ามไปยังหน้าอื่นโดยการเรียก onLoad และ onShow
การเปลี่ยนเส้นทางหน้า: ปิดหน้าปัจจุบันโดยการเรียก onUnload และข้ามไปยังหน้าภายในแอปโดยใช้ wx.redirectTo
ซึ่งเรียกใช้ฟังก์ชัน onLoad และ onShow
การคืนหน้า: onUnload
หน้าปัจจุบัน เรียกใช้ฟังก์ชัน onLoad
จากนั้นแสดงหน้าเป้าหมายโดยการเรียก onShow
กำลังโหลดใหม่ wx.reLaunch
: ปิดหน้าทั้งหมดและโหลดหน้าปัจจุบันใหม่ * ใช้งานไม่ได้กับอุปกรณ์ Android บางรุ่น
สลับแท็บ wx.switchTab
: กระโดดจากหน้า tabBar หนึ่งไปยังอีกหน้าหนึ่ง และปิดหรือซ่อนหน้าอื่นๆ ที่ไม่ใช่ tabBar ทั้งหมดโดยใช้ onUnload, onHide และ onShow ค้นพบสถานการณ์ที่เป็นไปได้ทั้งหมดสำหรับการสลับแท็บ
สลับแท็บ ข้อจำกัดการนำทาง:
คำแนะนำ WeChat:
navigateTo
, redirectTo
สามารถเปิดได้เฉพาะหน้าที่ไม่ใช่ tabBar - switchTab
สามารถเปิดและแสดงหน้า tabBar เท่านั้น - reLaunch
สามารถใช้ได้ทุกหน้า getCurrentPages()
: ฟังก์ชันนี้ใช้เพื่อ รับอินสแตนซ์ของสแต็กหน้าปัจจุบัน มันถูกกำหนดให้เป็นอาร์เรย์ในลำดับสแต็กของหน้า รายการแรกของอาร์เรย์คือหน้าแรกและรายการสุดท้ายคือหน้าปัจจุบัน
tabBar
ตามชื่อ คือรายการที่กำหนดค่าแถบแท็บด้านบนหรือด้านล่าง tabBar
คืออาร์เรย์ ที่รองรับแท็บอย่างน้อย 2 แท็บและ สูงสุด 5 แท็บ
Code snippet of the "app.json" file.
{
"tabBar" : {
"backgroundColor" : "#FFFFFE" ,
"borderStyle" : "#D3D3D3" ,
"selectedColor" : "#D03232" ,
"color" : "#131313" ,
"list" : [ {
"pagePath" : "pages/index/index" ,
"iconPath" : "image/form.png" ,
"selectedIconPath" : "image/form-hover.png" ,
"text" : "Form"
} , {
"pagePath" : "pages/wagon/wagon" ,
"iconPath" : "image/about.png" ,
"selectedIconPath" : "image/about-hover.png" ,
"text" : "About"
} ]
}
}
บ่งชี้คุณสมบัติ:
การใช้คีย์ list
tabBar
จำเป็นต้องมีวัตถุในแต่ละองค์ประกอบของอาร์เรย์
ค่าแอตทริบิวต์ List
มีดังนี้:
คำอธิบายคุณลักษณะ TabBar:
คำแนะนำ WeChat:
tabBar
ของคุณไปด้านบนไม่สามารถแสดงไอคอนได้tabBar
ด้านล่างคือ 40kb, 81px*81pxรายการหน้าต่างใช้เพื่อตั้งชื่อมินิโปรแกรมและรูปแบบหน้าต่างทั่วไป
Code snippet of the "app.json" file.
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true ,
}
คำอธิบายคุณลักษณะของหน้าต่าง:
คุณลักษณะ | พิมพ์ | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
การนำทางBarพื้นหลังสี | HexColor | #000000 | สีพื้นหลังของแถบนำทาง |
การนำทางBarTextStyle | สตริง | white | สีของชื่อแถบนำทาง black หรือ white |
การนำทางBarTitleText | สตริง | ชื่อแถบนำทาง | |
การนำทางสไตล์ | สตริง | default | รูปแบบแถบนำทาง ค่า default หรือ custom ใช้ custom เพื่อปรับแต่งสไตล์แถบนำทาง |
สีพื้นหลัง | HexColor | #ffffff | สีพื้นหลังของแอปพลิเคชัน เช่น สีพื้นหลังที่คุณเห็นเมื่อดึงเพื่อรีเฟรช จะไม่ส่งผลต่อสีขององค์ประกอบ <page> |
พื้นหลังข้อความสไตล์ | สตริง | dark | ดึงเพื่อรีเฟรชรูปแบบข้อความ dark หรือ light |
พื้นหลังสีด้านบน | สตริง | #ffffff | สีพื้นหลังของส่วนบนของหน้าต่าง รองรับเฉพาะบน iOS เท่านั้น |
พื้นหลังสีด้านล่าง | สตริง | #ffffff | สีพื้นหลังของส่วนล่างของหน้าต่าง รองรับเฉพาะบน iOS เท่านั้น |
เปิดใช้งาน PullDownRefresh | บูลีน | false | เปิดหรือปิดใช้งานการดึงเพื่อรีเฟรชทั้งแอป |
เมื่อถึงระยะทางด้านล่าง | ตัวเลข | 50 | กำหนดระยะห่างจากด้านล่างสุดของเพจที่ควรเรียกใช้การเรียกกลับ onReachBottom() |
การวางแนวหน้า | สตริง | portrait | ตั้งค่าการรองรับการหมุนหน้าจอ รองรับ auto portrait และ landscape |
การวางแนวเริ่มต้นของแอปพลิเคชันสามารถกำหนดค่าได้โดยใช้ pageOrientation
ใน window
ในไฟล์การกำหนดค่า app.json
คุณลักษณะนี้รองรับ 3 ค่า:
auto
เพื่อให้มินิโปรแกรมทำงานได้ทั้งในโหมดแนวตั้งและแนวนอนportrait
เพื่อบังคับให้มินิโปรแกรมแสดงเฉพาะในโหมดแนวตั้งเท่านั้นlandscape
เพื่อบังคับให้มินิโปรแกรมแสดงเฉพาะในโหมดแนวนอนเท่านั้น "enablePullDownRefresh": true
ใน global app.json ตามที่กล่าวไว้ข้างต้น จากนั้นคุณสามารถเรียก onPullDownRefresh()
ในหน้ามินิโปรแกรมได้
Code snippet of the "Enable pull down refresh in a page" file.
// .js
Page ( {
// Pull down the trigger event
onPullDownRefresh ( ) {
// Stop the dropdown refresh
wx . stopPullDownRefresh ( )
}
} )
WeChat เสนอความเป็นไปได้ใน การเปลี่ยนชื่อ ของ แถบนำทาง ด้านบนในแต่ละหน้า
Code snippet of the "change navbar title" file.
// .js
Page ( {
// Loading spinner when page loads
onload : function ( ) {
wx . showNavigationBarLoading ( )
} ,
// Change navigation bar title
onShow : function ( ) {
wx . setNavigationBarTitle ( {
title : 'My new navabar title' ,
success : function ( res ) {
console . log ( res )
}
} )
}
} )
การหมดเวลาเครือข่ายอาจมีให้ในคำขอเครือข่ายต่างๆ นี่คือลิงก์ไปยังเอกสาร WeChat หากคุณต้องการดำเนินการต่อ
นี่คือลิงค์ไปยังเอกสาร WeChat
WXML เป็นภาษามาร์กอัป WeChat ที่คล้ายกับ HTML มันรวม ไลบรารีพื้นฐานของส่วนประกอบ และ ระบบเหตุการณ์ เพื่อสร้างเพจแบบไดนามิก
ระบบกิจกรรม WeChat ทำงานเหมือนกับกิจกรรม Javascript แบบคลาสสิกซึ่ง จัดการการตอบสนองเชิงตรรกะต่อเลเยอร์มุมมอง
ตารางด้านล่างแสดงรายการ ความแตกต่างที่สำคัญ ที่คุณจะต้องเผชิญในการพัฒนาระหว่าง WXML / HTML:
คำอธิบายเพิ่มเติมเกี่ยวกับ <block>
:
<block>
ไม่ใช่ส่วนประกอบ แต่เป็นเพียง องค์ประกอบบรรจุภัณฑ์ โดยจะไม่ทำการเรนเดอร์ใดๆ ในเพจ และ ยอมรับเฉพาะคุณสมบัติการควบคุมเท่านั้น
หมายเหตุ: ส่วนประกอบและคุณลักษณะทั้งหมดเป็นตัวพิมพ์เล็ก
มินิโปรแกรมเฟรมเวิร์กไม่อนุญาตให้นักพัฒนาใช้ DOM เพื่อควบคุมองค์ประกอบ WXML ของคุณ คุณจะ อัปเดตเลเยอร์มุมมองของคุณ (ไฟล์ .wxml) ด้วยวิธีการเชื่อมโยงข้อมูลแทน:
เพื่อให้เป็นไปตามข้อกำหนดของ WeChat คุณลักษณะ data
จะต้องเริ่มต้น ในรูปแบบ JSON ภายในฟังก์ชัน Page()
เทคนิค การเชื่อมโยงข้อมูล ช่วยให้สามารถ อัปเดตข้อมูลแบบไดนามิก ภายในเลเยอร์มุมมองได้
แนวปฏิบัติที่ดีคือการเริ่มต้น data
ที่ด้านบนของฟังก์ชัน Page()
Code snippet "data binding" example.
<!-- .wxml -->
< view > {{text}} </ view >
< view > {{array[0].msg}} </ view >
// .js
Page ( {
data : {
text : 'init data' ,
array : [ { msg : '1' } , { msg : '2' } ]
}
}
data:
ซึ่งถูกส่งผ่านไปยังเลเยอร์มุมมองนั้นนำมาจากแอตทริบิวต์ข้อมูลในฟังก์ชัน Page()
ที่เกี่ยวข้อง
ไวยากรณ์การผูกข้อมูล: การผูกข้อมูลใช้ไวยากรณ์ของหนวด (เครื่องหมายปีกกาคู่) เพื่อ ตัดตัวแปร ไวยากรณ์นี้เป็นตรรกะที่น้อยกว่าการวิเคราะห์เครื่องมือเทมเพลต สรุปคือสะดวกและใช้งานง่ายมาก!
WeChat นำเสนอความเป็นไปได้มากมายเกี่ยวกับการใช้งานการผูกข้อมูล คุณมีโอกาสที่จะใช้การผูกข้อมูลกับแอตทริบิวต์ส่วนประกอบ คุณสมบัติ การดำเนินการสตริง การดำเนินการทางคณิตศาสตร์ เส้นทางข้อมูล และอาร์เรย์
คุณสมบัติ wx:for
control ผูกอาร์เรย์จากเลเยอร์ลอจิคัลของคุณ (ไฟล์ .js) วนซ้ำและกำหนดข้อมูล
Code snippet "wx:for" example.
<!-- .wxml -->
< view wx:for =" {{array}} " >
{{index}}: {{item.message}}
</ view >
// .js
Page ( {
data : {
array : [ {
message : 'foo'
} , {
message : 'bar'
} ]
}
} )
คล้ายกับ <view wx:for>
คุณสามารถใช้ <block wx:for>
เพื่อแสดงบล็อก หลายบรรทัด (ดูบล็อกในตาราง WXML ด้านบน)
Code snippet "block wx:for" example.
<!-- .wxml -->
< block wx:for =" {{array}} " wx:for-item =" array-item " wx:key =" key " >
< view class =" card " >
< view class =" card-description " >
</ view >
</ view >
</ block >
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับโค้ดด้านบน โปรดดูที่เก็บ Github นี้
แหล่งข้อมูลเพิ่มเติม:
คล้ายกับ wx:for
, wx:if
ใช้เพื่อกำหนดคำสั่งแบบมีเงื่อนไขและพิจารณาว่าบล็อกควรถูกเรนเดอร์หรือไม่
Code snippet "wx:if" example.
<!-- .wxml -->
<!-- Add additional conditions wx:elif ; wx:else -->
< view wx:if =" {{length > 5}} " > 1 </ view >
< view wx:elif =" {{length > 2}} " > 2 </ view >
< view wx:else > 3 </ view >
// .js
Page ( {
data : {
length : 10
}
} )
หากคุณต้องการแสดง มากกว่าหนึ่งแท็ก ภายใน บล็อกคำสั่งแบบมีเงื่อนไข ของคุณ คุณสามารถใช้ <block wx:if>
<!-- .wxml -->
< block wx:if =" {{true}} " >
< view > view1 </ view >
< view > view2 </ view >
</ block >
เจาะลึกเพิ่มเติมในเอกสาร wx:if
WeChat
เทมเพลตอนุญาตให้กำหนดข้อมูลโค้ดที่คุณต้องการใช้ซ้ำหลายครั้งในไฟล์ต่างๆ ของมินิโปรแกรมของคุณ
รายการเทมเพลต WXML มีขอบเขตของตัวเองและสามารถใช้ข้อมูลเพื่อส่งผ่านได้เท่านั้น
ขั้นแรก ในการประกาศเทมเพลต คุณต้องกำหนดชื่อเทมเพลต
Code snippet "template" example.
<!-- .wxml -->
< template name =" msgItem " >
< view >
< text > {{index}}: {{msg}} </ text >
< text > Time: {{time}} </ text >
</ view >
</ template >
<!-- Call the template -->
< template is =" msgItem " data =" {{item}} " />
ในภายหลังหากคุณต้องการเรียกเทมเพลตภายในไฟล์เดียวกัน ให้ใช้ แอตทริบิวต์ is
และ ชื่อเทมเพลตเป็นค่า ในการประกาศเทมเพลตที่ต้องการ และอย่าลืมส่งข้อมูลไปยังเทมเพลตโดยใช้แอตทริบิวต์ data
// .js
Page ( {
data : {
item : {
index : 0 ,
msg : 'this is a template' ,
time : '2017-05-18'
}
}
} )
หากต้องการประกาศเทมเพลตที่กำหนดไว้แล้วในไฟล์ใหม่ คุณต้องนำเข้าเทมเพลตก่อน
Code snippet "define a template in a specific file" exemple
<!-- item.wxml -->
< template name =" item " >
< text > {{text}} </ text >
</ template >
Code snippet "import and call the template in index.wxml" exemple
<!-- index.wxml -->
< import src =" item.wxml " />
< template is =" item " data =" {{text: 'forbar'}} " />
รายละเอียดเพิ่มเติมเกี่ยวกับเอกสาร WeChat ที่นี่
นอกเหนือจากการเริ่มต้นข้อมูลและฟังก์ชันวงจรชีวิตแล้ว กรอบงานยังช่วยให้กำหนด ฟังก์ชันการจัดการเหตุการณ์ ได้อีกด้วย
องค์ประกอบ WXML (ตัวจัดการเหตุการณ์) ทริกเกอร์เหตุการณ์และ เลเยอร์ลอจิคัลจะผูกตัวจัดการเหตุการณ์ เพื่อรับวัตถุเหตุการณ์เป็นพารามิเตอร์
Code snippet "event handler" example.
<!-- .wxml -->
< button type =" primary " bindtap =" add " > Incrementation: {{count}} </ button >
// .js
Page ( {
data : {
count : 1
} ,
add : function ( e ) {
this . setData ( {
count : this . data . count + 1
} )
}
} )
setData()
: ฟังก์ชันนี้ จะอัปเดตข้อมูล ภายในเลเยอร์ลอจิคัลซึ่งถัดไปจะถูกส่งไปยังเลเยอร์มุมมอง ฟังก์ชัน setData()
รับวัตถุเป็นพารามิเตอร์และอัปเดตค่าคีย์โดยใช้ this.data
เป็น เส้นทางข้อมูล
มีเหตุการณ์การโยงหลายประเภท ส่วนประกอบส่วนใหญ่มีคำจำกัดความของเหตุการณ์การโยงเป็นของตัวเอง
เหตุการณ์การเชื่อมโยงส่วนประกอบ:
bindsubmit
แบบฟอร์มbindinput
สำหรับอินพุตbindscroll
เพื่อดูการเลื่อน Code snippet "form binding event" example.
<!-- form.wxml -->
< form bindsubmit =" bindFormSubmit " >
<!-- Form inputs -->
< button type =" primary " form-type =" submit " > Submit </ button >
</ form >
// form.js
// Form submission function
Page ( {
bindFormSubmit : function ( e ) {
// Treatment
}
} )
เหตุการณ์การผูกแบบคลาสสิก:
bind+event_type
catch+event_type
Code snippet "data binding illustration" example.
< button bindtap =" ontap " type =" primary " > Tap < button />
Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
}
} )
เหตุการณ์การเชื่อมโยงทั่วไปสองเหตุการณ์ที่ใช้คือ bind+event_type
และ catch+event_type
เหตุการณ์ catch คือเหตุการณ์ที่ป้องกันเหตุการณ์ฟองสบู่
แนวคิดของเหตุการณ์ Bubbling: สำหรับผู้ที่ไม่ใช่ Javascript เหตุการณ์ Bubbling สามารถกำหนดได้เมื่อมีเหตุการณ์เกิดขึ้นใน องค์ประกอบที่ซ้อนอยู่ในองค์ประกอบอื่น ทั้งโหนดพาเรนต์และองค์ประกอบที่ซ้อนกันได้รับ การลงทะเบียนเป็นตัวจัดการเหตุการณ์ สำหรับเหตุการณ์นั้น ๆ โหนดพาเรนต์ขององค์ประกอบที่ซ้อนกันควรใช้ catch+event_type
ซึ่งจะ ป้องกันไม่ให้เหตุการณ์เดือดปุดๆ ไปยังองค์ประกอบบรรพบุรุษ
Code snippet "counteract bubbling effect with catchtap" example.
<!-- .wxml -->
< view id =" outter " bindtap =" handleTap1 " >
outer view
< view id =" middle " catchtap =" handleTap2 " >
middle view
< view id =" inner " bindtap =" handleTap3 " >
inner view
</ view >
</ view >
</ view >
// .js
Page ( {
handleTap1 : function ( e ) {
console . log ( 'outter' )
} ,
handleTap3 : function ( e ) {
console . log ( 'inner' )
} ,
handleTap2 : function ( e ) {
console . log ( 'middle' )
}
} )
ส่วนใหญ่ใช้เมื่อคุณซ้อนองค์ประกอบและไม่ต้องการแสดงโหนดหลักขององค์ประกอบที่คุณผูก
Code snippet "tap and longtap event binding" example.
<!-- index.wxml -->
< button bindtap =" ontap " type =" primary " > Tap < button />
< button bindlongtap =" onlongtap " type =" primary " > Long tap < button />
// index.js
Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
} ,
onlongtap : function ( ) {
console . log ( 'longtap' ) ;
}
} )
ต่อไปนี้เป็นเคล็ดลับที่เป็นประโยชน์ในการเปิดใช้งานการแชร์มินิโปรแกรม WeChat เปิดสองวิธีในการแชร์มินิโปรแกรม:
ความเป็นไปได้ที่จะ เปิดใช้งานปุ่มไปข้างหน้า ภายใน เมนูแบบเลื่อนลง ที่ปรากฏขึ้นโดยคลิกที่ มุมขวาบน ...
ของหน้า
สร้างปุ่มส่งต่อในหน้า มินิโปรแกรมของคุณ ทำให้กระบวนการแบ่งปันเป็นมิตรกับผู้ใช้มากขึ้น
ในทั้งสองรูปแบบ เฟรมเวิร์กจะส่งต่อการ์ดมินิโปรแกรม โดยอัตโนมัติ พร้อม ภาพหน้าจอ ส่วนหัว MP ของคุณ
หากต้องการเปิดใช้งานปุ่มนี้ เราจำเป็นต้องใช้ฟังก์ชัน Page()
ที่เรียกว่า onShareAppMessage
Code snippet "Enable the forward button of the drop-down menu" example.
// index.js
onShareAppMessage : function ( ) {
return {
title : 'Le Wagon coding school' ,
path : 'pages/index/index'
}
} ,
ในฟังก์ชันนี้ คุณจะต้อง กำหนดชื่อเรื่อง ที่จะแสดงที่ด้านบนของการ์ดส่งต่อและ เส้นทางของหน้าปัจจุบัน หากคุณลืมเพิ่มชื่อ WeChat จะเพิ่มชื่อตามค่าเริ่มต้น (ชื่อมินิโปรแกรมของคุณ)
ข้อจำกัด: สิ่งเดียวที่คุณสามารถกำหนดได้ในกรณีนี้คือ เหตุการณ์ onShareAppMessage
ปุ่มไปข้างหน้าจะ ถูกสร้างขึ้นโดยเฟรมเวิร์ก เอง
คุณลักษณะนี้ช่วยให้นักพัฒนาสามารถสร้างปุ่มไปข้างหน้าเฉพาะภายในเพจได้โดยใช้คุณสมบัติปุ่ม open-type
และค่าของปุ่ม 'share'
Code snippet "Create a forward button within the page" example.
<!-- about.wxml -->
< view bindtap =" onShareAppMessage " >
< button class =" share-btn " open-type =" share " type =" primary " > Share </ button >
</ view >
ต่างจากกรณีแรก เราต้อง สร้างตัวจัดการเหตุการณ์ ที่ทริกเกอร์ฟังก์ชัน onShareAppMessage
ฟังก์ชันนี้เรียก wx.showShareMenu
และส่งผ่าน withShareTicket
เป็นพารามิเตอร์
// about.js
Page ( {
onShareAppMessage : function ( ) {
console . log ( 'share' )
wx . showShareMenu ( {
withShareTicket : true
} )
}
} )
หมายเหตุ: ทั้งสองรูปแบบใช้ฟังก์ชัน Page()
ซึ่งบอกเป็นนัยว่าคุณกำลังแชร์หน้าเว็บเฉพาะที่คุณประกาศฟังก์ชันนี้
WeChat มุ่งหวังที่จะสร้างประสบการณ์ผู้ใช้ ที่เป็นมิตร มีประสิทธิภาพ และ สม่ำเสมอ เพื่อให้มันเกิดขึ้น ทีมออกแบบอย่างเป็นทางการของ WeChat ได้จัดเตรียมพื้นที่เก็บข้อมูล WeUI ไลบรารีส่วนหน้า (WeUI) พื้นฐาน นี้สอดคล้องกับประสบการณ์การมองเห็นแบบเนทิฟของ WeChat WeUI สามารถเข้าใจได้ว่าเป็นไลบรารีส่วนหน้าของ WeChat ซึ่งคล้ายกับ Bootstrap ประกอบด้วย ชุดส่วนประกอบขนาดใหญ่ เช่น ปุ่ม เซลล์ กล่องโต้ตอบ ความคืบหน้า ขนมปังปิ้ง บทความ ตารางการดำเนินการ ไอคอน และอื่นๆ
ที่เก็บ Github ที่มีประโยชน์:
ดาวน์โหลดที่เก็บ WeUI ภายในเครื่องผ่าน npm
:
npm install weui-wxss
โค้ดที่ดาวน์โหลดประกอบด้วย ซอร์สโค้ด WeUI และตัวอย่างมินิโปรแกรมที่ใช้ WeUI
มาเปิดตัวอย่างมินิโปรแกรม WeUI ใน WeChat IDE:
นำเข้าสไตล์ WeUI ใน app.wxss ของคุณเพื่อเปิดใช้งานการใช้ สไตล์ WeUI ในมินิโปรแกรมของคุณ:
@import "style/weui.wxss" ;
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับ แนวทางการออกแบบ WeChat คุณสามารถดูเอกสารฉบับเต็มได้ที่นี่
WXSS มีคุณสมบัติเกือบทั้งหมดที่ CSS มี สไตล์ชีตที่กำหนดใน app.wxss เป็นกฎสไตล์ทั่วไปที่ระบุไว้ในแต่ละหน้า สไตล์ชีทที่กำหนดไว้ในเพจใดเพจหนึ่งคือสไตล์ท้องถิ่นที่ใช้งานได้เฉพาะบนเพจปัจจุบันเท่านั้น จึง เขียนทับตัวเลือกเดียวกันกับ ที่ใช้ใน app.wxss WXSS เมื่อเปรียบเทียบกับ CSS มี ความแตกต่างที่สำคัญสองประการ:
WXSS ใช้ rpx
(พิกเซลตอบสนอง) เป็นหน่วย ช่วยให้สามารถปรับพิกเซลตามความกว้างของหน้าจอ คุณสามารถใช้หน่วย px
แบบคลาสสิกต่อไปได้ (ไม่ใช่วิธีการทำสิ่งต่าง ๆ ของ WeChat) (1rpx = 0.5px ; 1px = 2rpx)
หากต้องการ นำเข้าสไตล์ชีตขาออก ให้ใช้คำสั่ง @import
ตามด้วย เส้นทางสัมพัทธ์ และ ;
ในตอนท้ายของแถลงการณ์
Code snippet "@import" example.
/* app.wxss*/
@import "outbound.wxss" ;
กรอบงาน WeChat ไม่สามารถรองรับตัวเลือก CSS มาตรฐานจำนวนมากได้ เช่น ตัวเลือกแบบเรียงซ้อน
ตัวเลือกที่รองรับ:
คำแนะนำ WeChat:
กรอบงาน WeChat มอบชุดส่วนประกอบพื้นฐานจำนวนมากให้กับนักพัฒนา รายการส่วนประกอบทั้งหมดอยู่ที่นี่
<navigator>
คือจุดยึดของคุณใน html ใช้สำหรับเชื่อมโยงจากหน้าหนึ่งไปยังอีกหน้าหนึ่ง คุณลักษณะที่สำคัญที่สุดขององค์ประกอบเนวิเกเตอร์คือ open-type
Code snippet "navigator" example.
<!-- .wxml -->
< view class =" btn-area " >
< navigator url =" /pages/index/index " hover-class =" navigator-hover " > text </ navigator >
< navigator url =" /pages/form/form " open-type =" redirect " hover-class =" other-navigator-hover " > text </ navigator >
< navigator url =" /pages/index/index " open-type =" switchTab " hover-class =" other-navigator-hover " > tab switching </ navigator >
</ view >
คำอธิบายแอ็ตทริบิวต์เนวิเกเตอร์:
เปิดคำอธิบายค่าประเภท:
ส่วนประกอบตัวเลือกในเอกสาร WeChat แบ่งออกเป็นสามตัวเลือก ได้แก่ ตัวเลือกแบบคลาสสิก ซึ่งเป็นค่าเริ่มต้น ตัวเลือกเวลา และ ตัวเลือกวันที่
กรณีการใช้งานด้านล่างนี้ขึ้นอยู่กับตัวเลือกวันที่ แต่ตรรกะยังคงเหมือนเดิมสำหรับตัวเลือกอื่น
Code snippet "date picker" example.
<!-- .wxml -->
< picker mode =" date " value =" {{date}} " start =" 2015-09-01 " end =" 2020-09-01 " bindchange =" bindDateChange " >
< view class =" picker " >
Now the date is {{date}}
</ view >
</ picker >
// .js
Page ( {
data : {
date : '2017-05-20'
} ,
bindDateChange : function ( e ) {
this . setData ( {
date : e . detail . value
} )
}
} )
คุณสมบัติตัวเลือกวันที่:
สวิตช์คือการสลับด้วยภาพซึ่งมีสองสถานะคือเปิดและปิด
Code snippet "switch" example.
<!-- .wxml -->
< view class =" body-view " >
< switch checked bindchange =" switch1Change " />
< switch bindchange =" switch2Change " />
</ view >
// .js
Page ( {
switch1Change : function ( e ) {
console . log ( 'switch1 a change event occurs with the value' , e . detail . value )
} ,
switch2Change : function ( e ) {
console . log ( 'switch2 a change event occurs with the value' , e . detail . value )
}
} )
สลับคุณสมบัติ:
โทสต์เป็นองค์ประกอบที่ไม่ใช่กิริยาที่ใช้เพื่อแสดงส่วนประกอบแบบย่อและหมดอายุอัตโนมัติเพื่อ แจ้งให้ผู้ใช้ทราบ
ในตัวอย่างโค้ดด้านล่าง เรากำลังแกล้งส่งแบบฟอร์มเพื่อแสดงว่าโทสต์ทำงานและแสดงผลอย่างไร
Code snippet "spinner btn and toast" example.
<!-- .wxml -->
< form bindsubmit =" bindFormSubmit " >
< button type =" primary " form-type =" submit " loading =" {{loading}} " > Send </ button >
</ form >
ในข้อมูลโค้ดด้านบน เราได้สร้าง ปุ่มไดนามิก โดยมี วัตถุประสงค์เพื่อส่งแบบฟอร์ม ปุ่มจะเคลื่อนไหวโดยตัวหมุนโหลดเมื่อคุณคลิก
จากนั้นเราจะแสดงข้อความอวยพรโดยใช้ wx.showToast
API เพื่อแจ้งให้ผู้ใช้ทราบ
Page ( {
data : {
loading : false
} ,
bindFormSubmit : function ( e ) {
// Enable loading animation on send btn
this . setData ( {
loading : ! this . data . loading
} )
// Loading toast
wx . showToast ( {
title : 'Sending...' ,
icon : 'loading' ,
duration : 1500
} )
}
} )
กล่องโมดอลอนุญาตให้ วางองค์ประกอบเล็กๆ ซ้อนทับบนหน้า ได้ ประโยชน์หลักของกล่องโมดอลคือหลีกเลี่ยงความจำเป็นในการใช้ป๊อปอัปหน้าต่างแบบธรรมดาหรือโหลดหน้าซ้ำ
มีห้าประเภทสถานการณ์ที่ใช้กันทั่วไปกล่องโมดอล:
Code snippet "modal to inform" example.
wx . showModal ( {
title : 'Modal title' ,
content : 'Modal content ' ,
confirmText : "Ok" ,
showCancel : false ,
success : function ( res ) {
console . log ( 'success' )
}
} )
พารามิเตอร์กิริยาช่วย:
ส่วนประกอบ map
เป็นส่วนประกอบดั้งเดิม ซึ่งมีรายการแอตทริบิวต์จำนวนมาก เราจะพูดถึงส่วนประกอบหลักกัน นี่คือลิงก์ไปยังเอกสาร WeChat สำหรับรายละเอียดเพิ่มเติม
รายการแอตทริบิวต์ map
:
Code snippet "map component" example.
< map id =" map " longitude =" 113.324520 " latitude =" 23.099994 " scale =" 14 " controls =" {{controls}} " bindcontroltap =" controltap " markers =" {{markers}} " bindmarkertap =" markertap " polyline =" {{polyline}} " bindregionchange =" regionchange " show-location style =" width: 100%; height: 300px; " > </ map >
โปรดดูส่วนบริการตามตำแหน่งที่ตั้งของวิกิ หากคุณต้องการดูบริการตามตำแหน่งที่ตั้งที่ WeChat นำเสนอผ่าน API
คำแนะนำ WeChat:
wx.getLocation
ต้องระบุ type
เป็น gcj02
ส่วนนี้มีจุดมุ่งหมายเพื่ออธิบาย ขั้นตอนต่างๆ ที่คุณต้องปฏิบัติตาม หากคุณต้องการ คงข้อมูลแอปของคุณและดึงข้อมูล ในฐานข้อมูล เราเลือก Leancloud.cn เนื่องจากความเรียบง่ายในการติดตั้งสำหรับผู้เริ่มต้น
บริบทบางส่วนก่อน: ตัวอย่างด้านล่างนี้อิงตามมินิโปรแกรมที่มุ่งรวบรวมความคิดเห็นผ่านแบบฟอร์มที่เรียบง่าย มินิโปรแกรมนี้ยังคงมีข้อมูลที่รวบรวมบน Leancloud.cn เราจะอธิบายวิธีการดึงและแสดงข้อมูลที่เก็บไว้ในฐานข้อมูล เพื่ออธิบายส่วนที่สองนี้ (ดึงข้อมูล) เราได้สร้างหน้าใหม่ที่แสดงบทวิจารณ์ทั้งหมดที่จัดเก็บไว้ใน Leancloud
นี่คือที่เก็บ Github ของโปรเจ็กต์ที่ใช้สร้างบทช่วยสอนนี้
ข้อมูลจำเพาะ:
Code snippet "create a form" example.
<!-- pages/form/form.wxml -->
< form bindsubmit =" bindFormSubmit " >
< view > About the workshop </ view >
< view > Generally how was this workshop? </ view >
< text > Hints: takeaway, speed, time, location, people... </ text >
< view >
< textarea name =" review " maxlength =" -1 " />
</ view >
<!-- Refer to the Github repository above if you want the complete form -->
< button type =" primary " form-type =" submit " > Send </ button >
</ form >
เมื่อ โครงสร้างของแบบฟอร์ม ถูกสร้างขึ้นตามข้างต้น ต่อไปเราต้อง สร้างเหตุการณ์ ที่เกิดจากการยื่นแบบฟอร์ม
//pages/form/form.js
Page ( {
data : {
loading : false ,
} ,
// Form Submission
bindFormSubmit : function ( e ) {
// Local storage
var review = e . detail . value . review
// ...
}
} )
ที่จัดเก็บในเครื่อง: ในฟังก์ชัน bindFormSubmit
เราได้กำหนดอินพุตของผู้ใช้ให้กับตัวแปรในเครื่องเพื่อทดสอบว่าเราสามารถรวบรวมอินพุตของผู้ใช้ของแบบฟอร์มในเครื่องได้หรือไม่
ก่อนที่เราจะเริ่มการติดตั้ง หากคุณอยู่ในระหว่างการพัฒนา ให้แสดงรายการชื่อโดเมนของคุณโดยทำเครื่องหมายที่ช่องสุดท้ายของอินเทอร์เฟซโครงการภายใน WeChat IDE ของคุณ สำหรับความต้องการในการแก้ไขจุดบกพร่องโดยเฉพาะ คุณสามารถปฏิบัติตามบทช่วยสอนแบบ Leancloud นี้
หากต้องการเริ่มต้นการตั้งค่า Leancloud ก่อนอื่นให้สร้างบัญชีบน Leancloud
ตอนนี้คุณพร้อมสำหรับการติดตั้งและการเริ่มต้น Leancloud ในมินิโปรแกรมของคุณแล้ว คุณสามารถปฏิบัติตามเอกสารประกอบที่จะช่วยให้คุณดำเนินการตาม กระบวนการสองขั้นตอนได้:
appId
และ appKey
ใน app.js ของคุณ // app.js
// Require Leancloud library (the av-weapp-min.js file you just add).
const AV = require ( './utils/av-weapp-min.js' ) ;
// Initialization of the app
AV . init ( {
appId : 't6hUVJfOwjHuWXuD9OE06rxxxxxxxxxxxx' ,
appKey : 'HndT17mJ7wAIxsv8uxxxxxxxxxx' ,
} ) ;
หากคุณสูญหาย โปรดดูที่พื้นที่เก็บข้อมูล Github ของโปรเจ็กต์
ขั้นแรก ให้สร้างโฟลเดอร์ใหม่ชื่อ model และ เพิ่ม ไฟล์ form.js
ลงในโฟลเดอร์นี้ ตั้งชื่อไฟล์ของคุณตามประเภทของวัตถุที่คุณต้องการคงอยู่ ในกรณีนี้ คือแบบฟอร์ม ขั้นตอนนี้ไม่จำเป็นแต่อนุญาตให้คุณจัด ระเบียบไฟล์ได้
มาสร้างวัตถุกัน: ในไฟล์ form.js ที่คุณเพิ่งสร้างขึ้น ต้องใช้ av-weapp-min.js ที่คุณติดตั้งใน util.js และกำหนดให้กับค่าคง AV
จากนั้นสร้างอินสแตนซ์ของวัตถุ Form
Code snippet "require Leancloud and create an object" example.
// model/form.js
const AV = require ( '../utils/av-weapp-min.js' ) ;
class Form extends AV . Object {
}
// Register object
AV . Object . register ( Form , 'Form' ) ;
// Export object
module . exports = Form ;
เมื่อคุณสร้างอินสแตนซ์ของออบเจ็กต์ Form
แล้ว ให้สร้างออบเจ็กต์ฟอร์ม เพื่อ ห่อหุ้มข้อมูล ในเลเยอร์ลอจิคัล (ในที่นี้คือ form.js) และเปลี่ยนเส้นทางผู้ใช้หลังจากส่งแบบฟอร์ม
Code snippet "bindFormSubmit function" example.
const AV = require ( '../../utils/av-weapp-min.js' ) ;
const form = require ( '../../model/form.js' ) ;
// pages/form/form.js
bindFormSubmit: function ( e ) {
// Local storage
console . log ( e )
var review = e . detail . value . review
// ...
// Leancloud permissions
var acl = new AV . ACL ( ) ;
acl . setPublicReadAccess ( true ) ;
acl . setPublicWriteAccess ( true ) ;
// Leancloud storage
setTimeout ( function ( ) {
new Form ( {
review : review
// ...
} ) . setACL ( acl ) . save ( ) . catch ( console . error ) ;
// Redirect user
wx . reLaunch ( {
url : '/pages/wagon/wagon?form=1'
} ) ;
} , 2000 ) ;
}
} )
การซักถามข้อมูลโค้ด:
binFormSubmit
เราได้เพิ่ม การอนุญาต ที่อนุญาตให้ Leancloud อ่านและเขียนผ่านออบเจ็กต์ ที่เราสร้างขึ้นและต้องการคงอยู่setTimeout
ที่ ห่อหุ้มข้อมูล ในวัตถุ Form
ใหม่และ เปลี่ยนเส้นทางผู้ใช้ เมื่อส่งแบบฟอร์ม หมายเหตุ: setACL(acl)
เป็นคุณสมบัติในตัว LeanCloud
จนถึงทุกสิ่งที่ทำภายในมินิโปรแกรมของคุณสิ่งที่ต้องทำคือ การฉาย ข้อมูลที่รวบรวมไว้ ในแผงควบคุม LeanCloud ของคุณ
Form
ในตัวอย่างนี้ทดสอบ เพื่อให้แน่ใจว่าข้อมูลที่รวบรวมนั้นยังคงอยู่ภายในแผงควบคุม LeanCloud ของคุณ
ก่อนอื่นให้ฉันเตือนคุณถึงพื้นหลังของส่วนนี้ เราต้องการ แสดงในหน้าใหม่รายการบทวิจารณ์ ที่เรา รวบรวมและคงอยู่บน LeanCloud ฉันคิดว่าคุณได้ทำตามส่วนแรกของการสอน (ถ้าคุณพลาดที่จะเห็นด้านบน)
ข้อมูลจำเพาะ:
review
ดังนั้นเรามาสร้างหน้ารีวิวใหม่และปุ่มที่ เปลี่ยนเส้นทางไปยังหน้าตรวจสอบ ( เคล็ดลับ: เพียงเพิ่มเส้นทางเส้นทางไปยัง app.json ของคุณเฟรมเวิร์กจะสร้างโฟลเดอร์หน้าใหม่และไฟล์ด้วยตัวเอง)
<!-- index.wxml -->
<!-- CTA redirects to review page -->
< view class =" cta-margin " >
< navigator url =" /pages/review/review " class =" btn-index " > Reviews </ navigator >
</ view >
ขั้นตอนต่อไปคือการ ดึงข้อมูลที่เก็บไว้ใน LeanCloud และแสดง
Code snippet "fetch data stored on Leancloud and displays it" example.
<!-- review.wxml -->
< block wx:for =" {{forms}} " wx:for-item =" form " wx:key =" objectId " >
< text data-id =" {{form.objectId}} " >
{{form.review}}
</ text >
< text >
- {{form.name}}
</ text >
</ block >
ด้านบนเราสร้าง บล็อกการแสดงผลรายการ โดยใช้ wx:for
การแสดงผลแต่ละการตรวจสอบและชื่อของบุคคลที่สร้างรีวิว
// pages/review/review.js
// Require leancloud and object
const AV = require ( '../../utils/av-weapp-min.js' ) ;
const Form = require ( '../../model/form.js' ) ;
// Fetch data from Leancloud
Page ( {
data : {
forms : { }
} ,
onReady : function ( ) {
new AV . Query ( 'Form' )
. descending ( 'createdAt' )
. find ( )
. then ( forms => this . setData ( { forms } ) )
. catch ( console . error ) ;
} ,
} )
รหัสตัวอย่างการซักถาม:
AV
ซึ่งมีข้อมูลที่เก็บไว้forms
ในกรณีการใช้งานนี้เราเพิ่งเห็น วิธีการจัดเก็บข้อมูล เรารวบรวมในพื้นที่เพื่อ LeanCloud และ วิธีดึงข้อมูลที่เก็บไว้ จาก LeanCloud
เราขอแนะนำให้คุณอ่านเอกสาร LeanCloud หรือตรวจสอบ Mini-program ของ Leantodo ที่สร้างโดย LeanCloud, GitHub Repository
เมื่อคุณอยู่ในการผลิตคุณต้อง กำหนดค่าชื่อโดเมน LeanCloud ภายในแพลตฟอร์ม WeChat ติดตามการสอน Leancloud นี้
ข้อมูลผู้ใช้ ทั้งหมดที่คุณ สามารถเข้าถึง ได้ผ่าน wx.getUserInfo
:
wx . getUserInfo ( {
success : function ( res ) {
var userInfo = res . userInfo
var nickName = userInfo . nickName
var avatarUrl = userInfo . avatarUrl
var gender = userInfo . gender //sex => 0: unknown ; 1: male ; 2:female
var province = userInfo . province
var city = userInfo . city
var country = userInfo . country
}
} )
WeChat "QuickStart" (WeChat Boilerplate) ให้ฟังก์ชั่น getUserInfo
ในไฟล์ App.js ตามชื่อที่แนะนำฟังก์ชั่นนี้มีไว้เพื่อ รับข้อมูลผู้ใช้ ลองผ่านฟังก์ชั่นนี้ทีละขั้นตอน
คำอธิบายทั่วไป:
getUserInfo
มีพารามิเตอร์ CB ซึ่งเป็นฟังก์ชันIf
บล็อกของฟังก์ชั่น getUserInfo
จะถูกส่งผ่านหาก userInfo
จาก globalData
ไม่เป็นโมฆะuserInfo
คือ NULL ฟังก์ชั่น getUserInfo
เรียกอินเทอร์เฟซเข้าสู่ระบบ // app.js
App ( {
getUserInfo : function ( cb ) {
var that = this
if ( this . globalData . userInfo ) {
typeof cb == "function" && cb ( this . globalData . userInfo )
} else {
// Login interface call
wx . login ( {
success : function ( ) {
wx . getUserInfo ( {
success : function ( res ) {
that . globalData . userInfo = res . userInfo
typeof cb == "function" && cb ( that . globalData . userInfo )
}
} )
}
} )
}
} ,
globalData : {
userInfo : null
}
} )
กรณีแรกแบบฟอร์ม userInfo
globalData
ไม่เป็นโมฆะ
คำสั่ง IF IF มีจุดมุ่งหมายเพื่อตรวจสอบว่า อาร์กิวเมนต์ CB ผ่านไปเพื่อรับ getUserInfo
เป็นประเภทฟังก์ชันและถ้าเป็นมันจะผ่าน userInfo
พวกเขาคิดได้อย่างไรว่าพารามิเตอร์ CB เป็นฟังก์ชันหรือไม่?
// index.js
var app = getApp ( )
Page ( {
data : {
userInfo : { } ,
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
app . getUserInfo ( function ( userInfo ) {
that . setData ( {
userInfo : userInfo
} )
} )
}
}
ลองผ่านฟังก์ชั่น onLoad
ของ index.js นี้กันเถอะ
onLoad
เรียกใช้ฟังก์ชัน getUserInfo
บนอินสแตนซ์แอปuserInfo
เป็นข้อมูลผู้ใช้ปัจจุบันuserInfo
อัปเดตเป็น globalData
ในไฟล์ app.jsกรณีที่สอง userInfo เป็นโมฆะ
userInfo
เป็นฟังก์ชัน null getUserInfo
ส่งคืนคำสั่ง else
ซึ่งเรียกอินเตอร์เฟสเข้าสู่ระบบgetUserInfo
ถูกเรียกและทำหน้าที่เป็นบล็อก if
ที่เราเห็นด้านบน หากผู้ใช้ปัจจุบันเข้าสู่ระบบแล้ว ข้อมูลผู้ใช้จะถูกกำหนดให้กับ globalData
ผ่านหน้า Index.js ซึ่งเรียกใช้ฟังก์ชัน onLaod
จากนั้นใช้ตรรกะเดียวกัน
WeChat mini-programs มี กลไกของแคชใน API ของพวกเขา ในความเป็นจริงมินิโปรแกรมแต่ละรายการมี ที่เก็บแคชท้องถิ่น ของตัวเอง
การแจ้งเตือน: ที่เก็บแคชใช้เพื่อจัดเก็บข้อมูลที่เราต้องการเข้าถึงได้อย่างรวดเร็ว ลดเวลารอผู้ใช้ เนื่องจาก คำขอ ได้รับความพึงพอใจ จากแคชท้องถิ่น ซึ่งใกล้เคียงกับลูกค้าเมื่อเทียบกับเซิร์ฟเวอร์ดั้งเดิมที่ใช้เพื่อขอฐานข้อมูลของคุณ
Cache Storage มี วิธีการจัดเก็บข้อมูลสองแบบ ในแคช:
wx.setStorage
: wx . setStorage ( { key : 'name' , data : 'Thibault' } ) ;
wx.setStorage
พารามิเตอร์การสร้างเป็น JSON ซึ่งเป็นคีย์ในการระบุคีย์ที่เก็บไว้และข้อมูลเพื่อระบุค่าคีย์เพื่อจัดเก็บ
wx.setStorageSync
: wx . setStorageSync ( 'name' , 'Thibault' ) ;
wx.setStorageSync
ไวยากรณ์ง่ายกว่าพารามิเตอร์จะถูกส่งผ่านโดยตรง และสามารถรับข้อมูลผ่านฟังก์ชั่นการโทรกลับที่เข้ามา
WeChat มีการดำเนินการหลักสามประการเกี่ยวกับแคช:
wx.setStorage
หรือ wx.setStorageSync
wx.getStorage
หรือ wx.getStorageSync
wx.clearStorage
หรือ wx.clearStorageSync
wx.removeStorage
หรือ wx.removeStorageSync
Code snippet "set cache (synchronous method)" exemple
<!-- index.wxml -->
< input style =" input " placeholder =" Input data " bindinput =" inputEvent " />
< button type =" warn " bindtap =" saveToCache " > Save data to cache </ button >
< button type =" primary " bindtap =" jumpToPage " > Jump to another page </ button >
// index.js
Page ( {
data : {
inputInfo : ''
} ,
jumpToPage : function ( ) {
wx . navigateTo ( {
url : "../show/show"
} ) ;
} ,
inputEvent : function ( e ) {
console . log ( e . detail . value )
this . setData ( {
inputInfo : e . detail . value
} )
} ,
saveToCache : function ( ) {
wx . setStorage ( { key : 'inputInfo' , data : this . data . inputInfo ,
success : function ( res ) {
console . log ( res )
}
} )
}
} )
Code snippet "Fetch data from the cache and display data in a new page (synchronous method)" exemple
<!-- show.wxml -->
< view > Data you saved to cache:{{inputInfo}} </ view >
// show.js
Page ( {
data : {
inputInfo : ''
} ,
onLoad : function ( options ) {
var that = this ;
wx . getStorage ( {
key : 'inputInfo' ,
success : function ( res ) {
console . log ( res )
that . setData ( {
inputInfo : res . data ,
} )
}
} )
}
} )
คุณสามารถ เรียก สแกนเนอร์รหัสไคลเอนต์ของคุณ UI โดยใช้ wx.scanCode
API มันให้การเข้าถึงเครื่องสแกน WeChat โดยตรงผ่านปุ่ม CTA โดยมีจุดประสงค์ในการสแกนรหัส QR
Code snippet "call up client code scanner" example.
<!-- .wxml -->
< view class =" btn-area " >
< button bindtap =" bindScan " > Scan </ button >
</ view >
// .js
bindScan: function ( ) {
console . log ( 'scanner' )
wx . scanCode ( {
success : ( res ) => {
console . log ( res )
}
} )
}
WeChat API ให้บริการตามสถานที่ตั้งเต็ม:
wx.chooseLocation
เพื่อเลือกตำแหน่งที่คุณต้องการแสดงwx.getLocation
เพื่อรับตำแหน่งผู้ใช้ปัจจุบันwx.openLocation
เพื่อแสดงตำแหน่งใน มุมมองแผนที่ buit-in ของพวกเขาwx.createMapContext
เพื่อปรับแต่งแผนที่ของคุณ Code snippet "get location" example.
<!-- .wxml -->
< button type =" primary " bindtap =" listenerBtnGetLocation " > Get location </ button >
// .js
listenerBtnGetLocation: function ( ) {
wx . getLocation ( {
type : 'wgs84' ,
success : function ( res ) {
var latitude = res . latitude
var longitude = res . longitude
var speed = res . speed
var accuracy = res . accuracy
console . log ( res )
}
} )
}
ข้างต้นเราใช้ wx.getLocation
เพื่อดึงตำแหน่งผู้ใช้ปัจจุบันโดยรับ ละติจูด และ ลองจิจูด ของเขา
wx.getLocation
รายละเอียดเพิ่มเติม: หากผู้ใช้ออกจากโปรแกรมขนาดเล็ก แต่แสดงที่ด้านบนของการแชทของเขาโปรแกรมมินิ-โปรแกรมคุณสามารถโทรหา wx.getLocation
ต่อไปและรับตำแหน่งผู้ใช้อย่างต่อเนื่อง
แสดงตำแหน่งผู้ใช้ปัจจุบันบนแผนที่ในตัว WECHAT: wx.openLocation
API Call เปิดใช้งานการเปิดมุมมองแผนที่ในตัว WeChat เพื่อแสดงตำแหน่งที่คุณได้รับจากฟังก์ชั่น listenerBtnGetLocation
ที่เราสร้างขึ้นด้านบน
หมายเหตุ: การโทร wx.openLocation
API, เปลี่ยนเส้นทางผู้ใช้ไปยังหน้าต่างแผนที่ใหม่
Code snippet "display the current user location" example.
// .js
listenerBtnGetLocation: function ( ) {
wx . getLocation ( {
type : 'wgs84' ,
success : function ( res ) {
var latitude = res . latitude
var longitude = res . longitude
wx . openLocation ( {
latitude : latitude ,
longitude : longitude ,
scale : 28
} )
}
} )
}
WeChat Image API เสนอความเป็นไปได้สี่ประการ:
wx.chooseImage
เพื่อเลือกภาพจากอัลบั้มหรือกล้องของคุณwx.previewImage
เพื่อดูตัวอย่างภาพก่อนการอัปโหลดบนแอพwx.getImageInfo
เพื่อรับข้อมูลภาพ (ความสูง, ความกว้าง, เส้นทาง, SRC)wx.saveImageToPhotosAlbum
เพื่อบันทึกภาพจากมินิโปรแกรมไปยังอัลบั้มของคุณ ในตัวอย่างด้านล่างเราสร้างฟังก์ชั่นที่เรียกว่า listenerBtnChooseImage
โดยมีจุดประสงค์ในการโทรหาอัลบั้มผู้ใช้หรือกล้องโดยใช้ wx.chooseImage
จากนั้นเราใช้ wx.getImageInfo
เพื่อรับข้อมูลภาพ
Code snippet "upload an image from album or camera" example.
<!-- .wxml -->
< button type =" primary " bindtap =" listenerBtnChooseImage " > Upload Image </ button >
<!-- Display the image user upload -->
< image src =" {{src}} " mode =" aspecFill " bindlongtap =" imgLongTap " />
// .js
Page ( {
data : {
src : [ ]
} ,
listenerBtnChooseImage : function ( ) {
var that = this
// Upload an image
wx . chooseImage ( {
count : 1 ,
sizeType : [ 'original' , 'compressed' ] ,
sourceType : [ 'album' , 'camera' ] ,
success : function ( res ) {
console . log ( 'success' )
that . setData ( {
src : res . tempFilePaths
} )
// Get image info
wx . getImageInfo ( {
src : res . tempFilePaths [ 0 ] ,
success : function ( res ) {
console . log ( res . width )
console . log ( res . height )
console . log ( res . path )
}
} )
}
} )
}
} )
ตอนนี้เรามีรูปภาพบนหน้าโปรดบันทึกภาพจากมินิโปรแกรมไปยังอัลบั้มผู้ใช้ปัจจุบันโดยแตะที่ภาพยาว
Code snippet "long tap the image to save it within user album" example.
<!-- .wxml -->
< image src =" {{src}} " mode =" aspecFill " bindlongtap =" imgLongTap " />
// .js
Page ( {
data : {
src : [ ]
} ,
listenerBtnChooseImage : function ( ) {
var that = this
// Upload an image
wx . chooseImage ( {
count : 1 ,
sizeType : [ 'original' , 'compressed' ] ,
sourceType : [ 'album' , 'camera' ] ,
success : function ( res ) {
console . log ( 'success' )
that . setData ( {
src : res . tempFilePaths
} )
// Get image info
wx . getImageInfo ( {
src : res . tempFilePaths [ 0 ] ,
success : function ( res ) {
console . log ( res . width )
console . log ( res . height )
console . log ( res . path )
}
} )
}
} )
} ,
// Longtap function
imgLongTap : function ( ) {
// Save image to album
wx . saveImageToPhotosAlbum ( {
filePath : this . data . src ,
success ( res ) {
wx . showToast ( {
title : 'Save' ,
icon : 'success' ,
duration : 1500
} )
console . log ( 'success' )
}
} )
}
} )
WeChat Network API เสนอคำขอ HTTPS ทั่วไป, WebSocket, อัปโหลดและดาวน์โหลดไฟล์
wx.request
เพื่อขอคำขอ HTTPS มาตรฐานwx.uploadFile
เพื่ออัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ที่ได้รับการแต่งตั้งwx.downloadFile
เพื่อดาวน์โหลดไฟล์จากเซิร์ฟเวอร์ที่ได้รับการแต่งตั้ง ในตัวอย่างด้านล่างเรามีหนึ่งฟังก์ชั่นและหนึ่งตัวจัดการเหตุการณ์: addNewPost
และ onPullDownRefresh
ตามลำดับตามชื่อของพวกเขาคุณควรจะสามารถเพิ่มโพสต์ใหม่และรับโพสต์โดยใช้การโทร wx.request
Code snippet "making a POST HTTPS request" example.
<!-- .wxml -->
<!-- Add Posts -->
< input confirm-type =" send " bindconfirm =" addNewPost " placeholder =" Add a new post! " />
// .js
Page ( {
data : {
posts : [ ]
} ,
addNewPost : function ( e ) {
var that = this
var message = e . detail . value
// Add a new post
wx . request ( {
url : 'example.php' , // just an example address
method : 'post' ,
data : {
post : {
content : message
}
} ,
header : {
'content-type' : 'application/json'
}
} )
}
} )
ตอนนี้เราได้โพสต์แล้วมาดูและแสดงไปยังเลเยอร์มุมมอง เพื่อความเรียบง่ายเราจะใช้ประโยชน์จาก onpulldownrefresh เพื่อโหลดโพสต์ใหม่
Code snippet "making a GET HTTPS request" example.
<!-- .wxml -->
<!-- Display Posts -->
< block wx:for =" {{posts}} " wx:for-item =" post " >
< text > {{post.content}} </ text >
</ block >
<!-- Add Posts -->
< input confirm-type =" send " bindconfirm =" addNewPost " placeholder =" Add a new post! " />
// .js
Page ( {
data : {
posts : [ ]
} ,
addNewPost : function ( e ) {
var that = this
var message = e . detail . value
// Add a new post
wx . request ( {
url : 'example.php' , // just an example address
method : 'post' ,
data : {
post : {
content : message
}
}
} )
} ,
// onPullDownRefresh must first be enabled in the config.
onPullDownRefresh : function ( ) {
var that = this
// by default the request is a GET.
wx . request ( {
url : 'example.php' ,
header : {
'content-type' : 'application/json'
} ,
success : {
that . setData ( {
posts : res . data // Set the Page data for posts to the response data.
} )
}
} )
}
} )
ตลอดเส้นทางการสร้างโปรแกรมขนาดเล็กของเราเราพบปัญหาและคำถามเราต้องการแบ่งปันกับคุณ หากคุณมีปัญหาบางอย่างที่คุณต้องการแบ่งปันให้ติดต่อเรา
WeChat อนุญาตเฉพาะ API ที่มีใบอนุญาต ICP ดังนั้นคุณสามารถลืม API ส่วนใหญ่ที่คุณคุ้นเคยในประเทศตะวันตก
นี่คือไดเรกทอรีของ API ที่มีอยู่ในประเทศจีนลองดู
background-image:
คุณสมบัติ ภาพ ไม่สามารถรับ ภาพผ่าน CSS background-image: url(../../images/banner.png);
- ฉันรู้ว่ามันน่ากลัว แต่เราต้องจัดการกับมัน
มี สองวิธีในการหลีกเลี่ยง ความยุ่งยากนี้:
คุณสามารถใช้ background-image:
แต่คุณ ไม่สามารถใช้เส้นทาง realtive ได้ คุณต้องเข้ารหัสภาพของคุณใน Base64 แล้วส่งผ่านไปยัง background-image: url(base64 image);
- นี่คือเครื่องมือในการเข้ารหัสภาพใน Base64
หรือคุณสามารถใช้แท็ก <image>
และรักษาภาพด้วย <image>
แอตทริบิวต์แท็กเช่น mode
WeChat มี 13 โหมด 9 โหมดตัด และ 4 เป็น โหมดซูม นี่คือลิงค์ไปยัง documenation
RPX ย่อมาจาก การตอบสนองพิกเซล ซึ่งเป็นหน่วยของ WeChat Mini-programs ตามคำจำกัดความอย่างเป็นทางการ rpx
ขึ้นอยู่กับความกว้างของหน้าจอแบบปรับตัว
ในความเป็นจริงหน่วย RPX ขึ้นอยู่กับหน่วย rem
ซึ่งย่อมาจาก "Root EM" ทำไมไม่ em
unit?
หน่วย em
นั้น สัมพันธ์ กับขนาดตัวอักษรของ พาเรนต์ ซึ่งทำให้เกิด ปัญหาการผสม หน่วย rem
นั้นสัมพันธ์กับองค์ประกอบรูทซึ่ง conteracts ปัญหาการผสม (หน้าที่การปรับขนาดตัวอักษร)
อย่างไรก็ตามเพื่อกลับมาที่หน่วย rpx
ข้อดีของ RPX คือ:
คุณกำลังทำงานเกี่ยวกับ mini-program หรือไม่? ติดต่อเราหากคุณต้องการแบ่งปันงานของคุณพบกับลูกเรือของเราขอความช่วยเหลือ!
หากคุณต้องการมีส่วนร่วมคุณสามารถส่งคำขอดึงได้ที่นี่หรือส่งเสียงตะโกนใส่เซี่ยงไฮ้ (ที่) lewagon.com เพื่อขอคำแนะนำ!