如何制作唱吧小程序

今天小編給大家分享一下如何制作唱吧小程序的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

1小程序框架淺析

大家都說(shuō)小程序體驗(yàn)好，即開(kāi)即用，和普通Webview渲染的H5相比頁(yè)面啟動(dòng)速度、流暢度等方面好很多，這個(gè)問(wèn)題我認(rèn)為需要從幾個(gè)方面考慮，首先，拋開(kāi)產(chǎn)品業(yè)務(wù)層面的設(shè)計(jì)和優(yōu)化，就是小程序底層框架的設(shè)計(jì)和實(shí)現(xiàn)方面的特點(diǎn)。

當(dāng)我們新建或打開(kāi)一個(gè)小程序項(xiàng)目（以唱吧比賽小程序?yàn)槔?，即可看到如下圖的項(xiàng)目結(jié)構(gòu)。

小程序入口文件為app.js， 全局樣式文件為app.wxss，全局配置文件為app.json， 每個(gè)頁(yè)面中再分視圖wxml，wxss和邏輯js、文件配置json等，從這里我們可以看出，整個(gè)小程序的上層框架，也就是大體分為視圖層和邏輯層兩個(gè)部分。 

小程序采用的MINA框架，View層主要用來(lái)渲染頁(yè)面結(jié)構(gòu)，App Service層用來(lái)邏輯處理、數(shù)據(jù)請(qǐng)求、接口調(diào)用，它們?cè)趦蓚€(gè)線程里運(yùn)行，整個(gè)小程序是只有一個(gè)App Service的，并且整個(gè)小程序的生命周期內(nèi)它是常駐內(nèi)存的。View層主要使用WebView渲染，而App Service邏輯層是使用JSCore運(yùn)行。

通信方面，View和AppService是雙線程通信的，主要通過(guò)系統(tǒng)層的JSBridage進(jìn)行通信，AppService把數(shù)據(jù)變化通知到View，表現(xiàn)方法也就是setData方法，觸發(fā)View頁(yè)面更新，View把觸發(fā)的事件通知到AppService進(jìn)行業(yè)務(wù)處理。

這里要說(shuō)的是，小程序是沒(méi)有DOM結(jié)構(gòu)的，那么視圖層的渲染是如何做到的呢，就是運(yùn)行環(huán)境中會(huì)把pages中的WXML的節(jié)點(diǎn)樹(shù)結(jié)構(gòu)，轉(zhuǎn)化為JS的對(duì)象，進(jìn)行渲染，這也是小程序體驗(yàn)優(yōu)于普通分享頁(yè)面的一大原因，省去了很多關(guān)于瀏覽器DOM的操作，由JS運(yùn)行環(huán)境之間進(jìn)行渲染解析。

2唱吧小程序底層搭建

那么話說(shuō)回來(lái)，基于良好的框架，這次在搭建唱吧小程序底層的時(shí)候，我們其實(shí)做了哪些事情呢。

首先，我們并沒(méi)有進(jìn)行純Native層的搭建和改造，而是對(duì)上述提到的API層的一次的封裝，尤其是在關(guān)于網(wǎng)絡(luò)請(qǐng)求的改造和小程序啟動(dòng)的登錄流程方面，我們前端團(tuán)隊(duì)嘗試去做一些分層和優(yōu)化。

• 網(wǎng)絡(luò)請(qǐng)求方面

首先網(wǎng)絡(luò)請(qǐng)求優(yōu)化方面，微信提供的請(qǐng)求接口基本長(zhǎng)這樣：

