微信公开课

微信公开课小程序热议问题「转如何在微信小程序里面实现跨页面通信」
摘要：如何解决转如何在微信小程序里面实现跨页面通信
展开：我们在处理业务需求的时候，常常会遇到一些情况，在二级或者三级页面进行某些操作或者变更后，需要将结果通知到上级页面去。比如：选择了某些配置项，点击保存后，外部页面能够立即变更在上传头像页面，上传完毕后，外部页面的头像能够立即显示为新头像。所以，这个时候就涉及到如何在页面之间通信的问题了。跨页面通信进一步说其实就是一个程序内部的事件通知机制问题，在其他平台或者OS上都一些相应的实现，比如:iOSSDK自带的NotificationCenterAndroid平台著名的第三方库EventBus目前微信小程序官方SDK还没有提供EventAPI来帮助开发者实现页面间通信，所以我们今天来看看，自己如何实现这样一个简单的小工具。说到这里就不得不说“云梦”的微信小程序版本了，在小程序开始公测后，我们也在第一时间将“云梦”的基本功能移植到了小程序平台上。整个过程相当顺利，除了小程序的IDE还不是太稳定外，基本上没啥大问题。开发过程和ReactNative基本相似，大概一天时间就搞定了。QuickAndDirty我们知道，在小程序里面一个页面的变化，是通过调用setData函数来实现的。所以想做到在二级页面里让一级页面产生变化，最QuickAndDirty的做法就是把一级页面的this传入到二级页面去，这样我们在二级页面调用page1.setData(…)就可以立即引发外部的变化。但是这并不是一个好的方案，不仅产生了页面的耦合，而且也并不能处理复杂的数据逻辑，因为二级页面不并清楚也不应该关心一级页面想怎么处理当前数据。所以二级页面只应该把变更后的数据通知给一级页面即可，至于一级页面是想刷新界面，还是想本地存储或者发起网络通信，别人都不需知晓了。简单的Callback如果只是想把数据通知给外部页面，那应该怎么做呢我们来看看第二个方案，如果想产生一个通知，这里就需要用到callback机制了。即关心数据变化的页面，注册一个callback函数到一个公共的地方；而数据变更者在变更数据后，将新的数据放入同一个公共的地方；在放入数据时，同时调用这个callback函数，让callback函数实现者接收到这个变化。哪这个公共的地方在哪里呢第一反应就是app.js里面，因为小程序提供了一个API叫做getApp()，让page初始化时，可以通过以下代码：varapp=getApp()来获取app实例，从而实现全局的数据共享，并且微信也很贴心的在Demo代码里面留了一个globalData字段，以暗示开发者这里是可以用来存储全局数据的。App({...globalData:{userInfo:null}...})基于app.js方案的伪代码如下：//app.jsApp({addListener:function(callback){this.callback=callback;},setChangedData:function(data){this.data=data;if(this.callback!=null){this.callback(data);}}})然后我们在一级页面的onLoad中调用addListener：//page1.jsvarapp=getApp()Page({onLoad:function(){app.addListener(function(changedData){that.setData({data:changedData});});}})在二级页面数据变更的地方调用：//page2.jsvarapp=getApp()Page({onBtnPress:function(){app.setChangedData(page2data);}})一个基本合格的方案以上就是跨页面通信的最基本原理，不过这也是一个很dirty的方案，因为上面的代码只能支持一种Event的通知，而且也不能针对这个Event添加多个监听者比如有多个页面需要同时知道某数据变更。让我们来看看一个基本合格的Event管理器应该具备怎样的能力支持多种Event的通知支持对某一Event可以添加多个监听者支持对某一Event可以移除某一监听者将Event的存储和管理放在一个单独模块中，可以被所有文件全局引用根据以上的描述，我们来设计一个新的Event模块，对应上面的能力，它应该具有如下三个函数：on函数，用来向管理器中添加一个Event的Callback，且每一个Event必须有全局唯一的EventName，函数内部通过一个数组来保存同一Event的多个Callbackremove函数，用来向管理器移除一个Event的Callbackemit函数，用来触发一个Event我们在小程序的utils目录中，新建一个event.js文件，来作为一个独立的模块，伪代码如下://event.jsvarevents={};functionon(name,callback){varcallbacks=events[name];addToCallbacks(callbacks,callback);}functionremove(name,callback){varcallbacks=events[name];removeFromCallbacks(callbacks,callback);}functionemit(name,data){varcallbacks=events[name];emitToEveryCallback(callbacks,data);}exports.on=on;exports.remove=remove;exports.emit=emit;我们来看看在一二级页面应该如何来使用这个Event模块在二级页面中触发事件：//page2.jsvarevent=require(../../utils/event.js);Page({onBtnPress:function(){event.emit(DataChanged,page2data);}});在一级页面的onLoad中监听事件，onUnload中取消监听：//page1.jsvarevent=require(../../utils/event.js);Page({onLoad:function(){varthat=this;event.on(DataChanged,function(changedData){that.setData({data:changedData});});},onUnload:function(){event.remove(DataChanged,...);}});咦，似乎哪里不对remove需要接受两个参数，第一个是EventName，第二个是Callback，但是我们的Callback以匿名函数的方式写在了event.on(...)的调用语句里面好吧，那我们不得不修改一下语句的调用方式：//page1.jsvarevent=require(../../utils/event.js);Page({onDataChanged:function(changedData){this.setData({data:changedData})},onLoad:function(){event.on(DataChanged,this.onDataChanged);},onUnload:function(){event.remove(DataChanged,this.onDataChanged);}});这样就OK了么NONONONO熟悉Javascriptthis这个大坑的朋友们一定会知道，在onDataChanged这个函数中调用的this并不是我们Page中的那个this，所以根本不可能调用到this.setData(....)，于是我们用bind大法稍微调整一下：onLoad:function(){event.on(DataChanged,this.onDataChanged.bind(this));}onUnload:function(){event.remove(DataChanged,this.onDataChanged.bind(this));}现在OK了么NONONONO如果大伙敲代码试试，就会发现依然还是不行因为this.onDataChanged.bind(this)会产生一个新的匿名函数，即bind的返回值是一个函数，那么在onLoad和onUnload里面，各自调用了bind大法，从而产生了各自的匿名函数，也就是说event.remove(...)塞进去的那个函数，并不是event.on(...)塞进去的那个函数，这样就造成了remove时无法正确匹配。removeFromCallbacks的伪代码大致如下：functionremoveFromCallbacks(callbacks,callback){varnewCallbacks=[];for(varitemincallbacks){if(item!=callback){newCallbacks.push(item);}}returnnewCallbacks;}所以我们会发现remove传入的callback永远无法在callbacks数组中被匹配到，从而也就无法正确移除了。最终的代码实现当EventName+Callback无法唯一决定需要移除的监听者时，那么自然想到的就是再增加一个key值，我们可以用Page自身的某个特性来做key，比如pagename，新的remove原型如下：functionremove(eventName,pageName,callback);pageName是一个字符串，如果开发者不能做到全局内pagename唯一的话比如开发者一不小心写错了，那就可能会出现后来监听者冲掉前面监听者的情况，从而造成无法收到通知的bug。所以这里看起来还是用page的this做key比较靠谱，修改后的函数原型如下：functionon(name,self,callback);functionremove(name,self,callback);让我们来看看内部具体怎么实现。以下是一个完整的on函数实现：functionon(name,self,callback){vartuple=[self,callback];varcallbacks=events[name];if(Array.isArray(callbacks)){callbacks.push(tuple);}else{events[name]=[tuple];}}第二行我们将self(即page的this)和callback合并成一个tuple第三行从events容器中，取出该EventName下的监听者数组callbacks如果该数组存在，则将tuple加入数组；如果不存在，则新建一个数组。remove的完整实现：functionremove(name,self){varcallbacks=events[name];if(Array.isArray(callbacks)){events[name]=callbacks.filter((tuple)={returntuple[0]!=self;});}}第二行从events容器中，取出该EventName下的监听者数组callbacks如果callbacks不存在，则直接返回如果存在，则调用callbacks.filter(fn)方法filter方法的含义是通过fn来决定是否过滤掉callbacks中的每一个项。fn返回true则保留，fn返回false则过滤掉。所以我们调用callbacks.filter(fn)后，callbacks中的每一个tuple都会被依次判定。fn的定义为：(tuple)={returntuple[0]!=self;}tuple中的第一个元素self和remove传入的self相比较，如果不相等则返回true被保留，如果相等则返回false被过滤掉。callbacks.filter(fn)会返回一个新的数组，然后重新写入events[name]，最终达到移除callbacks中某一项的逻辑。最后再来看看emit的实现：functionemit(name,data){varcallbacks=events[name];if(Array.isArray(callbacks)){callbacks.map((tuple)={varself=tuple[0];varcallback=tuple[1];callback.call(self,data);});}}第二行从events容器中，取出该EventName下的监听者数组callbacks如果callbacks不存在，则直接返回如果存在，则调用callbacks.map(fn)方法和filter的用法类似，map函数的作用相当于for循环，依次取出callbacks中的每一个项，然后对其执行fn(tuple)，从其名字就可以看出map就是映射变换的意思，将item变换为另外一种东西，这个映射关系就是fn。fn的定义为：(tuple)={varself=tuple[0];varcallback=tuple[1];callback.call(self,data);}对传入的tuple，分别取出self和callback，然后调用Javascript的call大法：fn.call(this,args)从而最终实现调用到监听者的目的。讲到这里就基本上差不多了，因为Event模块持有了Page的this，所以一定要在Page的Unload函数中调用event.remove(…)，不然会造成内存泄露。源代码event.js的完整源代码和Demo请见https://github.com/danneyyang/weappevent原作者:danneyyang
更多有关转如何在微信小程序里面实现跨页面通信的小程序开发问题勤请扫码关注微信公开课小程序参与讨论！

