微信小程序豆瓣电影项目标改建进度经验分享,在小程序后端中间转播获取接口数据

By admin in 4858.com on 2019年4月16日

大家清楚,许多时候为了方便,间接在小程序前端直接调用第一方提供商的接口获取数据,然后显示在小程序上,那种艺术也是大家符合规律的施用接口情势,不过这种情势有个弊端,正是若是第贰方对小程序禁止,那么就不恐怕再获取数据了,类似于豆瓣的录制多少接口,在前多少个月还是能经常访问的,后来不知基于什么来头,就禁止了小程序端的接口调用了,为了消除那些题目,大家能够运用接口中间转播的代办格局,通过调用本身的API接口获取数据,自己的API对第二方接口进行包装就能够。本篇小说以豆瓣接口为例,完成接口的转载处理,从而保障小程序前端数据获得的符合规律。

在求学微信小程序支付进程中,一部分的难题是前者逻辑的处理,也正是对前者JS的代码编辑;壹部分的难关是前者界面包车型地铁筹划展示;本篇小说基于多少个豆子电影接口的小程序开源项目展开双重调控,把里面蒙受的相干难题和革新的地方开始展览座谈介绍,希望给我们提供二个参考的笔触,本篇小说是依照前人小程序的品种基础上拓展的考订,由此在开张营业从前率先对原文者的辛苦致敬及感谢。

在念书微信小程序支付进程中,一部分的难关是前者逻辑的处理,也正是对前者JS的代码编辑;壹部分的难点是前者分界面包车型地铁宏图浮现;本篇小说基于一个豆子电影接口的小程序开源项目进展重新调节,把里面遇到的连锁难点和纠正的地点开始展览座谈介绍,希望给大家提供三个参照的笔触,本篇小说是基于前人小程序的门类基础上海展览中心开的精益求精,因而在开张营业以前率先对原文者的辛勤致敬及多谢。

在学习微信小程序支付进度中,一部分的困难是前者逻辑的拍卖,也正是对前者JS的代码编辑;一部分的难点是前者分界面包车型地铁筹划显得;本篇小说基于四个豆类电影接口的小程序开源项目举行再度调控,把里面碰着的相关难题和校对的地方开始展览钻探介绍,希望给大家提供2个参照的思绪,本篇小说是基于前人小程序的品类基础上拓展的改进,因而在开篇在此以前率先对原版的书文者的劳累致敬及感激。

1、小程序豆瓣接口调用万分

自身在较先前时代的小说中《微信小程序豆瓣电影项目标改造进度经验分享》介绍二个采取豆瓣接口获取其录像资料的小程序,小程序的分界面如下所示。

4858.com 1

可是鉴于小程序被豆瓣端实行调用接口,那么再运维小程序就有接口错误了,如下所示。

4858.com 2

而大家1般都曾经在小程序的装置上增添了豆瓣的域名了

4858.com 3

只是是因为豆瓣官方对小程序端的限定,那么我们就不可能进展常规的接口数据获得了。

 

一、豆瓣电影接口的小程序项目景况

豆类电影接口提供了点不清连锁的接口给我们选拔,豆瓣电影接口的API地址如下所示:

4858.com 4

在GitHub的开源Curry面,能够搜寻到无数有关豆瓣电影接口的小程序,作者本篇随笔是遵照 weapp-douban-movie 这么些小程序开始展览的退换处理,后来找到了原来的书文者的花色地址:wechat-weapp-movie,原来的著笔者对版本做了1遍进级,后来自身比较笔者的调控和小编最新版本的源码,发现有些地方退换的思绪有点接近,如对于UKugaL地址外放到统壹的配置文件中的处理,可是依然有繁多地点改动分歧。

本篇随笔的改建方案是根据小程序项目 weapp-douban-movie微信小程序豆瓣电影项目标改建进度经验分享,在小程序后端中间转播获取接口数据。 的,由此对待的代码也是和这一个进行相比较,不清楚那个版本是或不是原文者的旧版本,可是这些本子对文件目录的分别已经显示十分干净利落了,对影片信息的体现也统1到了模版里面,举办反复的再次利用,整体的布局和代码都做的相比好,看得出是花了多数素养进行规整优化的了。

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

4858.com 5

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

