weapp
v2
Komponen program mini WeChat dan enkapsulasi fungsi, pemrograman komponen sederhana
Berdasarkan enkapsulasi komponen khusus Komponen WeChat , pemrograman komponen sederhana, silakan lihat API Komponen untuk komponen khusus Komponen.
Perhatikan bahwa Anda perlu mengaktifkan fungsi konversi ES6 ke ES5 di alat pengembang WeChat. Silakan gunakan perpustakaan dasar program mini yang lebih besar dari versi 1.6.3 , dan perbarui WeChat ke versi terbaru.
Jika Anda memerlukan sekumpulan kode untuk mengembangkan applet WeChat dan applet Alipay, maka plug-in mpapi mungkin dapat membantu Anda (plug-in yang kompatibel dengan applet WeChat dan API applet Alipay)
Silakan gunakan alat pengembang WeChat untuk membuka direktori src
├─images ---------- 公共图片
├─js -------------- 公共的JS
│ └─common ---------- 公共方法函数封装
├─components ------ 自定义组件和第三方组件
│ ├─libs ------------ 第三方库
│ └─weapp ----------- weapp组件
├─pages ----------- 页面目录
│ ├─index ----------- 首页
│ ├─libs ------------ 第三方库页面
│ └─weapp ----------- weapp组件页面
├─app.js
├─app.json
├─app.wxss
└─README.md
usingComponents Komponen // page.json
{
"usingComponents" : {
"weapp-toast" : "/components/weapp/toast/toast" ,
"weapp-tab" : "/components/weapp/tab/tab"
}
} <!-- page.wxml-->
< weapp-toast title =" {{ toastTitle }} " bind:hide =" onToastHide " />
< weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " /> Berikut ini menunjukkan penggunaan sederhana komponen Tab . Untuk contoh spesifik, lihat kode di pages/weapp/tab di dalam proyek. Penggunaan komponen jenis lain pada dasarnya mirip dengan metode pemanggilan ini.
// tab.json
{
"navigationBarTitleText" : "Tab" ,
"usingComponents" : {
"weapp-tab" : "/components/weapp/tab/tab"
}
} <!-- tab.wxml -->
< weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " /> // tab.js
Page ( {
data : {
list1 : [ '选项1' , '选项2' , '选项3' ]
} ,
handlerSelect ( ) {
this . setData ( {
activeIndex : 1
} ) ;
} ,
onTabChange ( event ) {
console . log ( event . detail . activeIndex )
}
} ) Floating prompt, komponen Toast yang biasa digunakan dalam pengembangan seluler, berbeda dengan showToast pada program mini
titledelay Waktu tunda untuk pematian otomatis dalam milidetik, default: 1500 hide ditutup < weapp-toast title =" {{ toastTitle }} " bind:hide =" onToastHide " />tab
listactive-index indeks yang dipilih, default: 0theme , kosong secara default, dapat diteruskan di weapp-tab atau gaya khusus lainnya change panggilan balik peralihan, parameter event , dengan event.detail.activeIndex adalah indeks yang dipilih saat ini < weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " />Pemilihan kota
region change panggilan balik peralihan, parameter event , di mana event.detail.region adalah informasi wilayah yang dipilih < weapp-city-picker show =" {{isCityPickerShow}} " bind:change =" onChangeCity " />Muat lebih banyak, tidak ada prompt data, biasanya digunakan dengan daftar data pull-up
icon-type Jenis komponen ikon applet, default: searchstatus status saat ini, nilai opsional: loading , nomore , empty , belum ada data, default: loadingempty-txt tidak memiliki teks prompt data. Default:暂无数据loading-txt memuat teks perintah, default:正在加载nomore-txt tidak memiliki teks prompt lagi, default:没有更多数据了 < weapp-loader status =" {{status}} " /> Menu pop-up dengan hingga 12 arah panah yang didukung, memenuhi sebagian besar skenario 
list menu daftarpage-selector Pemilih CSS untuk wadah terluar dari seluruh halaman, defaultnya adalah .pageelem-id diposisikan berdasarkan ID elemen tersebutdir , nilai opsional tl tc tr rt rc rb bl bc br lt lc lb , masing-masing mewakili 12 arah gabungan atas, kanan, bawah, kiri, tengahtl sesuai dengan top-lefttc sesuai dengan top-centertr sesuai dengan top-rightrt sesuai dengan right-toprc sesuai dengan right-centerrb sesuai dengan right-bottombl sesuai dengan bottom-leftbc berhubungan dengan bottom-centerbr sesuai dengan bottom-rightlt sesuai dengan left-toplc sesuai dengan left-centerlb sesuai dengan left-bottom select panggilan balik untuk setiap item, parameter event , di mana event.detail.item adalah item yang dipilih saat inishow panggilan balikhide panggilan balik tersembunyi < weapp-popover list =" {{list}} " dir =" {{dir}} " elem-id =" {{elemId}} " show =" {{show}} " bind:select =" onSelectPopover " />Kiat teratas
titletype tipe prompt, success , error , warn , default: defaultdelay Waktu tunda untuk pematian otomatis dalam milidetik, default: 1500 hide ditutup < weapp-toptip type =" {{ type }} " title =" {{ title }} " /> Pemilihan kalender mendukung tampilan peralihan geser beberapa bulan. Klik kiri dan kanan untuk berpindah bulan dan beralih ke hari ini. 
start-date mulaiend-datecurrent-date yang dipilih secara defaultshow ditampilkan dari awal, default: falsecurrent menampilkan bulan pertama secara default. 0 dari tanggal mulai adalah bulan pertama change fungsi panggilan balik dari tanggal yang dipilih, parameter event , di mana event.detail.currentDate adalah tanggal yang dipilih saat ini < weapp-calendar-picker start-date =" 2017-07-07 " end-date =" 2018-08-08 " show =" {{ isCalendarPickerShow }} " bind:change =" onChangeDate " />Penerusan dan berbagi halaman menghilangkan konfigurasi rumit setiap halaman, membuatnya lebih sederhana dan efisien untuk digunakan.
title yang ditampilkanurl , defaultnya adalah alamat halaman saat ini import common from '../../assets/js/common' ;
// common.share([title], [url])
Page ( {
onShareAppMessage : common . share ( )
} ) ; Ketik penilaian, kembalikan Number , String , Boolean , Array , Object , Function dan string tipe lainnya
value adalah parameter apa pun yang perlu dinilai import common from '../../assets/js/common' ;
// common.type([value])
common . type ( 1 ) ; // Number
common . type ( 'abc' ) ; // String
common . type ( true ) ; // Boolean
common . type ( [ ] ) ; // Array
common . type ( { } ) ; // Object
common . type ( function ( ) { } ) ; // Function
common . type ( / d / ) ; // RegExp
common . type ( new Date ( ) ) ; // DateParsing objek menjadi string url
urlObject , objek yang akan diubah menjadi parameter stringunEncodeURI tidak menggunakan pengkodean, encodeURIComponent digunakan secara default. import common from '../../assets/js/common' ;
// common.param([urlObject], [unEncodeURI])
let obj = {
name : 'weapp' ,
uid : 8 ,
age : 24
} ;
let params = common . param ( obj ) ;
console . log ( params ) ; // ?name=weapp&uid=8&age=24 Parsing string url menjadi suatu objek, bukan menggunakan common.param
urlString , alamat dengan parameter urlunDecodeURI tidak menggunakan decoding, dan menggunakan decodeURIComponent secara default. import common from '../../assets/js/common' ;
// common.unparam([urlString], [unDecodeURI])
let str = '?name=weapp&uid=8&age=24' ;
let obj = common . unparam ( str ) ;Lompatan halaman, dioptimalkan untuk mencegah klik cepat untuk membuka dua halaman, mendukung bentuk objek untuk meneruskan parameter url, masing-masing sesuai dengan wx.navigateTo, wx.redirectTo, wx.switchTab, wx.reLaunch dari program mini.
urlparams import common from '../../assets/js/common' ;
// common.navigateTo([url], [params])
Page ( {
onTapElem ( ) {
common . navigateTo ( '/pages/weapp/popover/popover' , {
userid : 123 ,
info : 'Hello,weapp'
} ) ;
}
} ) ; Gunakan FontAwesome untuk ikon font dan WeUI untuk gaya komponen CSS.
MIT, nikmati kesenangan dari open source.
