以下是微信小程序開(kāi)發(fā)一周總結(jié)，希望對(duì)php中文網(wǎng)的同學(xué)有幫助。
編輯器
我直接用 vscode（其它編輯器同理，預(yù)覽還是用的微信開(kāi)發(fā)工具），語(yǔ)法高亮將 wxml 設(shè)置成 html, wxss 設(shè)置成 css
"files.associations":?{
??"*.wxss":?"css",
??"*.wxml":?"html"
}
?也可以安裝小程序相關(guān)插件
開(kāi)始寫(xiě)代碼
view 組件對(duì)應(yīng) html 里的 p
text 對(duì)應(yīng) span
wxss 里選擇器只支持 element, #id, .className, ::after, ::before
項(xiàng)目目錄里新建 components ，按類(lèi)似 pages 目錄結(jié)構(gòu)，將每個(gè)組件的模板，樣式和 js 文件放在同一個(gè)文件夾
模板可以直接
或者需要傳值的使用 + 樣式使用 @import 導(dǎo)入
-
js 使用 require 引入到頁(yè)面，然后使用下面的 mergePage 來(lái)加載到頁(yè)面對(duì)象中。
mergePage
組件的加載
const?ErrorMsg?=?require('../../../components/error-msg/error-msg');
Page(util.mergePage({
??//?頁(yè)面?Page?方法...
??onLoad()?{
????//?可以直接在頁(yè)面方法中調(diào)用?showErrorMsg?方法
??}
},?ErrorMsg/*?更多組件也可以*/));
?
使用 mergePage 方法將所有組件方法及頁(yè)面事件注冊(cè)到頁(yè)面對(duì)象
組件的編寫(xiě)方式
var?errorTimer;
module.exports?=?{
??showErrorMsg(msg,?cb)?{
????clearTimeout(errorTimer);
????this.setData({
??????errorMsg:?msg
????});
????errorTimer?=?setTimeout(?()?=>?{
??????this.setData({
????????errorMsg:?false
??????});
??????cb?&&?cb();
????},?2000);
??}
??//?可以在這里注冊(cè)?`onLoad`，`onShow`等頁(yè)面事件
}
?
組件里使用可以 this.setData 來(lái)更新頁(yè)面數(shù)據(jù)，或者注冊(cè) onLoad ， onShow 等頁(yè)面事件， mergePage 的最后一個(gè)參數(shù)的事件會(huì)最先調(diào)用。
mergePage 的源碼
/**
?*?合并?Page?對(duì)象所有的方法及事件
?*?子對(duì)象不能使用?data?屬性，請(qǐng)?jiān)?onLoad?中使用?setData?方法設(shè)置
?*/
function?mergePage(dest,?...src)?{
??let?args?=?arguments;
??let?eventsStack?=?{
????onLoad:?[],
????onReady:?[],
????onShow:?[],
????onHide:?[],
????onUnload:?[],
????onPullDownRefresh:?[],
????onReachBottom:?[],
??};
??//?保存所有的事件，最后一個(gè)參數(shù)的事件會(huì)最先調(diào)用。
??for(let?name?in?eventsStack)?{
????for(let?i?=?args.length?-?1;?i?>=?0;?i--)?{
??????args[i][name]?&&?eventsStack[name].push(args[i][name])
????}
??}
??Object.assign(...args);
??for(let?name?in?eventsStack)?{
????dest[name]?=?function()?{
??????for(let?i?=?0;?i?< eventsStack[name].length; i++) {
eventsStack[name][i].apply(this, arguments);
}
}
}
return dest;
}
es 6
箭頭函數(shù)，函數(shù)參數(shù)默認(rèn)值及解析構(gòu)
wx.request({
complete: ({data= {}}) =>?{
????//?1.?因?yàn)?wx.request?返回的接口數(shù)據(jù)是在?data?屬性里，這里我們只要?data?屬性就行了，所以直接參數(shù)解析構(gòu)
????//?2.?如果?failed，無(wú)?data?時(shí)，data?將為默認(rèn)值?{}
????if(data.code?!==?0)?{
??????//?do?something?if?request?failed
??????return;
????}
????//?請(qǐng)求正常處理代碼
????//?3.?因?yàn)橛玫募^函數(shù)，回調(diào)里可以正常使用?this,?訪(fǎng)問(wèn)?Page?對(duì)象的方法
????//?比如?this.setData(...)
??}
})
?
一些函數(shù)參數(shù)也可以直接使用默認(rèn)參數(shù)。
拓展運(yùn)算符 和 對(duì)象屬性簡(jiǎn)寫(xiě)
在給 template 傳 data 參數(shù)時(shí)，可以使用對(duì)象屬性簡(jiǎn)寫(xiě)，如
<template is="..." data="{{...obj, id: otherIdVariable, name}}"></template>
?
這樣 template 中可以使用變量為 obj 對(duì)象的所有 key，以及 id 和 name
模板字符串
小程序里可以直接方便的使用 es 6 模板字符串
let?url?=?`${app.globalData.API_PREFIX}/cart/add`;
?
更多 es 6 特性
其它注意
wx.showToast 圖標(biāo)只支持"success"、"loading"，錯(cuò)誤提示得自定義
如果 template 里面的變量沒(méi)值，請(qǐng)看 data 傳進(jìn)來(lái)沒(méi)有。
開(kāi)發(fā)工具（v0.10.102800）可以用下面方法添加接口請(qǐng)求域名，遺憾的是微信里不行。
//?放到?app.js?前面
?wxConfig.projectConfig.Network.RequestDomain.push('https://weapp.juanpi.com');
?
所有頁(yè)面的 JS 會(huì)在啟動(dòng)時(shí)立即執(zhí)行，而不是打開(kāi)頁(yè)面才執(zhí)行，所以一些寫(xiě)在全局的代碼應(yīng)該盡量放到 onLoad 之后，下面是從調(diào)試 source 里看到加載的代碼：
define("pages/index/index.js",?function(require,?module,?exports,?window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket?){?'use?strict';
var?app?=?getApp();
var?util?=?require('../../../utils/util');
var?ErrorMsg?=?require('../../../components/error-msg/error-msg');
var?AddressPicker?=?require('../../../components/address-picker/address-picker');
Page(util.mergePage({
??//?頁(yè)面代碼省略
},?AddressPicker,?ErrorMsg));
//#?sourceMappingURL=data:application/json;...
});require("pages/index/index.js")Atas ialah kandungan terperinci 微信小程序開(kāi)發(fā)一周總結(jié). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Tiktok Web Versi Masuk Log Masuk Alamat Pautan Https Tiktok Web Versi Laman Web Percuma
May 22, 2025 pm 04:24 PM
Portal log masuk untuk versi web Douyin adalah https://www.douyin.com/. Langkah -langkah log masuk termasuk: 1. Buka penyemak imbas; 2. Masukkan URL https://www.douyin.com/; 3. Klik butang "Masuk" dan pilih kaedah log masuk; 4. Masukkan kata laluan akaun; 5. Log masuk lengkap. Versi Web menyediakan fungsi seperti melayari, mencari, interaksi, memuat naik video dan pengurusan laman web peribadi, dan mempunyai kelebihan seperti pengalaman skrin besar, pelbagai tugas, pengurusan akaun mudah dan statistik data.
Salin Komik (Pintu Laman Web Rasmi) _COPY COMICS (NBA) Portal Membaca Tulen
Jun 05, 2025 pm 04:12 PM
Komik menyalin tidak diragukan lagi sebagai harta yang tidak dapat dilepaskan. Di sini anda boleh menemui komik bola keranjang dalam pelbagai gaya, dari cerita kompetitif yang bersemangat dan inspirasi untuk komedi harian yang santai dan lucu. Sama ada anda ingin menghidupkan semula klasik atau menemui karya baru, menyalin komik dapat memenuhi keperluan anda. Melalui portal bacaan dalam talian yang disediakan oleh Copy Comics, anda akan mengucapkan selamat tinggal kepada masalah sumber cetak rompak, menikmati pengalaman membaca yang tinggi dan lancar, dan dapat menyokong pengarang komik kegemaran anda dan menyumbang kepada pembangunan komik yang sahih.
Mana yang lebih baik, penyemak imbas UC atau penyemak imbas QQ? Perbandingan dan penilaian mendalam mengenai penyemak imbas UC dan QQ
May 22, 2025 pm 08:33 PM
Memilih penyemak imbas UC atau penyemak imbas QQ bergantung kepada keperluan anda: 1. Pelayar UC sesuai untuk pengguna yang mengejar fungsi hiburan yang cepat dan kaya; 2. Pelayar QQ sesuai untuk pengguna yang memerlukan kestabilan dan sambungan lancar dengan produk Tencent.
Peringkat Perisian Penulisan AI Top 10 AI Disyorkan Perisian Penulisan AI adalah PERCUMA
Jun 04, 2025 pm 03:27 PM
Menggabungkan trend industri terkini dan data penilaian pelbagai dimensi pada tahun 2025, yang berikut adalah cadangan perisian penulisan AI yang komprehensif, yang meliputi senario arus perdana seperti penciptaan umum, penyelidikan akademik, dan pemasaran komersial, sambil mengambil kira perkhidmatan pengoptimuman dan penyetempatan Cina:
Tonton halaman rasmi NIS Comics dalam talian untuk komik percuma. Laman Web Kemasukan Percuma Laman Masuk NIS Comics
Jun 12, 2025 pm 08:18 PM
Komik yang bagus, platform pengalaman membaca yang mendalam yang didedikasikan untuk mencipta pencinta komik, menyatukan sejumlah besar sumber komik berkualiti tinggi di rumah dan di luar negara. Ia bukan sahaja platform membaca komik, tetapi juga komuniti yang menghubungkan artis komik dan pembaca dan berkongsi budaya komik. Melalui reka bentuk antara muka yang mudah dan intuitif dan fungsi carian yang kuat, NES Comics membolehkan anda dengan mudah mencari karya kegemaran anda dan menikmati pengalaman membaca yang lancar dan selesa. Katakan selamat tinggal kepada operasi yang lama menunggu dan membosankan, masukkan dunia komik yang bagus dengan serta -merta dan mulakan perjalanan komik anda!
Frog Man Online Melihat Lelaki Lelaki Masuk Lelaki (Masuk Web Page) Tonton Dalam Talian
Jun 12, 2025 pm 08:06 PM
Komik Frogman telah menjadi pilihan pertama bagi banyak pencinta komik dengan sumber komik yang kaya dan pelbagai dan pengalaman membaca dalam talian yang mudah dan lancar. Ia seperti kolam yang bersemangat, dengan cerita -cerita segar dan menarik yang sentiasa muncul, menunggu anda menemui dan meneroka. Frog Man Comics meliputi pelbagai subjek, dari pengembaraan yang ghairah hingga cinta manis, dari fantasi dan fiksyen sains untuk penangguhan yang menggembirakan, tidak kira genre yang anda suka, anda dapat mencari karya kegemaran anda di sini. Reka bentuk antara muka yang mudah dan intuitif membolehkan anda dengan mudah memulakan, dengan cepat mencari komik yang anda ingin baca, dan tenggelamkan diri anda dalam dunia komik yang menarik.
Baozi Comics (Masuk) _ Baozi Comics (pintu masuk baru) 2025
Jun 05, 2025 pm 04:18 PM
Di sini, anda boleh menikmati lautan komik yang luas dan meneroka karya-karya pelbagai tema dan gaya, dari komik lelaki muda yang ghairah hingga komik gadis yang halus dan bergerak, dari komik misteri yang membosankan dan membakar otak untuk komik harian yang santai dan lucu, ada segala-galanya, dan selalu ada yang dapat menyentuh hati anda. Kami bukan sahaja mempunyai sejumlah besar sumber komik yang tulen, tetapi juga sentiasa memperkenalkan dan mengemas kini kerja -kerja terkini untuk memastikan bahawa anda dapat membaca komik kegemaran anda secepat mungkin.
b Alamat Berdaftar Terkini untuk mendaftarkan B pertukaran
May 26, 2025 pm 07:12 PM
Laman web rasmi terbaru 2025b anhui adalah: https://www.marketwebb.co/zh-cn/join?ref=507720986& ;type=wenzi; Binance Exchange adalah pertukaran cryptocurrency global yang melayani 180 negara dan wilayah termasuk Amerika Utara, Eropah, Taiwan, Timur Tengah, Hong Kong, dan Malaysia. Ia menyediakan lebih daripada 600 kriptografi dan mempunyai 270 juta pengguna berdaftar di seluruh dunia.
