微信小程序全国巡回沙龙厦门站-A闪演讲详细内容实录

A闪：这个环节时间会有点长，分两个部分，第一个是跟大家讲一下MINA框架，所以我们需要花一点时间讲一下整个微信小程序MINA实现原理。第二个是DEMO。

　　我们说一下MINA框架，MINA框架里做了很多设计，这个设计有一部分对接到了原生实现的那一层上面。在PC端上做开发的时候，大家用官方ID跑的MINA和我们最终移动端跑的效果会有差异，差异主要在两个方面，第一个是UI渲染以后效果会不太一样。同时，流畅度会有一些不太一样的地方。首先来看一下框架的特点。它做了一个数据绑定，我们一开始说过为什么做微信的产品不要用网页开发的思路，你要通过数据刷新催生试图发生变化，而不是用直接手动的去操作试图，这个是没有的，也不能做到。为什么不能做到，因为它底层的实现方法，在讲边缘的时候也会讲到。第二个是页面管理，页面管理涉及到生命周期的问题，这也是在MINA做了很多工作。第三个是组件与API，

　　在一个微信小程序里面，我们有一个APP接口和多个page组成，每一个程序之间切换都是在翻页。APP这个是整个微信小程序一个入口，这个入口包含三个文件，第一个文件是它的入口文件所有微信小程序其中的入口，也就是寻找你启动入口全部要从APP进入。第二个是page文件，有几个比较关键的，比如我们页面注册，为什么会有这个过程，是因为和MINA底层设计的结构、形式有关系。第三个是公共样式表，内置的组件都可以通过公共样式表来设定。

　　page一共有四个文件，第一个是page的js文件，第二个是whml，页面界面渲染部分。第三个是wxss页面样式表，第四个是json页面配置。这个页面配置的文件很少用到。

　　我们来看一下MINA两层架构，一个是试图层—一个是逻辑层。在整个程序编辑或者运行的时候是由两个主线来渲染。框架的试图层由Wxml与wxss编写，由组件来进行展示。将逻辑层的数据反应城市土，同时将试图层的事件发送给逻辑层。试图层是负责页面的渲染。逻辑层就比较简单，因为它定义了我们框架由js来编写，同时负责了数据的整理，由javoscrip而编写，逻辑层将数据进行处理后发送给试图层，同时接受试图层的事件反馈。增加APP五和page为方法，进行程序和页面的注册。提供丰富的API，如扫一扫，支持等微信特有能力。每个页面有独立的作用域，并提供模块化能力，框架并非运行在浏览器中。怎么实现从一个配置到另一个配置可以发送一些数据，默认发送的数据非常有限，我们可以借助其他方法实现。

　　生命周期，这个是整个MINA框架生命周期的图（PPT）左边绿色是试图层，是做渲染的，右侧是app，做逻辑渲染。首先当我们这个小程序旺起来以后，微信会把两个线全部弧起来，从入口开始，执行start。试图层会根据你填写的那一段的参数，配置的内容去寻找到底哪个页面能够渲染，所以会做初始化。初始化完成以后，这个会给逻辑层发一个消息，一个通知，我所有的初始化完成，这个线就暂停了，它的任务完成了。逻辑层一开始是支持ready，所以它会执行一个创建，创建完以后，他也暂停。暂停以后，可以进行初始化代码，请求去访问一些需要默认和用到的数据。在onload作完以后，会抛一个onshow的方法，表示这个页面要进行创建操作了。onshow完以后，要有一些数据，这个时候怎么做？我们会直接调用sendinifialData方法。我的试图第一次渲染完成，这个界面就完成了。onready才能保证你的数据在第一频是完整的，这个是最开始的初始化的过程。

　　一直到onseady之后，两边都不运行了，然后这个画面就禁止在这里。业务逻辑层当你做完这边的进程才会进入到一个激活的状态，你可以做其他业务逻辑运算，后面就比较常规，当用户或者你的业务逻辑做了运算之后，运算结果通过data发给试图层，接收之后再渲染一次。如果用户触摸屏幕了，从试图层会往逻辑层发一个消息通知，这个消息通知里还包含一些交互的数据，比如说，拟稿点了那个按纽，这个按纽的IP是多少，冒泡的层级是多少，都会发送数据。从生命周期的流程图可以看到，想用js直接操控试图界面的是完全做不到，你只能通过数据更新的方式去刷新我们右侧的试图层，所以是一个被动模式。