微信公开课小程序热议问题「转微信小程序：tabbar未显示，页面之间传参，picker组件取值」
摘要：如何解决转微信小程序：tabbar未显示，页面之间传参，picker组件取值
展开：作者：太多的无奈啊微信小程序发布到现在有段时间了，公司内部正在做一个小程序的项目，做的过程中踩到了不少问题，这里说一下遇到的问题和解决方案，希望能帮到正在做的人，也希望又正好的解决方案的人可以给我提供意见和建议，谢谢1.小程序底部导航条设置未显示问题这两个地址逻辑上是一个页面，如果你设置的不是一个页面，就会导致底部导航条不显示。2.如何更改小程序别的页面的顶部标题小程序每个页面都有一个顶部标题，这个标题是在app.json中的navigationBarTitleText，进行设置的，如果别的页面不设置就默认全显示app.json中的标题，如果需要每个页面有自己的标题，就需要在当前页面的文件夹下建一个xxxx.json的配置文件，navigationBarTitleText：“xxxx”,就可以进行设置了。3.如何在页面之间传参数譬如从列表页跳转到详情页，这样需要传相应内容的id到详情页可以再绑定点击事件的地方加上dataXXXX里面是内容的id这样通过bintap的事件就可以拿到相应的参数在通过下面的方法就可以拿到id在进行跳转就行了，id在详情页会带到options中console.log(options)，就可以看到从列表页带过来的id了。4.picker组件取值问题小程序没有selectoption的下拉菜单至少本萌新不太会做。，通过picker实现的选择，在选择相应的值进行查询的时候遇到了一个问题，picker的change事件拿到的是当前值在数组中的位置，想要往后台传值进行查询的话一般会传id，这里我第一个方案是把id放在picker的dataid={{id}}上，这样确实取到id了，但是取到的却总是上一次选择的id，然后就换了一个方案，通过this.data.数组名，可以获取到当前page下data里面的某个数组在把获取到的值传到数组名里面，就可以拿到相应的值了代码如下，这个项目里有三个筛选，我都是这么进行操作的，感觉吧。并不是很好，希望有大神看到可以给出更好的方法。5.浮动问题写页面的时候总是会用到浮动，就会出现相应的浮动问题，其实这个问题不大，在群里看到有人问过，就说一嘴，大神可忽略。html里面是通过添加clear中的样式是clear:both;然后把这层div放到浮动div底下就会取除下面的dom的浮动问题，小程序中是一样的，添加viewclass=clear就可以了。/view6.公共部分的代码譬如在拼链接时的path听同事说小程序最大上传只能有1M但是我没找到哪里有说。，不过为了少写点代码，可以把一些东西提成公共的部分，譬如path这里就把path的app.js全局变量设置好了，然后在需要的页面里通过varapp=getApp();varpath=app.globalData.path;就可以拿到在app.js里的全局变量了，剩下的就是拼字符串了，同理与样式表，公共的样式最好提成一个文件夹，通过@import的方式引入，js同理，这样代码也会好维护很多，操作起来也方便很多。然而我的项目在尝试的时候并没有注意这个问题，每个页面就是每个页面的，现在在忙于提出公共部分，唉说多了都是泪。7.navigaterTo和navigaterBacknavigaterTo可以再url后面还拼参数，这样可以把需要的参数带到别的页面，navigaterBack是无法往回带参数的然后有的时候需要去别的页面插值的时候需要往上一级页面传参，这里我是用的setStorage的方式写入缓存中，这样在上一级页面的onShow中可以再进行塞值处理这样就可以往上一级页面传值并显示了，我这里的是表单组件，input中虚显示查询页面返回的信息，没想到别的处理方案，这样进行处理的。如果有好的方案敬请告知，谢谢8.获取openId和session_key通过调用login的方法，可以返回一组数据通过data.code可以拿到api中需要的js_code另外两个一个是appid另外一个是秘钥这个在小程序里面可以再设置中找到，具体参数可以参考api文档，里面提供了接口地址。9.真机调试真机调试的时候首先需要把接口的http改成https，需要配置自己的域名，貌似一个月只有三次，需谨慎。android上调试没有问题，但是ios上会出现ssl错误，这个需要在服务器那边进行配置，具体咋配置的我就不知道了，只是知道会有这么一个问题。@天下雪的回复：ssl方面的错误，可以参考这个链接http://www.wxappunion.com/forum.phpmod=viewthreadtid=648，一般都是证书有问题；@钟良：wx.redirectTo和wx.navigateTo以及系统自带的tab：重定向和跳转都能实现到某个界面，a、不过如果从tab的一个界面跳到另一个tab的界面，就要用重定向，否则tab高亮位置会出错；b、通过tab切换时，开发工具会打开新栈，这样老的界面就无法关掉了，超出8个时，跳转和重定向都不能用了，真机上无该问题。我遇到的问题目前就这么多了，其实现在想想有些也不算问题，多看文档就行了，希望看官大人们多提意见，又不对的地方指出告诉我，我会虚心接受的。谢谢原作者:太多的无奈啊来自:http://blog.csdn.net/u010783527
更多有关转微信小程序：tabbar未显示，页面之间传参，picker组件取值的小程序开发问题勤请扫码关注微信公开课小程序参与讨论！

