有的的难关是前面一个逻辑的拍卖
Tagged Tags:

2、使用Promise来优化JS代码

关于Promise的功利和怎么利用Promise插件介绍,小编在随笔《在微信小程序的JS脚本中应用Promise来优化函数管理》中已有介绍,作者很欢快使用这种Promise的品格代码,而且能够定义一些常用的协助类来加强代码的任用。在本土精照他事他说加以侦查的那个豆瓣电影小程序依旧利用正规回调的函数,相比较原版的书文者最新版本的 wechat-weapp-movie 小程序,也依然使用回调函数格局来管理,有一点奇怪为什么不引进Promise插件来支付。

原先的小程序,电影接口的连枪乌贼理,统一在fetch.js里面实行管理,这里封装对各类豆瓣API接口的调用。

图片 1

此间大家来看望原来程序尚未应用Promise的回调函数管理代码

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: '网络开小差了',
              icon: 'warning',
              duration: 3000
            })
          }
        })
      }
    },

以此函数是一个通用的函数,用来博取待映、热播、top250口碑的笔录音讯,可是它把参数抛给调用者传入,因而显得调用比较复杂一些,大家透过选择Promise优化代码管理,并对接口的参数举办简化,代码更换如下所示。

var config = require('./config.js')
var message = require('../../component/message/message')
var app = getApp()//获取应用实例

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";//特殊设置,默认是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);            
          })
        }
      })
    },

末段的呼吁接口参数唯有八个,三个是页面对象,三个是伸手的开局地方,如下代码所示

function(page, start)

除此以外大家采纳了代码

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

来对wx.request方法的相会封装,直接运用工具类里面包车型客车艺术就可以获得结果,无需一再的、臃肿的管理代码。那正是我们使用Promise来优化JS,并抽出常用代码到工具类里面包车型地铁做法。

笔者们再来相比较一下到手电影详细新闻的接口函数封装,原来代码如下所示。

    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: '网络开小差了',
            icon: 'warning',
            duration: 3000
          })
        }
      })
    },

自己改动后的函数代码如下所示。

    //获取电影详细信息
    fetchFilmDetail: function(page, id) {      
      return new Promise((resolve, reject) => {
        var that = page;
        var url = config.detail_url + id;
        var type = "json";//特殊设置,默认是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);   
        });
      })
    },

经过对fetch.js函数代码的改建管理,能够见到调用的JS代码参数减弱了众多,而且页面也不用保留那么多连接等参数常量消息了。

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

 

1、豆瓣电影接口的小程序项目情形

豆类电影接口提供了相当的多皮之不存毛将焉附的接口给我们采取,豆瓣电影接口的API地址如下所示:

图片 2

在GitHub的开源库里面,可以查找到广大关于豆瓣电影接口的小程序,作者本篇小说是依据 weapp-douban-movie 那些小程序进行的改建管理,后来找到了原来的著笔者的花色地址:wechat-weapp-movie有的的难关是前面一个逻辑的拍卖。,原来的书文者对版本做了一遍晋级,后来本身相比较笔者的调动和小编最新版本的源码,发掘有个别地点退换的笔触有一点点近乎,如对于USportageL地址外放到联合的配置文件中的处理,可是照旧有那么些地点改变分裂。

本篇小说的改建方案是基于小程序项目 weapp-douban-movie 的,由此对待的代码也是和那一个进行相比较,不知道那一个本子是否最初的著作者的旧版本,然而那个版本对文件目录的分别已经显得特别干净利落了,对影视消息的显示也合併到了模版里面,进行数十次的双重利用,全体的布局和代码都做的比较好,看得出是花了多数功力进行整理优化的了。

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

图片 3

小程序源码目录结构如下所示:

图片 4

有的的难关是前面一个逻辑的拍卖。但是每种人都有两样的经验和眼光,对于开拓小程序来讲,小编尊重于选拔安排文件减弱硬编码的常量,使用Promise来优化JS代码的接纳,将获得和提交JSON数据的措施封装到支持类,以及利用地理地点接口动态获取当前都会名称和坐标等等。

本篇小说上边包车型客车有的就是介绍使用这一个剧情举办代码优化的管理进度。

1、使用安排文件定义常量内容

