|
導(dǎo)讀微信小程序,簡(jiǎn)稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或搜一下即可打開(kāi)應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一... 微信小程序,簡(jiǎn)稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或搜一下即可打開(kāi)應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一項(xiàng)門檻非常高的創(chuàng)新,經(jīng)過(guò)將近兩年的發(fā)展,已經(jīng)構(gòu)造了新的小程序開(kāi)發(fā)環(huán)境和開(kāi)發(fā)者生態(tài)。 這篇文章主要介紹了微信小程序?qū)崙?zhàn)之運(yùn)維小項(xiàng)目,就是利用微信小程序?qū)崿F(xiàn)了一個(gè)類似138的功能,輸入IP就可以查看IP的詳細(xì)信心,有需要的朋友可以參考借鑒,下面來(lái)一起看看吧。前言 自從微信推出小程序以來(lái),現(xiàn)在業(yè)界炒的非常的火,具說(shuō)叫微信小程序是因?yàn)槟彻静蛔尳袘?yīng)用號(hào),我在朋友圈也看過(guò)pony的和張小龍朋友圈關(guān)于名字的討論截圖,不知道是真是假,反正名字是定了,叫啥無(wú)所謂,還是知道它是干啥的比較重要, 像網(wǎng)上說(shuō)什么新風(fēng)口了,原生APP以后沒(méi)活路了等相關(guān)文章喜歡的可以多看看, 我們今天不會(huì)在產(chǎn)品層面上去介紹小程序,因?yàn)槲覀兪歉氵\(yùn)維的,所以我還是在運(yùn)維層面怎么使用小程序。 今天我們用實(shí)際例子來(lái)講解和普及小小程序如何使用,來(lái)實(shí)現(xiàn)類似IP138的功能,輸入IP可以查看IP的詳細(xì)信息,包括歸屬,地點(diǎn)等。 我們先看下完成后的效果:
實(shí)現(xiàn)分析 基本功能就是做一個(gè)IP查詢的頁(yè)面,輸入ip,能夠查詢IP的詳細(xì)信息,后臺(tái)調(diào)用的淘寶的IP庫(kù),OK,界面和功能就是這樣了,比較簡(jiǎn)單,接下來(lái)我們來(lái)介紹小程序的基本概念和使用。 第一步,先下載微信小程序開(kāi)發(fā)者工具,這個(gè)是必須的,因?yàn)橹荒茉谶@個(gè)工具里去調(diào)試你的代碼,但寫代碼不一定要在這個(gè)工具里去寫,在Sublime 里寫也可以,但調(diào)試你必須在這工具里,關(guān)于怎么下怎么裝這我就不多說(shuō)了,如果這步都沒(méi)搞定我覺(jué)得往下看也沒(méi)啥意義了,當(dāng)然是開(kāi)個(gè)玩笑,如果有問(wèn)題的,可以給我留言。 實(shí)現(xiàn)方法 安裝后,第一次運(yùn)行需要用微信掃描,來(lái)識(shí)別開(kāi)發(fā)者,然后添加項(xiàng)目,微信開(kāi)發(fā)者工具可以幫你生成一個(gè)簡(jiǎn)單的demo項(xiàng)目,生成項(xiàng)目后如圖:
我們先看app.js、app.json、app.wxss 這三個(gè),其中 app.js 是小程序的腳本代碼,可以定義全局變量, 指定小程序的生命周期函數(shù)(onLaunch,onShow,onHide,其它), app.json文件是配置文件,主要配置小程序的頁(yè)面,所有的頁(yè)面設(shè)置都要寫在這個(gè)文件里 app.wxss 是公共樣式表文件。 除了這些文件,我們還有兩個(gè)目錄,這2個(gè)目錄展示的是index 頁(yè)面和 logs 頁(yè)面,每個(gè)目錄下如果完整的情況下都會(huì)有4個(gè)文件: 如上圖所示,現(xiàn)在每個(gè)目錄下分別是index.js、index.wxml、index.wxss,其中.js 后綴的文件是腳本文件,.json 后綴的文件是配置文件(非必須),.wxss 后綴的是樣式表文件(非必須),.wxml 后綴的文件是頁(yè)面結(jié)構(gòu)文件。 以上就是小程序的基本概念了,了解了這些,就可以開(kāi)始我們的小項(xiàng)目開(kāi)發(fā)了。 首先我們先寫index.wxml。 代碼如下:
因?yàn)榻缑嫖壹恿艘徊糠謽邮剑砸獙慽ndex.wxss樣式文件,代碼如下:
有了這些只是個(gè)殼子,輸入IP點(diǎn)擊查詢時(shí)沒(méi)有效果的, 因?yàn)槲覀冞需要從后臺(tái)獲取數(shù)據(jù),現(xiàn)在開(kāi)始寫我們的index.js文件,因?yàn)閖s文件內(nèi)容比較多,我們分開(kāi)介紹,先說(shuō)下下初始化部分,
剛開(kāi)始都是空,然后是我們的核心函數(shù),先判斷IP是否為空,如果是就提示IP不能為空,如果有IP,就調(diào)用wx.request發(fā)請(qǐng)求,將獲得的數(shù)據(jù)然后通過(guò)setData來(lái)賦值,如網(wǎng)絡(luò)有問(wèn)題,就報(bào)網(wǎng)絡(luò)請(qǐng)求失敗,代碼如下:
最后,查詢完后需要重新輸入,當(dāng)用戶點(diǎn)重置時(shí)清空所有的內(nèi)容,包括剛獲取的值,代碼如下:
完成以上代碼就可以在開(kāi)發(fā)者工具里調(diào)試下了,如果都正常,這個(gè)小項(xiàng)目就算完成了,等微信開(kāi)發(fā)公測(cè)的時(shí)候就可以傳到微信小程序市場(chǎng)里,然后每個(gè)人就可以下載去使用了。 關(guān)于小程序的內(nèi)容我就介紹到這里,我這里就算是拋磚引玉了,喜歡的小伙伴可以幫忙轉(zhuǎn)發(fā)下,讓更多的小伙伴可以學(xué)習(xí)到新的知識(shí),另外因?yàn)樾〕绦蚴欠浅P碌臇|西,想更深入了解的可以去看小程序的官方文檔。 以上就是微信小程序?qū)崙?zhàn)運(yùn)維小項(xiàng)目代碼分享的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章! 小程序是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想,用戶掃一掃或者搜一下即可打開(kāi)應(yīng)用。 |
溫馨提示:喜歡本站的話,請(qǐng)收藏一下本站!