微信小程序單擊查看單項(xiàng)詳情
發(fā)布時(shí)間：2018-04-18 10:17 所屬欄目：小程序開發(fā)教程
|
作者：哲學(xué)李論，來(lái)自原文地址
本節(jié)目標(biāo)：學(xué)會(huì)查看調(diào)試消息，完成頁(yè)面間跳轉(zhuǎn)傳參等
1，學(xué)會(huì)在控制臺(tái)查看錯(cuò)誤消息
在上一節(jié)第10節(jié)中，運(yùn)行代碼，控制臺(tái)會(huì)有一個(gè)紅色的錯(cuò)誤提示：
一般的調(diào)試信息，黃色的是警告，可忽略；紅色的是錯(cuò)誤，需重視。但這個(gè)錯(cuò)誤并不影響運(yùn)行，可暫時(shí)忽略。
像這條警告消息：
是因?yàn)槲⑿舧x.getUserInfo接口改變了字段造成，可以完全忽視。（因這個(gè)問(wèn)題學(xué)員問(wèn)的多，重復(fù)一下）
像這條消息：
是因?yàn)樵?quot;pages/sim-go/demo/list.wxml"頁(yè)面中，組件navigator缺少有效的url屬性值引起的：
由于我們啟用了長(zhǎng)按操作（見上一節(jié)），這里navigator可以改為view，完成后如下所示：
2，添加新的id詳情頁(yè)面
如前所述，仍是在app.json文件中，于pages數(shù)組中新增一行：
保存，以此完成一個(gè)頁(yè)面的新增。
這里有一個(gè)小使用技巧，與大家分享下，是關(guān)于Web開發(fā)者工具的。我喜歡在咖啡館中寫代碼，外出攜帶編碼利器，止一mba耳，屏幕自是沒(méi)有辦法達(dá)到雙屏同時(shí)編輯。微信的web開發(fā)者工具，是左中右三欄，在mba上時(shí)常覺(jué)得屏幕不夠用。在編輯狀態(tài)下，不妨將預(yù)覽區(qū)關(guān)掉：
單擊左上角的手機(jī)模樣按鈕就可以關(guān)掉了。而在調(diào)試模式下，預(yù)覽區(qū)仍是顯示的，無(wú)妨。這樣，雖然在編輯狀態(tài)下無(wú)法實(shí)時(shí)看到UI的變化，但其實(shí)在編輯狀態(tài)下因?yàn)橐槐４骖A(yù)覽就會(huì)刷新，所以編輯狀態(tài)下的實(shí)時(shí)查看對(duì)我來(lái)說(shuō)等于無(wú)用。一些視圖樣式的調(diào)整，基本是在調(diào)試模式下在Wxml面板下寫好，然后拷貝到文件中的，此時(shí)并不保存，為了是預(yù)覽區(qū)不刷新。
還有，頂行生成的注釋其實(shí)也蠻有用：
特別是在寫教程筆記的時(shí)間，可以直接拷貝。
這個(gè)頁(yè)面“pages/sim-go/demo/id.wxml”，要展示一個(gè)blog單項(xiàng)的基本消息，從pages/weui/article目錄找到合適的UI組件，拷貝過(guò)來(lái)，完成后如下所示：
3，頁(yè)面?zhèn)鬟fid參數(shù)，拉取id單項(xiàng)數(shù)據(jù)
先將demo/list頁(yè)面調(diào)整到第一位置：
再于pages/sim-go/demo/list.wxml頁(yè)面中，添加data-id屬性：
這是一個(gè)dataset屬性，添加它是為了實(shí)現(xiàn)從視圖層向js層傳遞參數(shù)。通過(guò)dataset參數(shù)傳遞是一個(gè)常用的方法。
修改viewItem函數(shù)：
可以打開注釋，查看id輸出。此步已完成。
4，通過(guò)接口以id為依據(jù)拉取單項(xiàng)數(shù)據(jù)
在“pages/sim-go/demo/id.js”中添加blog數(shù)據(jù)對(duì)象：
引用sim庫(kù)：
let sim = require('../../../static/js/sim.js/index')
修改onLoad函數(shù)：
所有的url地址，都適宜使用``這種字符串格式，方便在字符串內(nèi)部直接插入變量，例如${id}便是。
5，在wxml中綁定數(shù)據(jù)
修改頁(yè)面，如下：
預(yù)覽：
在預(yù)覽效果中，時(shí)間顯示的一串?dāng)?shù)字，是unix time。如何將其轉(zhuǎn)換為人類正常可讀的格式呢？
在onLoad函數(shù)中，添加一行代碼：
這行代碼的意思，是將unix time格式化為"x月x日"這樣的格式，運(yùn)行效果：
到這里，我們就完成了單擊一個(gè)單項(xiàng)，通過(guò)傳遞id參數(shù)，在新頁(yè)面查看單項(xiàng)詳情。
6，在list頁(yè)面中添加新建按鈕
修改pages/sim-go/demo/list.wxml頁(yè)面，在上方添加一個(gè)按鈕：
這段代碼很簡(jiǎn)單，創(chuàng)建了一個(gè)“新建”按鈕，鏈接到先前已經(jīng)創(chuàng)建的demo/index頁(yè)面，該頁(yè)面負(fù)責(zé)新建blog信息并保存。
運(yùn)行效果：
7，如何顯示自己的頭像、昵稱
在源碼中，其實(shí)已經(jīng)包括了用戶登陸，請(qǐng)看一下app.js文件：
這一段便是自動(dòng)登陸的代碼，如果用戶第一次打開小程序，會(huì)提示授權(quán)。
回到pages/sim-go/demo/id.js頁(yè)面，于data中添加一個(gè)my變量：
于頂部添加session引用：
let session = require('../../../static/js/sim.js/lib/session')
修改onReady函數(shù)代碼：
這樣便拿到了自己的用戶信息。我在代碼中經(jīng)常使用console.log打印信息，這是常用的調(diào)試方法。寫調(diào)試代碼并不能使我們的程序或開發(fā)速度變慢，真正讓我們的人生裹步不前的，是遇到了問(wèn)題卡住了，無(wú)師友可問(wèn)；還有站在十字路口時(shí)的迷茫，無(wú)人可指點(diǎn)迷律。如果有地圖，按圖索驥，按部就班的進(jìn)行，其實(shí)是很快的。
拿到數(shù)據(jù)之后，在頁(yè)面中綁定：
運(yùn)行效果：
這顯示的是自己的信息，那么，如果想顯示該篇blog作者的信息，怎么做到呢？
也是可以做到的。
但是，我們?cè)诒４鎎log信息時(shí)，并沒(méi)有保存當(dāng)前用戶的uid，同學(xué)們可以動(dòng)手，在pages/sim-go/demo/index.js頁(yè)面中，先取得自己的對(duì)象信息（上面已經(jīng)做到了），保存數(shù)據(jù)時(shí)，把uid當(dāng)成一個(gè)字段存在數(shù)據(jù)庫(kù)。
當(dāng)然，在此之前，你需要先在數(shù)據(jù)庫(kù)blog表中，添加一個(gè)uid字段，類型為int64。
然后，在pages/sim-go/demo/id.js頁(yè)面拉取單項(xiàng)信息顯示時(shí)，可以使用這個(gè)接口拉取作者信息：
http://localhost:4000/api/1/x/user/id/1
將后面的id，換成用戶的id。這部分代碼，我不再實(shí)現(xiàn)，實(shí)現(xiàn)的基礎(chǔ)已經(jīng)具備，同學(xué)們可以自已動(dòng)手實(shí)踐一下。
|
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
碼云倉(cāng)庫(kù):
本文地址：http://www.u-renovate.com/wxmini/doc/course/23644.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
