技術(shù)交流QQ群:170933152
今天做項(xiàng)目
小程序開發(fā)必備基礎(chǔ)如何獨(dú)立開發(fā)一個(gè)項(xiàng)目豆瓣電影需要的基礎(chǔ):HTML+CSSjavaScript網(wǎng)絡(luò)先理解需求-->了解項(xiàng)目流程,項(xiàng)目交互,需要知道后端的api接口-->寫Dev 聯(lián)調(diào)頁(yè)面(這個(gè)過程指的是開發(fā))-->測(cè)試-->上線-->迭代升級(jí)好,咱們看看咱們要做的小程序:豆瓣電影 進(jìn)入首頁(yè)顯示loading加載數(shù)據(jù),然后加載數(shù)據(jù)后,顯示電影列表,然后刷新的時(shí)候,下面顯示玩命加載中.點(diǎn)擊具體的一個(gè)進(jìn)去顯示電影的詳情.-----------------------看看功能:列表加載Loading加載下一頁(yè)詳情頁(yè)appid:wx90149e6ae3c61a8c這里咱們沒有appid創(chuàng)建項(xiàng)目:doubanfilm首頁(yè):home即將上映:comming列表頁(yè)面:詳情頁(yè)面:detail下面有兩個(gè)按鈕,正在熱映和即將上映---------------好,這里咱們配置一下,下面的兩個(gè)按鈕可以去查幫助文檔:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html"tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首頁(yè)" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, ------------------- app.json中:添加配置: { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" },"tabBar": { "list": [{ "pagePath": "pages/home/home", "iconPath":"image/ing.png",//2.默認(rèn)的圖片 "text": "正在熱映", "selectedIconPath":"image/ing.png"//1.這里選擇的時(shí)候顯示的圖片 }, { "pagePath": "pages/comming/comming", "text": "即將上映" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }}---------------------------tabBarnetworkTimeout//3.這個(gè)部分是從代碼幫助文檔copy過來的.---------------------------------------看一下,咱們配置后的app.json,記得把image這個(gè)圖片資源文件copy到項(xiàng)目目錄中.app.json:{ "pages":[ //1.正在熱映和即將上映頁(yè)面配置好. // "pages/home/home", "pages/comming/comming", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, //2.這里寫好,然后看看效果"tabBar": { "list": [{ "pagePath": "pages/home/home", "iconPath":"image/ing.png", "text": "正在熱映", "selectedIconPath":"image/ing-active.png" }, { "pagePath": "pages/comming/comming", "text": "即將上映", "selectedIconPath":"image/coming-active.png", "iconPath":"image/coming.png" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }}-------------------------------好,這樣底部導(dǎo)航做好了,咱們看看,內(nèi)容:這里需要使用api了組件：https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=201715API：1）熱映https://api.douban.com/v2/movie/in_theaters?start=0&count=202）熱映詳情頁(yè)-detailhttps://api.douban.com/v2/movie/subject/258944313）即將上映https://api.douban.com/v2/movie/coming_soon?start=0&count=204）detailhttps://api.douban.com/v2/movie/subject/10484117好,這里的這個(gè)api需要配置一下,在微信小程序的,開發(fā)者后臺(tái)要配置一下服務(wù)器的域名:request合法域名:api.douban.com這樣就可以了.好,咱們看看如何調(diào)用接口:咱們通過一個(gè)utils文件夾中寫一個(gè)api.js對(duì)吧這里咱們用PRomise來調(diào)用api.這個(gè)promise大家不明白去查查這里,先用:api.js咱們這樣寫://這里定義通用的部分//比如://1）熱映//https://api.douban.com/v2/movie/in_theaters?start=0&count=20//2）熱映詳情頁(yè)-detail//https://api.douban.com/v2/movie/subject/25894431//3）即將上映//https://api.douban.com/v2/movie/coming_soon?start=0&count=20//他們共通的部分是://https://api.douban.com/v2/movie//var API_URL='https://api.douban.com/v2/movie'//1.type頁(yè)面類型,params參數(shù)function fetchApi(type,params){//這里是es6的語(yǔ)法//https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html#wxrequestobject//wx.request(OBJECT)//wx.request發(fā)起的是 HTTPS 請(qǐng)求。return new Promise((resolve,reject)=>{//1.下面這部分是從幫助文檔中copy出來的//wx.request({//2.這樣指定api的地址,請(qǐng)求地址 url: '${API_URL}/${type}', //僅為示例，并非真實(shí)的接口地址 // 3.data: { // x: '' , //y: '' //}, //data這里我用傳過來的data:params, header: { //4.application/json //換成json 'content-type': 'json' }, //4.success: function(res) { // console.log(res.data) // } //這里咱們指定成功的函數(shù)是: //resolve //失敗的函數(shù)是: //fail:reject // success:resolve, fail:reject})})}//5.這里定義的module.exports//這種方式定義的函數(shù),可以給外界的其他頁(yè)面使用//幫助文檔://https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/module.html//模塊化//我們可以將一些公共的代碼抽離成為一個(gè)單獨(dú)的 js 文件，作為一個(gè)模塊。模塊只有通過 module.exports 或者 exports 才能對(duì)外暴露接口。//需要注意的是：//exports 是 module.exports 的一個(gè)引用，因此在模塊里邊隨意更改 exports 的指向會(huì)造成未知的錯(cuò)誤。所以我們更推薦開發(fā)者采用 module.exports 來暴露模塊接口，除非你已經(jīng)清晰知道這兩者的關(guān)系。//小程序目前不支持直接引入 node_modules , 開發(fā)者需要使用到 node_modules 時(shí)候建議拷貝出相關(guān)的代碼到小程序的目錄中。//module.exports={getList:fucntion(type,pn){//6.pn是第幾頁(yè),count是每頁(yè)多少//條數(shù)據(jù)//https://api.douban.com/v2/movie/in_theaters?start=0&count=20//這里的type應(yīng)該是in_theaters//fetchApi(type,{"start":pn,"count":20}).then(res=>res.data)}}新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
