$.post("這里是后臺(tái)處理頁(yè)面地址例:(url.php)",{UserName:UserName,UserPwd:UserPwd},function(result){ //這里對(duì)返回結(jié)果做處理 console.log(result); });
創(chuàng)新互聯(lián)公司是一家專業(yè)提供全椒企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、HTML5建站、小程序制作等業(yè)務(wù)。10年已為全椒眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。
uniapp php運(yùn)維主要是nginx的配置,fpm調(diào)優(yōu),mysql等數(shù)據(jù)庫(kù)調(diào)優(yōu),錯(cuò)誤碼的監(jiān)控,日志收集。
uniapp是一個(gè)使用vue.js開發(fā)所有前端應(yīng)用的框架,可支持小程序,web端等。簡(jiǎn)單來(lái)說(shuō),就是一套代碼多端使用。
不止如此,uniapp還可發(fā)布到iOS、Android、H5、以及各種小程序(微信/支付寶/百度/頭條/QQ/釘釘/淘寶)、快應(yīng)用等多個(gè)平臺(tái)。
php。uni-app是一個(gè)使用Vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,uniapp配合php后端好,主要是php的開發(fā)周期要比java低很多,而且技術(shù)門檻也要低很多。
ok,我們目前已經(jīng)完成了首頁(yè),如果我們只是為了制作一個(gè)文章系統(tǒng)的話,首頁(yè)+列表頁(yè)+詳情頁(yè)已經(jīng)足夠滿足我們的使用了。
所以我們開始在pages中創(chuàng)建這倆頁(yè)面。
現(xiàn)在pages.json路由中增加這倆:
前面我們首頁(yè)中的icon列表是一個(gè)靜態(tài)頁(yè)面頁(yè),我們需要連接才能跳轉(zhuǎn)到列表頁(yè)面。
這里我們需要用到uniapp內(nèi)置的跳轉(zhuǎn)方法:
這里我們先把頁(yè)面之間的跳轉(zhuǎn)關(guān)系完成,完成后,我們會(huì)在頁(yè)面之間傳遞參數(shù),再通過(guò)ajax完成動(dòng)態(tài)數(shù)據(jù)交互!
如法炮制!我們把詳情頁(yè)面也完成:
這里涉及到了一個(gè)我們非常熟悉的知識(shí):生命周期,我們需要在生命周期onload的時(shí)候,把數(shù)據(jù)注入到頁(yè)面中。
所謂生命周期就是onload,onready之類的那一套東西,這里如果細(xì)說(shuō)的話會(huì)非常的復(fù)雜。因?yàn)閛nshow,onhide在不同的.vue中,這里指APP.vue和子頁(yè)面.vue中又稍微有所不同。
這里我整理了一個(gè)列表,感興趣的同學(xué)可以研究研究。不愿意研究,其實(shí)你光掌握一個(gè)onload也足夠你應(yīng)對(duì)大多數(shù)情況了。
學(xué)會(huì)使用生命周期以后,我們接下來(lái)要進(jìn)入ajax通過(guò)端口查詢數(shù)據(jù),然后渲染到頁(yè)面上。
uniapp提供一個(gè)uni.request方法,幫助我們獲取ajax的數(shù)據(jù),請(qǐng)看例子:
uniapp的ajax使用方法就是小程序和vue的結(jié)合。這里需要注意的是,uniapp在頁(yè)面跳轉(zhuǎn)的時(shí)候,可以發(fā)送一個(gè)參數(shù),在接收的頁(yè)面中通過(guò)options.xx來(lái)接收。注意看上面的例子,是在onload生命周期中接收的,options就是onload的一個(gè)參數(shù)。
跳轉(zhuǎn)的時(shí)候,可以發(fā)現(xiàn)id就是拼接進(jìn)去的。
這里可能會(huì)遇到一個(gè)問題,那就是你從本地請(qǐng)求的端口可能會(huì)產(chǎn)生跨域的問題。
這里推薦兩種解決方法:第一個(gè),使用xhbuilder內(nèi)置的瀏覽器
第二個(gè),如果你用的是chrome瀏覽器,可以安裝跨域 插件 來(lái)解決這個(gè)問題。
這個(gè)插件的名字是:Allow-Control-Allow-Origin。如果你打不開chrome插件市場(chǎng)的話,你可能要想辦法翻墻一下。
這里還有一個(gè)問題,那就是,我們頁(yè)面頂部的title,是在路由pages.json中設(shè)置的,但是我們的數(shù)據(jù)是動(dòng)態(tài)的。
當(dāng)我們點(diǎn)擊了某一項(xiàng)的時(shí)候,需要?jiǎng)討B(tài)的修改一下標(biāo)題,這個(gè)時(shí)候需要使用uniapp提供的setNavigationBarTitle方法。
上面遺漏了一個(gè)知識(shí),就是當(dāng)我們通過(guò)ajax獲取到了內(nèi)容以后,如果這個(gè)內(nèi)容是字符串還好,但是它有可能是一個(gè)富文本,就是我們常說(shuō)的內(nèi)容詳情。
如果內(nèi)容是一段html的話,我們就不能直接放到項(xiàng)目中,那樣是無(wú)法解析出來(lái)的。這個(gè)時(shí)候我們需要使用rich-text標(biāo)簽。
這樣就可以正確解析出內(nèi)容了。
到目前為止,我們已經(jīng)完成了首頁(yè), 列表頁(yè)和詳情頁(yè)。項(xiàng)目的基礎(chǔ)功能已經(jīng)搭建完畢了,接下來(lái),我們將會(huì)進(jìn)入其他強(qiáng)大功能的學(xué)習(xí)。
因?yàn)樽罱幸恍┟?,uniapp的教程可能會(huì)暫停一段時(shí)間,這一段時(shí)期我會(huì)給大家推薦一些輕松的教程或者龍哥故事匯的一些文章,希望大家見諒哈。