找回密码
 立即注册

QQ登录

只需一步,快速开始

[Demo源码] 微信小程序仿京东到家极速达小程序

  [复制链接]
查看: 1358|回复: 237
最佳答案
0 

4

主题

4

帖子

110

积分

新人求带

积分
110
 楼主| 发表于 2018-6-11 14:29:56 | 显示全部楼层 |阅读模式
微信小程序仿京东到家极速达小程序

写在前面:商城小程序可太多了,淘宝天猫京东购物小米商城,选择京东到家的原因是,京东到家在在众多商城来看,可以做到小而精,而且方便快捷,这是一个你没有玩过的全新版本。京东到家一直在更新客户端,我觉得小程序也应该大力推广。话不多说,下面就为你介绍我的第一个小程序学习成果,仿京东到家小程序,界面参照京东到家,功能自己实现,以及小技巧和踩过的各种坑。萌新还不快快上车。

搜索功能

搜索功能基本是标配了,实现了模糊查询,界面用的是 weui-searchbar,这个我用模板把它封装起来了,因为小程序中有多次使用到

我的想法是,匹配 keywords 的每一个字符,找出匹配相似度最高的,最紧密的,显示在前列,想法很好,emmm
  1. const desc = new Set()
  2. const keyWords = keyWords ? keyWords.split('') : []
  3. temp.forEach(item => {
  4.         keyWords.forEach(key => {
  5.                 let i = item.title.indexOf(key)
  6.                 if (i > -1) {
  7.                         desc.add(ele)
  8.                 }
  9.         })
  10. })
复制代码

这里我用 spilt() 方法将字符串转换为数组以遍历,indexOf() 获取遍历结果,可以得到正确结果,但是没做优先级排序,其实使用正则去做或许 match(/\s\S*${key}\s\S*/)这样?有兴趣可以试试

说好的踩坑

跳转页面失效
问题描述:在位置选择的时候,需要携带数据返回主页,尝试过 navigateTo、navigateBack、redirectTo、switchTab,不是无法跳转,就是无法携带数据。
原因:小程序不允许打开超过5个层级的页面(原因见总结5),navigateBack 无法直接携带数据,最后我使用switchTab返回主页,并将数据存储在 app.globalData中,解决问题。

scroll-view 高度自适应
问题描述:在店铺内部菜单中有一个类似分类 tabbar 的功能,但并没有使用 scroll-into-view实现,问题是左右两个scroll-view 无法独立滚动,并且超出屏高撑出滚动条,这并不是我想要的。
解决办法:使用 flex 布局, scroll-view 的容器设置 flex: auto; overflow: auto;

input 标签 value="{{value}}" 传值无法触发 bindinput 事件
问题描述:value="{{value}}" 动态向中传值时,无法触发 bindinput 事件,并且两者会冲突,就像这样
  1. this.setData({
  2.         search: {
  3.                 inputVal: value     // somedata
  4.         }
  5. })
  6. console.log(this.data.value)    // undefined
复制代码

解决办法:前面说过,我的 searchbar 是一个模板,这个模板传值需要嵌套一些东西,但其实我的数据不需要这样传递,可以直接绑定到view,这算是曲线救国了,没有从根本解决这个问题。

数据操纵
问题描述:这个小程序我使用的是本地的假数据,并没有通过easy-mock伪造数据,当然这不是重点,数据页面一多,json的嵌套也变得深了,不然就是多个数据的关联更深,这就给数据查找带来了不便。
解决:forEach、filter、map、set、indexOf、push、Array from、some、findIndex、unshift、promise、解构。。。感觉快学完一遍es6的数组方法了

一种子元素垂直居中方法
父容器下只有一个元素,且父元素设置了高度,则只需要使用相对定位即可
  1. .par {
  2.     height: 200rpx;
  3. }
  4. .child {
  5.     position: relative;
  6.     top: 50%;
  7.     transform: translateY(-50%);
  8. }
复制代码

最后小程序的总结

如果你看到这里,说明你在小程序方面的学习阶段和我差不多,我就总结几个要点来提醒我们和后来者:

  • 前端 wxapp 开发与以往 web 体系开发的不同是什么?是 MVVM ,是数据绑定,数据驱动界面。
    实质是:通过数据传输接口(注册Page时的data属性及后续的setData方法调用)将逻辑层的数据传输给视图层。视图层由WXML语言编写的模板通过“数据绑定”与逻辑层传输过来的数据merge成展现结果并展现。
  • 使用 MVVM 框架开发,我们首先关注的不是 DOM 结构,而是关心数据如何存储。数据的存储方式是 JavaScript 对象,或者说 json 对象。
  • 一个 wxapp 应用程序就是一个单页面应用,所有的页面渲染和事件处理,都在一个页面内进行。
  • 小程序的UI视图和逻辑处理是用多个webview实现的,逻辑处理的JS代码全部加载到一个Webview里面,而所有的视图(wxml和wxss)都是单独的Webview来承载,所以一个小程序打开至少就会有2个webview进程,考虑到性能消耗,小程序不允许打开超过5个层级的页面,当然同是也是为了体验更好。
  • 可以尝试新的框架开发,wepy、mpvue等正在学习中

游客,如果您要查看本帖隐藏内容请回复
回复

使用道具 举报

最佳答案
0 

0

主题

828

帖子

3952

积分

专家路上

积分
3952
QQ
发表于 2018-6-11 15:45:40 | 显示全部楼层
asdfdsfsdfsdf
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

698

帖子

7133

积分

S1

积分
7133
发表于 2018-6-11 15:47:22 | 显示全部楼层
微信小程序仿京东到家极速达小程序
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

45

帖子

300

积分

新人求带

积分
300
发表于 2018-6-11 16:13:33 | 显示全部楼层
求一个同城信息的小程序
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

101

帖子

280

积分

新人求带

积分
280
发表于 2018-6-11 16:17:32 | 显示全部楼层
感谢分享
回复

使用道具 举报

最佳答案
0 

0

主题

12

帖子

363

积分

新人求带

积分
363
发表于 2018-6-11 16:26:12 | 显示全部楼层
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

54

帖子

830

积分

等待验证会员

积分
830
QQ
发表于 2018-6-11 16:34:21 | 显示全部楼层
一个中心
回复

使用道具 举报

最佳答案
0 

0

主题

112

帖子

430

积分

新人求带

积分
430
发表于 2018-6-11 16:37:47 | 显示全部楼层
感谢分享!!!
回复

使用道具 举报

最佳答案
0 

0

主题

32

帖子

60

积分

新人求带

积分
60
发表于 2018-6-11 16:37:57 | 显示全部楼层
楼主加油,我们都看好你哦。
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

305

帖子

1216

积分

专家路上

积分
1216
发表于 2018-6-13 14:03:00 | 显示全部楼层
。。。。。。。。。。。。。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com