wechat mini program wiki
1.0.0
Aplikasi perpesanan terkemuka di Tiongkok, WeChat, meluncurkan sesuatu yang cukup radikal: program kecil. Aplikasi tersemat yang tidak perlu diunduh, tidak perlu dipasang. Buka, gunakan, bagikan, selesai!
Ada perdebatan besar – dan banyak clickbait – tentang betapa praktisnya aplikasi ini... Memang, kerangka kerja yang diberikan kepada pengembang masih dalam tahap awal, masih terbatas, dan sejujurnya agak membuat frustrasi. Meski demikian, Tencent menginvestasikan sumber daya yang belum pernah ada sebelumnya dalam penerapan saluran ini, membangun momentum, dan membuka peluang bagi para penggerak pertama. Kami percaya bahwa para peretas ini akan mendapatkan keuntungan cepat jika mereka berani mencobanya.
Punya ide layanan yang ingin Anda terapkan di WeChat secepatnya? Punya pengetahuan dasar tentang Javascript dan ingin bereksperimen dengan framework ini? Tersesat dalam terjemahan dokumen Google? Perlu sedikit dorongan untuk mendekripsi apa yang mungkin atau tidak? Halo dan selamat datang.
Menemukan jalan melalui dokumen resmi tidaklah mudah. Faktanya, hal ini memerlukan banyak percobaan/kesalahan, beberapa penelitian tentang kode sumber terbuka, dan banyak asumsi untuk menyelesaikan sesuatu. Kamu telah membenturkan kepalamu ke dinding. Kami mengerti.
Misi kami adalah membantu wirausahawan kreatif menciptakan produk teknologi hebat. Kami akan membantu Anda mengambil langkah kecil.
Konten di bawah ini bukan terjemahan dari dokumentasi dan pasti akan cepat ketinggalan jaman. Ini hanyalah kontribusi kami untuk membantu siapa pun memulai dan membuat program Mini WeChat yang keren dengan cepat. Lakukan sekarang.
Apakah Anda sedang mengerjakan program mini? Hubungi kami jika Anda ingin membagikan karya Anda, temui kru kami, minta bantuan!
Jika Anda ingin berkontribusi, Anda dapat mengirimkan Permintaan Tarik di sini atau hubungi kami di shanghai(at)lewagon.com untuk mendapatkan saran!
Karya asli ini ditulis oleh alumni Le Wagon: Adrien Pelegri (Batch #30) dengan dukungan Thibault Genaitay (Driver China) dan Stephane Delgado (Batch #61).
Proses pendaftarannya sangat sulit, terutama jika Anda tidak memiliki pengalaman dengan dunia administrasi Tiongkok yang fantastis. Proses verifikasi WeChat akan memakan waktu lama. Tetap tenang.
Dari pendaftaran program mini WeChat hingga rilis pengembangan, pada dasarnya Anda harus melalui langkah-langkah berikut:
Berikut adalah daftar materi yang Anda perlukan untuk mendaftarkan mini-program sebagai perusahaan:
Kami menyarankan Anda mengikuti panduan bahasa Inggris yang komprehensif tentang cara mendaftar dan membuat proyek program mini: Artikel medium atau periksa dokumentasi resmi WeChat ini (Terakhir Diperbarui: 08/02/2017).
IDE (lingkungan pengembangan terintegrasi) adalah seperangkat alat pemrograman untuk menulis aplikasi. Ini terdiri dari editor kode, kompiler dan debugger, dapat diakses melalui satu antarmuka pengguna grafis.
Unduh IDE WeChat di sini: Mac, Windows 64, Windows 32
Berikut adalah tutorial singkat untuk menguasai IDE WeChat dan memanfaatkannya secara maksimal.
Editor Kode dengan pohon file Anda di samping dan Simulator di sebelah kiri, yang menampilkan pratinjau aplikasi Anda. 
Berikut adalah daftar lengkap tombol untuk melakukan tugas saat Anda dalam pengembangan:
1. Profil: klik untuk keluar dari IDE. 2. Pengeditan Kode 3. Debug / Inspeksi: lihat di bawah. 4. Informasi proyek: lihat di bawah. 5. Kompiler: Dapat berguna untuk mengkompilasi aplikasi ketika penyegaran otomatis tampilan tidak berfungsi. 
6. Nilai adegan 7. Cache 8. Matikan: Keluar dari proyek yang sedang Anda jalankan dan beralih ke proyek lain. 9. Sembunyikan simulator 10. Perangkat: Ini memberikan daftar perangkat untuk menguji responsivitas program mini. 11. Anda dapat bekerja pada: wifi, 4G, 3G, 2G. 12. Sembunyikan arborescence 13. Kelola file Anda: Cari, tambah dan hapus folder atau file.
Debugger / Inspektur: Alat ini merupakan bagian penting dari IDE, sepertinya Chrome DevTools lama yang bagus. 
1. Bilah atas Jaringan: Panel ini untuk men-debug masalah permintaan dan soket atau kinerja pemuatan halaman. Penyimpanan: memungkinkan untuk mengakses semua data yang Anda miliki di cache. AppData: digunakan untuk menampilkan data proyek saat ini. Anda dapat langsung mengedit data di panel dan mempratinjaunya. Wxml: memungkinkan Anda memeriksa dan mengedit dengan cepat setiap elemen halaman Anda. Sensor: Anda dapat menyimulasikan lokasi dan kinerja perangkat seluler untuk men-debug penginderaan gravitasi.
2. Panel Sumber Panel Sumber menampilkan file skrip proyek saat ini.
3. Konsol Konsol akan memberi tahu Anda kesalahan apa yang ada dalam kode Anda dengan mencatat informasi diagnostik dan berinteraksi dengan javascript di halaman seperti console.log() yang Anda tempatkan dan banyak lagi.
Informasi proyek: Halaman ini adalah tempat Anda akan menemukan detail proyek saat ini seperti AppID Anda, informasi direktori, dan banyak lagi. Dengan mengklik opsi pratinjau Anda akan dapat menguji program mini langsung di ponsel Anda setelah memindai kode QR.
Catatan: Saat Anda menguji program mini di ponsel Anda, Anda dapat mengaktifkan alat debugger langsung di perangkat Anda.
Bagian ini akan memperkenalkan struktur "quickstart" yang disediakan oleh WeChat (boilerplate) dan dasar-dasar yang Anda perlukan untuk mematuhi kerangka ini.
Unduh WeChat quickstart.zip.
Panduan memulai arboresensi:
.
├── aplikasi.js
├── aplikasi.json
├── aplikasi.wxss
├── halaman
│ ├── indeks
│ │ ├── indeks.js
│ │ ├── indeks.json
│ │ ├── indeks.wxml
│ │ └── indeks.wxss
│ └── log
│ ├── log.js
│ ├── log.json
│ ├── log.wxml
│ └── log.wxss
└── kegunaan
└── util.js
Halaman indeks boilerplate ini menampilkan halaman selamat datang dengan informasi profil pengguna saat ini. Sebuah klik pada avatar Anda akan mengarahkan ke halaman baru yang menampilkan log program mini Anda saat ini.
Program mini WeChat dimulai dengan file "aplikasi" (lihat gambar di bawah). File-file ini adalah direktori root program mini dan oleh karena itu merupakan pintu masuk program mini Anda. (Ini dokumentasi resmi WeChat).
app.js adalah kode skrip, logika global dari program mini Anda. Anda dapat mengatur dan memanipulasi fungsi siklus hidup MP Anda, mendeklarasikan variabel global atau memanggil 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 adalah konfigurasi global dari keseluruhan program mini. Anda dapat mengkonfigurasi, jalur halaman MP (mini-program), gaya jendela MP, mengatur batas waktu jaringan dan konfigurasi debug.
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/logs/logs"
] ,
"window" : {
"backgroundTextStyle" : "gray" ,
"navigationBarBackgroundColor" : "#fff" ,
"navigationBarTitleText" : "Hello World" ,
"navigationBarTextStyle" : "black"
}
}Catatan: Komentar tidak diperbolehkan di file app.json .
app.wxss adalah style sheet global dari program mini. Anda harus mendeklarasikan aturan gaya umum di sini.
Dua halaman panduan memulai WeChat adalah:
Folder halaman adalah tempat Anda memiliki atau membuat halaman program mini. Setiap halaman yang Anda buat harus berisi dua file:
Anda dapat menambahkan dua file lagi di setiap halaman yang Anda buat:
File .json untuk konfigurasi halaman.
File .wxss untuk style sheet antarmuka Anda.
Aturan: Setiap halaman mini-program Anda dapat terdiri dari empat ekstensi file berbeda (js ; json ; wxml ; wxss) tetapi harus memiliki nama yang sama.
Detail lebih lanjut: Halaman baru akan selalu berisi file .js dan minimum file .wxml . Ekstensi file .json digunakan jika Anda ingin mengganti konfigurasi jendela di halaman khusus ini. Tambahkan .wxss jika Anda ingin menambahkan style sheet ke halaman Anda.
Mari kita lihat apa yang terjadi di setiap halaman proyek mulai cepat.
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
} )
} )
}
} )Komentar cuplikan:
Page() untuk mengumpulkan informasi pengguna.Page() dan menyetel data: untuk mengikat data secara dinamis ke dalam tampilan.Tapped mengalihkan pengguna saat ini ke halaman lognya.onLoad mendapatkan informasi pengguna dan memperbarui data 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 ) )
} )
} )
}
} )Komentar cuplikan:
formatTime nanti.Page() dan mengatur data: .onLoad mengambil log pengguna saat ini dari cache wx.getStorageSync('logs') . Kemudian render log dalam formatTime yang disediakan oleh kebutuhan 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
}Catatan:
Di Utils disimpan perpustakaan yang diimpor yang mungkin Anda perlukan di tempat lain (dalam contoh kami, util.js diperlukan di log.js). Dalam cuplikan kode di atas, fungsi formatTime didefinisikan di util.js untuk menampilkan tanggal log Anda dengan benar.
Hingga kini Anda mengetahui fakta bahwa Anda akan memiliki dua lapisan di setiap halaman:
Lapisan logis (.js): memproses data dan mengirimkannya ke lapisan tampilan, sambil menerima peristiwa yang dipicu dari lapisan tampilan.
Lapisan tampilan (.wxml/.wxss): menampilkan data yang diproses oleh lapisan logis ke dalam tampilan, sekaligus mengirimkan peristiwa dari lapisan tampilan ke lapisan logis.
Kita dapat membagi siklus hidup program mini menjadi dua siklus, siklus aplikasi dan siklus halaman. Siklus hidup App() adalah titik awal & akhir dari mini-program sedangkan siklus hidup Page() diaktifkan ketika pengguna menelusuri mini-program.
Fungsi App() digunakan untuk mendaftarkan program mini. Dibutuhkan objek sebagai parameter yang menentukan fungsi siklus hidup MP.
Komentar:
onLaunch dan menginisialisasi MP.onShow dipicu.onHide dipicu ketika pengguna saat ini keluar dari program mini. 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'
} ) Kerangka kerja WeChat menawarkan fungsi global yang disebut getApp() yang merupakan turunan dari App() .
Code snippet "getApp()" function.
// .js
var appInstance = getApp ( )
console . log ( appInstance . globalData ) // I am global data fungsi getApp() , dapat berguna karena alasan sederhana yaitu Anda tidak dapat mendefinisikan fungsi App() di dalam fungsi Page() . Untuk mengakses instance aplikasi, Anda harus memanggil fungsi getApp() .
Fungsi Page() digunakan untuk mendaftarkan halaman. Ia menerima objek sebagai parameter, yang menentukan data awal untuk halaman, fungsi siklus hidup, event handler dan sebagainya.
Komentar:
onLoad .onShow .onShow memanggil onReady untuk merender tampilan.onShow secara langsung merender tampilan.onHide dipicu ketika mini-program melompat ke halaman lain.onUnload dipanggil saat Anda keluar dari halaman dengan menggunakan wx.redirectTo() dan wx.navigateBack() . Atau ketika halaman saat ini diluncurkan kembali, 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.'
} )
}
} )
Ketika siklus hidup App() selesai, halaman dimuat dengan memanggil onLoad untuk pertama kalinya, dan hanya akan memanggilnya sekali.
Saat program mini berjalan dari latar belakang (siklus hidup aplikasi) ke latar depan (siklus hidup halaman), program mini tersebut terlebih dahulu memanggil fungsi App() onShow , lalu memanggil fungsi Page() onShow saat beralih ke latar depan.
Rekomendasi WeChat:
App() tidak dapat digunakan kembali dan harus didaftarkan sekali di app.js .onLaunch ketika halaman getCurrentPages() belum dibuat.getApp() Anda bisa mendapatkan instance App() tetapi fungsi siklus hidup tidak mencoba memanggil fungsi App() . Pengaturan program mini Anda sederhana dan dirancang untuk menghemat waktu dan frustrasi Anda ketika memiliki kebutuhan penyesuaian.
WeChat membagi konfigurasi app.json menjadi lima bagian:
Di bagian ini kami akan menguraikan contoh penyiapan app.json lengkap ini.
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"
} ]
}
} Peran pages di app.json adalah untuk menentukan semua rute program mini Anda. Konfigurasi item ini wajib dan memerlukan array string . Setiap subfolder dan file dalam folder halaman induk berhubungan dengan jalur perutean .
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon"
]
} Tip: Setiap kali Anda menambahkan jalur rute ke "pages" , IDE akan secara otomatis membuat folder dan file yang sesuai dengan jalur yang baru saja Anda buat.
Kerangka kerja WeChat menghadirkan beberapa logika perutean:
Deskripsi mode perutean:
Inisialisasi: Setelah program mini diluncurkan, halaman pertama dimuat oleh fungsi onLoad dan onShow .
Buka halaman baru: Membuka halaman baru akan menyembunyikan halaman saat ini dan melompat ke halaman lain menggunakan wx.navigateTo . Di balik layar, halaman pertama akan disembunyikan dengan pemanggilan fungsi onHide dan melompati halaman lainnya dengan memanggil onLoad dan onShow . 
Pengalihan halaman: Tutup halaman saat ini dengan memanggil onUnload dan melompat ke halaman dalam aplikasi menggunakan wx.redirectTo yang memanggil fungsi onLoad dan onShow .
Pengembalian halaman: onUnload halaman saat ini, panggil fungsi onLoad lalu tampilkan halaman target dengan memanggil onShow .
Reload, wx.reLaunch : Tutup semua halaman dan muat ulang halaman saat ini. * Tidak berfungsi pada perangkat Android tertentu.
Beralih tab, wx.switchTab : Melompat dari satu halaman tabBar ke halaman lainnya dan menutup atau menyembunyikan semua halaman non-tabBar lainnya dengan menggunakan onUnload, onHide dan onShow . Temukan semua kemungkinan skenario peralihan tab.
Beralih tab, batasan navigasi:
Rekomendasi WeChat:
navigateTo , redirectTo hanya dapat membuka halaman non-tabBar. - switchTab hanya dapat membuka dan menampilkan halaman tabBar. - reLaunch dapat digunakan untuk setiap halaman. getCurrentPages() : Fungsi ini digunakan untuk mendapatkan instance tumpukan halaman saat ini. Itu diberikan sebagai array dalam urutan tumpukan halaman. Item pertama dari array adalah halaman pertama dan item terakhir adalah halaman saat ini.
tabBar seperti namanya, adalah item yang mengonfigurasi bilah tab atas atau bawah. tabBar adalah array yang menampung minimal 2 dan maksimal 5 tab.
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"
} ]
}
}Indikasi atribut:
Menggunakan kunci list tabBar , memerlukan objek di setiap elemen array.
Nilai atribut List adalah sebagai berikut:
Deskripsi atribut TabBar:
Rekomendasi WeChat:
tabBar Anda ke atas tidak dapat menampilkan ikon.tabBar bawah adalah, 40kb, 81px*81px.Item jendela digunakan untuk mengatur judul program mini dan gaya jendela umum.
Code snippet of the "app.json" file.
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true ,
}Deskripsi atribut jendela:
| Atribut | Jenis | Nilai bawaan | Keterangan |
|---|---|---|---|
| navigasiBarBackgroundColor | Warna Hex | #000000 | Warna latar belakang bilah navigasi |
| navigasiBarTextStyle | Rangkaian | white | Warna judul bilah navigasi, black atau white |
| navigasiBarJudulTeks | Rangkaian | Judul bilah navigasi | |
| gaya navigasi | Rangkaian | default | Gaya bilah navigasi, default atau custom . Gunakan custom untuk menyesuaikan gaya bilah navigasi. |
| warna latar belakang | Warna Hex | #ffffff | Warna latar belakang aplikasi. Contoh: warna latar belakang yang Anda lihat saat ditarik untuk menyegarkan, tidak mempengaruhi warna elemen <page> . |
| latar belakangTeksGaya | Rangkaian | dark | Tarik untuk menyegarkan gaya teks, dark atau light |
| latar belakangWarnaAtas | Rangkaian | #ffffff | Warna latar belakang bagian atas jendela. Hanya didukung di iOS |
| latar belakangWarnaBawah | Rangkaian | #ffffff | Warna latar belakang bagian bawah jendela. Hanya didukung di iOS |
| aktifkanPullDownRefresh | Boolean | false | Mengaktifkan atau menonaktifkan tarikan untuk menyegarkan seluruh aplikasi. |
| diReachBottomDistance | Nomor | 50 | Tetapkan jarak dari bagian bawah halaman tempat callback onReachBottom() harus dipicu. |
| Orientasi halaman | Rangkaian | portrait | Atur dukungan rotasi layar. Mendukung auto , portrait dan landscape . |
Orientasi default aplikasi dapat dikonfigurasi menggunakan pageOrientation di window di file konfigurasi app.json . Atribut ini mendukung 3 nilai:
auto untuk memungkinkan program mini bekerja dalam mode Potret dan Lanskap.portrait untuk memaksa program mini ditampilkan hanya dalam mode potretlandscape untuk memaksa program mini ditampilkan hanya dalam mode lanskap "enablePullDownRefresh": true perlu dikonfigurasi di app.json global seperti di atas dan kemudian Anda dapat memanggil onPullDownRefresh() di halaman program mini.
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 menawarkan kemungkinan untuk mengubah judul bilah navigasi atas di setiap halaman.
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 )
}
} )
}
} )Batas waktu jaringan dapat diberikan dalam berbagai permintaan jaringan. Berikut ini tautan ke dokumentasi WeChat jika Anda ingin melangkah lebih jauh.
Berikut ini tautan ke dokumentasi WeChat.
WXML adalah bahasa markup WeChat yang mirip dengan HTML. Ini menggabungkan perpustakaan dasar komponen dan sistem acara untuk membangun halaman dinamis.
Sistem peristiwa WeChat berperilaku seperti peristiwa Javascript klasik yang menangani respons logis pada lapisan tampilan.
Tabel di bawah mencantumkan perbedaan signifikan yang akan Anda hadapi dalam pengembangan antara WXML/HTML:
Penjelasan lebih lanjut tentang <block> :
<block> bukan komponen , ini hanya elemen pengemasan , tidak akan melakukan rendering apa pun di halaman dan hanya menerima properti kontrol .
Catatan: Semua komponen dan atribut menggunakan huruf kecil.
Kerangka program mini tidak mengizinkan pengembang menggunakan DOM untuk mengontrol elemen WXML Anda. Sebagai gantinya, Anda akan memperbarui lapisan tampilan Anda (file .wxml) melalui metode pengikatan data:
Untuk memenuhi persyaratan WeChat, atribut data harus diinisialisasi dalam format JSON dalam fungsi Page() . Teknik pengikatan data memungkinkan untuk memperbarui data secara dinamis dalam lapisan tampilan.
Praktik yang baik adalah menginisialisasi data di bagian atas fungsi 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: yang diteruskan ke lapisan tampilan diambil dari atribut data dalam fungsi Page() yang sesuai.
Sintaks pengikatan data: Pengikatan data menggunakan sintaksis Kumis (tanda kurung ganda) untuk membungkus variabel. Sintaks ini adalah analisis mesin templat tanpa logika. Singkatnya, ini sangat nyaman dan mudah digunakan!
WeChat menawarkan banyak kemungkinan terkait penggunaan pengikatan data. Anda memiliki kesempatan untuk menggunakan pengikatan data pada atribut komponen, properti, operasi string, operasi aritmatika, jalur data, dan array.
Properti kontrol wx:for mengikat array dari lapisan logis Anda (file .js), mengulanginya dan menetapkan data.
Code snippet "wx:for" example.
<!-- .wxml -->
< view wx:for =" {{array}} " >
{{index}}: {{item.message}}
</ view > // .js
Page ( {
data : {
array : [ {
message : 'foo'
} , {
message : 'bar'
} ]
}
} ) Mirip dengan <view wx:for> Anda dapat menggunakan <block wx:for> untuk merender beberapa blok baris . (Lihat blok pada tabel WXML di atas).
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 >Untuk detail lebih lanjut tentang kode di atas, lihat repositori Github ini.
Sumber daya lebih lanjut:
Mirip dengan wx:for , wx:if digunakan untuk mendefinisikan pernyataan kondisional dan menentukan apakah blok harus dirender atau tidak.
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
}
} ) Jika Anda ingin menampilkan lebih dari satu tag dalam blok pernyataan kondisional, Anda dapat menggunakan <block wx:if> .
<!-- .wxml -->
< block wx:if =" {{true}} " >
< view > view1 </ view >
< view > view2 </ view >
</ block > Gali lebih jauh dalam dokumentasi wx:if WeChat.
Templat memungkinkan Anda menentukan cuplikan kode yang ingin Anda gunakan kembali beberapa kali di file berbeda di program mini Anda.
Item templat WXML memiliki cakupannya sendiri dan hanya dapat menggunakan data untuk meneruskannya.
Pertama, untuk mendeklarasikan template Anda perlu menentukan namanya.
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}} " /> Nanti jika Anda ingin memanggil template dalam file yang sama gunakan atribut is dan nama template sebagai nilai untuk mendeklarasikan template yang diperlukan. Dan jangan lupa meneruskan data ke template menggunakan atribut data .
// .js
Page ( {
data : {
item : {
index : 0 ,
msg : 'this is a template' ,
time : '2017-05-18'
}
}
} ) Untuk mendeklarasikan template yang sudah ditentukan dalam file baru, Anda harus mengimpornya terlebih dahulu.
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'}} " />Detail lebih lanjut tentang dokumentasi WeChat di sini.
Selain inisialisasi data dan fungsi siklus hidup, kerangka kerja ini memungkinkan untuk menentukan fungsi penanganan peristiwa.
Elemen WXML (event handler) memicu event dan lapisan logis mengikat event handler untuk menerima objek event sebagai parameter.
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() : Fungsi ini memperbarui data dalam lapisan logis yang selanjutnya akan dikirim ke lapisan tampilan. fungsi setData() menerima objek sebagai parameter dan memperbarui nilai kunci dengan menggunakan this.data sebagai jalur data.
Ada banyak jenis peristiwa yang mengikat, sebagian besar komponen memiliki definisi sendiri tentang peristiwa yang mengikat.
Peristiwa pengikatan komponen:
bindsubmit untuk formulir.bindinput untuk sebuah input.bindscroll untuk tampilan gulir. 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
}
} )Acara pengikatan klasik:
bind+event_typecatch+event_type Code snippet "data binding illustration" example.
< button bindtap =" ontap " type =" primary " > Tap < button /> Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
}
} ) Dua peristiwa pengikatan yang umum digunakan adalah bind+event_type dan catch+event_type . Peristiwa tangkapan adalah peristiwa yang mencegah peristiwa penggelembungan.
Konsep peristiwa bubbling: Untuk orang non-javascript, peristiwa bubbling dapat didefinisikan ketika suatu peristiwa terjadi pada sebuah elemen yang bersarang di elemen lain. Node induk dan elemen bersarang didaftarkan sebagai pengendali peristiwa untuk peristiwa tertentu. Node induk dari elemen yang disarangkan harus menggunakan catch+event_type , yang akan mencegah peristiwa menggelembung ke elemen leluhur.
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' )
}
} )Sebagian besar digunakan ketika Anda menyarangkan elemen dan tidak ingin menampilkan simpul induk dari elemen yang Anda ikat.
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' ) ;
}
} )Berikut adalah tip praktis untuk mengaktifkan berbagi program mini. WeChat membuka dua cara untuk berbagi program mini:
Kemungkinan untuk mengaktifkan tombol maju dalam menu drop-down yang muncul dengan mengklik sudut kanan atas ... halaman.
Buat tombol maju di halaman program mini Anda. Itu membuat proses berbagi lebih ramah pengguna.
Di kedua varian, kerangka kerja akan secara otomatis meneruskan kartu program mini dengan cuplikan layar header MP Anda.
Untuk mengaktifkan tombol ini kita perlu menggunakan fungsi Page() yang disebut 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'
}
} ,Dalam fungsi ini Anda harus menentukan judul yang akan ditampilkan di bagian atas kartu penerusan dan jalur halaman saat ini . Jika Anda lupa menambahkan judul, WeChat akan menambahkan judul secara default (nama program mini Anda).
Batasan: Satu-satunya hal yang dapat Anda tentukan dalam kasus ini adalah acara onShareAppMessage . Tombol maju akan dibuat oleh kerangka itu sendiri.
Fitur ini memungkinkan pengembang untuk membuat tombol maju tertentu di dalam halaman dengan menggunakan properti tombol open-type dan nilainya '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 > Berbeda dengan kasus pertama, kita harus membuat event handler yang memicu fungsi onShareAppMessage . Fungsi ini memanggil wx.showShareMenu dan meneruskan withShareTicket sebagai parameter.
// about.js
Page ( {
onShareAppMessage : function ( ) {
console . log ( 'share' )
wx . showShareMenu ( {
withShareTicket : true
} )
}
} ) Catatan: Kedua varian menggunakan fungsi Page() yang menyiratkan bahwa Anda berbagi halaman tertentu tempat Anda mendeklarasikan fungsi tersebut.
WeChat bertujuan untuk membangun pengalaman pengguna yang ramah , efisien , dan konsisten . Untuk mewujudkannya, tim desain resmi WeChat menyediakan repositori WeUI. Pustaka front-end dasar (WeUI) ini konsisten dengan pengalaman visual asli WeChat. WeUI, dapat dipahami sebagai perpustakaan front-end WeChat, mirip dengan Bootstrap . Ini mencakup sekumpulan besar komponen seperti tombol, sel, dialog, kemajuan, roti panggang, artikel, lembar tindakan, ikon, dan banyak lagi.
Repositori Github yang berguna:
Unduh repositori WeUI secara lokal melalui npm :
npm install weui-wxss
Kode yang diunduh berisi kode sumber WeUI dan contoh program mini berdasarkan WeUI.
Mari kita buka contoh program mini WeUI di WeChat IDE:
Impor gaya WeUI di app.wxss Anda untuk mengaktifkan penggunaan gaya WeUI di program mini Anda:
@import "style/weui.wxss" ;
Untuk detail lebih lanjut mengenai pedoman desain WeChat, Anda dapat menemukan dokumentasi lengkapnya di sini.
WXSS memiliki hampir semua fitur yang dimiliki CSS. Style sheet yang ditentukan di app.wxss adalah aturan gaya umum yang diidentifikasi pada setiap halaman. Style sheet yang ditentukan di halaman tertentu adalah gaya lokal yang hanya berfungsi pada halaman saat ini dan dengan demikian menimpa pemilih yang sama yang digunakan di app.wxss . WXSS dibandingkan dengan CSS memiliki dua perbedaan utama:
WXSS menggunakan rpx (piksel responsif) sebagai unit. Ini memungkinkan untuk menyesuaikan piksel sesuai dengan lebar layar. Anda dapat terus menggunakan unit px klasik (bukan cara WeChat dalam melakukan sesuatu). (1rpx = 0.5px ; 1px = 2rpx)
Untuk mengimpor style sheet keluar gunakan pernyataan @import diikuti dengan jalur relatif dan ; di akhir pernyataan.
Code snippet "@import" example.
/* app.wxss*/
@import "outbound.wxss" ;Kerangka kerja WeChat tidak dapat mendukung banyak pemilih CSS standar, seperti pemilih berjenjang.
Pemilih yang didukung:
Rekomendasi WeChat:
Kerangka kerja WeChat memberi pengembang sejumlah besar komponen dasar, daftar lengkap komponen ada di sini.
<navigator> adalah jangkar Anda di html. Ini digunakan untuk menghubungkan dari satu halaman ke halaman lainnya. Atribut terpenting dari elemen navigator adalah 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 >Deskripsi atribut navigator:
Deskripsi nilai tipe terbuka:
Komponen pemilih dalam dokumentasi WeChat dibagi menjadi tiga pemilih, pemilih klasik yang merupakan default, pemilih waktu dan pemilih tanggal .
Kasus penggunaan di bawah ini didasarkan pada pemilih tanggal tetapi logikanya tetap sama untuk pemilih lainnya.
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
} )
}
} )Atribut pemilih tanggal:
Sakelar adalah sakelar visual dengan dua status, aktif dan nonaktif.
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 )
}
} )Ganti atribut:
Toast adalah elemen non-modal yang digunakan untuk menampilkan komponen singkat dan kedaluwarsa otomatis untuk memberi informasi kepada pengguna.
Dalam cuplikan kode di bawah ini kami memalsukan pengiriman formulir untuk menunjukkan cara kerja dan tampilan toast.
Code snippet "spinner btn and toast" example.
<!-- .wxml -->
< form bindsubmit =" bindFormSubmit " >
< button type =" primary " form-type =" submit " loading =" {{loading}} " > Send </ button >
</ form >Pada cuplikan kode di atas kita membuat tombol dinamis dengan tujuan mengirimkan formulir . Tombol ini dianimasikan oleh spinner pemuatan saat Anda mengkliknya.
Kemudian kami bersulang dengan menggunakan wx.showToast API untuk memberi tahu pengguna.
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
} )
}
} )Kotak modal memungkinkan untuk melapisi elemen kecil di atas halaman . Manfaat utama dari modal box adalah mereka menghindari kebutuhan untuk menggunakan jendela pop-up konvensional atau memuat ulang halaman.
Ada lima kategori situasional di mana kotak modal biasanya digunakan:
Code snippet "modal to inform" example.
wx . showModal ( {
title : 'Modal title' ,
content : 'Modal content ' ,
confirmText : "Ok" ,
showCancel : false ,
success : function ( res ) {
console . log ( 'success' )
}
} )Parameter modal:
Komponen map adalah komponen asli, ia memiliki daftar atribut yang panjang, kita akan membahas atribut-atribut utama. Berikut tautan ke dokumentasi WeChat untuk lebih jelasnya.
daftar atribut 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 >Lihat bagian Layanan berbasis lokasi di wiki jika Anda ingin melihat layanan berbasis lokasi yang ditawarkan WeChat melalui API.
Rekomendasi WeChat:
wx.getLocation perlu menentukan type sebagai gcj02 Bagian ini bertujuan untuk menjelaskan berbagai langkah yang harus Anda ikuti jika Anda ingin mempertahankan data aplikasi dan mengambil data di database. Kami memilih Leancloud.cn karena kesederhanaan instalasinya untuk pemula.
Beberapa konteks terlebih dahulu: Contoh di bawah ini didasarkan pada program mini yang bertujuan mengumpulkan masukan melalui formulir sederhana. Program mini ini menyimpan data yang dikumpulkan di Leancloud.cn. Kami akan menjelaskan cara mengambil dan menampilkan data yang disimpan di DB. Untuk mengilustrasikan bagian kedua ini (mengambil data) kami membuat halaman baru yang menampilkan semua ulasan yang disimpan di Leancloud.
Berikut adalah repositori Github dari proyek yang digunakan untuk membuat tutorial ini.
Spesifikasi:
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 >Ketika struktur form sudah dibuat seperti di atas, selanjutnya kita perlu membuat event yang dipicu oleh penyerahan form.
//pages/form/form.js
Page ( {
data : {
loading : false ,
} ,
// Form Submission
bindFormSubmit : function ( e ) {
// Local storage
var review = e . detail . value . review
// ...
}
} ) Penyimpanan lokal: Dalam fungsi bindFormSubmit , kami menetapkan masukan pengguna ke variabel lokal dengan tujuan menguji apakah kami dapat mengumpulkan masukan pengguna formulir secara lokal.
Sebelum kita memulai instalasi, jika Anda sedang dalam pengembangan, daftarkan nama domain Anda dengan mencentang kotak terakhir antarmuka proyek dalam IDE WeChat Anda. Untuk kebutuhan debugging tertentu, Anda dapat mengikuti tutorial Leancloud ini.
Untuk memulai penyiapan Leancloud, pertama-tama buat akun di Leancloud.
Sekarang Anda siap untuk instalasi dan inisialisasi Leancloud di program mini Anda, Anda dapat mengikuti dokumentasinya yang memungkinkan Anda melalui proses dua langkah:
appId dan appKey di app.js Anda. // 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' ,
} ) ;Jika Anda tersesat, lihat repositori Github proyek tersebut.
Pertama-tama, buat folder baru bernama model dan tambahkan file form.js ke folder ini. Beri nama file Anda sesuai dengan jenis objek yang ingin Anda pertahankan, dalam hal ini form. Langkah ini tidak diperlukan tetapi memungkinkan file Anda tetap teratur.
Mari kita buat objeknya: Di file form.js yang baru saja Anda buat, require av-weapp-min.js yang Anda instal di util.js dan tetapkan ke konstanta AV . Kemudian instantiate objek 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 ; Sekarang Anda telah membuat instance objek Form , buat objek formulir untuk merangkum data di lapisan logis (di sini form.js) dan mengarahkan pengguna setelah pengiriman formulir.
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 ) ;
}
} )Pembahasan cuplikan kode:
binFormSubmit kami menambahkan izin yang memungkinkan Leancloud membaca dan menulis melalui objek yang kami buat dan ingin dipertahankan.setTimeout yang merangkum data dalam objek Form baru dan mengarahkan pengguna saat formulir dikirimkan. Catatan: setACL(acl) adalah properti bawaan leancloud.
Sejauh ini semuanya dilakukan dalam program mini Anda, yang masih harus dilakukan adalah proyeksi data yang dikumpulkan di dalam dasbor Leancloud Anda .
Form dalam contoh ini.Ujinya untuk memastikan bahwa data yang dikumpulkan tetap ada di dalam dasbor Leancloud Anda.
Pertama, izinkan saya mengingatkan Anda latar belakang bagian ini. Kami ingin menampilkan di halaman baru daftar ulasan yang telah kami kumpulkan dan bertahan di LeanCloud . Saya berasumsi bahwa Anda telah mengikuti bagian pertama tutorial, (jika Anda melewatkannya lihat di atas).
Spesifikasi:
review .Jadi mari kita buat halaman ulasan baru dan tombol yang mengarahkan halaman ulasan . ( Tip: Cukup tambahkan jalur rute ke app.json Anda, kerangka kerja akan membuat folder halaman baru dan file dengan sendirinya).
<!-- index.wxml -->
<!-- CTA redirects to review page -->
< view class =" cta-margin " >
< navigator url =" /pages/review/review " class =" btn-index " > Reviews </ navigator >
</ view >Langkah selanjutnya adalah mengambil data yang disimpan di Leancloud dan menampilkannya .
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 > Di atas kami membuat blok rendering daftar menggunakan wx:for tampilan itu setiap ulasan dan nama orang yang membuat ulasan.
// 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 ) ;
} ,
} )Debrief Cuplikan Kode:
AV yang berisi data yang disimpan.forms .Dalam kasus penggunaan ini kita baru saja melihat cara menyimpan data yang kami kumpulkan secara lokal ke Leancloud dan cara mengambil data yang disimpan dari LeanCloud.
Kami menyarankan Anda untuk membaca dokumentasi LeanCloud atau memeriksa program mini Leantodo yang dibuat oleh LeanCloud, Github Repository.
Ketika Anda sedang dalam produksi, Anda harus mengkonfigurasi nama domain LeanCloud dalam platform WeChat. Ikuti tutorial LeanCloud ini.
Semua informasi pengguna yang Anda akses melalui 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) memberi Anda fungsi getUserInfo dalam file app.js. Seperti namanya, fungsi ini dimaksudkan untuk mendapatkan informasi pengguna . Mari kita melalui fungsi ini langkah demi langkah.
Deskripsi umum:
getUserInfo memiliki parameter CB , yang juga merupakan fungsi.If Block of getUserInfo akan disahkan jika userInfo dari globalData tidak nol.userInfo adalah null, fungsi getUserInfo memanggil antarmuka login. // 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
}
} ) Kasus Pertama, userInfo Form globalData bukan NULL
Pernyataan IF Condition bertujuan untuk menentukan apakah argumen CB yang diteruskan untuk mendapatkan getUserInfo adalah tipe fungsi dan jika ya, itu akan lulus userInfo .
Bagaimana mereka mengetahui apakah parameter CB adalah fungsi?
// index.js
var app = getApp ( )
Page ( {
data : {
userInfo : { } ,
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
app . getUserInfo ( function ( userInfo ) {
that . setData ( {
userInfo : userInfo
} )
} )
}
} Mari kita melalui fungsi onLoad index.js ini
onLoad Fungsi getUserInfo pada instance aplikasi .userInfo ke informasi pengguna saat ini.userInfo diperbarui ke globalData di file App.js.Kasus kedua, UserInfo adalah NULL
userInfo adalah fungsi null getUserInfo mengembalikan pernyataan else yang memanggil antarmuka login.getUserInfo dipanggil dan bertindak sebagai blok if yang kita lihat di atas. Jika pengguna saat ini sudah masuk, informasi pengguna ditetapkan ke globalData melalui halaman index.js yang menyebut fungsi onLaod . Dan kemudian logika yang sama diterapkan.
WeChat mini-program memiliki mekanisme cache di API mereka. Bahkan, setiap program mini memiliki penyimpanan cache lokal sendiri.
Pengingat: Penyimpanan cache digunakan untuk menyimpan data yang ingin kami akses dengan cepat. Ini mengurangi waktu tunggu pengguna , karena permintaan dipenuhi dari cache lokal yang lebih dekat dengan klien dibandingkan dengan server asli yang digunakan untuk meminta DB Anda.
Cache Storage menawarkan dua jenis metode untuk menyimpan data di cache:
wx.setStorage : wx . setStorage ( { key : 'name' , data : 'Thibault' } ) ; wx.setStorage membangun parameter sebagai JSON, kunci untuk menentukan kunci dan data yang disimpan untuk menentukan nilai kunci yang akan disimpan.
wx.setStorageSync : wx . setStorageSync ( 'name' , 'Thibault' ) ; Sintaks wx.setStorageSync lebih sederhana, parameter dilewatkan secara langsung. Dan bisa mendapatkan data melalui fungsi panggilan balik yang masuk.
WeChat memberikan tiga tindakan utama pada cache:
wx.setStorage atau wx.setStorageSync .wx.getStorage atau wx.getStorageSync .wx.clearStorage atau wx.clearStorageSync .wx.removeStorage atau 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 ,
} )
}
} )
}
} ) Anda dapat menelepon UI Pemindai Kode Klien Anda dengan menggunakan wx.scanCode API. Ini memberikan akses langsung ke pemindai WeChat melalui tombol CTA dengan tujuan memindai kode 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 menyediakan satu set lengkap layanan berbasis lokasi:
wx.chooseLocation untuk memilih lokasi yang ingin Anda tampilkan.wx.getLocation untuk mendapatkan lokasi pengguna saat ini.wx.openLocation untuk menampilkan lokasi pada tampilan peta buit-in mereka.wx.createMapContext untuk mempersonalisasi peta Anda. 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 )
}
} )
} Di atas kami menggunakan wx.getLocation untuk mengambil posisi pengguna saat ini dengan mendapatkan garis lintang dan bujurnya.
wx.getLocation Rincian lebih lanjut: Jika pengguna meninggalkan program mini tetapi tampilan di atas obrolannya, program mini, Anda dapat terus memanggil wx.getLocation dan mendapatkan lokasi pengguna dengan terus-menerus.
Tampilkan lokasi pengguna saat ini di peta built-in weChat: wx.openLocation API Call, memungkinkan pembukaan tampilan peta bawaan WeChat untuk menampilkan lokasi yang Anda dapatkan dari fungsi listenerBtnGetLocation yang kami buat di atas.
Catatan: wx.openLocation API Call, Mengalihkan pengguna ke jendela peta baru.
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 menawarkan empat kemungkinan:
wx.chooseImage untuk memilih gambar dari album atau kamera Anda.wx.previewImage untuk mempratinjau gambar sebelum unggahan pada aplikasi.wx.getImageInfo untuk mendapatkan informasi gambar (tinggi, lebar, jalur, src).wx.saveImageToPhotosAlbum untuk menyimpan gambar dari program mini ke album Anda. Dalam contoh di bawah ini kami membuat fungsi yang disebut listenerBtnChooseImage dengan tujuan memanggil album pengguna atau kamera dengan menggunakan wx.chooseImage . Kemudian kami menggunakan wx.getImageInfo untuk mendapatkan informasi gambar.
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 )
}
} )
}
} )
}
} )Sekarang kita memiliki gambar di halaman mari kita simpan gambar dari program mini ke album pengguna saat ini dengan lama mengetuk gambar.
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 menawarkan permintaan HTTPS umum, WebSocket, unggah dan unduhan file.
wx.request untuk membuat permintaan HTTPS standar.wx.uploadFile untuk mengunggah file ke server yang ditunjuk.wx.downloadFile untuk mengunduh file dari server yang ditunjuk. 
Dalam contoh di bawah ini kami memiliki satu fungsi dan satu penangan acara: masing -masing addNewPost dan onPullDownRefresh , seperti yang dinyatakan oleh namanya, Anda harus dapat menambahkan posting baru dan mendapatkan posting menggunakan panggilan 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'
}
} )
}
} )Sekarang setelah kami memposting, mari kita dapatkan dan tampilkan ke lapisan tampilan. Demi kesederhanaan kita akan memanfaatkan OnpulldownRefresh untuk memuat ulang posting baru.
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.
} )
}
} )
}
} ) Sepanjang jalur penciptaan mini-program kami yang kami temui masalah dan pertanyaan, kami ingin berbagi dengan Anda. Jika Anda memiliki beberapa masalah yang ingin Anda bagikan, hubungi kami.
WeChat hanya mengizinkan API yang memiliki lisensi ICP, sehingga Anda dapat melupakan sebagian besar API yang Anda kenal di negara -negara Barat.
Berikut adalah direktori API yang tersedia di Cina, lihatlah.
background-image: properti Sumber daya gambar tidak dapat diperoleh melalui latar belakang CSS background-image: url(../../images/banner.png); . Saya tahu ini mengerikan, tetapi kita harus menghadapinya.
Ada dua cara untuk melewati frustrasi ini:
Anda dapat menggunakan CSS background-image: tetapi Anda tidak dapat menggunakan jalur realtif , Anda harus menyandikan gambar Anda di base64 dan kemudian meneruskannya ke background-image: url(base64 image); . Berikut adalah alat untuk menyandikan gambar di Base64.
Atau Anda dapat menggunakan tag <image> dan memperlakukan gambar dengan mode <image> Tag seperti mode . WeChat memiliki 13 mode , 9 adalah mode pemotongan dan 4 adalah mode zoom . Berikut ini tautan ke dokumen.
RPX berarti piksel responsif yang merupakan unit program mini WeChat. Menurut definisi resmi, rpx didasarkan pada lebar layar adaptif.
Bahkan unit RPX didasarkan pada unit rem yang merupakan singkatan dari "Root EM" . Mengapa tidak unit em ?
Unit em relatif terhadap ukuran font induk , yang menyebabkan masalah peracikan . Unit rem relatif terhadap elemen akar yang menghubungkan masalah peracikan (tugas ukuran font).
Namun, untuk kembali ke unit rpx , keunggulan RPX adalah:
Apakah Anda sedang mengerjakan program mini? Hubungi kami jika Anda ingin membagikan pekerjaan Anda, temui kru kami, minta bantuan!
Jika Anda ingin berkontribusi, Anda dapat mengirim permintaan tarik di sini atau memberi kami teriakan tentang Shanghai (AT) Lewagon.com untuk saran!