咱俩在采纳任何代码开垦顺序的时候,大家都以十二分专注一些变量或常量的运用,要是能够联合定义那就集结定义好了,这种在小程序的JS代码里面也是一样,大家尽量收取一些如U库罗德L,固定参数等新闻到独门的布置文件中,那样在JS代码引进文件,使用变量来替代

比方说原本的config.js文件之中,只是概念了多少个地点和页面数量的分寸常量,如下所示

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

有的的难关是前面一个逻辑的拍卖。原先的小程序代码在赢得待映的摄像内容时候,部分源码如下所示

图片 5

此外页面JS代码也和那一个近乎,尾部依然有成都百货上千左近那样UMuranoL地址,这一个是本身梦想统一到config.js文件的地点,其余这些调用的函数是运用回调函数的管理情势,如下所示。

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

实则笔者认为那之中既然是概念的表面函数,那么那中间的url,
city, config.city, config.cout都不必要这里,在封装函数内部使用那么些常量就可以,因而得以对她们开始展览改变,如下大家归总收取各样文件之中的U陆风X8L,以及部分大范围变量到config.js里面。

下边代码是本身优化整治后的配备参数音讯。

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: ['功夫熊猫', '烈日灼心', '摆渡人', '长城', '我不是潘金莲', '这个杀手不太冷', '驴得水', '海贼王之黄金城', '西游伏妖片', '我在故宫修文物', '你的名字'],
    hotTag: ['动作', '喜剧', '爱情', '悬疑'],
}

地方的布局文件config.js里面,小编联合收取了逐条页面包车型地铁U牧马人L地址、关键词和标签(hotKeyword和hotTag)、城市及地址(city和location后边动态获取)、页面数量count等参数音信。

除此以外是因为部分参数统一通过config.js获取,就不要求重新在调用的时候传出了,由此简化调用代码的参数字传送入,如下代码所示。

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

对于本来的代码

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

简化的尽管相当少,可是尽量的保证到底简单的接口是大家的指标,而且这里把好端端的U揽胜L等参数提取到函数里面,尤其适合大家编码的习贯。

此处定义的douban.fetchComming(that,
that.data.start) 
使用了Promise来简化代码,传入的that参数是因为急需在函数体里面安装该页面里面包车型客车Data等拍卖。

 关于Promise的有关管理,大家在上边进行介绍。

 

3、使用地理地方接口动态获取当前城市名称和坐标

原本程序选用硬编码的章程设置当前都会,如下脚本所示

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

可是大家区别地点的人手运用的时候,这几个城市称号分明供给转换的,因而能够运用微信的地理地点接口动态获取当前义务音信,然后写入到布署文件之中就可以。

//获取当前位置信息
function getLocation (type) {
  return new Promise((resolve, reject) => {
    wx.getLocation({ type: type, success: resolve, fail: reject })
  })
}

//根据坐标获取城市名称
function getCityName (latitude = 39.90403, longitude = 116.407526) {
  var data = { 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);
}

接下来大家在app.js里面编写代码,在app运维的时候,动态获取城市名称、坐标新闻然后写入配置文件就可以,这里运用的要么Promise的函数调用达成。

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}`;//当前坐标
      console.log(`currentLocation : ${config.location}`);

      return utils.getCityName(latitude, longitude)
    })
    .then(name=>{
        config.city = name.replace('市', ''); //当前城市名称
        console.log(`currentCity : ${config.city}`)
    })
    .catch(err => {
      config.city = '广州'
      console.error(err)
    })
  },
...

聊到底呈上改换过代码的运行分界面,依旧封存原本的功效符合规律使用。

图片 6

如上正是本身对那些小程序开始展览区别地方的调解思路和经验总括,希望大家全数获益只怕提出,谢谢阅读帮忙。 

 

在攻读微信小程序支付进程中,一部分的难题是前面一个逻辑的管理,也正是对前面三个JS的代码编辑;一部分的难处是后面二个分界面包车型地铁规划体现;本篇小说基于贰个豆子电影接口的小程序开源项目进展重新调度,把里面碰到的相干难题和勘误的地方举行座谈介绍,希望给大家提供一个参照的思绪,本篇小说是基于前人小程序的类型基础上进行的精耕细作,因而在开始比赛以前率先对原来的著作者的费劲致敬及谢谢。

发表评论

电子邮件地址不会被公开。 必填项已用*标注