微信小程序开发遇到的那些坑

zhichi_admin

11月深秋，由CSDN知识库尚林凯进行了小程序开发的技术分享。一起谈谈小程序开发给技术人带来的影响，如何开发小程序，以及在开发过程中踩过的坑。

什么是小程序

• 小程序是微信推出的一种新的公众号的形态
• 不需要下载安装即可在微信中使用的应用
• 小程序、订阅号、服务号、企业号是并行的体系
  
  

微信小程序在微信开发中的位置

微信小程序MINA框架

- 尽可能简单、高效的方式让开发者可以在微信中开发
- 具有原生 APP 体验的服务

小程序为开发者提供了什么

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

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

微信小程序源码结构

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

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

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

知识库微信小程序的例子

CSDN小程序开发初步尝试，关注的重点是js文件和wxml文件。

知识库把开发领域细分成某个领域，例如技术语言，运维系统，行业应用等方面，对每个技术和知识点都设计一个网状图谱，来总结技术某一方面涉及到的知识，同时为知识结构准备一些精品的内容。方便大家更系统的学习知识。

在知识库这个产品上，需要实现内容推荐，个人中心以及搜索。用户侧和内容推荐测，都包括四层：库-》知识结构-》内容列表-》内容详情页。搜索功能可以根据用户搜索的关键词找到用户侧或者推荐里的相关内容。方便用户阅读和收藏。

知识库页面设计

小程序组件满足了所有的显示功能和结构（列表，窗口，按钮，事件）
API齐全，便于逻辑开发。不同的功能模块放在不同的页面里。
- 视图层： tab栏，列表页，知识结构页，内容详情页，搜索页
- 逻辑层：
tab栏->通过绑定数据index选择一级页面
列表页->通过改变绑定数据contentlist数组，控制列表显示和动态加载
搜索页->通过绑定数据searchValue，通过事件及时获取用户输入

小程序开发路上踩过的坑

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

  
  

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

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

• 树状结构的展示

  
  

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

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

Html页面在微信小程序中展示

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

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

冒泡事件

一个组件上的事件被触发后，该事件会向父节点传递，网络请求接口 wx.request() 没有携带 Cookies，如果服务器端有通过获取cookies处理的逻辑没办法和小程序结合，只能为小程序单独开发新的接口。

小程序在运营上的优势在于微信用户量大，适合推广，某些功能单一的APP可以在小程序中实现，不用再下载APP。开发者不用考虑平台，开发成本低。但同时不适合开发逻辑复杂界面丰富的程序，受到框架限制，随意性小，无法满足所有功能。

jackjack417

专注于与个人游戏开发者合作，有产品的朋友联系微信号jim20180688，详聊