在學(xué)習(xí)微信小程序開發(fā)過程中，一部分的難點(diǎn)是前端邏輯的處理，也就是對(duì)前端JS的代碼編輯；一部分的難點(diǎn)是前端界面的設(shè)計(jì)展示；本篇隨筆基于一個(gè)豆瓣電影接口的小程序開源項(xiàng)目進(jìn)行重新調(diào)整，把其中遇到的相關(guān)難點(diǎn)和改進(jìn)的地方進(jìn)行討論介紹，希望給大家提供一個(gè)參考的思路，本篇隨筆是基于前人小程序的項(xiàng)目基礎(chǔ)上進(jìn)行的改進(jìn)，因此在開篇之前首先對(duì)原作者的辛勞致敬及感謝。

1、豆瓣電影接口的小程序項(xiàng)目情況

豆瓣電影接口提供了很多相關(guān)的接口給我們使用，豆瓣電影接口的API地址如下所示： https://developers.douban.com/wiki/?title=movie_v2

在GitHub的開源庫里面，可以搜索到很多關(guān)于豆瓣電影接口的小程序，我本篇隨筆是基于 weapp-douban-movie 這個(gè)小程序進(jìn)行的改造處理，后來找到了原作者的項(xiàng)目地址： wechat-weapp-movie ，原作者對(duì)版本做了一次升級(jí)，后來我對(duì)照我的調(diào)整和作者最新版本的源碼，發(fā)現(xiàn)有些地方改造的思路有些類似，如對(duì)于URL地址外放到統(tǒng)一的配置文件中的處理，不過還是有很多地方改造不同。

本篇隨筆的改造方案是基于小程序項(xiàng)目 weapp-douban-movie 的，因此對(duì)比的代碼也是和這個(gè)進(jìn)行比較，不知道這個(gè)版本是不是原作者的舊版本，不過這個(gè)版本對(duì)文件目錄的區(qū)分已經(jīng)顯得非常干凈利落了，對(duì)電影信息的展示也統(tǒng)一到了模板里面，進(jìn)行多次的重復(fù)利用，整體的布局和代碼都做的比較好，看得出是花了不少功夫進(jìn)行整理優(yōu)化的了。

小程序主界面效果如下所示：

小程序源碼目錄結(jié)構(gòu)如下所示：

不過每個(gè)人都有不同的經(jīng)驗(yàn)和看法，對(duì)于開發(fā)小程序來說，我側(cè)重于使用配置文件減少硬編碼的常量，使用Promise來優(yōu)化JS代碼的使用，將獲取和提交JSON數(shù)據(jù)的方法封裝到輔助類，以及使用地理位置接口動(dòng)態(tài)獲取當(dāng)前城市名稱和坐標(biāo)等等。

本篇隨筆下面的部分就是介紹使用這些內(nèi)容進(jìn)行代碼優(yōu)化的處理過程。

1、使用配置文件定義常量?jī)?nèi)容

我們?cè)谑褂萌魏未a開發(fā)程序的時(shí)候，我們都是非常注意一些變量或常量的使用，如果能夠統(tǒng)一定義那就統(tǒng)一定義好了，這種在小程序的JS代碼里面也是一樣，我們盡可能抽取一些如URL，固定參數(shù)等信息到獨(dú)立的配置文件中，這樣在JS代碼引入文件，使用變量來代替

例如原來的config.js文件里面，只是定義了一個(gè)地址和頁面數(shù)量的大小常量，如下所示

module.exports = {
    city: '杭州',
    count: 20
}

原來的小程序代碼在獲取待映的電影內(nèi)容時(shí)候，部分源碼如下所示

其他頁面JS代碼也和這個(gè)類似，頭部依舊有很多類似這樣URL地址，這個(gè)是我希望統(tǒng)一到config.js文件的地方，另外這個(gè)調(diào)用的函數(shù)是使用回調(diào)函數(shù)的處理方式，如下所示。

douban.fetchFilms.call(that, url, config.city, that.data.start, config.count)

其實(shí)我認(rèn)為這里面既然是定義的外部函數(shù)，那么這里面的url, city, config.city, config.cout都不需要這里，在封裝函數(shù)內(nèi)部使用這些常量即可，因此可以對(duì)他們進(jìn)行改造，如下我們統(tǒng)一抽取各個(gè)文件里面的URL，以及一些常見變量到config.js里面。

下面代碼是我優(yōu)化整理后的配置參數(shù)信息。

module.exports = {
    city: '',
    location:'0,0',
    count: 20,

    coming_soon_url: 'https://api.douban.com/v2/movie/coming_soon',
    in_theaters_url: 'https://api.douban.com/v2/movie/in_theaters',
    top_url: 'https://api.douban.com/v2/movie/top250',
    search_url: 'https://api.douban.com/v2/movie/search?tag=',
    detail_url: 'https://api.douban.com/v2/movie/subject/', //?id=
    celebrity_url: 'https://api.douban.com/v2/movie/celebrity/',
    baidu_ak:'6473aa8cbc349933ed841467bf45e46b',
    baidu_movie:'https://api.map.baidu.com/telematics/v3/movie',

    hotKeyword: ['功夫熊貓', '烈日灼心', '擺渡人', '長(zhǎng)城', '我不是潘金蓮', '這個(gè)殺手不太冷', '驢得水', '海賊王之黃金城', '西游伏妖片', '我在故宮修文物', '你的名字'],
    hotTag: ['動(dòng)作', '喜劇', '愛情', '懸疑'],
}

