微信小程序开发遇到的那些坑——CSDN 知识库的初步尝试

1顶
0踩

2016-11-30 09:57 by 副主编 mengyidan1988 评论(0) 有4815人浏览

微信小程序知识库

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

【编者按】从内测到开启公测，微信小程序已然成为了IT领域最为火热的话题，除却不同类型应用的可能性探索之外，对于开发团队而言，最多的当属踩过的那些坑。近一段时间，CSDN也在为知识库项目进行小程序开发的初步尝试，对此，CSDN 高级研发工程师尚琳凯在一次线下活动中分享了知识库小程序开发的一些经验，本文为扼要总结。

小程序为开发者提供了什么
什么是小程序
小程序是微信推出的一种新的公众号的形态，不需要下载安装，即可在微信中使用的应用。同时，需要注意的是，小程序、订阅号、服务号、企业号是并行的体系。

以下为 CSDN 知识库推出的“微信开发”知识图谱，能够更好地帮助读者了解微信小程序在微信开发中的位置。

点击下载高清知识图谱

微信小程序 MINA 框架
小程序提供了一个框架，微信称之为“MINA”，这个框架主要分两个层面，视图层和逻辑层。框架的核心是一个响应的数据绑定系统。WXML 中的动态数据均来自对应 Page 的 data，这个数据绑定是单向的，只有数据发生变化，视图才会做出相应的调整。这种模式，让开发者专注于事件处理上，改变对象状态，实现视图更新。

为了方便以及限制开发者开发，微信自己定义了一系列的基础组件，就是视图层的组成单元（表单组件、媒体组件、导航等），组件自带一些功能与微信风格的样式，类似 HTML 标签。微信还提供了很多的原生API，用来调用微信内部提供的功能，以及一个微信小程序开发者工具。

微信小程序源码结构：

视图层（将逻辑层的数据展现在视图上）
逻辑层（通过改变数据[setData方法]来改变视图）
配置文件

在小程序中，微信规定了界面的组成模式，由四个文件组成：

.wxml 文件（页面结构文件）标签语言，类似 HTML，真正负责页面结构的文件，可以绑定数据；
.wxss 文件（样式表文件）类似 CSS，大部分 CSS 样式都相同；
.js 文件（脚本文件）用来运行我们的逻辑，使用 JS 语言；
.json 文件（配置文件）主要配置公用的样式，比如 Tab 栏、窗口样式等。

知识库小程序开发
知识库小程序开发的初步尝试关注重点是 JS 文件和 WXML 文件。

由于知识库把开发领域细分成某个领域，例如技术语言、运维系统、行业应用等方面，对每个技术和知识点都设计一个网状图谱，来总结技术某一方面涉及到的知识，同时为知识结构准备一些精品的内容，方便大家更系统的学习知识。所以在知识库这个产品上，需要实现内容推荐、个人中心以及搜索。用户侧和内容推荐都包括四层：库-》知识结构-》内容列表-》内容详情页。搜索功能可以根据搜索的关键词查找到用户侧或推荐知识库的相关内容，方便大家阅读或收藏。

知识库页面设计
小程序组件满足了所有的显示功能和结构（列表、窗口、按钮、事件等），API 齐全，便于逻辑开发。不同的功能模块放在不同的页面里，具体表现为：

视图层： Tab 栏，列表页，知识结构页，内容详情页，搜索页
逻辑层：

Tab 栏->通过绑定数据index选择一级页面；
列表页->通过改变绑定数据contentlist数组，控制列表显示和动态加载；
搜索页->通过绑定数据searchValue，通过事件及时获取用户输入。

小程序开发路上踩过的坑

1.打开页面数量限制（redirectTo还是navigateTo）

微信提供 Tab 栏的设置，可以在app.json中配置，在 App 里配置的 Tab 栏将出现在所有的一级页面。但是它有一个问题就是第一次点击 Tab 将会打开一个新的页面，微信对打开页面的数量限制是五个。

微信提供了几个页面跳转的方式，redirectto、navigateto，还有返回。重点说这两个，redirectto会直接在原页面上打开新页面，navigateto会新开启一个页面。由于微信在页面数量上有限制，我们产品的层级有比较多，导致无法直接在app.json设置 Tab 栏。所以我们把 Tab 栏单独设计出来。点击 Tab 不开启新页面。在每个初级页面都引用进去，之后二级三级的页面上不使用 Tab 切换，而是需要返回到初级页面。

2. 树状结构的展示

每一个库都有一个树状的知识结构，大家请看这个例子。每个层级展示的方式是一样的，所以正常情况下，我们都会选用递归的方式来使展示。比如在这张图里，当我们判断这个节点拥有子节点，就想再次调用同样方法显示。但是很遗憾，小程序里，不论是使用模板，还是使用include的方式引用文件，都没有办法做到自己调自己。

幸运的是我们知道层级最深有多少，这样就可以写几个同样的文件和模板，加上不同的命名来调用。如果是未知层级的树状结构，就会非常难以处理。在这里可以建议大家将树状结构变成数组的形式，加上层级标识，在 WXML 文件中可以使用循环的方式来处理层级的显示。

3. HTML页面在微信小程序中展示

这是一个非常难处理的问题，微信不支持 HTML 页面的展示，所以需要把所有 HTML 的标签转化成小程序内允许的标签。我们使用了一个名叫wxParse的应用，它的功能就是通过正则表达式将 HTML 页面转化成 JSON 形式，再用模板的方式展现出来。在这里面规定了各个标签的样式（WXSS）。遗憾的是它也有层级方面的问题，同样是重复写了很多完全一样的模板。

HTML转JSON工具

转化后的HTML页面

顺序调用

如果 HTML 的标签层级结构超出了模板个数，那么超出部分将无法显示出来。这个应用是在微信中运行的，建议大家把数据转化放在服务器端来进行，将转换后的数据发给小程序。另外小程序setData()一次不能超过1024K，如果你的 JSON 格式数据超过这个限制，就会很难再拼接。

4.冒泡事件

一个组件上的事件被触发后，该事件会向父节点传递，由此引起不必要的逻辑处理，对此，使用费冒泡事件处理。

5.网络请求接口wx.request()没有携带 Cookies

如果服务器端有通过获取 Cookies 处理的逻辑没办法和小程序结合，只能为小程序单独开发新的接口。