4858.com 6

不过每一种人都有例外的阅历和意见,对于开辟小程序来说,我尊重于选择安插文件减少硬编码的常量,使用Promise来优化JS代码的利用,将获得和交由JSON数据的措施封装到帮助类,以及使用地理地点接口动态获取当前城市称号和坐标等等。

本篇小说上边包车型客车有的正是介绍使用那几个剧情实行代码优化的处理进程。

1、豆瓣电影接口的小程序项目处境

豆类电影接口提供了许多相关的接口给我们应用,豆瓣电影接口的API地址如下所示:https://developers.douban.com/wiki/?title=movie\_v2

4858.com 7

在GitHub的开源Curry面,能够搜索到众多有关豆瓣电影接口的小程序,我本篇小说是依据
weapp-douban-movie
这几个小程序开始展览的改建处理,后来找到了原来的作品者的品类地址:wechat-weapp-movie,最初的著小编对版本做了二回提高,后来自家相比作者的调动和小编最新版本的源码,发现某些地点更动的思绪有点接近,如对于UHummerH二L地址外放到统1的安顿文件中的处理,然则依旧有大多地点更改不相同。
本篇随笔的改建方案是按照小程序项目
weapp-douban-movie
的,由此对待的代码也是和这一个举行相比较,不清楚那几个版本是否最初的著作者的旧版本,不过这些本子对文件目录的区分已经显得卓绝干净利落了,对影视新闻的显得也联合到了模版里面,实行数十次的双重使用,全体的布局和代码都做的可比好,看得出是花了成都百货上千素养进行整理优化的了。
小程序主分界面效果如下所示:

4858.com 8

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

4858.com 9

而是各种人都有分歧的经历和见解,对于开拓小程序来讲,小编注重于选择布置文件减弱硬编码的常量,使用Promise来优化JS代码的运用,将获得和交给JSON数据的法子封装到扶助类,以及选用地理地方接口动态获取当前城市称号和坐标等等。
本篇小说上边包车型大巴片段就是介绍使用那个剧情进行代码优化的处理进度。

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

豆子电影接口提供了累累相关的接口给大家选用,豆瓣电影接口的API地址如下所示:

4858.com 10

在GitHub的开源Curry面,能够搜寻到众多关于豆瓣电影接口的小程序,作者本篇随笔是基于 weapp-douban-movie 那一个小程序举办的改建处理,后来找到了原文者的类别地址:wechat-weapp-movie,原版的书文者对版本做了3回晋级,后来本身相比较作者的调节和笔者最新版本的源码,发现存点地点改动的思绪有点看似,如对于UPAJEROL地址外放到联合的陈设文件中的处理,然而依旧有大多地点改变不一致。

本篇小说的改动方案是基于小程序项目 weapp-douban-movie 的,因而对待的代码也是和那么些进行相比较,不领会那几个本子是或不是原来的书文者的旧版本,可是那几个版本对文件目录的分别已经体现相当干净利落了,对电影音信的体现也统一到了模版里面,进行反复的再一次利用,全体的布局和代码都做的相比好,看得出是花了累累功力举行规整优化的了。

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

4858.com 11

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

4858.com 12

唯独各种人都有两样的经验和思想,对于开拓小程序来讲,小编正视于采用布置文件减弱硬编码的常量,使用Promise来优化JS代码的利用,将收获和交由JSON数据的主意封装到援助类,以及使用地理地点接口动态获取当前都会称号和坐标等等。

本篇小说上边包车型客车有个别正是介绍使用这一个剧情进行代码优化的处理进程。

二、豆瓣电影多少接口

 我们得以从豆瓣的接口文书档案中打听到,豆瓣提供了许多影片有关的数额接口,那些是大家用来练手或然加工小程序的很好数据出自,它的接口如下所示。

豆子电影接口的API地址如下所示:

4858.com 13

 

一、使用安顿文件定义常量内容

大家在行使此外轮代理公司码开拓顺序的时候,大家都以至极在意一些变量或常量的使用,假若能够合并定义那就联合定义好了,那种在小程序的JS代码里面也是同等,大家尽量收取1些如UPRADOL,固定参数等音讯到独门的铺排文件中,那样在JS代码引进文件,使用变量来取代