　　当我们小程序用完了之后，用户点了返回，进入到聊天界面，这个程序还没有完毕，就进入到后台的状态。我们业务逻辑层依然会给你回一个函数，你能知道这个界面当前被暂停了，暂停之后不消耗任何内存。我们两边的都会被暂停运算。当我们回到微信小程序里，当你的业务程序还没有被真正的杀死，它的就要会回到前台的位置，重新回到激活状态，回到激活状态，既然激活了试图层真正渲染的现场，所以这边我们会调一个onshow，当你得到通知以后，你的页面又展示出来，处于激活状态，你就可以把操作返回回去。什么时候这个程序真正被杀死？这里面有一些api，你可以选择主动退出小程序或者业务程序退出以后，用户隔了很长时间没有进入之后，这个才会真正被微信干掉，也会给你回一个函数。这需要做一个非常关键的操作，把你存储到当地的数据通过api把数据全部存进去，这样下次进来数据还在。同时，做一些清空销毁作用，你需要给服务器发一个包，用户什么时候进行了退出。这样才会被真正干掉，这个小程序就真的不存在了。

　　这个是整个微信小程序的生命周期的过程。很简单，大家只要注意几个方法就可以了。

　　在这个生命周期讲完以后，我们来看一下编译项目。编译文件当中做了什么，我们通过这个就能大致知道在编写项目的时候能有什么坑，会出现什么问题。第一个创建页面会转换javascript，编译whml。

　　第一个创建页面。这个创建页面是干什么，在小程序入口还是一个网页，那个页面里是一个默认的模板，这个文件才是我们真正界面的文件，你也不用编译，编译的时候就把这个文件塞进去了。

　　第二步是编一个jovascript，在编译过程中除了自己的代码还会注入非常多的东西，这些东西都跟MINA框架有关系。这个是js的编译。

　　第三步是编译这两个文件就比较有意思，WHML/WXSS，不知道里面干了什么，反正看起来很乱，这个在试图层真正运行起来的时候会执行JS文件，然后把塞在文件里面。

　　这三个动作编译完成以后，最终就是编译过程，三步。

　　关于MINA的框架，就介绍到这里。

　　嘉宾：我想问一下，编译是在哪里完成？

　　A闪：编译是在开发工具里，编译过程跑完以后会打一个包，就可以上传到微信服务器。

　　嘉宾：在生命周期的时候，不是有一个时间段，但是我们在这个阶段我们有时候需要根据API做结合，比如我们做一个组件的时候，我们要测定播放状态，我们需要获取密码，我们会发现最终编译的时候会把play的方法先播放，再完成这个Setdata过程，这个过程并不是我想要的。这个有没有解决方案？很多都要结合API来做，我们要刷新就只有通过setdata来。

　　A闪：音频渲染是在试图上跑的，很难及时的去获取这个状态，获取了以后也是通过编码才能看到现在是播到那一秒，这中间会有一个小的延时，这个是机制问题，没有太好的解决方案。

　　嘉宾：我发现组件我们不能自定义控制样式，我通过去查找动画原理来写了一下，我发现控制样式的时候，这个过程是很不顺畅的。

　　A闪：在更新的时候去锁一下用户的交互，然后再画。

　　嘉宾：这样我就没有办法做到我慢慢滑动的时候，第二屏就可以实时进入到我们的视野当中。

　　A闪：我们下来再讨论。从试图上来讲，渲染应该不会很慢，但是你的业务逻辑操作会很慢，如果卡顿也有可能是结果计算有问题，就像我们做游戏一样。

　　嘉宾：我们在设置标题的时候，我发现在IP的时候，我在编译Js的时候可以实时显示我们的标题，但是一保存这个标题，就变成我在js配置的标题。

　　我们这个生命周期下来，我们通常有一些数据是要在onshow还是什么上处理？

　　A闪：跟你自己的需求有关系，没有说必须要放在哪里设定，看你想实现什么效果。

　　A闪：我们先来看一下这个东西。我有一个官方的DEMO，如果我们现在已经申请到了APP和ID的话，这个做完之后就可以直接做。我们下面有一个预览和上传，我们点预览的时候会把本地的代码直接打包，推到服务器。这个代码别人扫就没有用了，只要在后台绑定了，只有管理者才能看到。

