说说微信小程序那些遇到的坑，看看你有没有进坑，跳坑指南！小白快来看看吧

什么是小程序

小程序是微信推出的一种新的公众号的形态

不需要下载安装即可在微信中使用的应用

小程序、订阅号、服务号、企业号是并行的体系

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

尽可能简单、高效的方式让开发者可以在微信中开发

具有原生 APP 体验的服务

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

为了方便以及限制开发者开发，微信自己定义了一系列的基础组件，就是视图层的组成单元（表单组件，媒体组件，导航等），组件自带一些功能与微信风格的样式，类似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的标签层级结构超出了模板个数，那么超出部分将无法显示出来。这个应用是在微信中运行的，建议大家把数据转化放在服务器端来进行，将转换后的数据发给小程序。另外小程序setData()一次不能超过1024k,如果你的json格式数据超过这个限制，就会很难再拼接。

冒泡事件

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

( enctype=”multipart/form-data” ), 这样 post 上传的表单，可以包含文件，同时包含其它的键值数据。微信小程序用 uploadFile 实现类似的操作．

服务端我用的 php 编写，这里接受文件的接口为 save ，我将 $_POST 和 $_FILES 里的数据直接输出到info.log 文件中用来进行调试．代码如下：

public function save(Request $request){ error_log("FILES:" . json_encode($_FILES) . "\r\n", 3, "./logs/info.log"); error_log("POST: " . json_encode($_POST) . "\r\n", 3, "./logs/info.log"); error_log("city: " . $_POST["city"] . "\r\n", 3, "./logs/info.log"); error_log("name: " . $_POST["name"] . "\r\n", 3, "./logs/info.log"); error_log("latitude: " . $_POST["latitude"] . "\r\n", 3, "./logs/info.log"); error_log("longitude: " . $_POST["longitude"] . "\r\n", 3, "./logs/info.log"); error_log("restaurant_id: " . $_POST["restaurant_id"] . "\r\n", 3, "./logs/info.log"); error_log("tags: " . $_POST["city"] . "\r\n", 3, "./logs/info.log");　　echo 'success';}

在小程序开发工具中运行小程序，选择好图片后进行上传操作，服务器端成功接收到数据，info.log输出的数据信息如下：

FILES:{"food_image":{"name":"store_265332457o6zAJszC4WsrwhUy55eh7iKJt7EQ1480318543139.jpg","type":"image\/jpeg","tmp_name":"\/tmp\/phpe3zGok","error":0,"size":845941}}POST: {"latitude":"0","longitude":"0","restaurant_id":"0","tags":"","city":"\u5317\u4eac","name":"\u0e1b\u0e31\u0e01\u0e01\u0e34\u0e48\u0e07"}city: 北京name: ปักกิ่งlatitude: 0longitude: 0restaurant_id: 0

( ps：php 中，FILES 里有 tmp_name 为收到了文件，将临时文件从该路径中移动到指定目录便可保存文件，这里看到有 /tmp/phpe3zGok 临时文件，说明成功收到了文件)

将小程序预览到手机上，点击上传，但却出现了问题，如下所示：

POST 数据为空， FILES 成功收到，而单独输出的$_POST数据出现乱码(中文和泰文部分)，出现了溢出．

可以看到，非英文，数字的数据是乱码，而其它数据没有问题，显然是编码出现了问题，POST 数据输出为空，由于乱码导致了溢出使得格式错乱．

编码有问题，那么就尝试改变它的编码进行传输， uploadFile 的参数中加入

header{“chartset”:”utf-8”}或者　header{"content-type":'application/x-www-form-urlencoded'}

但是都没有什么效果，依然是在微信小程序工具中有效，而手机真机预览的时候出现乱码．

才知道header 里的数据在真机预览的时候是无效的，需要改到 formData 中，受到了启发，尝试将编码数据加入formData 中，但仅仅传输了数据，并没有改变编码．依然是小程序开发工具中调试成功，而真机预览出了问题，这个估计要微信团队来回答了。

知道 header 是个bug , 那么编码的操作暂时只能手动进行了，于是我将小程序段的数据都进行编码．

在 javascript 中，字符串编码函数是 encodeURI, 在小程序中尝试，也有该函数，所以我将小程序代码改为如下

服务器端, php 进行 url 解码的函数是 urldecode

public function save(Request $request)

{

error_log("FILES:" . json_encode($_FILES) . "\r\n", 3, "./logs/info.log");

error_log("POST: " . json_encode($_POST) . "\r\n", 3, "./logs/info.log");

error_log("city: " . urldecode($_POST["city"]) . "\r\n", 3, "./logs/info.log");

error_log("name: " . urldecode($_POST["name"]) . "\r\n", 3, "./logs/info.log");

error_log("latitude: " . urldecode($_POST["latitude"]) . "\r\n", 3, "./logs/info.log");

error_log("longitude: " . urldecode($_POST["longitude"]) . "\r\n", 3, "./logs/info.log");

error_log("restaurant_id: " . urldecode($_POST["restaurant_id"]) . "\r\n", 3, "./logs/info.log");

error_log("tags: " . urldecode($_POST["city"]) . "\r\n", 3, "./logs/info.log");

echo 'success';

}

再次测试，真机预览测试输出如下：

FILES:{"food_image":{"name":"jpeg","type":"image\/jpeg","tmp_name":"\/tmp\/php1svqDs","error":0,"size":9561}}

POST: {"restaurant_id":"0","tags":"","longitude":"0","latitude":"0","city":"%E5%8C%97%E4%BA%AC","name":"%E0%B8%9B%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B4%E0%B9%88%E0%B8%87"}

city: 北京

name: ปักกิ่ง

latitude: 0

longitude: 0

restaurant_id: 0

可以看到，所有数据都正常输出，其中POST 数据中 city 和 name未解码前是 urlencode 编码形式的数据，解码后正常输出．

至此，我想使用小程序上传带文件信息到服务器端算是调通了， 希望这个方法能对出现同样问题的同学有一定帮助。