比如原来的config.js文件之中,只是概念了二个地点和页面数量的轻重常量,如下所示

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

原本的小程序代码在获得待映的摄像内容时候,部分源码如下所示

4858.com 14

别的页面JS代码也和这些就像,尾部照旧有很多近乎那样UCRUISERL地址,那一个是自身梦想统一到config.js文件的地点,别的这些调用的函数是运用回调函数的处理情势,如下所示。

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

实际小编觉着这中间既然是概念的外部函数,那么那其间的url,
city, config.city, config.cout都不需求这里,在封装函数内部使用那几个常量就可以,因此可以对他们举办改建,如下大家归总抽取种种文件之中的U凯雷德L,以及部分广泛变量到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里面,笔者联合收取了逐条页面包车型客车UQashqaiL地址、关键词和标签(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本田UR-VL等参数提取到函数里面,特别契合大家编码的习惯。

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

 关于Promise的相关处理,大家在上边实行介绍。

 

2、使用布署文件定义常量内容

我们在利用其余轮代理公司码开拓顺序的时候,大家都是充足注意1些变量或常量的施用,倘诺能够合并定义那就联合定义好了,那种在小程序的JS代码里面也是同样,大家尽量抽出1些如U安德拉L,固定参数等音讯到独门的安插文件中,那样在JS代码引进文件,使用变量来顶替
例如原来的config.js文件之中,只是概念了一个地点和页面数量的轻重常量,如下所示

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

原本的小程序代码在获得待映的录制内容时候,部分源码如下所示

4858.com 15

其余页面JS代码也和这么些就像,尾部如故有成都百货上千好像那样URubiconL地址,这一个是作者期待统壹到config.js文件的地点,别的这么些调用的函数是使用回调函数的处理格局,如下所示。

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

实在自身以为那之中既然是概念的外部函数,那么那当中的url, city,
config.city,
config.cout都不供给那里,在封装函数内部选取那么些常量就可以,因而可以对他们开始展览改换,如下大家归总抽出各类文件之中的URubiconL,以及部分大规模变量到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奥迪Q叁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等参数提取到函数里面,越发符合我们编码的习惯。
4858.com ,此间定义的**douban.fetchComming(that, that.data.start)
**行使了Promise来简化代码,传入的that参数是因为急需在函数体里面安装该页面里面包车型地铁Data等拍卖。
有关Promise的相干处理,大家在底下进行介绍。

一、使用布署文件定义常量内容

咱俩在采纳任何代码开荒顺序的时候,咱们都是极度在意一些变量或常量的运用,假如能够合并定义那就集合定义好了,那种在小程序的JS代码里面也是同样,大家尽量收取1些如U汉兰达L,固定参数等消息到独门的布局文件中,那样在JS代码引进文件,使用变量来取代

比如原来的config.js文件之中,只是概念了叁个地点和页面数量的尺寸常量,如下所示

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

本来的小程序代码在获得待映的电影内容时候,部分源码如下所示

4858.com 16

别的页面JS代码也和那么些如同,尾部还是有多数像样那样UCRUISERL地址,这几个是自个儿盼望统1到config.js文件的地方,其余那一个调用的函数是利用回调函数的处理情势,如下所示。

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

实在笔者觉着那里面既然是概念的外表函数,那么那几个中的url,
city, config.city, config.cout都不须求那里,在封装函数内部使用那些常量就可以,由此能够对她们开始展览改换,如下大家联合抽出各类文件之中的UPRADOL,以及部分大面积变量到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里面,小编联合抽取了逐1页面包车型客车U科雷傲L地址、关键词和标签(hotKeyword和hotTag)、城市及地点(city和location后边动态获取)、页面数量count等参数音信。

除此以外由于有个别参数统1通过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的相干处理,我们在底下进行介绍。

 

三、前端接口的修改

 既然小程序段不能再经过接口格局获取电影多少,但测试Computer端是没难点的,那么大家能够使用协调的API接口对豆瓣接口举行打包,从而实现接口数据的代办接口处理,为了有利于,大家还是尽量把代理接口弄得通用一些,以便别的接口也得以经过转账格局获得,进步级中学间转播接口的通用性。

咱俩先来看看小程序端的JS端对接口的调用代码,如下是获得电影多少的中间一个接口,如下所示。

    //通用的热映、待映的获取方式
    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);            
          })
        }
      })
    },