上面的配置文件config.js里面，我統(tǒng)一抽取了各個(gè)頁面的URL地址、關(guān)鍵詞和標(biāo)簽（hotKeyword和hotTag）、城市及地址（city和location后面動(dòng)態(tài)獲?。?、頁面數(shù)量count等參數(shù)信息。

另外由于部分參數(shù)統(tǒng)一通過config.js獲取，就不需要再次在調(diào)用的時(shí)候傳入了，因此簡(jiǎn)化調(diào)用代碼的參數(shù)傳入，如下代碼所示。

douban.fetchComming(that, that.data.start)

對(duì)于原先的代碼

douban.fetchFilms.call(that, url, config.city, that.data.start, config.count)

簡(jiǎn)化的雖然不多，但是盡可能的保持干凈簡(jiǎn)單的接口是我們的目標(biāo)，而且這里把常規(guī)的URL等參數(shù)提取到函數(shù)里面，更加符合我們編碼的習(xí)慣。

這里定義的 douban.fetchComming(that, that.data.start)  使用了Promise來簡(jiǎn)化代碼，傳入的that參數(shù)是因?yàn)樾枰诤瘮?shù)體里面設(shè)置該頁面里面的Data等處理。

關(guān)于Promise的相關(guān)處理，我們?cè)谙旅孢M(jìn)行介紹。

2、使用Promise來優(yōu)化JS代碼

關(guān)于Promise的好處和如何使用Promise插件介紹，我在隨筆《 在微信小程序的JS腳本中使用Promise來優(yōu)化函數(shù)處理 》中已有介紹，我很喜歡使用這種Promise的風(fēng)格代碼，而且可以定義一些常用的輔助類來提高代碼的重用。在我參考的這個(gè)豆瓣電影小程序還是使用常規(guī)回調(diào)的函數(shù)，對(duì)比原作者最新版本的  wechat-weapp-movie 小程序，也依舊使用回調(diào)函數(shù)模式來處理，有點(diǎn)奇怪為什么不引入Promise插件來開發(fā)。

原來的小程序，電影接口的相關(guān)處理，統(tǒng)一在fetch.js里面進(jìn)行處理，這里封裝對(duì)各種豆瓣API接口的調(diào)用。

這里我們來看看原來程序沒有采用Promise的回調(diào)函數(shù)處理代碼

var config = require('./config.js')
var message = require('../../component/message/message')

module.exports = {
    fetchFilms: function(url, city, start, count, cb) {
      var that = this
      if (that.data.hasMore) {
        wx.request({
          url: url,
          data: {
            city: config.city,
            start: start,
            count: count
          },
          method: 'GET', 
          header: {
            "Content-Type": "application/json,application/json"
          },
          success: function(res){
            if(res.data.subjects.length === 0){
              that.setData({
                hasMore: false,
              })
            }else{
              that.setData({
                films: that.data.films.concat(res.data.subjects),
                start: that.data.start + res.data.subjects.length,
                showLoading: false
              })
            }
            wx.stopPullDownRefresh()
            typeof cb == 'function' && cb(res.data)
          },
          fail: function() {
            that.setData({
                showLoading: false
            })
            message.show.call(that,{
              content: '網(wǎng)絡(luò)開小差了',
              icon: 'warning',
              duration: 3000
            })
          }
        })
      }
    },

這個(gè)函數(shù)是一個(gè)通用的函數(shù)，用來獲取待映、熱映、top250口碑的記錄信息，不過它把參數(shù)拋給調(diào)用者傳入，因此顯得調(diào)用比較復(fù)雜一些，我們經(jīng)過使用Promise優(yōu)化代碼處理，并對(duì)接口的參數(shù)進(jìn)行簡(jiǎn)化，代碼改造如下所示。

var config = require('./config.js')
var message = require('../../component/message/message')
var app = getApp()//獲取應(yīng)用實(shí)例

module.exports = {
    //待映
    fetchComming : function(page, start) {
      return this.fetchFilms(page, config.coming_soon_url, config.city, start, config.count);
    },
    //熱映
    fetchPopular : function(page, start) {
      return this.fetchFilms(page, config.in_theaters_url, config.city, start, config.count);
    },
    //top250口碑
    fetchTop : function(page, start) {
      return this.fetchFilms(page, config.top_url, config.city, start, config.count);
    },

    //通用的熱映、待映的獲取方式
    fetchFilms: function(page, url, city, start, count) {
      return new Promise((resolve, reject) => {
        var that = page;
        var json = {city: city, start: start, count: count };
        var type = "json";//特殊設(shè)置，默認(rèn)是application/json
        if (that.data.hasMore) {
          app.utils.get(url, json, type).then(res => {
              if(res.subjects.length === 0){
                that.setData({
                  hasMore: false,
                })
              }else{
                that.setData({
                  films: that.data.films.concat(res.subjects),
                  start: that.data.start + res.subjects.length,
                  showLoading: false
                })
              }
              wx.stopPullDownRefresh();

              resolve(res);            
          })
        }
      })
    },

最終的請(qǐng)求接口參數(shù)只有兩個(gè)，一個(gè)是頁面對(duì)象，一個(gè)是請(qǐng)求的起始位置，如下代碼所示

function(page, start)

另外我們使用了代碼

app.utils.get(url, json, type)

來對(duì)wx.request方法的統(tǒng)一封裝，直接使用工具類里面的方法即可獲取結(jié)果，不需要反復(fù)的、臃腫的處理代碼。這就是我們使用Promise來優(yōu)化JS，并抽取常用代碼到工具類里面的做法。

我們?cè)賮韺?duì)比一下獲取電影詳細(xì)信息的接口函數(shù)封裝，原來代碼如下所示。

    fetchFilmDetail: function(url, id, cb) {
      var that = this;
      wx.request({
        url: url + id,
        method: 'GET',
        header: {
          "Content-Type": "application/json,application/json"
        },
        success: function(res){
          that.setData({
            filmDetail: res.data,
            showLoading: false,
            showContent: true
          })
          wx.setNavigationBarTitle({
              title: res.data.title
          })
          wx.stopPullDownRefresh()
          typeof cb == 'function' && cb(res.data)
        },
        fail: function() {
          that.setData({
              showLoading: false
          })
          message.show.call(that,{
            content: '網(wǎng)絡(luò)開小差了',
            icon: 'warning',
            duration: 3000
          })
        }
      })
    },