　　中间还有一个longing的过程，上面有一个返回按纽，你只要一点就直接退出了，和PC上预览效果是有差异的。

　　我们来看一下，这个是在PC上的预览，在真机上的样式就完全不对。PC端点开就这样（PPT），最好在真机上测。在我们右上角，这个是DEMO版本，正式发布的时候会有一些东西没有的。这边是当前用户的APP的名称，页面里没有正式发布。你可以将这个东西分享给你的好友。最后会有一个分享功能，能把这个分享给你的好友。但是这个功能上一周还有，这一周已经没有了。大家可以去申一个号去看看。

　　需要说一点的是，大家在做的时候肯定会访问自己的服务器，有一些网络功能，网络的访问必须是ISS加密的，普通的未加密的访问在真机上根本就跑不了，全部会错，会告诉你是非法访问，全部是不合格的。iss加密证书也比较有意思，原来有很多面的证书，最起码能用一年。但是现在浏览器把这个证书加密的规则改了，现在免费的证书基本上都不能用了，都只能加付费的证书才能使用，这个是很大的问题。服务器搭建的时候一定要把非加密的证书清楚掉。

　　如果现在手里有电脑的话这个DEMO也能打开，我们用自己的工具，我们来看一下具体的代码。这个是程序入口，在开之前我们先点一下调试运行，这个是官方工具的调试模块，在这里直接能看。这个功能比较简单，我们来看一下交互，默认的这个面板里面是我们国家货币的兑换，有一个基准，默认我们用第一个。下面我们做一个软键盘，点美元然后点8，下面四个就会跟随着，进行实时的数据切换。如果切换到港币，点9，就会进行汇率换算。默认五个国家的货币信息全部是从服务器拉下来的，我们把这个格式自己组装一下，当切换一下货币就会进入到一个国旗。

　　文本输入方式我们选择了组件以后，定义成焦点，然后刷新内容，用这个方式来实现，这个是唯一可行性的方案。

　　我们来看一下入口，JS这个文件可以在里面进行操作，在onshow写一些内容，做一些还原操作也可以进行操作。真正非常敏感想在服务器获取客户信息的时候都没有，只有头像、名称、年龄还有所在地区。我们这个DEMO需要几个重要的数据，我们在APP上定义了四个变量，这四个变量后面还会用到，有城市ID，有城市的列表，我们把列表数据也放在这里。当我们进行国家货币切换的时候也放在这个里面，我们会放一些数据。

　　这个文件我们里看一下Js文件，这里面有一个配置标志，这就需要能够把显示参与渲染的界面全部写进去，没有写进去以后就不能调取。这个东西被读取后期就改不了了。

　　每一个页面都是配置项，配置里面有一个默认的setdata，这里面可以自己设定当前页面数据，对外不可识别，不可读。我们不光想让默认的页面渲染去读它，可以把DATA的数据取出来塞在试图层里面。

　　我们来看一下一开始在程序运行的时候，当第一个页面初始化以后，我们会调用onlow的方法，我们从服务器获取了一些国家默认的信息，这里面的获取我们全部把业务逻辑放在一个模块里，这个模块是我们自定义的第三方模块。你的业务程序会有很多这样的模块。

　　原数据取出来，按照我们需要的格式塞进去，这些塞进去默认前五个国家的信息都有了以后，我们在下面直接调用这个Setwdata。

　　我们点击国家图片或者文字的时候会有一个事件传递，后面会有一个标记，这就传入了方法名称，这个方法名称要在当前的js里面定义，它的传递方式也是一样，本身是一个字符串，是一个标记，从试图层向逻辑层传递的时候会有一个过程。

　　我们每次修改数字或者是前数以后都会执行setdata，因为它的体积非常小，只有五项。当点击一个国家的时候我们要对国家进行跳转，这个时候执行页面跳转，跳转我们还需要执行一个非常重要的信息。

　　参数数据不能太大，传一个ID或者是一个标记一个操作都可以，如果传的数据量比较大的话，麻烦就大了。

　　在我们国家列表页面里面，我们要把选中的国家数据会传，这个方式就比较复杂了。我们的做法是，我们在这个页面JS，当我们选择一个国家之后，我们先走一遍网络，把这个国家的汇率先取回来，取回来之后，这个时候直接就跳转到那个页面。

转载于:https://www.cnblogs.com/youli222/p/6062731.html