微信小程序如何運維小項目

這篇文章給大家分享的是有關(guān)微信小程序如何運維小項目的內容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

我們先看下完成后的效果：

實(shí)現分析

基本功能就是做一個(gè)IP查詢(xún)的頁(yè)面，輸入ip，能夠查詢(xún)IP的詳細信息，后臺調用的淘寶的IP庫，OK，界面和功能就是這樣了，比較簡(jiǎn)單，接下來(lái)我們來(lái)介紹小程序的基本概念和使用。

第一步，先下載微信小程序開(kāi)發(fā)者工具，這個(gè)是必須的，因為只能在這個(gè)工具里去調試你的代碼，但寫(xiě)代碼不一定要在這個(gè)工具里去寫(xiě)，在Sublime 里寫(xiě)也可以，但調試你必須在這工具里，關(guān)于怎么下怎么裝這我就不多說(shuō)了，如果這步都沒(méi)搞定我覺(jué)得往下看也沒(méi)啥意義了，當然是開(kāi)個(gè)玩笑，如果有問(wèn)題的，可以給我留言。

實(shí)現方法

安裝后，第一次運行需要用微信掃描，來(lái)識別開(kāi)發(fā)者，然后添加項目，微信開(kāi)發(fā)者工具可以幫你生成一個(gè)簡(jiǎn)單的demo項目，生成項目后如圖：

我們先看app.js、app.json、app.wxss 這三個(gè)，其中

app.js 是小程序的腳本代碼,可以定義全局變量， 指定小程序的生命周期函數（onLaunch，onShow，onHide，其它），

app.json文件是配置文件，主要配置小程序的頁(yè)面，所有的頁(yè)面設置都要寫(xiě)在這個(gè)文件里

app.wxss 是公共樣式表文件。

除了這些文件，我們還有兩個(gè)目錄，這2個(gè)目錄展示的是index 頁(yè)面和 logs 頁(yè)面，每個(gè)目錄下如果完整的情況下都會(huì )有4個(gè)文件：

如上圖所示，現在每個(gè)目錄下分別是index.js、index.wxml、index.wxss，其中.js 后綴的文件是腳本文件，.json 后綴的文件是配置文件（非必須），.wxss 后綴的是樣式表文件（非必須），.wxml 后綴的文件是頁(yè)面結構文件。

以上就是小程序的基本概念了，了解了這些，就可以開(kāi)始我們的小項目開(kāi)發(fā)了。

首先我們先寫(xiě)index.wxml。

代碼如下：

因為界面我加了一部分樣式，所以要寫(xiě)index.wxss樣式文件，代碼如下：

有了這些只是個(gè)殼子，輸入IP點(diǎn)擊查詢(xún)時(shí)沒(méi)有效果的， 因為我們還需要從后臺獲取數據，現在開(kāi)始寫(xiě)我們的index.js文件，因為js文件內容比較多，我們分開(kāi)介紹，先說(shuō)下下初始化部分，

剛開(kāi)始都是空，然后是我們的核心函數，先判斷IP是否為空，如果是就提示IP不能為空，如果有IP，就調用wx.request發(fā)請求,將獲得的數據然后通過(guò)setData來(lái)賦值，如網(wǎng)絡(luò )有問(wèn)題，就報網(wǎng)絡(luò )請求失敗，代碼如下：

最后，查詢(xún)完后需要重新輸入，當用戶(hù)點(diǎn)重置時(shí)清空所有的內容，包括剛獲取的值，代碼如下：

完成以上代碼就可以在開(kāi)發(fā)者工具里調試下了，如果都正常，這個(gè)小項目就算完成了，等微信開(kāi)發(fā)公測的時(shí)候就可以傳到微信小程序市場(chǎng)里，然后每個(gè)人就可以下載去使用了。