尚琳凯：谢谢大家，很高兴能够在这里跟大家见面。刚才看了有很多女生，也有很多程序员，很开心有这么多的同类在一起。

我叫尚琳凯，来自CSDN，我是一位研发工程师。来跟大家分享一下微信小程序开发上有什么心得以及踩过什么坑。

一开始，我想先向大家介绍一下，微信小程序到底是一个什么样的东西，以及框架，以及原码结构。然后是微信小程序知识库开发，最后做一个总结。

关于微信小程序官方是这样定义，微信小程序是一种新的公众号的形态，它不需要下载，也不需要安装，就可以在微信里打开。和订阅号、服务号企业号是并行的体系。能够交互的平台一个是微信自己的平台，另一个是我们开发者第三方平台。

微信平台提供的是微信基础服务，比如用接口获取用户的信息，还可以调取获得用户信息的接口。还有一个小程序管理。一个小程序开发以后我们需要放在一个平台上，这个平台它提供给用户的功能就是告诉用户你是以什么样的方式来进行搜索的，以关键词的方式在这里面可以匹配到相应的小程序，或者是通过扫描二维码直接搜索打开的形式来使用。

接下来我们谈一下微信小程序里的框架。微信给它起名叫MINA，尽可能简单、高效的方式让开发者可以新中开发具有原生APP体验的服务。

MINA提供了一些页面组件，是由一些态度标签组成的。样式元素、事件、微信绑定。还提供了一个比较有意思的机制就是通过数据绑定的形式，来感谢页面的渲染。这个一会在后面会详细介绍。还提供的多的api。必须要通过它的接口才能跟你的服务器做一些关联，还为我们提供了开发者的工具，这个是比较好用的，在里面可以编写代码，可以运行代码，也可以调试我们的代码，甚至打包上传也可以在这里进行。

我们看一下微信小程序原码的结构，微信自己把它定义的时候分成三层，试图层、逻辑层，配置文件。试图层由两个文件构成，一个是WXML文件，一个WXSS文件。逻辑层就是你定义数据，改变数据的地方，只有在调取这个方法的时候，你的数据内容的改变才会通知到试图层，试图层接到这个通知才会对这个页面进行渲染。这个数据绑定机制不知道大家有没有用过其他的工具，如果要是用的话可能会对这个比较熟悉。微信在这里使用的是单向的数据网点，只有数据发生改变，页面才会发生改变。配置文件可以配置一些公有的样式，可以是窗口样式，也可以是TA栏样式。可以单独为每一个页面配置样式，也可以在小程序的入口统一的配置。

说了这么多都是关于微信小程序它里面的东西，下面我跟大家讲一下关于我们知识库在微信小程序开发上的一些心得和经验。我们拿出一个新的产品作为知识库，知识库的功能是总结不同领域的知识体系，不管是数据库层还是语言层，甚至是系统层，大家可以看到我举的一个例子，有一部分的服务包含到里面。每一个库下都会收录相关的比较经典的网络上的一些资源，不管是视频还是文章之类的都有。给用户提供了打造自己知识结构，管理自己知识结果的一个平台，你可以收藏，也可以支付。微信小程序以这样一个产品原形来制作。我们在微信小程序想实现的功能分三个方面，一个是用户侧，知识库列表，展示知识结构，展示节点内容，内容展示。推荐知识库增加了两个功能，一个是收藏知识库，一个是收藏内容。搜索功能就是根据关键词找到相关的内容。

小程序和我们服务器之间只有一种交互方式，就是通过关键词来搜索。服务器是提供数据。

小程序我们在开发过程中，不论是显示的功能还是组建结构的功能，小程序都满足了我们的开发。通常开发的时候，小程序默认的时候就是这么一个结构，你可以把不同页面四个文件放在单独的一个文件里面，这样的形式也便于管理。在试图层面我们开发了像列表页，知识结构这样页面。逻辑层也是一样，关于逻辑层，我刚才跟大家提过，想改变试图层必须要通过逻辑层，所以我们开发的时候重点放在的是逻辑层，逻辑层处理数据，改变试图。

有几个例子，切换页面的时候，我们通过绑定数据来知道用户选择的是哪一个页面，我们要跳到那个页面。还有列表页，我们可以绑定到微信的页面来受理，你可以提供列表渲染一个语句，可以搜索，然后将你的内容展现出来。这都是微信提供的。

搜索页也是一样，通过绑定数据，通过事件及时获取用户输入。

开发的时候会碰到很多功能是公用的，比如用户侧和推荐侧很多功能都是一致的，没有必要去开发相同的逻辑，所以会把公用的功能和公用的事件函数，有公用部分的时候只需要在逻辑页面比如在我的个人侧，个人侧的逻辑里调取公用文件，就可以做出相应的处理。你只需要给的就是一样的数据，不管是在个人侧还是在搜索，还是在推荐侧里面就可以由它统一来处理。

给大家展示一下一个DEMO做成的效果。我们总共开发时间大概用了不到10天，从前端到后端，小程序开发包括后端的开发。它显示的效果其实就接近于原生态APP一样，页面切换非常流畅，动态加载数据也非常的流畅。数据改变瞬间反应在试图层。

大家看过小程序可能会有一点概念，对页面打开同时的窗口是有限制的，最多不超过五个。

小程序能满足我们的开发，但是一条道路上没有坑是不可能。

说一下我们踩过的坑，如果我们想要在这个基础上去打开新的页面再跳转，再打开新页面，这些都是可以在微信里不允许的，因为这个会允许到微信的体验。为了避免这种方式，大家的处理就是关于Tab栏，避免tab栏使用打开新页面的形式，以及只允许一级页面展示tab栏，自己一个一个录进去。通过原页面跳转方式。进入新页面的功能很有可能引起层级问题。

