• css => 放置公用wxss,目前只有一个font.wcss

• image => 静态资源目录

• lib => 第三方库（如：qqmap-wx-jssdk.min.js）

• pages => 小程序页面（包括四个文件，.wxml/.wxss/.js/.json）

• template => 抽离出来的template，具有复用性

• utils => 工具类

• app.js/app.json/app.wxss => 配置

官方request代码：

　　

但是有很多场景需要promise化的，所以使用第三方promise库（es6-promise.min.js），对request进行了一层包装：

{ obj.success = function (res) { resolve(res); } obj.fail = function (res) { reject(res); } if(scope){ //改变this指向 var newFn = fn.bind(scope); newFn(obj); }else{ fn(obj); } }) } } /* request 封装*/ var wxrequest = wxPromisify(wx.request); function wxRequest(options,tokenNotRequired){ return wxrequest(options).then(res => { var data = res.data; if(data.status === 404404) { if(tokenNotRequired){ delete options.headers; return wxRequest(options); }else{ return updateToken().then(token => { return wxRequest(object.assignIn(options,{ headers: { 'X-Auth-Token': token } })); }); } }else { return Promise.resolve(data); } }).catch(err => { return Promise.reject(err); }); }

　　

由于小程序默认给的微信地图api有些需求达不到要求，于是使用第三方库（qqmap-wx-jssdk.min.js，这是绝配），这样定位功能也比较好做，以及后续要做的地址管理模块也比较好下手，但是有个问题，对微信地图jdk接口进行promise化后，使用过程会报错，导致定位失败，所以需要改变其执行作用，于是对wxPromisify()方法做了些改造，重新绑定作用域至qqmapsdk，调用如下：

QQMapWX = require('../lib/qqmap-wx-jssdk.min.js' qqmapsdk = 'xxxxx' ...
...

<span style="color: #008000">//<span style="color: #008000"> 请求用户授权定位<span style="color: #008000">
//<span style="color: #008000">逆地址解析
<span style="color: #0000ff">var ReverseGeocoder = util.wxPromisify(qqmapsdk.reverseGeocoder,qqmapsdk); <span style="color: #008000">//<span style="color: #008000">需改变作用域

 

对于小程序是需要配置对应的安全域名的，这样才能执行request

模板页（template）没有天生配对js，但是也可以实现，实现面向对象的思想，对模板所需要的js进行一层类的封装，保证构造函数需要接受父页面的上下文对象，然后可以把声明好的类方法绑定到父页面上面去，对于模板页js方法，以_FUN()方式命名。下面是为图片懒加载优化而做的swiper模板组件，可以参考一下。

=.page = pageContext; .page.data.slider = .page._sliderChange = ._sliderChange.bind( (= (let i = 0; i < showArr.length; i++(i ==== 'slider.showArr'= Array(imgs.length).fill('slider.picList''slider.showArr': arr.fill(,1= Slider

 

以类形式module.exports出去，Page页面，以var Slider = require('../../template/slider/slider.js');形式引入，然后new操作，模板wxml也参考template/silder/silder.wxml，也可以对应写wxss，这样做模板页复用性高，类似组件的模式。