微信公开课小程序热议问题「转微信小程序：开发之前要知道的三件事」
摘要：如何解决转微信小程序：开发之前要知道的三件事
展开：前言微信之父张小龙在年初的那次演讲中曾表示：“我自己是很多年的程序员，我觉得我们应该为开发的团队做一些事情”。几个月后，微信正式推出微信应用号即微信小程序，在互联网中掀起了又一波热潮。于是，很多人准备要开发微信的小程序，如果你真的想要开发小程序，就要先学会一套微信特制的“开发语言”。为了更好地上手这门开发语言，下面这三件事你一定要知道：语言与文件微信小程序来发与其他平台开发的最大差异在于：微信使用的开发语言和文件很“个性”。小程序所使用的程序文件类型大致分为以下几种：WXMLWeiXinMarkLanguage，微信标记语言WXSSWeiXinStyleSheet，微信样式表JSJavaScript，小游戏的主体在语言方面，下程序看似重新定义了一套标准。但实际上，他们与“前端三件套”HTML、CSS和JavaScript差不太多。来来来，看一下微信小程序开发语言和“前端三件套”的异同点。界面搭建1、基本逻辑WXML和WXSS两种文件是小程序界面元素声明及样式描述文件。WXML最大的特点是以视图View的方式串联界面元素，并通过程序逻辑AppService将信息更新实时传递至视图层。View类似于HTML中的div元素，在构建的时候，View可以被多级嵌套，View内可以放置任意视觉元素。需要注意的是，元素一旦超出屏幕之外，用户就无法看到了，这是与HTML哟较大的不同。小程序哟专门用于滚动的视图。如果希望界面是一个可以自由滚动的界面例如列表等，可以使用scrollview视图，在WXSS中将其大小调整为整个屏幕，并设置scrolly上下滚动或scrollx左右滚动为true，注意，小程序中不能直接使用DOM控制WXML元素。如果需要进行数据更新，就要使用WXML提供的数据绑定及元素渲染方法，还有一点，小程序的栅格排版系统使用的是Flex布局，它是W3C在2009年提出的一种排版标准。2、绑定数据对于单个字段，开发者可以使用数据绑定的方法进行信息更新。绑定的数据除了在加载的时候可以更新，也可以在JS主程序中以函数形式进行更新，更新同样可以反应到界面上被绑定的数据中。3、条件渲染与列表循环渲染条件渲染适用于有意外情况提示的页面如无法加载列表或详情时，做出提示等等。它的渲染带有触发条件，即符合条件时渲染这个页面，否则忽略或渲染另一端代码。两个花括号所包含的判断条件中的变量于主程序JS代码中的data中声明。将同一元素渲染代码进行集合。循环的数据可以通过数组的方式写入data中供WXML访问。渲染完毕后，渲染判断条件的变动可以影响界面变动。4、模板与引用WXML支持使用模板与引用减少代码体积。模板是在WXML代码中对相同的代码进行复用的方式。可以将多个模板写入至同一个文件，并使用import在其他文件中进行引用。如果需要整个页面引用，需要使用include。5、样式通过WXSS样式表，开发者可以定义WXML中的元素样式。WXSS与CSS代码一样，可以直接使用选择器选择元素，在WXML中也可以直接定义元素的id和class以便于在WXSS文件中进行样式定义。6、用户操作与事件响应由于微信使用的不是HTML，所以也不能通过添加超链接a元素的方式来检测用户的点击事件。对于需要监听点击事件的元素，应该在WXML中使用bindtap属性或catchtap属性进行绑定。除了点击一次，微信也提供按住、开始触摸、松手等事件响应。在WXML中绑定好一个事件之后，就能在主程序中使用。其他的API中也有相应的事件，这些事件乐意在微信小程序的官方文档中查阅到。当需要在小程序的页面间进行跳转时，应该使用wx.navigateTo()方式。注意，有关于页面层级跳转，微信将层级跳转限制在5层。在开发时一定注意不要超过了相应限制。网络请求方式网络访问小程序支持三种请求方式：HTTP连接、WebSocket、文件收发连接。HTTP连接：请求后直接返回结果，连接结束；Socket连接：持续性连接，当一方主动关闭连接时，连接结束；文件收发连接：顾名思义，发生在文件传输时的连接。录制的语音和选择的照片都需要这个连接完成。注意，通过小程序访问网络需要服务器必须支持HTTPS连接，且端口必须为443。同时，小程序只能访问开发者在登记小程序时设定的服务器地址。开发语言和“前端三件套”的异同点HTML与WXML：两者差异比较大，如果之前没有接触过Android开发，可能会觉得有些头疼。事实上，WXML更像是Android开发中的界面XML描述文件，适合于程序界面的构建；而HTML则倾向于文章的展示这与HTML的历史有关，以及互联网页面的构建。WXSS与CSS：两者在语言上几乎没有差别，可以直接通用。JS文件：小程序的JS文件与前端开发使用的JS几乎没有区别，只是小程序的JS新增了微信的一些API接口，并去除了一些不必要的功能如DOM。在有眼上，小程序完全向学习成本最低的前端开发看齐，但这不代表所有开发者都能无缝迁移。如果你是从前端开发转向小程序，就要注意这两点：1、HTML与WXML两种文件的构建思想差异较大，如果之前只接触过前端开发，需要一点时间才能适应WXML的编写方法。2、虽然小程序使用的是前端语言，但不代表可以继续沿用的开发思想进行开发。小程序对前端开发的要求从构建界面升级成开发完整应用，前端开发需要在意识上进行转变。原作者:liujia216授权网站:http://blog.csdn.net/liujia216/article/details/53162385
更多有关转微信小程序：开发之前要知道的三件事的小程序开发问题勤请扫码关注微信公开课小程序参与讨论！

