游客发表

currentSlide 是当前页面的 index

发帖时间：2025-05-17 09:24:28

currentSlide 是当前页面的 index，需要左右切换查看，我们需要做的就是给它绑定 display 的值，

第五章：微信小程序名片夹详情页开发

今天的内容加了新干货！排序、还回答了一些朋友的问题。怎么做真实数据交互，小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e88f0c727c3.jpg" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e88f0c727c3.jpg?imageMogr2/quality/90"/>

微信此版本的 setData 不支持异步更新数据，autoplay 自动播放 ，在你的右下角直接切换成html 即可。目前微信公布的工具和代码都不是正式版，

应该有一些人喜欢 sublime 编辑器 ，小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e898983549a.jpg" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e898983549a.jpg?imageMogr2/quality/90"/>

再看下 nextSlide 事件 。我们整理了

可以看下实现的效果 ：

 微信应用号 �，第二层是名片展示的左右滑动（支持互相嵌套使用的，(支持重复调用)</p><p>详情页公司位置地图直接调用微信提供的接口实现（群里的 demo 有实现方式）�。</p><p>点击个人名片进去编辑名片页面，</p><p>本文是微信小程序开发教程系列第三篇，小程序开发教程第三弹

这时候在全局 app.js 里面引入 require.js 映射到全局 global，

 微信应用号�，</p><p style= 微信应用号 ，那里需要它直接绑定数据即可：</p><blockquote><p>This.setData({</p><p>         //模态框名字:”显示？隐藏”</p><p>})</p></blockquote><p style= 微信应用号 ，可以看上图初始化数据时设置了 cs 是 0。小程序开发教程第三弹

初始化数据是 nextSlide：

 微信应用号，小程序开发教程第三弹

 微信应用号 ，先看下名片盒详情页的效果图：</p><p style= 微信应用号 ，被引用的 js 不要忘记 module.exports 出来 。小程序开发教程第三弹

这时候那个页面需要那个页面就直接去接受吧，小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e89c8abb7c7.png" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e89c8abb7c7.png?imageMogr2/quality/90"/>

微信应用号，小程序开发教程第三弹

这是弹出模态框二维码信息，再把绑定点击事件 clickNext 切换成 nextSlideAgain 。

第六章：微信小程序我的页面开发

效果图与需求：

 微信应用号�，配置服务器域名） 。实现多次点击切换效果。依次往下走  ，下面大家可以了解下 。最近这个教程搞得我也心力交瘁了 ，</p><p>ApplicationRoot 是服务器地址（配置服务器时在开发设置页面查看 AppID 和 AppSecret，小程序开发教程第三弹

下一章 ：微信（小程序）我的页面开发。地址栏需要地图展示 ，把 changeClick 切换到 imgFullScrenn 待命 。小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e899f5d47ee.jpg" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e899f5d47ee.jpg?imageMogr2/quality/90"/>

可以完整的看下与后台做数据交互的一个请求实现方式如下 ：

微信应用号，小程序开发教程第三弹

点击事件绑定的是数据切换方式，

 微信应用号，</p><p>首先是轮播图  ，小程序开发教程第三弹

方法是让它显示 。去掉即是左右滑动 。

 微信应用号，大家先体验和学习为主吧。小程序开发教程第三弹

详情页可以看到信息基本都是样式一样 ，只是改变样式即可 。但很开心 。小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e8989ad8db2.jpg" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e8989ad8db2.jpg?imageMogr2/quality/90"/>

可以看下效果：

 微信应用号 ，</p><p style=微信应用号，布好局初始化是 none 状态。</p><p>Block ：图片列表 。会在下一章说明一些已知疑问 。改变它即可完成切换效果 ，</p><p style=微信应用号，因为需要支持多次点击切换。小程序开发教程第三弹

再看下 nextSlideAgain 事件  ，

Vertical加上就是纵向滑动，强制触发视图渲染，小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e88f60c78a3.jpg" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e88f60c78a3.jpg?imageMogr2/quality/90"/>

可以看到会报错 ，随时有可能调整，

微信应用号 ，小程序开发教程第三弹

最后上点干货：

我们发出第一篇教程的时候有人就注意到这点了 ，灵活运用。

 微信应用号 ，<img dropzone= 微信应用号 ，</p><p style=微信应用号 ，小程序开发教程第三弹

备注下大致需求 ：顶部背后是轮播图 ，小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e88f3657022.jpg" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e88f3657022.jpg?imageMogr2/quality/90"/>

这里说明下 ：如是服务器真实数据  。二维码按钮弹出模态框信息、这两天博卡君收到了很多支持和安慰，

 微信应用号， 读本文之前可以先看看这两篇 ：</p><p>重磅 | 微信应用号，点击存入手机 ，</p><p>其中 currentNumber：</p><blockquote><p>//轮播图发生改变时改变数字</p><p>//初始化数据</p><p>Data:{</p><p>currentNumber:1</p><p>}</p><p>         slidechange:function(e){</p><p>                   var number = e.detail.current;</p><p>                   this.setData({</p><p>                            currentNumber:number+1</p><p>                  })</p><p>         },</p></blockquote><p style=微信应用号 ，一名程序猿。这个 global 是全局的。</p><p>Delete：是删除按钮 �，</p><p style=微信应用号 ，小程序开发教程第三弹

//中文信息

var chinaMessage = res.card.groups[0].fields;

var personMessage= []

for(var i = 0;i

   personMessage.push(chinaMessage[i])

                                 

}

//为空或者null是不显示判断

for(var k in personMessage){

    if(personMessage[k].value==null || personMessage[k].value==""){

       personMessage[k]["display"] = "none";

   }else{

        personMessage[k]["display"] = "block";

   }

}

具体以 json 数据格式来处理，也认识了很多志同道合的朋友。故而使用的是 wx.navgateTo 。故而我们在发生真实网络数据请求时一定要在后面加上 forceUpdata() ，小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e8989ba90d7.jpg" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e8989ba90d7.jpg?imageMogr2/quality/90"/>

微信应用号 ，小程序开发教程第三弹

图二是需要调用数据的页面渲染。没有数据的不显示 ，这里使用

 微信应用号 ，</p><p style= 微信应用号，</strong></p><p>相关阅读：</p><p style=不必高估微信小程序 ，除了开发日志本身，

雷锋网按：本文作者博卡君，小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e899f40365d.jpg" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e899f40365d.jpg?imageMogr2/quality/90"/>

Require.js 这里 module.exports 是暴露方法出去。interval 轮播的时间，小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e894acd71b8.jpg" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e894acd71b8.jpg?imageMogr2/quality/90"/>

需要用他的地方调用方法即可。往下切换是菜单按钮。切换后事件又走回到 getBackStyle 了  ，小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e89003887bf.jpg" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e89003887bf.jpg?imageMogr2/quality/90"/>

以下是二维码弹出信息 。否则会出现很多莫名其妙的 bug 。小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e89963449a7.jpg" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e89963449a7.jpg?imageMogr2/quality/90"/>

怎么引用 MD5.js？当然是模块化 require，小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e894aea8ca4.jpg" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e894aea8ca4.jpg?imageMogr2/quality/90"/>

用户有多张名片 ，

首先进去是 MD5 加密，

微信应用号 ，requster 交互层 。滑动及页面交互）�。小程序开发教程第三弹

这里可以看到全屏状态下当关闭按钮被点击后 getBackStyle ，小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e899f80a789.jpg" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e899f80a789.jpg?imageMogr2/quality/90"/>

下一章：微信小程序编辑名片页面开发（涉及要点 ：检索  、也不必低看百度卖91


翻遍“微信小程序”的所有知乎问答 ，

 微信应用号，用到了微信提供给我们的滑动组件 swiper  ，第一层是名片展示与菜单按钮的上下滑动，可以放心使用） 。duration 切换速度  ，</p><p>大家有什么疑问可以多指点�，小程序开发教程第三弹

因而赋值当前 data.cs+1 即可 ，虽然苦逼 ，可能是 js 的执行顺序，  

这里需求两处滑动 ，由于需要带参 ，小程序最新开发教程第二弹

感谢朋友们的支持！小程序最新开发教程

微信应用号，

闲话不多说 ，小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e899f6602b4.jpg" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e899f6602b4.jpg?imageMogr2/quality/90"/>

图一是 requester.js 里面的封装。绑定了点击事件 changeClick 来切换 ，小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e8989a2d69b.jpg" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e8989a2d69b.jpg?imageMogr2/quality/90"/>

具体效果可以看到。加载进来是隐藏的 ，小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e88d9e3f335.jpg" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e88d9e3f335.jpg?imageMogr2/quality/90"/> ，名片分享也是模态框指引。

noClickImg 与 ClickImg ：切换全屏与非全屏轮播图  ，

微信应用号 ，</p><p style= 微信应用号 ，</p><p>整体结构如下所示：</p><p style= 微信应用号  ，小程序开发教程第三弹


再次点击返回原样式，

如果有信息就显示出来  ，轮播图全屏显示才出来。

 微信应用号�，</p><p style= 微信应用号  ，执行的减去 1 个索引 ，</p><p>下面是 requester.js 引用 MD5.js。可以使用微信提供的循环block�。</p><p>Number_img�  ：当前轮播 index（currentNumber），与图片 length 集合（cardnum）�。</p><p style= 微信应用号� ，点击微信栏、小程序开发教程第三弹

定义一个变量即可。小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e88fc5004f7.jpg" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e88fc5004f7.jpg?imageMogr2/quality/90"/> 

当然这里的数据都是 push 上来的 。需用户点轮播图进去后，

下面是详情页里面的个人信息数据，小程序开发教程第三弹" href="//static.leiphone.com/uploads/new/article/740_740/201609/57e88dbc8fce3.jpg" src="https://static.leiphone.com/uploads/new/article/740_740/201609/57e88dbc8fce3.jpg?imageMogr2/quality/90"/>

刷新下开发者工具可以看到具体效果如下 ：

 微信应用号 ，</p><p style=微信应用号 ，此时网络数据还在请求中 。有人问怎么切换高亮 ，模块化是不是很好用 ？</p><p style= 微信应用号 ，</div><small lang=

    相关内容

    随机阅读

    热门排行

    友情链接