以下是微信小程序開發(fā)一周總結(jié),希望對(duì)php中文網(wǎng)的同學(xué)有幫助。
編輯器
我直接用 vscode(其它編輯器同理,預(yù)覽還是用的微信開發(fā)工具),語(yǔ)法高亮將 wxml 設(shè)置成 html, wxss 設(shè)置成 css
"files.associations":?{ ??"*.wxss":?"css", ??"*.wxml":?"html" }
?也可以安裝小程序相關(guān)插件
開始寫代碼
view 組件對(duì)應(yīng) html 里的 p
text 對(duì)應(yīng) span
wxss 里選擇器只支持 element, #id, .className, ::after, ::before
項(xiàng)目目錄里新建 components ,按類似 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ì)象
組件的編寫方式
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,?訪問(wèn)?Page?對(duì)象的方法 ????//?比如?this.setData(...) ??} })
?
一些函數(shù)參數(shù)也可以直接使用默認(rèn)參數(shù)。
拓展運(yùn)算符 和 對(duì)象屬性簡(jiǎn)寫
在給 template 傳 data 參數(shù)時(shí),可以使用對(duì)象屬性簡(jiǎn)寫,如
<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)有。
開發(fā)工具(v0.10.102800)可以用下面方法添加接口請(qǐng)求域名,遺憾的是微信里不行。
//?放到?app.js?前面 ?wxConfig.projectConfig.Network.RequestDomain.push('https://weapp.juanpi.com');
?
所有頁(yè)面的 JS 會(huì)在啟動(dòng)時(shí)立即執(zhí)行,而不是打開頁(yè)面才執(zhí)行,所以一些寫在全局的代碼應(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")
以上是微信小程序開發(fā)一周總結(jié)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

熱AI工具

Undress AI Tool
免費(fèi)脫衣服圖片

Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序,用于創(chuàng)建逼真的裸體照片

AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。

Clothoff.io
AI脫衣機(jī)

Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費(fèi)的代碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
功能強(qiáng)大的PHP集成開發(fā)環(huán)境

Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開發(fā)工具

SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)

抖音網(wǎng)頁(yè)版的登錄入口是https://www.douyin.com/。登錄步驟包括:1.打開瀏覽器;2.輸入網(wǎng)址https://www.douyin.com/;3.點(diǎn)擊“登錄”按鈕并選擇登錄方式;4.輸入賬號(hào)密碼;5.完成登錄。網(wǎng)頁(yè)版提供了瀏覽、搜索、互動(dòng)、上傳視頻和個(gè)人主頁(yè)管理等功能,具有大屏幕體驗(yàn)、多任務(wù)處理、便捷的賬號(hào)管理和數(shù)據(jù)統(tǒng)計(jì)等優(yōu)勢(shì)。

拷貝漫畫無(wú)疑是一個(gè)不容錯(cuò)過(guò)的寶藏。在這里,你可以找到各種風(fēng)格的籃球漫畫,從熱血?jiǎng)?lì)志的競(jìng)技故事,到輕松幽默的日常喜劇,應(yīng)有盡有。無(wú)論是想重溫經(jīng)典,還是想發(fā)掘新作,拷貝漫畫都能滿足你的需求。通過(guò)拷貝漫畫提供的正版在線閱讀入口,你將告別盜版資源的困擾,享受高清流暢的閱讀體驗(yàn),更能支持你喜愛(ài)的漫畫作者,為正版漫畫的發(fā)展貢獻(xiàn)一份力量。

選擇UC瀏覽器還是QQ瀏覽器取決于你的需求:1.UC瀏覽器適合追求快速加載和豐富娛樂(lè)功能的用戶;2.QQ瀏覽器適合需要穩(wěn)定性和與騰訊產(chǎn)品無(wú)縫連接的用戶。

結(jié)合 2025 年最新行業(yè)動(dòng)態(tài)與多維度評(píng)測(cè)數(shù)據(jù),以下為綜合排名前十的 AI 寫作軟件推薦,涵蓋通用創(chuàng)作、學(xué)術(shù)研究、商業(yè)營(yíng)銷等主流場(chǎng)景,同時(shí)兼顧中文優(yōu)化與本地化服務(wù):

奈斯漫畫,一個(gè)致力于為漫畫愛(ài)好者打造的沉浸式閱讀體驗(yàn)平臺(tái),匯聚了海量國(guó)內(nèi)外優(yōu)質(zhì)漫畫資源。它不僅僅是一個(gè)漫畫閱讀平臺(tái),更是一個(gè)連接漫畫家與讀者、分享漫畫文化的社區(qū)。通過(guò)簡(jiǎn)潔直觀的界面設(shè)計(jì)和強(qiáng)大的搜索功能,奈斯漫畫讓你能夠輕松找到心儀的作品,享受流暢舒適的閱讀體驗(yàn)。告別漫長(zhǎng)的等待和繁瑣的操作,即刻進(jìn)入奈斯漫畫的世界,開啟你的漫畫之旅吧!

蛙漫漫畫,憑借其豐富多元的漫畫資源和便捷流暢的在線閱讀體驗(yàn),已成為眾多漫畫愛(ài)好者的首選。它就像一個(gè)充滿活力的池塘,源源不斷地涌現(xiàn)出新鮮有趣的故事,等待著你去發(fā)現(xiàn)和探索。蛙漫漫畫涵蓋了各種題材,從熱血冒險(xiǎn)到甜蜜戀愛(ài),從奇幻科幻到懸疑推理,無(wú)論你喜歡哪種類型,都能在這里找到心儀的作品。其簡(jiǎn)潔直觀的界面設(shè)計(jì),更讓你能夠輕松上手,快速找到想看的漫畫,沉浸在精彩紛呈的漫畫世界中。

在這里,您可以盡情暢游于浩瀚的漫畫海洋,探索各種題材和風(fēng)格的作品,從熱血激昂的少年漫,到細(xì)膩動(dòng)人的少女漫,從懸疑燒腦的推理漫,到輕松搞笑的日常漫,應(yīng)有盡有,總有一款能夠觸動(dòng)您的心弦。我們不僅擁有海量的正版漫畫資源,還不斷引進(jìn)和更新最新的作品,確保您能夠第一時(shí)間閱讀到您喜愛(ài)的漫畫。

2025b安最新官網(wǎng)入口地址:https://www.marketwebb.co/zh-CN/join?ref=507720986&type=wenzi;幣安(Binance)交易所是一家全球性的加密貨幣交易所,服務(wù)包括北美、歐洲、臺(tái)灣、中東、香港、馬來(lái)西亞在內(nèi)的180個(gè)國(guó)家地區(qū),提供超過(guò)600種加密貨幣,在全球擁有2.7億注冊(cè)用戶。
