你還不會小程序啊？手把手帶你作第一個和服務器交互的小程序

2017年的時候，騰訊推出了微信小程序，當時火的一塌糊塗，圈子裏幾乎全部的程序員都在討論小程序的話題；隨着騰訊對小程序的功的逐步開放，2018年，尤爲是在微信首頁下拉增長小程序入口以後，小程序正式爆發了。所以，2018年，應該算得上是小程序的紅利年。

首先就來推廣一下鏟屎官自制的小程序『六十四卦』

這個身輕如燕的查詢類小程序，掃描上方的二維碼便可體驗。素材內容選自『周易神課』，你們自行定奪哈。

接下來我們繼續說，這。。。一轉眼今年已經剩下不到一半了，既然說了紅利年，那還不趕忙放下手中的事情，專心的來看這篇鏟屎官精心爲你打造的『獻給尚未寫太小程序的你』這篇文章。

注意：小程序能夠要和服務器交互的哦~~~

磨刀霍霍

想要開發小程序，首先得用小程序專門的IDE：微信開發者工具，下載地址：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

請根據系統版本選擇相對應的下載便可。

下載安裝好以後，咱們打開IDE，這個時候會讓咱們掃二維碼登陸，登陸成功，界面就會長這個樣子：

咱們點擊『小程序項目』，而後咱們須要新建小程序項目，點擊右下角的+號，而後就進入了建立界面：

這裏咱們看到，有一個AppID，若是小程序沒有AppID的話，有些功能會受限制。因此，爲了全功能開發，咱們這裏就只須要去微信公衆號上面註冊一下，而後就能夠得到到這個AppID了。

微信公衆平臺地址：

https://mp.weixin.qq.com/

點擊左上角的『當即註冊』，而後選擇小程序：

接着出現以下界面：

填寫好你的郵箱，系統會給你郵箱發一封郵件：

從郵箱裏麪點擊連接，而後會進入到信息登記頁面：

如實登記，而後一切都準備好以後，就登錄到了小程序的管理頁面：

這裏，咱們須要去補充一下小程序的基本信息。點擊『填寫』按鈕，來到這個頁面：

填寫提交好以後，咱們就能夠在設置裏找到咱們的

小程序AppID

了：

那麼接下來，咱們回到以前的頁面，將小程序AppID填入。點擊創建，就來到了小程序默認的模板裏面。

這裏就簡單介紹一下這個模板的幾個模塊：

pages:

pages目錄下都是小程序的頁面，每個頁面是一個文件夾，裏面通常包含四個文件：

• page.js 頁面邏輯js文件。
• page.json 頁面配置文件，會覆蓋掉app.json文件。
• page.wxml WXML充當的就是相似HTML的角色，編寫頁面。
• page.wxss WXSS和CSS相似，具備CSS大部分特色，負責裝飾頁面元素。

utils：

一些方法在這裏面封裝的。

app.js, app.json, app.wxss：

這三個文件的功能和page目錄下每一個頁面的三個後綴同樣的文件功能相似，負責總體app的邏輯、總體app配置和總體app的頁面佈局。

project.config.json：

app的配置文件。

相關參考文檔：

https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html

Daily實戰小程序

光說不練，沒雞脖用。嘴炮誰都會打。要把科學知識落實到實際生產上來。那麼，咱們就經過小程序的實戰項目，將『【Python實戰】這一次，他經過公衆號訪問最新的1024資訊信息』文中提到的 Daily Project 來搬運到小程序上來。

首先，咱們來總體分析一下這個Daily小程序的結構：

• 首頁：展現入口
• Daily目錄：顯示當日信息。
• 內容詳情頁：展現Daily目錄的

接下來，咱們分析咱們可能會用到的組件：

• 按鈕
• 頁面跳轉
• 頁面跳轉傳參數
• 頁面的佈局
• 網絡請求
• 打開網頁
• 。。。

好，這裏咱們就先分析到這，這個Daily小程序須要用到網絡請求接口，即Daily的資料來源，我已經在個人服務器上面寫好了，這裏就提供給你們，以JSON格式返回：

http://140.143.9.16:8000/meiju/playlist/homepage

接口返回數據長這個樣子：

你們注意，這個地址不是https的，因此，在開發的時候，咱們須要在IDE的右上角，點擊『詳情』，而後在『不校驗合法域名』前面打鉤

OK，那咱們這裏就先創建兩個頁面，一個叫dailylist，另外一個叫detail。新建頁面只須要在app.json中的pages裏面把路徑輸入好就能夠。