我改造后的函數(shù)代碼如下所示。

    //獲取電影詳細(xì)信息
    fetchFilmDetail: function(page, id) {      
      return new Promise((resolve, reject) => {
        var that = page;
        var url = config.detail_url + id;
        var type = "json";//特殊設(shè)置，默認(rèn)是application/json
        app.utils.get(url, {}, type).then(res => {
            that.setData({
              filmDetail: res,
              showLoading: false,
              showContent: true
            });

            wx.setNavigationBarTitle({
                title: res.title
            });
            wx.stopPullDownRefresh(); 
            
            resolve(res);   
        });
      })
    },

通過對(duì)fetch.js函數(shù)代碼的改造處理，可以看到調(diào)用的JS代碼參數(shù)減少了很多，而且頁面也不用保留那么多連接等參數(shù)常量信息了。

    onLoad: function() {
        var that = this
        douban.fetchComming(that, that.data.start)
    },

3、使用地理位置接口動(dòng)態(tài)獲取當(dāng)前城市名稱和坐標(biāo)

原來程序使用硬編碼的方式設(shè)置當(dāng)前城市，如下腳本所示

module.exports = {
    city: '杭州',
    count: 20
}

不過我們不同地方的人員使用的時(shí)候，這個(gè)城市名稱肯定需要變化的，因此可以使用微信的地理位置接口動(dòng)態(tài)獲取當(dāng)前位置信息，然后寫入到配置文件里面即可。

//獲取當(dāng)前位置信息
function getLocation (type) {
  return new Promise((resolve, reject) => {
    wx.getLocation({ type: type, success: resolve, fail: reject })
  })
}

//根據(jù)坐標(biāo)獲取城市名稱
function getCityName (latitude = 39.90403, longitude = 116.407526) {
  var data = https://www.wxapp-union.com/{ location: `${latitude},${longitude}`, output: 'json', ak: '6473aa8cbc349933ed841467bf45e46b' };
  var url =  'https://api.map.baidu.com/' + 'geocoder/v2/';
  var type = 'json';
  
  return this.get(url, data, type).then(res => res.result.addressComponent.city);
}

然后我們?cè)赼pp.js里面編寫代碼，在app啟動(dòng)的時(shí)候，動(dòng)態(tài)獲取城市名稱、坐標(biāo)信息然后寫入配置文件即可，這里使用的還是Promise的函數(shù)調(diào)用實(shí)現(xiàn)。

const utils  = require('./comm/script/util.js')
const config = require('./comm/script/config.js')

App({
  onLaunch: function() { 
    utils.getLocation()
    .then(res=>{
      const { latitude, longitude } = res;
      config.location = `${longitude},${latitude}`;//當(dāng)前坐標(biāo)
      console.log(`currentLocation : ${config.location}`);

      return utils.getCityName(latitude, longitude)
    })
    .then(name=>{
        config.city = name.replace('市', ''); //當(dāng)前城市名稱
        console.log(`currentCity : ${config.city}`)
    })
    .catch(err => {
      config.city = '廣州'
      console.error(err)
    })
  },
...

最后呈上改造過代碼的運(yùn)行界面，還是保留原來的功能正常使用。

以上就是我對(duì)這個(gè)小程序進(jìn)行不同方面的調(diào)整思路和經(jīng)驗(yàn)總結(jié)，希望大家有所收益或者建議，感謝閱讀支持。