为什么微信小程序半年了不作为 微店、淘宝客却难过了 - A5创业网
扫一扫，联系编辑获得审核机会
符合以下要求，获得报道机会
1. 新公司求报道
2. 好项目求报道
3. 服务商求报道
4. 投资融资爆料
客服热线：400-995-7855
当前位置：&&&
为什么微信小程序半年了不作为 微店、淘宝客却难过了
15:50&&来源：微信小程序&
　　2017年6月，微店突然不能用微信支付了，买家在&微店&下单时会发现，在&付款方式&的页面上，微信支付已经处于灰色不可用状态。提示文字显示&业务调整暂停使用&。&微店&支付页面的红色提示文字是&维护中，请使用银行卡支付，无需开通网银&。随后，这事不了了之。
　　过了大概一个多月，微信在7月14日开始大面积限制淘客，封杀了很多大规模淘客群，17日进一步加紧封杀力度，而7月21日微信开始对淘客小群下手，可谓是雁过拔毛，绝不放过。
　　微店、淘宝客都属于电商范畴，准确的说属于第三方电商平台。为什么微信如此力度对待第三方电商平台呢?如果，想一想微信一月份上线的微信小程序，就不难明白微信的心思了。
　　作为社交平台的微信，有着上亿的流量，这些流量不变现那简直太可惜了，而社交带来的流量，电商是流量变现的最优选择。微信拥有社交圈后，从微信建立微店、微商城，微信一直在努力构建自己的电商平台。而在年初推出微信小程序连接线上线下，就是为了完善微信电商平台。
　　无奈上线半年的小程序，一直不温不火，微信不得不一步一步放开小程序的功能，私下认为，一些功能本来打算是付费推出的，但是，敌人过于强大，无奈只能一点一点放出&诱饵&让商家入驻，如今的小程序发展至今已经展现其丰富多样的社交、平台及生态功能属性，连接影视、吃喝玩乐、打车、火车票机票、酒店旅游等多种消费场景。
　　因为小程序发展到不透明，让很多人期待的功能姗姗来迟，所以，究竟在微信小程序想要做到怎样，外界一直琢磨不透，微信之父张小龙给微信小程序的定义同样很朦胧：&&我想要用户&用完即走&。&而在今年八月，一篇文章报道：张小龙破局!给小程序开辟专属广告位，微信要做下一个淘宝，&微信完全可以搭建起一个独立的电商闭环，商家完全可以在淘宝、京东等电商平台之外，在微信上另立门户。&
　　如果按照这个思路来理解，那么不属于微信嫡系的微店、微商城、淘宝客，受到排挤和封杀就是情理之中的事情了。因为在腾讯心中，一直有一个电商之梦，而且在移动互联网拥有超亿流量的最好时刻，怎么能轻易错过这次人口红利呢?
　　那么，对于商家来说，如何面对微信这一趋势呢?布局很重要，不妨自己也试着建一个小程序。目前建立一个微信小程序很简单，打开微信&发现&最下面就有小程序。如果没有就更新一下微信。每个人都可以用小程序开店，如果想做一个认证的店铺也很容易，简单的说，人人都可以用小程序开个店铺。
　　当然，微信小程序和拥有深厚内功的阿里在电商领域竞争，包括自己的小兄弟京东在内，想要在一夜之间让所有的商家都入驻小程序开网店，显得很不现实。但是，作为人微言轻的小商家来说，从建店成本以及微信人口红利来说，早入驻，用好推广方法，或许也是一次屌丝逆袭的机会。
　　就在小编写这篇文章，查阅相关资料时发现，天猫有36家店铺要开实体店了，想当年，这些天猫店铺大部分都是一些淘宝小店，一点一点做大做强，如今又要拥有自己的实体店了，那么，微信小程序能不能有这样的机会呢?引用马云那句名言：&梦想是要有的，万一实现了呢?&而实现梦想的唯一可靠的方式就是敢于大胆尝试，如今微信如此的排挤异己，为微信小程序开路，机会就在眼前!微信小程序：http://www.91ud.com/原创文字，版权所有，转载请注明出处，并保留本链接，谢谢!
责任编辑：chenlong666
作者：微信小程序
延伸阅读：关键词：
变设龙 企业高质量图片智造平台
扫描二维码关注A5创业网了解最新创业资讯服务
&徐州八方网络科技有限公司&版权所有&
举报投诉邮箱：
扫一扫关注最新创业资讯他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
为了提高自己，最近在学习微信小程序，选题是仿网易云音乐。期间踩过了大把的坑，bug出现的难受和解决bug欢喜，一直是伴随我阶段性学习这个项目的心情。初步完成了项目的主要功能，来分享一下自己的心路历程。
列表式渲染数据
传参页面跳转
按钮点击弹窗
音乐播放、暂停、上一曲、下一曲
嵌套template页及传递数据
页面的切换
暂停、上一首、下一首
弹窗及选歌
小程序的开发模式是MVVM模式。简单的讲就是页面绑定的值改变，页面就发生改变；页面改变，页面的绑定的值改变。这样的话，列表式渲染就十分好用。只用写一个通用的骨架，然后使用列表渲染生成页面，这样非常省时间省力气。所以这个项目，大量充斥着列表渲染。
有的页面部分可能会出现在好几个页面上。在这个项目里，页面顶部的部分出现在多个部分中，同时小程序里很多地方需要用到**弹性布局居中效果**于是我便把常用css样式写在app.wxss中，这样可以复用。
页面右上角的四根竖线出现在多个页面中，那变可以单独拿出来写，然后在通过template，导入至不同的页面中去。
选歌很需要解决的一点就是怎么才知道选择的是哪一首歌，歌单是哪一个歌单。一个页面获取到其他页面想传递过来的数据的方式有很多。其一、可以通过url跳转的时候，传参跳转，再通过跳转页面中onload事件添加options参数获得。其二、可以通过点击事件改变全局属性globalData的某项的值，然后再跳转页面中得到globalData中相应的值，便能知道页面跳转中想传递的值。这个项目使用了这两种方式，url传参获取播放第几首歌曲，全局属性globalData传递歌单。
后台数据使用的是假数据，一个方便的数据构建平台。当然还有方便的weui框架了，这个框架可以去github上拷贝，然后再根据weui示例，找到想要的想过，再去下载好了的文件里找到对应的代码，试一试便知道要如何使用了。图片和音乐的话，因为使用的是网络地址。如果直接从网站上，按F12找到资源然后提取的话，通常提取的资源过几天便会失效。所以我们需要百度音乐外链、图片外链，然后会有相应的网站，可以生成一个长期不失效的链接，供我们下载图片和音乐。
踩过的坑与爬坑路
坑爹的图片问题：
项目起步第一个问题便是图片存放与加载。一些需要推送的消息以图片的形式展示，那么这个图是千万不能存在本地，需要通过src链接网络地址然后下载显示。那么问题来了：首页结构已经出来，图片却要延迟出来。页面则会出现这种情况：
经过思考，发现首页图片轮播条有很多张图片，他们会同时加载。而需求最急的是显示好第一张图片，第一张图片加载完成后，再加载其他图片。这样能减少页面首加载中，图片加载的将近一半的网速占用。查文档发现，小程序中图片加载完成后，有一个加载完成事件bindload。
因为使用的是列表渲染来填充页面，所以便可以让绑定渲染图片的数据showImage起始为空，这样页面就先不会渲染，然后第一张图加载完后，再给showImage赋值，然后就会自动渲染页面，加载其他图片了。这样就能提高页面的加载速度。
（备注:这里有些像懒加载的味道，在用户需要的时候加载图片）
这里有一个小小的技巧，第一张图的swiper-item不参与页面渲染，这样第一张图就一定会进行加载。在第一张图加载完成后，再进行页面渲染。同时让swiper开始轮播效果和生成指示点。
播放页面动画和还原
音频的后台播放
在播放界面时，一开始使用的&audio&组件，洋洋洒洒敲下了一连串的代码，播放音乐，一切正常。但当我们前往另一个页面时，播放的音乐就没声音了。查了文档才知道audio并不能实现后台播放，实现后台播放的是wx.getBackgroundAudioPlayerState()和wx.getBackgroundAudioManager()两个api。前者在微信客户端1.2.0版本就不开始维护了，后者低版本需做兼容处理。这个项目我使用的是第二个api。（备注：）值得注意的是，当音频对象的src取得链接时，就自动开始播放。
播放状态。歌曲播放时页面动起来，歌曲未播放时静止
看见动画了，第一个反应是css的animation，后来经过思考，如果不进行dom操作就要控制动画的进行与否需要做的数据绑定就会很多，不方便使用。于是查文档发现`wx.createAnimation(OBJECT)`这个api，但使用这个api，如果需要做到动画的循环播放，要写的js也很多很麻烦。经过了各种踩坑，根据小程序中的`progress`进度条组件，发现一个很棒的方法，那就是行内样式绑定数据。
（备注：指针动画简单，进行一次就结束，这里不提。。）
（备注：进度条是小程序自带的组件，已播放时间完成方式和进度条相似，这里与动画效果一并提出）
这样，只用在播放时，设计计时器，定时的按比列更改rotata、left、progress、的值，页面就会有相关改变。这个函数中，一开始便是清除计时器，因为有一个坑点：点击下一曲或上一曲时，计时器并未清除，那么，便会有两个计时器同时作用于一个值得改变（这种头疼的情况相信很多人都遇到过）。把三个计时器（转盘、按钮、进度条）在函数运行的开始就做清除，这样就让每次调用函数时，都先清除上一层的计时器，做到只有一个计时器作用于一个值。这种方式，用少量的代码，形成了可控的动画效果，很是方便。
（我在这收获了另一种写动画效果的方式，哈哈）
next: function () {
// 全局定义了proSet rotSet timeSet，因为需要清除计时器
clearInterval(proSet);
clearInterval(rotSet);
clearInterval(timeSet);
proSet = setInterval(() =& {
if (this.data.progress &= 100) {
if(i==this.data.music.length){
app.globalData.i=i;
backgroundAudioManager.stop();
this.nameBackMusic();
timeCount = 0;
this.setData({
progress: 0,
songTime: this.data.music[i].songTime,
songer: this.data.music[i].songer,
songName: this.data.music[i].songName,
time: secondToDate(this.data.music[i].songTime)
else if (this.data.run == 0) {
clearInterval(proSet);
clearInterval(rotSet);
clearInterval(timeSet);
this.setData({
progress: 0.01 + this.data.progress,
left: 0.0458 + this.data.left
}, this.data.music[i].songTime / 10);
rotSet = setInterval(() =& {
this.setData({
rotate: 1 + this.data.rotate,
timeCount = backgroundAudioManager.currentT
if (typeof (backgroundAudioManager.currentTime) === "undefined")
timeCount = 0;
timeSet = setInterval(()=&{
timeCount++;
this.setData({
currentTime: secondToDate(timeCount),
//secondToDate用来把n秒转换为xx:xx的显示形式
在播放界面中，设计一个值run初始值为0，用来记录是否播放，播放时run为1，暂停时run为0。在页面跳转在返回播放页面时，之前因为播放设置的data值会全部还原，导致页面静态显示（进度条不动、时间不增加等）。这个时候，全局属性globalData就上场了。不论是在选歌、播放、暂停的时候，globalData中的变量记录播放的状态（是否播放、播放哪一首歌等）。而播放页面重新打开会执行onShow()生命周期函数，这个时候变可以从全局变量中得到播放的状态，然后决定播放页面是否要动起来和相应的数据）。
因为页面第一次加载也会执行onShow()函数，而暂停音乐时backgroundAudioManager.paused返回true，播放时放回fals，没有音乐播放时返回undefined，如果单纯的用:if(backgroundAudioManager.paused)则会判断无音乐和音乐播放时都为假，这样两种不同的情况执行相同的操作，则会发生意外，所以需要添加这样的判断if (typeof (backgroundAudioManager.paused) !== "undefined") 用以区分播放和无音乐事件。
一路学习过来，期间碰到的大大小小的问题数不胜数，收获很大。目前还有一些功能暂未实现，会在以后继续完善项目，继续学习。
这个项目给我最大的启示就是文档是一个好东西，锻炼看文档的能力会自己接受新东西的速度变快。再就是很多时候解决问题的方法多种多样，写代码时可以多做几次考虑用哪种方式实现一个功能，这样既让项目变得更高校，也让自己变得更优秀。
个人邮箱：
github地址：
wx: zcfusheng
大家可以一起交流学习，如果觉得这个项目不错的话，用star来砸我吧。
（备注：我给项目里放的音乐都是周董和姿妈的，哈哈，毕竟男杰伦，女燕姿）
1 收藏&&|&&1
你可能感兴趣的文章
21 收藏，3.9k
2 收藏，2.6k
58 收藏，662
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。快捷|以“小打卡”为例带你玩转微信小程序！ - 简书
快捷|以“小打卡”为例带你玩转微信小程序！
作者：小归
微信小程序
这几天小归一直在阅读《学习之道》、《自组织》、《深度工作》等书，每天使用“小打卡”写读书感悟，感觉还蛮不错的。“小打卡”是微信小程序，我在推荐这个小程序给小伙伴的时候，遇到一个问题，就是大家还不知道什么是小程序？那么，就在推荐“小打卡”之前，我先来介绍一下小程序的概念。
微信小程序（weixinxiaochengxu），简称小程序，缩写XCX，英文名mini program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用。小程序能够实现消息通知、线下扫码、公众号关联等七大功能。其中，通过公众号关联，用户可以实现公众号与小程序之间相互跳转。以上就是微信小程序的基本概念和功能简介，我想大家看完应该有了一个简单的了解。如果你还没有使用过小程序，今天我就推荐一款小程序——“小打卡”。它是一款习惯养成小程序，功能和“趁早”、“别墨迹”等社群类APP一样，但是它具备了“不用安装”、“用完即走”等许多优点。用开发者徐佳义自己的话说：“小打卡就是一个轻量小程序，使用起来0负担，没有墨迹，只有小打卡。”原因是开发者——徐佳义真的很用心，他自己就既是开放者也是客服，虽然拉到了风投，却依然低调的编程，直接微信应答用户的反馈，了解每一位用户的使用心得。【发现小打卡】我把小打卡说的这样好，一定有人迫不及待的想要试用了，那么如何找到它呢？我的方法很简单，就是在微信小程序里面直接输入“小打卡”、“打卡”等关键词，你就可以看到小打卡了。
【使用小打卡】发现小打卡之后，我就在小打卡的发现平台里随便找了一个打卡活动参加了一下，感觉还蛮不错的。于是我就直接自己建了一个打卡活动“每天开始阅读30分”，每天记录读书笔记，希望可以0负担的读书。下面就讲一下如何找到参与打卡活动。1.进入小程序你会看到底端的三个导航栏，因为你还没有参加任何活动，“项目栏”、“我的”是空白，因此需要进入发现里面，找到自己感兴趣的项目。
每天阅读30分
2.点击参与打卡，就可以参加活动。
你就会在项目里看到，已经参与的活动。3.根据要求规则，填写阅读时间，进行打卡。
图片发自简书App
4.点击打卡，进入日记填写，可以文字、语音、图片进行打卡操作，填写完毕点击“发布”，就完成了打卡。
【查看打卡】1.在打卡区下面可以看到全部打卡情况，点击“只看我的”，可以看到自己的打卡日记。
2.点击查看全部，可以看到所有参加活动者的日记，可以对大家打卡内容进行评价、点赞，结果在日记下方有统计。【统计打卡数据】
1.排行榜及统计：点击进入排行榜，可设置条件，进行统计。
下拉之后，显示排行榜，可看到打卡排行及打卡人员名单。
2.每月统计及补打卡
点击未打卡日期，可进行补打卡
下拉可看到详细数据分析
打卡信息显示
【打卡设置】点击打卡设置界面，可进行打卡退出、昵称管理、微信提醒设置。
【分享小打卡】点击“...”，可将小打卡分享给好友及群分享；可以设置微信置顶，方便打卡操作；点击“关于小打卡”，能够查看小打卡官方介绍。
【关于小打卡】此界面对小打卡的相关情况以及服务类别、主体信息、关联公众号进行详细介绍。
最后，用徐佳义在腾讯说明会的PPT结尾，希望大家都来使用，这个最受欢迎的社群打卡小程序！我们一起使用小打卡对抗拖延症吧！
不知道有没有讲清楚呢，如有不明之处，欢迎大家留言，我会转发给开发人员。祝大家生活有热情！
大隐隐于市，小归归于心，希望可以笔随心动。
微信号：，最强思维导图训练营招募中...公众号：小归ing
作者：小归 这几天小归一直在阅读《学习之道》、《自组织》、《深度工作》等书，每天使用“小打卡”写读书感悟，感觉还蛮不错的。“小打卡”是微信小程序，我在推荐这个小程序给小伙伴的时候，遇到一个问题，就是大家还不知道什么是小程序？那么，在推荐“小打卡”之前，先来介绍一下小程序的概...
实在不会玩这个编辑器，后面新增的demo也不知道怎么加连接，得辛苦大家自己手动复制了 1：官方工具：https://mp.weixin.qq.com/debug/w ... tml?t=1 2：简易教程：https://mp.weixin.qq.co...
Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智能路由，微代理，控制总线）。分布式系统的协调导致了样板模式, 使用Spring Cloud开发人员可以快速地支持实现这些模式的服务和应用程序。他们将在任何分布式...
1月2日更新demo 微信小程序学习用demo：todolist，带简易后端 微信小程序完整demo：游轮中心，富文本解析，包括前后台 微信小程序学习用demo：小马互联：animation，简易布局 微信小程序demo：cnode社区 微信小程序demo：今日头条 微信小...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
信息是我们一直在谈论的东西，但信息这个概念本身依然比较抽象。但信息可不可以被量化，怎样量化？答案当然是有的，那就是“信息熵”。早在1948年，香农(Shannon)在他著名的《通信的数学原理》论文中指出：“信息是用来消除随机不确定性的东西”，并提出了“信息熵”的概念（据说是...
读研究生的时候一个人出去玩。 那时候年轻，还是妥妥的穷游主义。 一个人背着个大包，也没什么计划，走到哪算哪。想住下了就到处找青旅，找不到青旅就随便找个小旅馆住下。 结果在云南几个小镇子里，连续几天住店时都会有一个妹子和我前后脚进店。 妹子颜值不错，高挑纤细，是我喜欢那种运动...
对于Nginx，一个IP上配置多个站点还是很常见的。尤其是在开发环境上，更是如此。 下面在我的阿里云上简单的实现这样一个需求： 在一个IP上通过对端口区分来配置多个站点。 [toc] 环境 手头上正好有一台阿里云学生机，趁着没过期，就拿来用吧。 操作系统：centOS7 p...
1.感激科二报名成功，要好好努力呀。 2.感激Timmy入园哭闹以后很快适应，说明天愿意来幼儿园。 3.感激老公给我买鸡爪吃。 4.感激早上在天水路多睡了20分钟。 5.感激公公中午做的超级美味的煮牛肉。 6.感激今晚打印照片时关于土耳其的回忆，对小呆充满了感激----生日...
hiredis的使用 标签（空格分隔）： Linux 作业部落地址：https://www.zybuluo.com/LIUHUAN/note/.hiredis的安装，这个就不介绍了。 2.同步API接口的使用 接口的主要部分为下面三个部分，下面分别介绍。 2...1843人阅读
个人（48）
笔记（23）
微信小程序（4）
maker一下使用scroll-view实现下拉加载更多（下一页），比较粗糙，如下图。
由于数据是死数据，只能加载一次（如图）。
源码下载：
下拉逻辑由scroll-view里的bindscrolltolower参数实现。
判断是否可以下拉由当前页数和总页数比较判断
class="borderTop1px"&&
wx:if="{{resultShow}}&
class="content_zero" animation="{{animationData}} wx:if="{{orderList.length==0}} &
mode="aspectFit" src="../../../../image/search_zero.png"&&
class="tip color_888888"&没有该{{orderCon==0?'商品':'用户'}}的订单记录&
scroll-y scroll-top="{{scrollTop}} style="height: {{windowHeight}}
bindscrolltolower="loadMore" bindscroll="scroll"&
wx:for="{{orderList}}&
animation="{{animationData}} class="order_msg bg_fff" &
class="item_status display-flex-row"&
src="../../image/oreder-desc.png"&&
wx:if="{{item.state==1}} class="status_content color_ff6700"&待付款&
wx:elif="{{item.state==2}} class="status_content color_ff6700"&待发货&
wx:elif="{{item.state==3}} class="status_content color_ff6700"&待收货&
wx:elif="{{item.state==4}} class="status_content color_ff6700"&已完成&
wx:else="{{item.state==5}} class="status_content color_ff6700"&异常&
class="item_wrap display-flex-row" wx:for="{{item.goods}}&
src="{{item.good.good_display_img}} mode="aspectFit" class="item_item_image"&&
class="item_msg" &
class="item_item_title" &
class="text-hide"&{{item.good.good_name}}&
class="item_item_bot"&
class="color_888888 text-hide" &
花型: wx:for="{{item.flowers}} &
& {{item.flower_name}}&
class="display-flex-row" style="justify-content: space-"&
class="item_item_price"&?{{item.good.good_price}}&
&x{{item.number}}&
class="item_count display-flex-row"&
class="count_content"&合计: class="count_price"&?{{item.totalprice}}&&
class="loading_area display-flex-row" wx:if="{{showLoadding}}&
type="waiting" size="20"
color="#ff6700"/&
&加载中...&
var app = getApp()
* 页面的初始数据
chooseGoods: {},
startDate: "",
endDate: "",
orderList: [],
{ "count": 2,
{ "goods": [{ "number": 1, "flowers": [{ "flower_name": "花花" }],
"order_good_id": "0e96b13e39ea49bcbce6c5ccee32ab4e",
"good_id": "edcec1aa556",
"order_id": "ec48b31f788",
"good_display_img": "../../image/zhutu.jpg",
"good_name": "小明",
"good_price": 10,
"order_id": "ec48b31f788",
"totalprice": 120.00
{ "goods": [
{ "number": 1, "flowers": [{ "flower_name": "蓝" }],
"order_good_id": "0caf434a5dc0fbcefcc2ef",
"good_id": "b7b698cd4bde4e67e75e",
"order_id": "f3eac59e29e53e3bbfb33f",
"good_display_img": "../../image/zhutu.jpg",
"good_price": 10,
"good_name": "小炮",
{ "number": 1, "flowers": [{ "flower_name": "ee" }],
"order_good_id": "c4b3de97bd0",
"good_id": "edcec1aa556",
"order_id": "f3eac59e29e53e3bbfb33f",
"good_display_img": "../../image/zhutu.jpg",
"good_name": "小明",
"good_price": 20,
{ "number": 1, "flowers": [{ "flower_name": "绿" }],
"order_good_id": "797ecaf6ec0241a1bce5b21443faff21",
"good_id": "c32d93ea90f34ad2b458d3e5f2a9152f",
"order_id": "f3eac59e29e53e3bbfb33f",
"good_display_img": "../../image/zhutu.jpg",
"good_name": "德莱文",
"good_price": 20,
"order_id": "f3eac59e29e53e3bbfb33f",
"totalprice": 120.00
{ "goods": [
{ "number": 3, "flowers": [{ "flower_name": "绿" }],
"order_good_id": "358ffa4caac1c",
"good_id": "c32d93ea90f34ad2b458d3e5f2a9152f",
"order_id": "47f894e2de",
"good_display_img": "../../image/zhutu.jpg",
"good_price": 20,
"good_name": "德莱文",
{ "number": 1, "flowers": [{ "flower_name": "花花" }],
"order_good_id":
"adf0d5d5c7bd480e9b26f21e7e869a45",
"good_id": "edcec1aa556",
"order_id": "47f894e2de",
"good_display_img": "../../image/zhutu.jpg",
"good_price": 20,
"good_name": "小明",
"order_id": "47f894e2de" ,
"totalprice": 120.00
resultShow: false,
orderCon: 0,
conId: '',
windowHeight: '',
scrollPd: false,
scrollTop: 0,
showLoadding: false,
* 生命周期函数--监听页面加载
onLoad: function (options) {
var that = this;
wx.getSystemInfo({
success: function (res) {
that.setData({
windowHeight: res.windowHeight
var animation = wx.createAnimation({
duration: 1000,
timingFunction: "ease",
animation.translateY(5).step();
this.setData({
animationData: animation.export()
wx.setNavigationBarTitle({
title: '商品订单记录'
var row=that.data.
that.queryOrdersByGood(1, row)
* 操作数据
* 由于是死数据，page只为判断是否还有下一页
queryOrdersByGood: function (page, row) {
var that = this;
var dataList = that.data.dataL
var count = dataList.
var myList = dataList.
that.setData({
orderList: myList.concat(that.data.orderList),
resultShow: true,
showLoadding: false,
page: page,
if (parseInt(count) & parseInt(that.data.page)) {
that.setData({
scrollPd: true,
* 加载更多 下一页
loadMore: function () {
var that = this;
var thatData = this.
var pd = thatData.scrollPd;
wx.showToast({
title: '加载中...',
duration:100,
icon: 'loading',
that.setData({
scrollPd: false
var page = thatData.
var row = thatData.
var pageAdd = parseInt(page) + 1;
that.setData({
showLoadding: true,
that.queryOrdersByGood(pageAdd, row);
* 滑动事件
scroll: function (e) {
var that = this;
that.setData({
top: e.detail.scrollTop
.display-flex-row{
display: flex;
flex-direction: row;
.borderTop1px{
border-top: 1px solid #e5e5e5;
background-color:#FFF;
.order_msg{
padding:5px 20rpx;
margin-bottom:10rpx;
.select_hidden{
height: 35px;
.order_msg .item_status{
justify-content: space-between;
font-size:12pt;
border-bottom: 1px solid #E5E5E5;
padding: 10rpx 0 5rpx 0;
.order_msg .item_status {
width: 18pt;
height: 18pt;
.order_msg .item_wrap {
justify-content: center;
align-items: center;
padding:10rpx 0;
background-color: #FFF;
border-bottom: 1px solid #E5E5E5;
width:710rpx;
.order_msg .item_msg{
display: flex;
flex-direction: column;
justify-content: space-around;
width: 550rpx;
margin-left:20rpx;
font-size:11pt;
height: 80px;
.order_msg .item_item_image {
width: 150rpx;
height: 80px;
.order_msg .item_item_title {
padding: 0 10px 0
.item_count {
font-size:12pt;
padding-top:10rpx;
justify-content: flex-end;
.item_count .count_price{
font-size:14pt;
.content_zero{
margin-top:20%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.content_zero .tip{
font-size: 10pt;
.content_zero {
height: 100PX;
.loading_area{
font-size:10pt;
align-items: center;
justify-content: center;
margin:20rpx 0;
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：81910次
积分：1329
积分：1329
排名：千里之外
原创：58篇
(2)(1)(1)(2)(10)(16)(6)(14)(6)(2)(2)(2)
(window.slotbydup = window.slotbydup || []).push({
id: '4740890',
container: s,
size: '250,250',
display: 'inlay-fix'