這裏要說明一下：小程序首先啓動的頁面就是app.json 的 pages 列表中的第一個頁面。依照上圖，這裏咱們啓動的是index頁面。爲了方便調試，咱們這裏之後會修改爲啓動其餘頁面。

接着，咱們須要把原來index頁面裏的index.js文件清空整理一下，由於裏面的邏輯和咱們如今須要的不同。咱們在這個頁面寫一個Button，做爲 Daily list 頁面的入口。因此，在 index.wxml 文件中，寫入一下代碼便可：

<view class='index_container'>    <button class='index_button' bindtap='gotoDaily'>Daily Project</button></view>複製代碼

這裏簡單解釋一下，在 button 標籤中，class屬性是用來和wxss使用的，修飾樣式；bindtap 是用來增添邏輯的，是點擊事件。咱們這時候須要在 index.js 文件中完成這個 gotoDaily 邏輯。

因此，在 index.js 文件裏面，咱們建立一個函數，函數名字就叫 gotoDaily ，要保證函數名字和 wxml 文件裏面寫的 bindtap 變量名字如出一轍。

這個Button的邏輯是頁面跳轉，微信小程序提供兩種頁面跳轉的方法：

• wx.navigateTo，經過這個方法從A頁面跳轉到B頁面，B頁面是能夠從左上角的返回按鈕返回到A頁面的。
• wx.redirectTo，這個方法從A頁面跳到B頁面，A頁面會被銷燬，沒法從B頁面跳回A頁面。

兩個方法中，經過 url 參數來設置頁面路徑。這裏就有微信裏面絕對路徑和相對路徑兩種寫法了。

// 絕對路徑寫法    wx.navigateTo({      url: '/pages/dailylist/dailylist',    })    //相對路徑寫法    wx.navigateTo({      url: '../dailylist/dailylist',    })複製代碼

這裏頁面跳轉，用相對路徑寫法就能夠。至於頁面跳轉之間是支持傳遞參數的，傳遞參數的方法以下：

// A頁面傳遞參數    wx.redirectTo({      url: '../detailpage/detailpage?id=' + this.data.id,    })    // B頁面讀取參數    onLoad: function (options) {        this.setData({          checkNum: options.checkNum        })    }複製代碼

wx.navigateTo 和 wx.redirectTo 的文檔說明：

https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html

好咧，目前咱們就已經實現了在首頁寫一個按鈕，點擊按鈕，進入到了 Daily list 頁面。

那麼咱們在 Daily list 頁面，須要經過我上面寫的那個地址來獲取數據，而且展現到頁面上。這裏就涉及到了微信小程序的網絡請求了： wx.request。

咱們這裏是向服務器發送一個GET請求便可。而後解析返回結果便可，這裏的代碼張下面這個樣子：