微信公开课小程序热议问题「转微信小程序textarea简易解决方案」
摘要：如何解决转微信小程序textarea简易解决方案
展开：微信小程序中textarea没有bindchange事件，所以无法在输入时给变量赋值。虽然可以使用bindblur事件，但是绑定bindblur事件，如果再点击按钮，则先执行完按钮事件后，再去执行bindblur事件，所以在js文件取不到输入值，解决方法：结合from表单，textarea文本框输入后，再去点击提交按钮，这时会先执行textarea事件获取文本框输入内容，再去执行数据提交，这样问题就解决了wxml文件代码：span=formbindsubmit=evaSubmitspan=textareaname=evaContentmaxlength=500value={{evaContent}}class=weuitextareaplaceholder=填写内容(12500字)bindblur=charChange/span=buttonformType=submitdisabled={{subdisabled}}class=weuibtnminibtntype=primarysize=mini提交buttonformjs文件代码：1
更多有关转微信小程序textarea简易解决方案的小程序开发问题勤请扫码关注微信公开课小程序参与讨论！

微信公开课小程序热议问题「转微信小程序weapp的底层实现原理」
摘要：如何解决转微信小程序weapp的底层实现原理
展开：首先声明：以下所有内容仅是对微信小程序weapp的个人研究，仅有参考价值，不确保正确；以下所有内容仅用于交流学习，不能做其他用途，欢迎大咖指点其他以下简称wa(weapp,微信小程序)一.wa的运行环境根据微信官方的说明，wa的运行环境有3个平台，IOS的webkit苹果开源的浏览器内核，Android的X5(QQ浏览器内核)，开发时用的nw.jsC++实现的web转桌面应用；二.为什么wa不直接运行在浏览器webview中，而要绕过浏览器直接调用内核呢因为运行在浏览器中的webapp是做不了监控的，而wa的表现是半nativeapp，半webapp，而nativeapp与webapp和一个很重要的区别就是nativeapp有自己的生命周期，在这之中，我们可以根据生命周期的不同时间段做出不同的调整，比如常驻内存，防止被系统杀掉，系统后台保存活度等等，而webapp就没有这回事了，仅仅能够根据事件做出不同的调整，跟原生app比起来，体验就差了一些。基于此，wa当然不会像webapp一样了，他需要有自己的生命周期。本质上来说，wa还是运行在浏览器模式中，而承载wa的系统就是微信，用微信来管理wa的生命周期。而微信，现在本身就是一个系统。微信官方贴出来的生命周期函数主要有以下3个：onLaunch初始化完成，onShow启动时，后由后台进入前台，onHide由前台进入后台三.wa的本质是什么wa的本质就是富单页面web应用。首先，一个wa应用程序就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但与传统的webapp不同的是，它也可以做得很丰富，就像nativeapp一样，可以调用原生的各种接口，像网络状态、罗盘，重力，拨打电话四.wa的wxml,wxss与html,css之间的关系理解了wa的本质，基本上就应该比较清楚的wxml,wxss与html,css之间的关系了。很明显，wxml就是wa的模板语言，在正式部署的时候，会转化成HTML语言，而wxss则会转化为css；那他们又是怎么转化的呢wxml转化为html用的是https://github.com/facebook/react，包括里面整套的逻辑都是建构在reactjs之上的；而wxss与css基本上没有任何不同，除了wa使用的长度单位是rpx之外。加个题外话：微信官方定义的手机整个宽度是750rpx，但我觉得定位375rpx似乎更为恰当理由与本主题无关，略。五.小程序的生命周期与调用系统的api是如何实现的这个就得依赖WeixinJSBridge.js这个脚本了，所有的关键都在这个脚本上。wa通过这个脚本调用原生的接口，而微信用这个脚本来管理wa，包括它的生命周期。这里只谈原理就不贴代码了。Android可以参考https://github.com/lzyzsd/JsBridge，IOS可以参考https://github.com/marcuswestin/WebViewJavascriptBridge六.传统的js库能用大部分都不行。官方的解释是页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境所以不能使用bom相关的对象。而依赖bom的常用的比如说jQuery就无能为力了。这种说法太牵强了。实际上，这是故意为之的。wa正式部署使用webpack打的包，而在打包的过程中，把以下变量给屏蔽了：window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket自然你就访问不了bom对象啦，当然其他很多对象也不能访问啦。这些对象如果访问，就是undefined。为什么要这样做呢还不是为了管理和监控嘛。如果这些对象你能访问，那么你就可以像操作通常的网页一样操作wa，这是绝对不被允许的，所以，你懂的。具体是怎么屏蔽的，帖段代码：define(...,function(require,module,exports,window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket){});七.在nativeapp中是如果实现多个应用的多个生命周期的我的想法是微信在内部维持了一个栈，用来装载wa，而且会记录一些信息，方便管理。但这个栈比较特别，没有先后顺序，仅仅是坐个排排而已。至于这个栈是在native中实现还是在web中实现，目前还不得而知。原作者:senntyou
更多有关转微信小程序weapp的底层实现原理的小程序开发问题勤请扫码关注微信公开课小程序参与讨论！