第二个坑，就是树壮结构展示，这个是让我们比较棘手的一个功能，我们想展示一个库的层级，它都是树状结构，但是以这个形式想去显示的时候，比如说我定义了一个显示树状结构的页面，在这个里面我发现某一个节点下面还有子节点，这个时候怎么办？正常逻辑下澳门会直接把这个解析的逻辑再次在这里调用，但是微信小程序里面是不支持的。如果在你知道树状结构有多少层的情况下，你可以把程序放在不同的页面，再调取其他的页面，否则只会显示一层，下面就不会进行了。

再说一个可能大家比较关心的问题，就是html页面怎么转成json数据，关于这个没有很好的办法，想要转化就要解析html页面，把一个一个标签读出来，把层级也读出来，转化成真实数据，以数据的形式，把数据绑定在页面里进行渲染，这个是唯一的形式。

我们碰到一个问题就是，当我们想要显示一个内容详情页的时候，我们就必须想办法把html页面转化成真实数据，再把这个数据传到页面里面去做一个显示，这个转化的过程是比较痛苦的。尤其是这个转化如果在微信里面做的话，会很消耗性能。因为逻辑是json写的，能用的就只有微信提供的一些方式。以这个方式来解析html页面，再把数据插在页面里面。

微信还有一个限制就是一次性插在页面的数据不能超过1024K，如果你的页面很大，之后再想以拼接的方式放一个1024K，再拼接的话，就会碰到大麻烦。我们想了一个解决方案就是在后端，在我们服务器侧首先就把结构解析好，不是以json数据存储，而是在每一个层级都是平行以这样的方式来显示，这样显示的时候就会更好拼接一些。但是，它这个样式你完全没有办法保证跟你在web页看到的效果，因为很多样式是规定死的，很多样式没有办法应用。

微信小程序有一个比较有意思的是就是冒泡事件，当我们触犯了一个事件，一个组建上的事件，它父节点这个事件也同样会被处罚。希望大家注意一下这个情况。

最后再说一个小问题就是关于网络请求接口，它的微信接口是wx.request，没有携带cookies。所以如果你之前的服务有依靠cookies来做验证，或者是通过cookies获取用户，在这里面都是无法做到的。

坑是不少，但是小程序很容易上手，如果你开发的功能很简单的话还是非常适合的。它的优势就是微信用户量很大，适合推广，尤其是一些功能比较单一的app大家不需要下载，在微信小程序里直接开发，用获取功能扫描二维码或者是搜索的方式直接打开。这样的方式大家会对程序应用体验更好，而且对开发者来说不需要考虑平台，不像我们要考虑ios或者是安卓需要不同的程序。在微信里面不用，而且微信速度很快。一般情况下找一个前端熟悉一下这个东西就可以开发出来。

再说一下小程序比较局限的地方，就是不适合开发逻辑复杂界面丰富的程序，收到框架限制，随意性小，无法满足所有功能。局限性比较大，但正是因为这种局限性，微信希望我们把更多的注意力集中在逻辑层的开发，而不是你自己随意的用逻辑层去操作页面。

我的分享基本上就到这里。希望大家在微信小程序道路上一帆风顺。

嘉宾：您好！我想问一下你们是怎么捕捉树状菜单里的数据？你用的是模板？我们点这个，跳转到另外一个页面，这个页面应该在另一个事件上去跳转？

尚琳凯：都会找到这个事件绑定的逻辑，只要你这个事件写在这个jos里面就很容易找到。

嘉宾：小程序有没有在真机上跑过？

尚琳凯：还没有。我们暂时对原始架构的解析用了其他方式，我们放在服务器测。

嘉宾：我们最近一个星期把app转成小程序，放在真机上内测，就发现问题很多。这是一个比较大的坑，导致我们业务很多都不能展开。

尚琳凯：这个问题因为还没有测，所以暂时没有遇到。你这个问题可以向微信反应一下。

嘉宾：在里面输入一套模板是不行的，要用你刚才介绍的方式引入。

尚琳凯：在这个地方模板解析是要子节点，再把用户重新引入进来。微信是不允许这样操作的。

嘉宾：我们是把数据都抠出来，再套模板去做。如果是点击新开一个页面太多，层级就会超出。这个问题我们没有遇到过。再循环的节点中应该是可以超出五成。

尚琳凯：我们在开发过程中遇到了这个问题，在我们开发的时候，超出的话，如果超出两三个，程序就会没有任何反应了。

嘉宾：你说的另外一个坑，只能在第一级使用，如果跳转到第二页面，是没有办法运行上，是不能显示在真机上。

尚琳凯：在我们碰到的问题当中，每次都要打开新页面的方式，这个给我们造成了很大的困扰，一层一层点击下去，就会遇到问题。

嘉宾：我要做一些您说的不适合的比较复杂的应用，比如说数状全部绘制出来，我想问一下小程序的性能或者你有什么经验可以分享？

尚琳凯：我们开发的时候没有使用画布，我们是以组件的方式进来的，画布的东西必须先在逻辑层定义好，定义好以后再渲染到界面。以画布的方式来展示层级的话，这个我们具体没有操作过，但是我觉得可能会实现。

嘉宾：老师您好！我们现在开发使用都是ZQ，在小微信里是不是不允许，只允许原生的？

尚琳凯：小程序的框架就是这样限制，就是不希望你额外去引用更多的东西出来，上传的时候只能一兆，如果引用太多的东西，就会拖累它运行的速度。

我的建议是做小程序开发就争取做一些在它给你提供的功能基础之上能实现的功能。

详情请见：http://bbs.larkapp.com/thread-11902-1-1.html