wx.request({ url: 'test.php', //僅為示例，并非真實(shí)的接口地址 data: {    x: '' ,    y: '' }, header: {     'content-type': 'application/json' // 默認(rèn)值 }, success: function(res) {   console.log(res.data) }})

是不是感覺(jué)和之前的某種請(qǐng)求模式很像，沒(méi)錯(cuò)，就是古老的$.ajax，這時(shí)候我們又想起了ajax的回調(diào)地獄，如果頁(yè)面的請(qǐng)求很多，請(qǐng)求的順序還有限定，瞬間又是各種嵌套，可以說(shuō)是要從請(qǐng)求到懵逼了。

所以為了解決回調(diào)地獄和同時(shí)優(yōu)化請(qǐng)求代碼邏輯，我們?cè)诜庋bwx.request的同時(shí)，我們?cè)谛〕绦蜷_(kāi)發(fā)中，引入了async/await語(yǔ)法糖，用到了來(lái)自facebook的regenerator模塊（詳情請(qǐng)戳：https://github.com/facebook/regenerator），async、await函數(shù)經(jīng)babel編譯后，再用regenerator-runtime模塊用于提供功能實(shí)現(xiàn)，這一方面也得力于小程序支持ES6語(yǔ)法的編譯。

實(shí)現(xiàn)過(guò)程中，單獨(dú)用一個(gè)公共方法封裝，返回wx.request的promise

//wechat.js const request = (url,options) => { return new Promise((resolve, reject) => {   wx.request({     url: url,     method: options.method,     data: Object.assign({}, options.data),     header: options.header,     success: resolve,     fail: reject   }) })}

之后在我們的上層公共庫(kù)中，編寫(xiě)與請(qǐng)求相關(guān)的處理邏輯。

// changba.js const regeneratorRuntime = require('./regenerator-runtime.js')const wechat = require('./wechat')const URI = 'xxx' const requestAPI = async (url,opt) => { const app = getApp() let options = Object.assign({data: {}},opt)   if (/^\/api\/(.+)$/.test(url)) {       url = URI + url;   }   if (!options.method) {       options.method = 'POST';   }   let header = {       'Content-Type': 'application/x-www-form-urlencoded'   }   options.header = options.header || header ;   //除了login方法  其余接口都要加入sessionInfo也就是后端加密過(guò)的session_key   if (!url.includes('/checkCode')) {     options.data['sessionInfo'] = app.globalData.sessionkey;   }   let isTimeout = false;   try {     const ree = await wechat.checkSession();   } catch (error) {     isTimeout = true;   };   try {     if (isTimeout) {       let aaa = await login(app);     }     wx.showLoading({       title: '加載中'     });       const res = await wechat.request(url,options)       if (res && res.statusCode) {           if (res.statusCode != 200) {               if (wx.hideLoading) {                   wx.hideLoading()               }               wx.showModal({                   content: wechat.errMsg(res.statusCode).message || '請(qǐng)求失敗，請(qǐng)重新嘗試',                   title: '提示',                   showCancel: false               })           } else {               if (res.data && res.data.code === 1) {                 if (wx.hideLoading) {                    wx.hideLoading()                 }                 return res.data               } else {                   // xxx 其他情況業(yè)務(wù)邏輯處理               }           }       }   } catch (error) {       console.log('請(qǐng)求異常信息：' + error)       if (wx.hideLoading) {         wx.hideLoading()       }       wx.showModal({           content: '請(qǐng)求信息異常',           title: '',           showCancel: false       })   }}

上述封裝過(guò)程中，所以除了考慮到請(qǐng)求超時(shí)、檢查用戶身份等操作，還可以加入session過(guò)期等相關(guān)其他的業(yè)務(wù)處理邏輯，這也是自己搭建請(qǐng)求的好處，針對(duì)自己的業(yè)務(wù)需求，進(jìn)行匹配和改造。

然而在經(jīng)歷這樣兩層封裝之后，在寫(xiě)業(yè)務(wù)邏輯代碼的過(guò)程中，就可以一目了然的發(fā)送請(qǐng)求了，達(dá)到邏輯清晰且書(shū)寫(xiě)自如，如果習(xí)慣了fetch以及axios的朋友應(yīng)該都會(huì)比較喜歡這種方式。

  async getdata() {    let self = this;    let cb_getdata = await app.changba.requestAPI('/api/xxx', { data: { id: self.data.id } });    if (cb_getdata && cb_getdata.code === 1) {          // xxx    }  }

以上就是“如何制作唱吧小程序”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。