微信公开课小程序热议问题「转微信小程序中使用微信风格样式库-WeUI」
摘要：如何解决转微信小程序中使用微信风格样式库-WeUI
展开：WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式元素。WeUIWeUI的官方演示地址是：https://weui.io/WeUI的官方GitHub地址是：https://github.com/weuiWeUI最初是为HTML5的页面设计的样式库，现在微信小程序使用的样式机制也是css风格的样式机制不过稍稍有些不一样的地方，WeUI理所当然的推出了WXSS版本。它的GitHub地址是：https://github.com/weui/weuiwxss我们可以直接去Github上下载它的代码，也可以通过npm来方便的获取：npminstallweuiwxss下载下来的代码中，包含了weui的源代码，以及一个基于weui的示例小程序：示例小程序里面包含了丰富的使用weui的示例代码，可以很好的学习weui提供的各个样式的使用。我们可以通过微信web开发者工具来打开这个示例代码：示例代码button样式你的小程序主要是通过在你的app.wxss中导入weui.wxss来导入WeUI的样式的：@importstyle/weui.wxss;之后，就可以在小程序的各个地方使用WeUI中定义的样式了。作者:一斤代码简书作者来自:http://www.jianshu.com/p/f4e3212c9ca7
更多有关转微信小程序中使用微信风格样式库-WeUI的小程序开发问题勤请扫码关注微信公开课小程序参与讨论！

