點擊下面網址進入系列教程
10天零基礎入門小程序系列教程
上一節帶領大家實現了網絡數據的獲取，這節就來帶大家解析我們獲取到的json數據，並把數據填充到我們的頁面上。
學前準備
- 1，需要了解css（只需要瞭解就行）
- 2，需要對上一節的代碼有初步瞭解。
我們本節代碼完全基於上節代碼
上一節課傳送門
本節知識點
- 1，網絡數據的解析
- 2，填充網絡數據到我們到首頁列表
- 3，css的簡單使用（讓頁面好看起來）
一，解析網絡請求到的數據
獲取到的網絡數據
上圖是我們上一節獲取到的網絡數據在調試器裏的打印。
我們對獲取到的數據做下格式化，如下
{
"code": 100,
"msg": "成功",
"data": [
{
"aid": 0,
"title": "零基礎入門小程序001----開發屬於自己的第一個小程序",
"content": "小程序開發我們需要下載相應的開發工具，個人比較推薦的是微信官方出的開發工具。畢竟是官方工具。\n首先貼出官方開發工具下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html\n\n至於怎麼安裝就不用我說了。下載下來後雙擊就可以安裝了。安裝後需要掃碼登錄。掃碼登錄後的界面如下。\n\n\n項目名字可以隨便填，很多剛入門小程序開發的人會有疑慮，我沒有註冊小程序能直接開發嗎。這裏明確的告訴你，沒有註冊小程序也是可以學習開發小程序的。只需要按照我上圖所示點擊無appid體驗即可。\n\n## 下面是小程序開發工具的界面\n\n\n到這裏我們的武器便裝備好了，接下來開始爲武器填充子彈了。\n## 接下來帶領大家零基礎入門自己的第一個簡單小程序。\n由於是入門所以我們的小程序比較簡單主要包含以下功能\n- 兩個頁面：首頁，個人中心頁\n- 底部tab實現\n- 頂部標題設置\n\n\n### 一，代碼目錄\n\n\n### 二，展開講解\n- images：目錄用來存放一些我們的圖片資源，如項目裏底部tab的圖標，就放在這裏。\n- pages： 這裏是我們寫小程序的主要代碼目錄，目前我們有兩個頁面首頁和個人中心頁。\n- app.json: 我們小程序的一些全局配置都在這裏。如我們底部的兩個tab就是在這裏配置的。\n\n### 三，小程序開發三劍客\n我們開發小程序需要創建三個對應的文件，比如我們創建首頁index。在index下需要創建如下三個文件\n\n這三個文件就是我們開發小程序必不可少的三劍客\n- index.wxml:確定首頁的大體模樣。比如我們建大樓，這裏的代碼來確定樓長什麼樣，多高，多寬，多少層等。\n- index.wxss:這裏主要做一些樣式的設置，如我們的樓外觀，需要貼什麼樣的瓷磚，刷什麼顏色。\n- index.js:用來處理我們首頁的一些事件，讓首頁具備某些能力。如我們樓裏有遊樂場，電影院等。通過js來處理這些事件。\n這就是我們首頁的大致。下面帶大家看下簡單代碼\n```\n<!--index.wxml-->\n<view style=\"color:blue; \">\n 我是傳說中的首頁\n</view>\n```\n這就是index.wxml,這裏我們只是簡單展示一段話。\nindex.wxss和index.js用的是默認的，沒有什麼東西，這裏就不貼出來了，大家想看可以下載源碼看。\n\n### 四，看下app.json都配置了些什麼\n```\n// app.json\n{\n // 設置我們小程序的頁面：首頁，個人中心\n \"pages\": [\n \"pages/index/index\",\n \"pages/me/me\"\n ],\n // 設置標題欄字體顏色等信息\n \"window\": {\n \"backgroundTextStyle\": \"light\",\n \"navigationBarBackgroundColor\": \"#fff\",\n \"navigationBarTitleText\": \"30天入門小程序01\",\n \"navigationBarTextStyle\": \"black\"\n },\n // 底部模塊tab\n \"tabBar\": {\n \"list\": [{\n \"pagePath\": \"pages/index/index\",\n \"text\": \"首頁\",\n \"iconPath\": \"/images/tab1n.png\",\n \"selectedIconPath\": \"/images/tab1y.png\"\n },\n {\n \"pagePath\": \"pages/me/me\",\n \"text\": \"我的\",\n \"iconPath\": \"/images/tab2n.png\",\n \"selectedIconPath\": \"/images/tab2y.png\"\n\n }]\n }\n}\n```\n\n 個人中心裏的代碼就不貼出來啦，大家下載源碼看下就行。\n\n#### 入門第一節課，不需要大家知道太多，按照源碼裏，大致看下，瞭解下小程序的代碼長什麼樣子就行。其實很簡單。\n今天就到這裏，接下來的課程我會盡量錄成視頻，感覺文章不太形象。對於新手來說，視頻學起來可能效率更高些。\n\n\n我以後會把每一節的代碼放到百度網盤供大家下載\n源碼:https://pan.baidu.com/s/1uG63tvDj41KlRvGMe3NNSg 密碼:i778\n如果連接失效請加我微信2501902696（備註小程序）",
"readNum": "1111",
"createTime": "2018-04-27 19:55:49.0",
"author": "小石頭",
"classify": "零基礎學小程序"
},
{
"aid": 1,
"title": "零基礎入門小程序002---開發簡單的計算器",
"content": "上一節和大家一起寫出了屬於自己的第一個小程序，這節就帶大家寫出自己的第一個簡單計算器。由於是入門，這裏先教大家簡單的加法運算。效果圖如下\n實現起來特別簡單，代碼也特別少，就下面三個\n- index.wxml：上圖的佈局視圖頁\n- index.js：實現加法邏輯的頁面\n- app.json：一些全局的配置。基本是都是默認的這裏不用管\n\n下面就帶帶大家敲出屬於自己的計算器小程序代碼。\n### 1，先看index.wxml，是不是代碼特別少\n```\n<!--index.wxml -->\n<input placeholder=\"請輸入數字a\" bindinput=\"inputa\" />\n<text>+</text>\n<input placeholder=\"請輸入數字b\" bindinput=\"inputb\" />\n<button bindtap='sum'>計算</button>\n<text>結果爲：{{result}}</text>\n```\n代碼雖然少，但是作爲剛入門的你，看起來可能很茫然，下面詳細給大家講下。\n```\n<input placeholder=\"請輸入數字a\" bindinput=\"inputa\" /> \n<input placeholder=\"請輸入數字b\" bindinput=\"inputb\" />\n```\n就是我們輸入數字a的輸入框，這裏input就是我們認識的第一個小程序組件。\ninput的官方簡介如下：https://developers.weixin.qq.com/miniprogram/dev/component/input.html\nplaceholder：設置默認顯示文字（當我們輸入文字時，默認的就沒有了）\nbindinput=\"inputa\"：定義一個inputa方法來獲取input的輸入內容。在index.js中會用到\n- <text>+</text> \n這裏的<text>組件是用來顯示文本的這裏我們只是爲了顯示一個 + 號\n```\n<button bindtap='sum'>計算</button>\n```\n這裏是個按鈕<button>就是我們的計算按鈕\nbindtap='sum'：定義個叫sum的方法，用來計算結果在index.js中會用到\n\n- <text>結果爲：{{result}}</text>\n{{result}} 這種寫法，是小程序用來綁定數據用的，這裏用來顯示我們的計算結果用的，\n#### 上面代碼和對應的顯示如下：\n\n\n## 2，再來看index.js，我們加法的邏輯實現\n可以看到我們在index.wxml裏定義的bindinput=\"inputa\"，bindtap='sum'在下面有用到\n```\nPage({\n /**\n * 頁面的初始數據\n * 初始化兩個輸入值\n */\n data: {\n input1: 0,\n input2: 0\n },\n //獲取用戶輸入的值a\n inputa: function (e) {\n this.setData({\n input1: e.detail.value\n })\n },\n //獲取用戶輸入的值b\n inputb: function (e) {\n this.setData({\n input2: e.detail.value\n })\n },\n // 拿到兩個輸入值以後求和\n sum: function (e) {\n var a = parseInt(this.data.input1);\n var b = parseInt(this.data.input2);\n // 求和\n var sumResult = a + b\n this.setData({\n // 把結果賦值到sum標籤上\n result: sumResult\n })\n }\n})\n```\nindex.js的代碼不多，大家可以先照着敲一下。學小程序前期不需要你理解，但是一定要多敲多練。\n這裏的邏輯用文字寫出來，估計大家新入門時還是不太好理解，我會錄視頻來給大家講解。\n源碼地址：鏈接:https://pan.baidu.com/s/1ulgabXKwXh5vu7DHUOyNNQ 密碼:ud86\n有問題加我微信：2501902696\n\n\n\n\n###系列課程\n- [零基礎入門小程序001----開發屬於自己的第一個小程序](https://www.jianshu.com/p/275eaf4d1921)",
"readNum": "111",
"createTime": "2018-04-27 19:58:15.0",
"author": "小石頭",
"classify": "零基礎學小程序"
},
{
"aid": 2,
"title": "零基礎學小程序003----請求服務器數據，請求後臺json數據",
"content": "我們開發小程序，肯定不是簡簡單單的寫一些頁面，肯定會設計到一些和後臺服務器的交互，今天就帶大家來學習小程序請求後臺數據。\n學習要點\n- 1，通過https請求後臺數據\n- 2，解析json數據\n- 3，獲取https數據\n\n接口url：\nhttps://30paotui.com\nhttps://30paotui.com/buyer/product/list\n\n### 一，我們通常請求後臺的數據如下：\n\n\n\n\n\n就是通過後臺提供一個接口url，然後我們通過http獲取https請求獲取到後臺數據，或則提交一些數據給後臺。\n\n### 二，小程序請求後臺json數據代碼實現\n\n先看效果圖\n\n\n\n實現代碼api.js\n```\n\nPage({\n\n /**\n * 頁面的初始數據\n */\n data: {\n \n },\n //請求簡單數據\n getData:function(e){\n console.log('開始加載服務器數據')\n var that = this;\n var jsonStr = \"\";\n wx.request({\n url: 'https://30paotui.com',\n header: {\n 'content-type': 'application/json' // 默認值\n },\n success: function (res) {\n console.log(res.data)\n //json對象轉字符串\n jsonStr = JSON.stringify(res.data)\n\n that.setData({\n text: '後臺返回的數據如下: \\n'+jsonStr,\n })\n }\n\n })\n },\n//請求複雜json數據\n getjson: function (e) {\n console.log('開始加載服務器數據')\n var that = this;\n var jsonStr = \"\";\n wx.request({\n url: 'https://30paotui.com/buyer/product/list',\n header: {\n 'content-type': 'application/json' // 默認值\n },\n success: function (res) {\n console.log(res.data)\n //json對象轉字符串\n jsonStr = JSON.stringify(res.data)\n\n that.setData({\n json: '後臺返回的數據如下: \\n' + jsonStr,\n })\n }\n\n })\n },\n\n\n})\n```\napi.wxml\n```\n<button bindtap='getData'>https請求簡單數據</button>\n<text>{{text}}</text>\n<button bindtap='getjson'>請求後臺json數據</button>\n<text>{{json}}</text>\n```\n\n\n由於是入門，所以代碼特別少，但是基本的請求後臺數據的功能都實現了\n\n源碼連接鏈接:百度網盤\nhttps://pan.baidu.com/s/12tnVDLy_usvw_r6Zg9ilgQ 密碼:4g9c\n",
"readNum": "1234",
"createTime": "2018-04-27 20:02:05.0",
"author": "小石頭",
"classify": "零基礎學小程序"
},
{
"aid": 3,
"title": "零基礎學小程序004----小程序post請求，提交數據到服務器，小程序下單，小程序用戶註冊功能",
"content": "由於這段時間工作比較忙，小程序入門系列課程一直沒有更新，今天好不容易抽個時間來更新系列教程，今天的這個教程對大家很有用，涉及到和後臺服務器的數據交互。\n- 不多說，先看效果圖\n\n### 技術要點\n- 姓名，手機號，地址爲空驗證\n- post請求\n- 簡單的下單功能實現\n- api數據解析\n- post提交參數有數組時的問題解決\n\n## 一，簡單頁面佈局\n簡單的把頁面佈局寫出來\n```\n<!-- order.wxml -->\n<view class=\"login\">\n <form bindsubmit=\"formSubmit\">\n <input name=\"name\" class=\"login-input\" type=\"text\" placeholder=\"請輸入姓名\" />\n <input name=\"mobile\" class=\"login-input\" type=\"number\" placeholder=\"請輸入手機號\" />\n <input name=\"address\" class=\"login-input\" type=\"text\" placeholder=\"請輸入地址\" />\n <button class=\"btn_login\" formType=\"submit\">提交訂單</button>\n </form>\n</view>\n```\n主要是幾個input輸入框\n\n## 二，做提交數據的簡單校驗\n```\n if (e.detail.value.name.length == 0) {\n this.showErrorToast('姓名不能爲空')\n } else if (e.detail.value.mobile.length == 0) {\n this.showErrorToast('手機號不能爲空')\n } else if (e.detail.value.mobile.length != 11) {\n this.showErrorToast('請輸入11位手機號碼')\n } else if (e.detail.value.address.length ==0) {\n this.showErrorToast('地址不能爲空!')\n } \n```\n 主要判斷name，phone，address是否爲空，手機號是否符合11位。\n\n## 三，先說一下api\nurl：https://30paotui.com/buyer/order/create\n請求類型：post\n提交參數格式如下\n```\nopenid:小程序小石頭\nphone:12345678901\nname:夏天\naddress:杭州市臨平街道\nitems:[{productId:1,productQuantity:2},{productId:2,productQuantity:2}]\n ```\npost請求後服務器返回json如下\n - 成功\n```\n{\n \"code\": 100,\n \"msg\": \"成功\",\n \"data\": {\n \"orderID\": \"1529819130135395193\"\n }\n}\n```\n - 失敗\n```\n{\n \"timestamp\": \"2018-06-24T04:34:33.413+0000\",\n \"status\": 500,\n \"error\": \"Internal Server Error\",\n \"message\": \"微信id必傳\",\n \"path\": \"/buyer/order/create\"\n}\n```\n比如我openid參數傳空\n\n\n## 四，提交數據到服務器（下單）\n這裏是重點，不管是註冊用戶，用戶提交訂單，提交數據到後臺都是一樣的原理，把這裏學會了，你以後再做數據提交也就都會了\n```\nformSubmit: function(e) {\n if (e.detail.value.name.length == 0) {\n this.showErrorToast('姓名不能爲空')\n } else if (e.detail.value.mobile.length == 0) {\n this.showErrorToast('手機號不能爲空')\n } else if (e.detail.value.mobile.length != 11) {\n this.showErrorToast('請輸入11位手機號碼')\n } else if (e.detail.value.address.length ==0) {\n this.showErrorToast('地址不能爲空!')\n } else {\n // post提交表單\n wx.request({\n url: 'https://30paotui.com/buyer/order/create',\n header: {\n \"Content-Type\": \"application/x-www-form-urlencoded\"\n },\n method: \"POST\",\n data: {\n openid: 'qclqclqcl', //這裏先寫死微信id\n phone: e.detail.value.mobile,\n name: e.detail.value.name,\n address: e.detail.value.address,\n items: JSON.stringify([{\n productId: 1,\n productQuantity: 2\n }, {\n productId: 2,\n productQuantity: 2\n }])\n },\n success: function(res) {\n console.log(res)\n if (res.statusCode != 200) {\n wx.showToast({ //這裏提示失敗原因\n title: res.data.message,\n icon: 'loading',\n duration: 1500\n })\n } else {\n wx.showToast({\n title: '訂單提交成功', //這裏成功\n icon: 'success',\n duration: 1000\n })\n }\n },\n fail: function(res) {\n console.log(fail)\n wx.showToast({\n title: '請求失敗',\n icon: 'none',\n duration: 1500\n })\n }\n\n })\n }\n },\n```\n #### 幾點注意\n- 1，這裏的formSubmit函數名對應wxml文件裏的\n```\n <form bindsubmit=\"formSubmit\">\n```\n- 2,post提交的參數中有數組的話，需要用JSON.stringify（）方法把數組轉化爲string\n```\nitems: JSON.stringify([{\n productId: 1,\n productQuantity: 2\n }, {\n productId: 2,\n productQuantity: 2\n}])\n```\n\n到這裏就可以實現下單功能了\n\n### 下面貼出來完整代碼\n```\n// order.js\nPage({\n data: {},\n showErrorToast: function(e) {\n wx.showModal({\n title: '提示！',\n confirmText: '朕知道了',\n showCancel: false,\n content: e,\n success: function(res) {\n if (res.confirm) {\n console.log('用戶點擊確定')\n }\n }\n })\n },\n formSubmit: function(e) {\n if (e.detail.value.name.length == 0) {\n this.showErrorToast('姓名不能爲空')\n } else if (e.detail.value.mobile.length == 0) {\n this.showErrorToast('手機號不能爲空')\n } else if (e.detail.value.mobile.length != 11) {\n this.showErrorToast('請輸入11位手機號碼')\n } else if (e.detail.value.address.length ==0) {\n this.showErrorToast('地址不能爲空!')\n } else {\n // post提交表單\n wx.request({\n url: 'https://30paotui.com/buyer/order/create',\n header: {\n \"Content-Type\": \"application/x-www-form-urlencoded\"\n },\n method: \"POST\",\n data: {\n openid: 'qclqclqcl', //這裏先寫死微信id\n phone: e.detail.value.mobile,\n name: e.detail.value.name,\n address: e.detail.value.address,\n items: JSON.stringify([{\n productId: 1,\n productQuantity: 2\n }, {\n productId: 2,\n productQuantity: 2\n }])\n },\n success: function(res) {\n console.log(res)\n if (res.statusCode != 200) {\n wx.showToast({ //這裏提示失敗原因\n title: res.data.message,\n icon: 'loading',\n duration: 1500\n })\n } else {\n wx.showToast({\n title: '訂單提交成功', //這裏成功\n icon: 'success',\n duration: 1000\n })\n }\n },\n fail: function(res) {\n console.log(fail)\n wx.showToast({\n title: '請求失敗',\n icon: 'none',\n duration: 1500\n })\n }\n\n })\n }\n },\n})\n```\n下圖是數據提交成功後，服務器上的數據\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",
"readNum": "1111",
"createTime": "2018-06-24 13:56:48.0",
"author": "小石頭",
"classify": "零基礎學小程序"
},
{
"aid": 4,
"title": "零基礎學小程序005---小程序登陸註冊功能實現",
"content": "上一節給大家將來post提交數據，如果沒看的請移步下面\n[零基礎學小程序004----小程序post請求，提交數據到服務器，小程序下單，小程序用戶註冊功能](https://www.jianshu.com/p/a6eb370d60c7)\n上一節雖然有提到小程序用戶註冊與登陸功能，但是篇幅有限，就沒詳細寫。今天就來給大家詳細講解下小程序的註冊與登陸功能實現。\n- 不多說，先看效果圖\n\n\n# 實現功能點\n- 1，輸入內容的獲取\n- 2，註冊功能\n- 3，登陸功能\n下面就逐個功能點給大家講解。\n# 先說下登陸和註冊的基本原理\n登陸和註冊，肯定需要我們獲取輸入的用戶名和密碼。然後把用戶名和密碼傳到服務器後臺，後臺把用戶名和密碼存到數據庫裏，存入成功就返回註冊成功的信息，\n以後登陸時就可以直接查詢用戶是否存在，存在就比對密碼，如果密碼一致，就返回登陸成功的信息。\n# 一，獲取輸入內容\n先看下佈局index.xml\n```\n<!--index.wxml-->\n<input class='inputA' placeholder=\"請輸入用戶名\" bindinput=\"inputName\" />\n<input class='inputA' placeholder=\"請輸入密碼\" password='true' bindinput=\"inputPassword\" />\n<button wx:if=\"{{!isLogin}}\" type='primary' bindtap='register'>註冊</button>\n<button wx:if=\"{{isLogin}}\" type='primary' bindtap='login'>登陸</button>\n```\n注意點：\n- bindinput=\"inputName\" 中的inputName對應index.js裏的inputName（）函數，用來獲取輸入的用戶名\n- bindinput=\"inputPassword\" 中的inputPassword對應index.js裏的inputPassword（）函數，用來獲取輸入的用戶名\n下面貼出這兩個函數\n```\n //獲取用戶輸入的值a\n inputName: function(e) {\n inputName = e.detail.value;\n },\n //獲取用戶輸入的值b\n inputPassword: function(e) {\n inputPassword = e.detail.value;\n console.log(\"輸入的密碼：\" + inputPassword);\n },\n```\n到這裏我們就可以獲取到輸入的用戶名和密碼了。\n\n# 二，對輸入的用戶名和密碼做校驗\n注意校驗用戶名不能爲空，密碼不能爲空，密碼不能少於6位數。\n校驗代碼如下：\n```\n //檢測輸入值\n checkInput: function() {\n if (inputName == \"\" || inputName == null ||\n inputName == undefined) {\n this.showErrorToastUtils('請輸入用戶名');\n } else if (inputPassword == \"\" || inputPassword == null || inputPassword == undefined) {\n this.showErrorToastUtils('請輸入密碼');\n } else if (inputPassword.length < 6) {\n this.showErrorToastUtils('密碼至少要6位');\n }\n return true;\n },\n```\n當用戶名和密碼都符合規則時，返回true。說明輸入的用戶名和密碼合法。\n\n# 三，註冊功能的實現\n註冊就需要我們請求後臺註冊接口了。\n```\n // 註冊\n register: function() {\n var that = this;\n var isrightful = that.checkInput();\n if (isrightful) {\n wx.request({\n url: 'http://localhost:8080/user/testSave',\n header: {\n \"Content-Type\": \"application/x-www-form-urlencoded\"\n },\n method: \"POST\",\n data: {\n name: inputName,\n password: inputPassword\n },\n success: function(res) {\n console.log(res)\n if (res.statusCode != 200) {\n wx.showToast({ //這裏提示失敗原因\n title: res.data.message,\n icon: 'loading',\n duration: 1500\n })\n } else {\n wx.showToast({\n title: '註冊成功', //這裏成功\n icon: 'success',\n duration: 1000\n });\n that.setData({\n isLogin: true,\n }\n )\n }\n },\n fail: function(res) {\n console.log(res)\n wx.showToast({\n title: '請求失敗',\n icon: 'none',\n duration: 1500\n })\n }\n });\n }\n },\n```\n注意點：\nif (res.statusCode != 200) 這裏我們判斷後臺返回的statusCode，只有statusCode等於200時，才說明我們註冊成功，下面時註冊成功後後臺返回的信息\n\n\n# 四，登陸功能實現\n登陸其實和註冊都是把用戶名和密碼傳到後臺，只不過登陸時，先那用戶名去數據庫裏查，看是否存在這個用戶。\n如果存在，就去比對我們傳的密碼和數據庫裏存的密碼是否一樣，如果一樣就登陸成功，返回登陸信息。\n\n\n## 下面貼出完整代碼index.js\n```\nvar inputName = \"\";\nvar inputPassword = \"\";\nPage({\n /**\n * 頁面的初始數據\n * 初始化兩個輸入值\n */\n data: {\n isLogin: false\n },\n //獲取用戶輸入的值a\n inputName: function(e) {\n inputName = e.detail.value;\n },\n //獲取用戶輸入的值b\n inputPassword: function(e) {\n inputPassword = e.detail.value;\n console.log(\"輸入的密碼：\" + inputPassword);\n },\n // 註冊\n register: function() {\n var that = this;\n var isrightful = that.checkInput();\n if (isrightful) {\n wx.request({\n url: 'http://localhost:8080/user/testSave',\n header: {\n \"Content-Type\": \"application/x-www-form-urlencoded\"\n },\n method: \"POST\",\n data: {\n name: inputName,\n password: inputPassword\n },\n success: function(res) {\n console.log(res)\n if (res.statusCode != 200) {\n wx.showToast({ //這裏提示失敗原因\n title: res.data.message,\n icon: 'loading',\n duration: 1500\n })\n } else {\n wx.showToast({\n title: '註冊成功', //這裏成功\n icon: 'success',\n duration: 1000\n });\n that.setData({\n isLogin: true,\n }\n )\n }\n },\n fail: function(res) {\n console.log(res)\n wx.showToast({\n title: '請求失敗',\n icon: 'none',\n duration: 1500\n })\n }\n });\n }\n },\n // 登陸\n login: function() {\n var that = this;\n var isrightful = that.checkInput();\n if (isrightful) {\n wx.request({\n url: 'http://localhost:8080/user/testLogin',\n header: {\n \"Content-Type\": \"application/x-www-form-urlencoded\"\n },\n method: \"POST\",\n data: {\n name: inputName,\n password: inputPassword\n },\n success: function(res) {\n console.log(res)\n if (res.statusCode != 200) {\n wx.showToast({ //這裏提示失敗原因\n title: res.data.message,\n icon: 'loading',\n duration: 1500\n })\n } else {\n wx.showToast({\n title: '登陸成功', //這裏成功\n icon: 'success',\n duration: 1000\n });\n that.setData({\n isLogin: true,\n }\n )\n }\n },\n fail: function(res) {\n console.log(res)\n wx.showToast({\n title: '請求失敗',\n icon: 'none',\n duration: 1500\n })\n }\n });\n }\n },\n //檢測輸入值\n checkInput: function() {\n if (inputName == \"\" || inputName == null ||\n inputName == undefined) {\n this.showErrorToastUtils('請輸入用戶名');\n } else if (inputPassword == \"\" || inputPassword == null || inputPassword == undefined) {\n this.showErrorToastUtils('請輸入密碼');\n } else if (inputPassword.length < 6) {\n this.showErrorToastUtils('密碼至少要6位');\n }\n return true;\n },\n\n // 錯誤提示\n showErrorToastUtils: function(e) {\n wx.showModal({\n title: '提示！',\n confirmText: '朕知道了',\n showCancel: false,\n content: e,\n success: function(res) {\n if (res.confirm) {\n console.log('用戶點擊確定')\n }\n }\n })\n },\n})\n```\n到此我們的小程序註冊與登陸功能就實現了。\n如果有問題可以加我微信2501902696（備註小程序）\n想要源碼也可以加我微信\n\n掃描識別下面小程序碼，學習更多零基礎入門小程序的課程。\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",
"readNum": "1000",
"createTime": "2018-08-07 16:01:12.0",
"author": "小石頭",
"classify": "零基礎學小程序"
},
{
"aid": 5,
"title": "零基礎學小程序006---小程序獲取用戶信息用戶暱稱",
"content": "上一節給大家講了[零基礎學小程序005---小程序登陸註冊功能實現](https://www.jianshu.com/p/d859b37eb2fd)。我們有時候只需要獲取到微信用戶的用戶名和用戶信息就可以了，不一定非得讓用戶去註冊。所以這一節來給大家講一下如何獲取用戶信息。\n先來看下請求到的結果\n\n目前微信提供的獲取用戶信息的方式主要是下面兩種方式\n- 1，通過wx.getUserInfo\n```\nwx.getUserInfo({\n success: function(res) {\n console.log(res.userInfo)\n }\n})\n```\n- 2,通過<button open-type=\"getUserInfo\" ></button>\n\n用於第一種方式，微信現在不在給彈窗提示了，所以推薦使用第二種方式\n\n\n下面就來講下用第二種方式如何獲取用戶信息\n主要實現代碼如下\n```\n//user.wxml里布局\n<button open-type=\"getUserInfo\" \n type=\"primary\" bindgetuserinfo=\"onGotUserInfo\">\n獲取用戶信息\n</button>\n\n // button獲取用戶信息\n onGotUserInfo: function(e) {\n if (e.detail.userInfo) {\n var user = e.detail.userInfo;\n app._saveUserInfo(user);\n } else {\n console.log(\"用戶拒絕了登陸\");\n }\n },\n```\n我們通過設置open-type=\"getUserInfo\" 來實現點擊登陸按鈕時獲取用戶信息，\n通過bindgetuserinfo=\"onGotUserInfo\"來把獲取到的用戶信息傳遞到js文件裏，進而做一些後續操作。\n\n當我們點擊登陸按鈕時，會有如下彈窗\n\n\n如果用戶點拒絕登陸，我們可以提醒用戶。如果用戶點擊允許我們就可以獲取到用戶的信息了。\n###下面就是我們獲取到到用戶信息\n```\n{nickName: \"小程序小遊戲開發\", gender: 1, language: \"zh_CN\", city: \"Hangzhou\", province: \"Zhejiang\", …}\n```\n到此我們就實現了小程序獲取用戶信息的功能了，是不是很簡單。\n\n掃描識別下面小程序碼，學習更多零基礎入門小程序的課程。\n\n\n\n\n",
"readNum": "999",
"createTime": "2018-09-01 22:35:26.0",
"author": "小石頭",
"classify": "零基礎學小程序"
},
{
"aid": 6,
"title": "零基礎學小程序007---小程序獲取用戶openid",
"content": "我們在做小程序支付，在區分小程序用戶時都需要用到openid，用戶openid就相當於用戶在小程序裏的身份證。做爲用戶的唯一標示，所以獲取到用戶openid就顯得很重要了，今天來教大家怎麼樣獲取要用戶的唯一標示 **openid**\n所需參數 | 是否必需\n-------- | ---\nappid | 必需\nappsecret | 必需\n\n還是先看效果圖\n\n上面就是我們實現後的效果。接下來開始給大家講解具體實現步驟。\n### 一，先看小程序官方文檔（官方文檔纔是最好的老師）\n\n官方文檔已經說了，要先通過wx.login獲取一個臨時憑證code，然後我們拿這個code去自己的服務器換取用戶openid。那麼問題來了，我們需要有一個自己的服務器，並且支持https請求。是不是感覺很難，爲了幫助大家儘快學習小程序開發，後臺的問題我給大家解決。大家可以直接請求我的後臺api接口就行，不用自己搭建後臺。\n### 二，訪問服務器獲取openid\n不多說先上代碼，講代碼是最快的學習方式\n- user.wxml\n```\n<button type='primary' bindtap='getOpenid'>獲取用戶openid</button>\n<text>{{openid}}</text>\n```\n- user.js\n```\n// pages/user/user.js\nPage({\n data: {\n openid: ''\n },\n\n // 獲取用戶openid\n getOpenid: function() {\n let that = this;\n //獲取openid不需要授權\n wx.login({\n success: function(res) {\n //請求自己後臺獲取用戶openid\n wx.request({\n url: 'https://30paotui.com/user/wechat',\n data: {\n appid: '你的小程序appid',\n secret: '你的小程序secret',\n code: res.code\n },\n success: function(response) {\n var openid = response.data.openid;\n console.log('請求獲取openid:' + openid);\n //可以把openid存到本地，方便以後調用\n wx.setStorageSync('openid', openid);\n that.setData({\n openid: \"獲取到的openid：\" + openid\n })\n }\n })\n }\n })\n },\n})\n```\n注意點\n- 1，https://30paotui.com/user/wechat是用來獲取openid的服務器接口。（免費提供給大家用）\n- 2，下面的apppid和appsecret到你的小程序後臺去找，找到後替換到下面的地方\n```\ndata: {\n appid: '你的小程序appid',\n secret: '你的小程序secret',\n code: res.code\n},\n```\n\n\n到這裏就可以獲取到用戶的openid了，是不是很簡單。\n掃描識別下面小程序碼，學習更多零基礎入門小程序的課程。\n\n",
"readNum": "888",
"createTime": "2018-09-07 17:15:57.0",
"author": "小石頭",
"classify": "零基礎學小程序"
}
]
}
可以看到我們一共獲取到7條數據。我們先對每條數據做下說明
| 數據屬性 | 說明 |
|---|---|
| aid | 文章id |
| title | 文章標題 |
| content | 文章正文 |
| readNum | 閱讀數 |
| createTime | 文章創建時間 |
| author | 文章作者名 |
| classify | 文章所屬類別 |
知道了每個字段代表什麼，我們接下來就可以做數據解析了。做數據解析之前要明白一點，我們的7條數據都是存在一個數組裏面的。
簡單認識數組
比如我們想解析獲取到數組裏面的第一條數據
解析第一條數據
二，填充網絡數據到我們的首頁列表
還記得我們第5節裏解析本地數據到列表嗎，這裏我們實現原理都一樣，只不過這裏換成把網絡數據解析到列表。
解析網絡數據到首頁列表
下圖就是我們把網絡數據填充到首頁列表的效果
效果圖
三，css簡單講解
看上面的效果圖可以看到我們的時間是紅色的，背景是灰色的，還有一個紫色的分割線。我們在home.wxss設置樣式
設置樣式
可以看到我們在home.wxml裏有 class="item-title",這裏的item-title就是class選擇器。代表我們的標題。
我們對標題設置顏色和大小，只需要在home.wxss設置以下代碼就可以了。
.item-title {
font-size: 1.3rem;
color: white;
}
css類選擇器學習
css類選擇器知識學習鏈接
到此我們今天的課就學完了，本節課有點長，需要大家多看幾遍。更着老師思路走。
下面我把home.wxml,home.js,home.wxss三個文件貼出來
<!-- home.wxml -->
<!--列表渲染 -->
<block wx:for="{{dataList}}" wx:key="item">
<view class='item-container'>
<!--這裏只是爲了展示序列號 -->
<text>{{item.aid}}</text>
<!--這裏展示標題 -->
<text class='item-title'> {{item.title}} </text>
<!--這裏展示時間 -->
<text class='item-time'> {{item.createTime}} </text>
</view>
</block>
// home.js
Page({
data: {},
//小程序的生命週期函數
onLoad() {
this.getHomeList(); //調用網絡請求的方法：getHomeList
},
//獲取網絡數據
getHomeList() {
let that=this;
wx.request({
url: "https://30paotui.com/article/list",
success: function(res) { //請求成功
//解析網絡數據到首頁列表
that.setData({
dataList: res.data.data
});
},
fail: function(res) { // 請求失敗
}
})
}
})
/* home.wxss */
/* 列表佈局 */
.item-container {
padding: 25rpx;
background: gray;
flex-direction: row;
border-bottom: 1px solid rebeccapurple;
}
.item-title {
font-size: 1.3rem;
color: white;
}
.item-time{
font-size: 40rpx;
color: red;
}