全球首个微信小程序应用号开发教程319074.docx

《全球首个微信小程序应用号开发教程319074.docx》由会员分享，可在线阅读，更多相关《全球首个微信小程序应用号开发教程319074.docx（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第五章章：微信信小程序序名片夹夹详情页页开发备注下大大致需求求：顶部部背后是是轮播图图，二维维码按钮钮弹出模模态框信信息、点点击微信信栏、点点击存入入手机，地地址栏需需要地图图展示，名名片分享享也是模模态框指指引。首先是轮轮播图，autoplay 自动播放，interval 轮播的时间，duration 切换速度，可以根据自己需求去添加。Deleete：是删除除按钮，加加载进来来是隐藏藏的，需需用户点点轮播图图进去后后，轮播播图全屏屏显示才才出来。noClickImg 与 ClickImg：切换全屏与非全屏轮播图，绑定了点击事件 changeClick 来切换，只是改变样式即可。Block：图

2、片列表。Number_img：当前轮播 index（currentNumber），与图片 length 集合（cardnum）。其中 currentNumber：/轮轮播图发发生改变变时改变变数字/初始始化数据据Dataa:currrenttNummberr:1sliddechhangge:ffuncctioon(ee)var nummberr = e.ddetaail.currrennt;thiss.seetDaata(currrenttNummberr:nuumbeer+11),这里可以以看到全全屏状态态下当关关闭按钮钮被点击击后 ggetBBackkStyyle，把把 chhanggeC

3、llickk 切换换到 iimgFFulllScrrennn 待命命。再次点击击返回原原样式，切换后事事件又走走回到 gettBacckSttylee 了，灵灵活运用用。刷新下开开发者工工具可以以看到具具体效果果如下：详情页可可以看到到信息基基本都是是样式一一样，可可以使用用微信提提供的循循环 bblocck。下面是是详情页页里面的的个人信信息数据据，如果有信信息就显显示出来来，没有有数据的的不显示示，这里里使用/中文文信息 vvar chiinaMMesssagee = ress.caard.grooupss0.fiieldds;var perrsonnMesssagge= ffor(var

4、r i = 00;ichiinaMMesssagee.leengtth;ii+) perrsonnMesssagge.ppushh(chhinaaMesssaggeii) /为空空或者nnulll是不显显示判断断 foor(vvar k iin pperssonMMesssagee) if(perrsonnMesssaggekk.vvaluue=nulll | pperssonMMesssageek.vaaluee=) perrsonnMesssaggekkdissplaay = noone; ellse perrsonnMesssaggekkdissplaay = bllockk; 具体以

5、jsoon 数数据格式式来处理理，我们们需要做做的就是是给它绑绑定 ddispplayy 的值值，然后后我们调调用即可可。微信此版版本的 settDatta 不不支持异异步更新新数据，故故而我们们在发生生真实网网络数据据请求时时一定要要在后面面加上 forrceUUpdaata()，强强制触发发视图渲渲染，否否则会出出现很多多莫名其其妙的 bugg。这里说明明下：如如是服务务器真实实数据。可以看到到会报错错，可能能是 jjs 的的执行顺顺序，依依次往下下走，此此时网络络数据还还在请求求中。定义一个个变量即即可。当然这里里的数据据都是 pussh 上上来的。以下是二二维码弹弹出信息息。这是弹出出

6、模态框框二维码码信息，布布好局初初始化是是nonne状态态。那里里需要它它直接绑绑定数据据即可：Thiss.seetDaata(/模态态框名字字:”显示示？隐藏藏”)方法是让让它显示示。需要用他他的地方方调用方方法即可可。(支持重重复调用用)详情页公公司位置置地图直直接调用用微信提提供的接接口实现现（群里里的 ddemoo 有实实现方式式）。可以看下下实现的的效果：下一章：微信（小小程序）我我的页面面开发。第六章：微信小小程序我我的页页面开发发效果图与与需求：用户有多多张名片片，需要要左右切切换查看看，往下下切换是是菜单按按钮。这里需求求两处滑滑动，用用到了微微信提供供给我们们的滑动动组件 s

7、wiiperr，并且且进行了了嵌套使使用，第第一层是是名片展展示与菜菜单按钮钮的上下下滑动，第第二层是是名片展展示的左左右滑动动（支持持互相嵌嵌套使用用的，可可以放心心使用）。Vertticaal 加加上就是是纵向滑滑动，去去掉即是是左右滑滑动。整体结结构如下下所示：点击事件件绑定的的是数据据切换方方式，因因为需要要支持多多次点击击切换。初始化数数据是 nexxtSllidee：再看下 nexxtSllidee 事件件。cuurreentSSlidde 是是当前页页面的 inddex，改改变它即即可完成成切换效效果，可可以看上上图初始始化数据据时设置置了 ccs 是是 0。因而赋值值当前 da

8、tta.ccs+11 即可可，再把把绑定点点击事件件 cllickkNexxt 切切换成 nexxtSllideeAgaain。再看下 nexxtSllideeAgaain 事件，执执行的减减去 11 个索索引，实实现多次次点击切切换效果果。具体效果果可以看看到。点击个人人名片进进去编辑辑名片页页面，由由于需要要带参，故故而使用用的是 wx.navvgatteToo。可以看下下效果：最后上点点干货：我们发出出第一篇篇教程的的时候有有人就注注意到这这点了，怎怎么做真真实数据据交互，下下面大家家可以了了解下。首先进去去是 MMD5 加密，rrequusteer 交交互层。怎么引用用 MDD5.jj

9、s？当当然是模模块化 reqquirre，被被引用的的 jss 不要要忘记 moddulee.exxporrts 出来。下面是 reqquessterr.jss 引用用 MDD5.jjs。AppllicaatioonRooot 是服务务器地址址（配置置服务器器时在开开发设置置页面查查看 AAppIID 和和 ApppSeecreet，配配置服务务器域名名）。Requuiree.jss 这里里 moodulle.eexpoortss 是暴暴露方法法出去。这时候在在全局 appp.jss 里面面引入 reqquirre.jjs 映映射到全全局 gglobbal，这这个 gglobbal 是全局局的

10、。这时候那那个页面面需要那那个页面面就直接接去接受受吧，模模块化是是不是很很好用？可以完整整的看下下与后台台做数据据交互的的一个请请求实现现方式如如下：图一是是 reequeesteer.jjs 里里面的封封装。图二是需需要调用用数据的的页面渲渲染。大家有什什么疑问问可以多多指点，会会在下一一章说明明一些已已知疑问问。应该有一一些人喜喜欢 ssubllimee 编辑辑器，有有人问怎怎么切换换高亮，在在你的右右下角直直接切换换成 hhtmll 即可可。咨询更多多微信小程程序学习习班信息息，请点点击以下微信信公号文文章链接了解解(或扫以下二维维码详细细了解)：htttp:/mpp.weeixiin

11、.qqq.ccom/s?_biiz=MMjM55ODggwNjjE2MMw=&miid=22247748336688&iddx=11&snn=9111877cf449beef9dd5b229addb4aa9cbb4c11cd99&chhksmm=a66c4556e8891bb3dfffe99ceff42ff5144bfcc3c557aeedd99df448daa3899378871ee0c11ec1176990766b533bf66bdff19&mpssharre=11&sccenee=1&srccid=10117Zaawfhhl4wwUrDDI3eebDCCp011#rdd可扫以下下公众号二二维码详详细了解解：