那中间核心是透过调用 app.utils.get(url, json,
type)
的办法来处理对API的GET形式调用,大家再来看看那几个Get方式的调用

//发布的接口
module.exports = {
  Promise,makeArray,getUserInfo,
  get:requestGet,post:requestPost,request,decodeHtml,
  setStorage,getStorage,getLocation,getCityName,

  getDate,getTime,formatTime,getDateDiff,getWeek,get2,post2
}

那个 util.js
里面发布的get接口就是 requestGet函数,大家用了别称的艺术,它的详尽代码如下所示

function requestGet(url,data,type){
  return request(url,'GET',data,type)
}

function requestPost(url,data,type){
  return request(url,'POST',data,type)
}

//封装Request请求方法
function request(url, method, data = {}, type='application/json'){
  wx.showNavigationBarLoading();

  return new Promise((resove,reject) => {
    wx.request({
      url: url,
      data: data,
      header: {'Content-Type': type},
      method: method.toUpperCase(), // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      success: function(res){
        wx.hideNavigationBarLoading()
        resove(res.data)
      },
      fail: function(msg) {
        console.log('reqest error',msg)
        wx.hideNavigationBarLoading()
        reject('fail')
      }
    })
  })
}

透过上述的解析,若是我们要求幸免修改太多地点,那么大家把 app.utils.get(url, json, type)
里面包车型客车 get 修改为 get二的章程就好了,别的参数变化等转账音信,封装在 get二 函数内部就好,那样大家只需修改一个函数名称正是了。

转折接口后,处理的主意有所分化,大家须要把全体带有参数的地址作为1个完全的UGL450L传递给服务器接口(须要U途观L编码,不然不能获得参数),而且由于通用接口不恐怕赶回JSON格式,大家还亟需重返的字符串内容实行JSON格式的转变。

//使用内部接口进行中转
var wrapper_get_url = 'http://localhost:27206/api/third/httpwrapper/httpget';
function get2(url, data = {}, type='application/json') {
    var newdata = {};
    var newUrl = wrapper_get_url + "?url=" + encodeURIComponent(url + "?" + json2Form(data));
    console.log(newUrl);

    return new Promise((resolve, reject) => {
        wx.request({
          url: newUrl,
          data: newdata,
          headers: {'Content-Type': type},
          success: function(res) {
            //将中转接口返回的字符串转换为JSON对象
            var res = convertJson(res.data);
            resolve(res)
          },
          fail: function(res) {
             //将中转接口返回的字符串转换为JSON对象
             var res = convertJson(res.data);
              reject(res)
          }
        })
    })
}

上边的代码咱们利用本身的地点接口实行测试,个中要求交给的USportageL是大家服务器的U昂科威L,原先的UTucsonL+数据整合为多少个新的参数传递给服务器使用。

其余,由于再次回到的转载接口数据为字符串音讯,非JSON格式,那么还需求将中间转播接口重临的字符串调换为JSON对象。

//转义字符串为JSON对象
function convertJson(res) {
  //将中转获取到的字符串转换为JSON对象
  var jsonStr = JSON.stringify(res);
  var jsonStrSym = jsonStr.replace('/', '\\');
  var jsondata = JSON.parse(JSON.parse(jsonStr));
  console.log(jsondata);
  return jsondata;
};

上述正是欧洲经济共同体的前端代码了,通过上面包车型客车拍卖,大家得以健康的获得接口的数目,并能够通常的显示了,正式表露的时候,大家修改用上自身的服务器域名地点就可以颁发使用了。

 

2、使用Promise来优化JS代码

至于Promise的益处和哪些使用Promise插件介绍,我在小说《在微信小程序的JS脚本中利用Promise来优化函数处理》中已有介绍,小编很喜欢使用这种Promise的风格代码,而且能够定义壹些常用的协理类来抓好代码的录用。在自个儿参考的这一个豆瓣电影小程序照旧使用正规回调的函数,相比最初的著小编最新版本的 wechat-weapp-movie 小程序,也照样使用回调函数形式来拍卖,有点古怪为啥不引入Promise插件来开垦。