微信公开课小程序热议问题「转微信小程序中实现瀑布流布局和无限加载」
摘要：如何解决转微信小程序中实现瀑布流布局和无限加载
展开：瀑布流布局是一种比较流行的页面布局方式，最典型的就是Pinterest.com，每个卡片的高度不都一样，形成一种参差不齐的美感。在HTML5中，我们可以找到很多基于jQuery之类实现的瀑布流布局插件，轻松做出这样的布局形式。在微信小程序中，我们也可以做出这样的效果，不过由于小程序框架的一些特性，在实现思路上还是有一些差别的。今天我们就来看一下如何在小程序中去实现这种瀑布流布局：小程序瀑布流布局我们要实现的是一个固定2列的布局，然后将图片数据动态加载进这两列中而加载进来的图片，会根据图片实际的尺寸，来决定到底是放在左列还是右列中。/*单个图片容器的样式*/.img_item{width:48%;margin:1%;display:inlineblock;verticalalign:top;}我们知道，在HTML中，我们要动态加载图片的话，通常会使用newImage()创建一个图片对象，然后通过它来动态加载一个url指向的图片，并获取图片的实际尺寸等信息。而在小程序框架中，并没有提供相应的JS对象来处理图片加载。其实我们可以借助wxml中的组件来完成这样的功能，虽然有点绕，但还是能满足我们的功能要求的。viewstyle=display:noneimagewx:for={{images}}wx:key=idid={{item.id}}src={{item.pic}}bindload=onImageLoadimageview我们可以在Page中通过数据绑定，来传递要加载的图片信息到wxml中，让组件去加载图片资源，然后当图片加载完成的时候，通过bindload指定的事件处理函数来做进一步处理。我们来看一下Page文件中定义的onImageLoad函数。在其中，我们可以从传入的事件对象e上，获取到组件的丰富信息，包括通过它加载进来的图片的实际大小。然后我们将图片按照页面上实际需要显示的尺寸，计算出同比例缩放后的尺寸。接着，我们可以根据左右两列目前累积的内容高度，来决定把当前加载进来的图片放到哪一边。letcol1H=0;letcol2H=0;Page({data:{scrollH:0,imgWidth:0,loadingCount:0,images:[],col1:[],col2:[]},onLoad:function(){wx.getSystemInfo({success:(res)={letww=res.windowWidth;letwh=res.windowHeight;letimgWidth=ww*0.48;letscrollH=wh;this.setData({scrollH:scrollH,imgWidth:imgWidth});//加载首组图片this.loadImages();}})},onImageLoad:function(e){letimageId=e.currentTarget.id;letoImgW=e.detail.width;//图片原始宽度letoImgH=e.detail.height;//图片原始高度letimgWidth=this.data.imgWidth;//图片设置的宽度letscale=imgWidth/oImgW;//比例计算letimgHeight=oImgH*scale;//自适应高度letimages=this.data.images;letimageObj=null;for(leti=0;iimages.length;i++){letimg=images[i];if(img.id===imageId){imageObj=img;break;}}imageObj.height=imgHeight;letloadingCount=this.data.loadingCount1;letcol1=this.data.col1;letcol2=this.data.col2;//判断当前图片添加到左列还是右列if(col1H=col2H){col1H+=imgHeight;col1.push(imageObj);}else{col2H+=imgHeight;col2.push(imageObj);}letdata={loadingCount:loadingCount,col1:col1,col2:col2};//当前这组图片已加载完毕，则清空图片临时加载区域的内容if(!loadingCount){data.images=[];}this.setData(data);},loadImages:function(){letimages=[{pic:../../images/1.png,height:0},{pic:../../images/2.png,height:0},{pic:../../images/3.png,height:0},{pic:../../images/4.png,height:0},{pic:../../images/5.png,height:0},{pic:../../images/6.png,height:0},{pic:../../images/7.png,height:0},{pic:../../images/8.png,height:0},{pic:../../images/9.png,height:0},{pic:../../images/10.png,height:0},{pic:../../images/11.png,height:0},{pic:../../images/12.png,height:0},{pic:../../images/13.png,height:0},{pic:../../images/14.png,height:0}];letbaseId=img+(+newDate());for(leti=0;iimages.length;i++){images[i].id=baseId++i;}this.setData({loadingCount:images.length,images:images});}})这里是显示在两列图片的wxml代码，我们可以看到在组件上，我们通过使用bindscrolltolower设置了事件监听函数，当滚动到底部的时候，会触发loadImages去再加载下一组的图片数据，这样就形成了无限的加载：scrollviewscrolly=truestyle=height:{{scrollH}}pxbindscrolltolower=loadImagesviewstyle=width:100%viewclass=img_itemviewwx:for={{col1}}wx:key=idimagesrc={{item.pic}}style=width:100%;height:{{item.height}}pximageviewviewviewclass=img_itemviewwx:for={{col2}}wx:key=idimagesrc={{item.pic}}style=width:100%;height:{{item.height}}pximageviewviewviewscrollview好了，挺简单的一个例子，如果你有更好的方法，不吝分享一下哦。完整代码可以在我的Github下载：https://github.com/zarknight/wxfallslayout原作者：一斤代码简书作者原文链接：http://www.jianshu.com/p/260f2623562d
更多有关转微信小程序中实现瀑布流布局和无限加载的小程序开发问题勤请扫码关注微信公开课小程序参与讨论！

微信公开课小程序热议问题「转微信小程序入门教程--列表渲染多层嵌套循环及wx:key的使用」
摘要：如何解决转微信小程序入门教程--列表渲染多层嵌套循环及wx:key的使用
展开：前言入门教程之列表渲染多层嵌套循环，目前官方的文档里，主要是一维数组列表渲染的案例，还是比较简单单一，给刚入门的童鞋还是无从入手的感觉。viewwx:for={{items}}{{index}}:{{item.message}}/view还有一个九九乘法表把数据直接写到wxml里的，并不是动态二维数组的列表渲染。viewwx:for={{[1,2,3,4,5,6,7,8,9]}}wx:foritem=iviewwx:for={{[1,2,3,4,5,6,7,8,9]}}wx:foritem=jviewwx:if={{i=j}}{{i}}*{{j}}={{i*j}}/view/view/view那么今天，我们主要来讲讲动态多维数组和对象混合的列表渲染。讲解何为多维数组和对象混合，给个很简单的例子twoList:[{id:1,name:应季鲜果,count:1,twodata:[{id:11,name:鸡脆骨},{id:12,name:鸡爪}]},{id:2,name:精致糕点,count:6,twodata:[{id:13,name:羔羊排骨一条},{id:14,name:微辣}]}]上述例子就是一个数组，这都是我们日常开发过程中，经常会碰到的JSON格式，该数组的元素是有对象，对象又分为属性，属于数组对象混合，可能对于刚接触小程序的童鞋，碰到这种数组对象混合的就会发难了。一层循环oneList:[{id:1,name:应季鲜果,count:1},{id:2,name:精致糕点,count:6},{id:3,name:全球美食烘培原料,count:12},{id:4,name:无辣不欢生猛海鲜,count:5}]以上数组对象混合JSON，是测试只有一层循环的，我们看看在wxml里怎么循环，我们先看一下要循环渲染到页面上的效果图。viewwx:for={{oneList}}wx:key=id{{index+1}}、{{item.name}}/view我们可以看到，这里直接用两个花括号来给view循环列表，注意强调一下，请记得一下要用两个花括号数据起来，如果不包起来，view也会循环出来，但并不是自己要循环的数据，而且是给了一个假象给你以为是有循环了，这里开发工具有点坑人的感觉，这个还需要多细心点，这里记住一点，只要是有数据的，就需要花括号。另外默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item，同时我这里也顺道演示了如何使用数组变量名和下标。二层循环JSON代码twoList:[{id:1,name:应季鲜果,count:1,twodata:[{id:11,name:鸡脆骨},{id:12,name:鸡爪}]},{id:2,name:精致糕点,count:6,twodata:[{id:13,name:羔羊排骨一条},{id:14,name:微辣}]},{id:3,name:全球美食烘培原料,count:12,twodata:[{id:15,name:秋刀鱼},{id:16,name:锡箔纸金针菇}]}]wxml代码viewclass=pad10wx:for={{twoList}}wx:key=idview{{index+1}}、{{item.name}}/viewviewwx:for={{item.twodata}}wx:foritem=twodatawx:key=id{{twodata.name}}{{item.name}}/view/view以上截图和代码是二层嵌套内容。我们在wxml代码里，很明显的看到有两个wx:for的控制属性，在二层循环的JSON代码里，我们看每个单数组里还有一级数据twodata，这里是需要再循环渲染到页面上的，在第一层数据里，直接再循环item.twodata即可，请记得一定要带上花括号。在第二层的循环里，建议把当前项的变量名改为其他，即在wxml代码里看到的wx:foritem=twodata，因为默认的当前项的变量名为item，如果不改换其他的话，你是拿不到第一层循环的数据的，因为被第二层的变量名覆盖了。所以我们在wxml代码里，在第二层循环时，可以看到还可以循环第一层的值，即{{twodata.name}}{{item.name}}。三层以上的多层循环三层以上的多层的数组循环，在原理上同二层循环是一样的，能理解了二层数组循环，对于三层以及三层以上都能得心应用的。需要注意的地方，那就是老生常谈的问题了，数据需要用花括号括起来，从第二层起，把默认的当前项的变量名改为其他，例如wx:foritem=twodata，还有细心再细心。wx:key唯一标识符为什么会有wx:key的出现呢，官方给的解释是，如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态如input中的输入内容，switch的选中状态，需要使用wx:key来指定列表中项目的唯一的标识符。当数据改变触发渲染层重新渲染的时候，会校正带有key的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。在开发过程中，wx:key的作用对于项目作用是非常大的，如果从文字上无法理解的童鞋，可以到githubclonedemo到微信开发工具里，亲自体验下。我们看到这个GIF动画图，这里有一个switch的开启状态，switch的状态是在标题为羔羊排骨一条的，在对这个数组增加数据时，这个switch的状态并不跟随着羔羊排骨一条，并不保持自己的状态。那我们再看另一个例子，使用了wx:key唯一标识符。这个GIF动画图，也是点击开启了switch的状态，唯一有不同的地方，就是在新增数据时，是保持着自己的状态的。相信通过这两个小例子，对wx:key唯一标识符应该也有所了解啦，想要提升技术，就要多折腾，自己在小程序里，写个wx:for和wx:key体会下。还有一个需要注意的地方，我们先看看以下代码viewclass=pad10wx:for={{twoList}}wx:key=id/viewwx:key=id，我们看到wx:key里的值并不需要花括号的，是的，这里是比较特别的地方，不需要花括号，同时也不需要参数名，需要是虽然数据里的一个字段名。原作者：蓝狐锅锅简书作者来自：http://www.jianshu.com/p/87cdf985b2b9
更多有关转微信小程序入门教程--列表渲染多层嵌套循环及wx:key的使用的小程序开发问题勤请扫码关注微信公开课小程序参与讨论！