微信小程序实战练习仿五洲到家微信版

<h1 id="articleHeader0"> 

github地址（欢迎star）：

• 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，这样做模板页复用性高，类似组件的模式。

刚开始使用scroll-view，scroll-x一直失效，不能水平scroll，折腾了好多时间，结果这样就成了，大概如下结构（home.wxml）：

="{{idxData.navbar}}" wx:-item="cate" class="cate-item {{index == currentIndex ? 'active' : ''}}" data-id="{{cate.nav_id}}" data-index="{{index}}" bindtap="cateClick">{{cate.nav_name}}

 

忽略其他乱起八糟的代码，主要是这个,需要保证scroll-view下面的view的width必须要大于100%，充满整个scroll-view

于是对于红线部分的产品分类swiper，就只能手动计算swiper高度，来实现swiper的效果，但是由于对应每个swiper-item还会有个下拉加载，所以产品数目会一直变化，所以计算起来相当于耗性能，希望官方能尽快让swiper高度允许自动撑开

template模板，对象传递方式=>data={{a: x1,b: x2}}，x1、x2对应data绑定的变量

可能你会遇到这种情况（设置动态数据）：

'array[0]': 1<span style="color: #008000">/
<span style="color: #0000ff">this<span style="color: #000000">.setData({
'array['+ index +']': 1<span style="color: #000000">
});
<span style="color: #008000">/<span style="color: #008000">
很遗憾，无法怎么做

<span style="color: #008000">*/

 

解决办法，声明中间量，如下：

dynamicSetData(field,index,value,suffix,type='object' param = string = field + '[' + index + ']' + ( suffix !== 'undefined' ? type === 'object' ? '.' + suffix : '[' + suffix + ']' : ''=

 

这样最后就可以这样，this.setData(util.dynamicSetData('firstLoadDataFlag',true));，即可用于对象的改变，也可以用于数组的改变。

对于小程序中，也有一些组件需要传递变量单位为px的，如果这个变量是需要计算出来的，但是我们使用的确是rpx单位，那么他们之间的转化比例是有必要知道的

winWidth = 750/winWidth; }

 

image组件，其实对于src图片路径，是以背景图展示的，并不是真的类似img，auto是不生效的。

wx.navigateBack返回通知上一页执行指定函数的作用，可以使用getCurrentPages()来获取上一页page对象，事先执行，如下：

navigateBackFun: pages = prevPage = pages[pages.length - 2(prevPage.__route__.indexOf("pages/order/order") != -1.data.btnAction,

 

 

对于下面的字体文件的引用会导致报错，微信小程序似乎不支持怎么使用

@font--family: 'Glyphicons Halflings'src: url('/assets/fonts/glyphicons-halflings-regular.eot'<span style="color: #000000">);
src: url('/assets/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),url('/assets/fonts/glyphicons-halflings-regular.woff2') format('woff2'),url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'),url('/assets/fonts/glyphicons-halflings-regular.ttf') format('truetype'),url('/assets/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'<span style="color: #000000">);
}

 

解决办法，将ttf文件拿出，转化成base64，以wxss引入。

对于购车功能也是相当折腾的，通过在app.js定义全局变量：

10 floorPrice:0 freeShipPrice:0 deliveryFee:00''

 

然后每次加减产品，清空购物车来操作cartData的变化，list存储购物车产品数据，在首页和产品详情页，可以来获取购物车的数据，当然也会把购物车数据的商品id和门店id存储到Storage，可以用来异步更新最新的购物车数据，在首页和产品详情页的来回切换，对于购物车需要时刻去检查，映射到对应分类的swiper产品的加减变化，这里有没有像vue中vuex的状态管理能对数据集中管理，（对于vuex的使用 ），导致监听变化变得很复杂，有把加减部件cart-ctrl和购物车cart提取成template模板组件，结果处理起来，这里一万个省略号，很悲催！github地址（欢迎star）：

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。