258资源分享网

在学习微信小程序开发过程中，一部分的难点是前端逻辑的处理，也就是对前端JS的代码编辑；一部分的难点是前端界面的设计展示；本篇随笔基于一个豆瓣电影接口的小程序开源项目进行重新调整，把其中遇到的相关难点和改 ...

 

 

 

在学习微信小程序开发过程中，一部分的难点是前端逻辑的处理，也就是对前端JS的代码编辑；一部分的难点是前端界面的设计展示；本篇随笔基于一个豆瓣电影接口的小程序开源项目进行重新调整，把其中遇到的相关难点和改进的地方进行讨论介绍，希望给大家提供一个参考的思路，本篇随笔是基于前人小程序的项目基础上进行的改进，因此在开篇之前首先对原作者的辛劳致敬及感谢。

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

豆瓣电影接口提供了很多相关的接口给我们使用，豆瓣电影接口的API地址如下所示： https://developers.douban.com/wiki/?title=movie_v2

在GitHub的开源库里面，可以搜索到很多关于豆瓣电影接口的小程序，我本篇随笔是基于 weapp-douban-movie 这个小程序进行的改造处理，后来找到了原作者的项目地址： wechat-weapp-movie ，原作者对版本做了一次升级，后来我对照我的调整和作者最新版本的源码，发现有些地方改造的思路有些类似，如对于URL地址外放到统一的配置文件中的处理，不过还是有很多地方改造不同。

本篇随笔的改造方案是基于小程序项目 weapp-douban-movie 的，因此对比的代码也是和这个进行比较，不知道这个版本是不是原作者的旧版本，不过这个版本对文件目录的区分已经显得非常干净利落了，对电影信息的展示也统一到了模板里面，进行多次的重复利用，整体的布局和代码都做的比较好，看得出是花了不少功夫进行整理优化的了。

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

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

不过每个人都有不同的经验和看法，对于开发小程序来说，我侧重于使用配置文件减少硬编码的常量，使用Promise来优化JS代码的使用，将获取和提交JSON数据的方法封装到辅助类，以及使用地理位置接口动态获取当前城市名称和坐标等等。

本篇随笔下面的部分就是介绍使用这些内容进行代码优化的处理过程。

1、使用配置文件定义常量内容

我们在使用任何代码开发程序的时候，我们都是非常注意一些变量或常量的使用，如果能够统一定义那就统一定义好了，这种在小程序的JS代码里面也是一样，我们尽可能抽取一些如URL，固定参数等信息到独立的配置文件中，这样在JS代码引入文件，使用变量来代替

例如原来的config.js文件里面，只是定义了一个地址和页面数量的大小常量，如下所示

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

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

其他页面JS代码也和这个类似，头部依旧有很多类似这样URL地址，这个是我希望统一到config.js文件的地方，另外这个调用的函数是使用回调函数的处理方式，如下所示。

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

其实我认为这里面既然是定义的外部函数，那么这里面的url, city, config.city, config.cout都不需要这里，在封装函数内部使用这些常量即可，因此可以对他们进行改造，如下我们统一抽取各个文件里面的URL，以及一些常见变量到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: ['动作', '喜剧', '爱情', '悬疑'], }