/**   * 頁面的初始數據   */  data: {    hasData: false,    curTime: new String(),    dailyData: new Array  },  /**   * 生命週期函數--監聽頁面加載   */  onLoad: function (options) {    var that = this;    wx.request({      url: 'http://140.143.9.16:8000/meiju/playlist/homepage',      method: 'GET',      header: {        "Content-Type": "application/json"      },      success: function(res) {        that.setData({          hasData: true,          // 這裏很關鍵，調用data.data才能夠          dailyData: res.data.data        })      },      fail: function(res) {      }    })  },複製代碼

這樣，咱們就在 page 的 data 裏面，將請求回來的數據保存下來。接下來，就是在頁面上面渲染了。這裏就涉及到微信小程序的數據綁定怎麼寫，在 wxml 文件裏面寫的大體以下（裏面有for循環的寫法）：

<view class='list_container'>    <block wx:if="{{hasData==true}}">        <text>最新美劇排行榜：</text>        <view class='list_data'>            <block wx:for="{{dailyData}}" wx:key="unique">                <text class="list_item" bindtap='gotoDetail' data-url="{{item.tv_play_name}}">TOP {{index + 1}}: {{item.tv_play_name}}</text>            </block>        </view>    </block>    <block wx:else>        <text>加載中。。。</text>    </block></view>複製代碼

效果以下：

這裏簡單給你們講一下：
微信小程序的數據綁定格式，是用 {{}} 來包裹的，裏面的名字，是在page的data裏面定義的。wxml支持一些簡單的邏輯判斷，好比 if 判斷和 for循環，上面的例子就完美的展現了這兩種邏輯的使用寫法。其中，for循環的使用，{{index}}直接表示的是每個item對應的index值。item.post_title也能夠寫成item['post_title']。

咱們須要給每個text綁定一個點擊事件，這裏的點擊事件最大的不一樣就是，點擊事件須要傳遞參數，這裏咱們經過dataset來傳遞，這裏咱們看到在text標籤裏面，有一個屬性是 data-url ，這個就是dataset的使用方法。 data- + 任意名字。在js頁面，咱們須要實現gotoDetail方法。代碼以下：

gotoDetail: function(event) {        console.log(event)        var data_url = event.currentTarget.dataset.url        wx.navigateTo({          url: '../detail/detail?dataurl=' + data_url,        })    },複製代碼

這樣是否是就很明顯了？ 經過event參數的currentTarget.dataset.url來獲取頁面中的data-url，而後再經過頁面之間的參數傳遞，將url傳遞給detail頁面。

這裏有個小技巧，若是不清楚event裏面含有什麼東西的話，用console.log(event)是能夠打印出來裏面的結構的，以下圖：

有同窗確定會問，這個界面是怎麼出來的，別慌，這個界面就是調試器裏面的console界面，入口在IDE的左上角：

目前爲止，咱們的 Daily list 頁面的編寫就結束了，下一步就是來開發 detail 頁面了。

咱們須要在 detail 頁面裏打開一個url。要作到這一點，微信小程序爲咱們提供了<web-view> 控件。這個頁面的寫法也很簡單，咱們只須要將從 Daily list 頁面傳過來的url塞給 web-view 就能夠了。咱們在detail.wxml裏面寫：

<web-view class='detail_webview' src="{{pageurl}}"></web-view>複製代碼

便可，在detail.js文件裏面，經過前文將的獲取頁面傳參數據的方法，將url獲取出來，而後設置到 page 的data數據中就能夠了。

Page({  /**   * 頁面的初始數據   */  data: {    pageurl: new String()  },  /**   * 生命週期函數--監聽頁面加載   */  onLoad: function (options) {    var that = this    console.log(options)    that.setData({      pageurl:options.dataurl    })  }})複製代碼

啊哈，目前來講，咱們的開發就算完成了！是否是超級簡單？？下面在模擬器裏面看一下效果：

是否是很酷炫？小程序是否是開發起來很簡單？並且邏輯都很清晰，用到的知識點其實並不算多，只不過就是將簡單的知識點串聯起來，就能夠組成一個功能酷炫的App。

後續，若是寫完小程序，想發佈怎麼整？

發佈

每次寫完一個版本，都是能夠提交代碼的。在IDE的上面，有一個『上傳』按鈕，點擊以後，出來一個對話框:

選擇『肯定』，而後在裏面填寫正確格式的版本號描述：

而後點擊上傳。上傳的代碼，在微信公衆平臺網頁版的小程序管理後臺裏面的『開發管理』能夠看打了。

而後咱們選擇相對於的版本『提交審覈』就能夠了，在隨後的頁面，填寫相對應的正確的信息就能夠了。

以我我的的提交經從來看，審覈速度其實挺慢的，通常來講須要一天的時間吧，固然，也有審覈很快的小程序。可是個人『六十四卦』小程序審覈很慢。

審覈成功，就能夠全量發佈了。審覈成功以後的界面，就應該是這個樣子：

這樣你就能夠告訴親戚朋友，叔叔阿姨，學長學妹，同事領導，大爺大媽們，你的小程序上線了，他們能夠掃描二維碼使用，或者在小程序裏面搜索名字找到入口。

總結

好了，說了這麼多了，我相信好多人都買有看到這裏。爲了獎勵看到這裏的人，我特地給你們在小程序裏面留了一個彩蛋。

下面的那個

『search poster』

是幹嗎的？我壓根就沒說，啊哈哈哈哈哈。我已經把代碼提交了，感興趣的同窗，能夠下載下來在本身的機器上跑一下，你就知道鏟屎官的彩蛋究竟是什麼了。啊哈哈哈哈。

文末小福利，阿里雲優惠券免費領取:

https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=nrkmbo9q

算下來一年的服務器能便宜一百多，超級划算。

老樣子，獲取代碼的方式：關注微信公衆號『皮爺擼碼』，而後進入回覆

『代碼』

，便可找到你想要的代碼。若是有什麼疑問，能夠點擊公衆號下方菜單裏面的

『進羣交流』

，或者回復

『進羣』

，裏面會詳細的說進羣方法，到時候你們能夠一塊兒交流。

密密麻麻的寫了一大堆，感謝你們的耐心觀看，但願可以給你帶來幫助。