原本的小程序,电影接口的连锁处理,统一在fetch.js里面实行拍卖,那里封装对各样豆瓣API接口的调用。

4858.com 17

此处大家来探望原来程序尚未行使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口碑的记录音信,但是它把参数抛给调用者传入,由此显得调用相比较复杂1些,大家透过选拔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);            
          })
        }
      })
    },

终极的请求接口参数只有五个,3个是页面对象,三个是伸手的发轫地方,如下代码所示

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)
    },

 

3、使用Promise来优化JS代码

关于Promise的功利和怎么利用Promise插件介绍,作者在小说《在微信小程序的JS脚本中动用Promise来优化函数处理》中已有介绍,小编很喜欢使用那种Promise的风格代码,而且能够定义一些常用的辅助类来升高代码的任用。在本身参考的那么些豆瓣电影小程序依然使用正规回调的函数,相比原著者最新版本的
wechat-weapp-movie
小程序,也照例利用回调函数情势来拍卖,有点奇怪为啥不引进Promise插件来开辟。
原本的小程序,电影接口的相关处理,统1在fetch.js里面实行拍卖,那里封装对各样豆瓣API接口的调用。

4858.com 18

这里大家来看望原来程序尚未应用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)
    },

2、使用Promise来优化JS代码

至于Promise的功利和哪些选用Promise插件介绍,笔者在小说《在微信小程序的JS脚本中使用Promise来优化函数处理》中已有介绍,小编很欢快使用那种Promise的作风代码,而且能够定义1些常用的援助类来做实代码的重用。在自家参考的这几个豆瓣电影小程序依旧接纳正规回调的函数,比较原著者最新版本的 wechat-weapp-movie 小程序,也依然使用回调函数格局来拍卖,有点奇怪为啥不引入Promise插件来开辟。

原先的小程序,电影接口的有关处理,统壹在fetch.js里面进行处理,那里封装对各个豆瓣API接口的调用。

4858.com 19

此处大家来看看原来程序未有使用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);            
          })
        }
      })
    },

最后的央浼接口参数唯有三个,三个是页面对象,1个是请求的起第3人置,如下代码所示

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)
    },

 

4、后端的代理接口代码封装

日前介绍了小程序的前端代码修改,只必要引进二个新的函数就足以兑现多少的转会获取了,后端大家本来匹配那么些接口达成数据的拿走就能够。

咱俩在后端增添七个调节器,扩充对应的接口定义,如下代码所示。

namespace WebAPI.Areas.Third.Controllers
{
    /// <summary>
    /// 对第三方的Http接口数据进行包装,获取数据,避免小程序并禁止获取数据的问题
    /// </summary>
    public class HttpWrapperController : BaseApiController
    {
        /// <summary>
        /// get方式获取数据
        /// </summary>
        /// <param name="url">接口URL</param>
        /// <returns></returns>
        [HttpGet]
        public string HttpGet(string url)
        {
            HttpHelper helper = new HttpHelper();
            var html = helper.GetHtml(url, "", false);
            return html;
        }

是或不是相比轻便,那样就能够达成通用的接口数据转载了。

最后测试获得的健康数据体现分界面,如下所示。

4858.com 20 

 

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)
    })
  },
...

末尾呈上改变过代码的运营分界面,依旧封存原来的效果平常使用。

4858.com 21

上述正是小编对那些小程序举行不一致方面包车型大巴调控思路和经验总括,希望大家具备收益依旧提议,多谢阅读援救。 

 

肆、使用地理位置接口动态获取当前城市称号和坐标

原先程序行使硬编码的点子设置当前城市,如下脚本所示

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)
    })
  },
...

最终呈上更换过代码的周转分界面,照旧封存原来的功效不荒谬使用。

4858.com 22

以上正是本身对那一个小程序开始展览不相同地点的调动思路和经验总计,希望咱们具备收益依然提议,多谢阅读辅助。

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

本来程序行使硬编码的不②秘籍设置当前都会,如下脚本所示

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)
    })
  },
...

聊起底呈上改动过代码的周转界面,依旧封存原来的意义不奇怪使用。

4858.com 23

以上正是自己对这么些小程序开始展览差别地点的调动思路和经验总计,希望大家具有收益恐怕建议,感激阅读帮助。 

 

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有