经过上次小软的介绍，大家对微信小程序是不是已经有了初步的了解呢？本期小软就来跟大家聊聊微信小程序开发的前端与后端吧！

在前端：

从配置上来说，无疑是前端的工作。

这里的配置一般是指小程序的全局配置，比如页面配置、tab导航栏配置、页面标题样式配置等。在目录结构配置中，需要在app.json文件中配置引入的对应页面。

到这里，不得不提一下微信小程序目录配置的一个小坑，我们写 HTML 页面跳转的时候，只需要指定文件的路径即可，但是在微信小程序中，二级页面的配置必须在相应的一级页面下面，直接跟图即可。（左图错误，右图正确）。另外，在文件夹中，二级页面的文件也必须在一级页面的目录中。

■■■■■

所以在开发微信小程序的时候，会发现很多错误都是无稽之谈，其他开发中所用的习惯在这里被严格规范。

至于数据渲染，这可能是微信小程序在开发方面最大的特点了，就是通过数据来渲染页面，其实这也是因为微信小程序已经封装了很多框架和API，你只需要按照官方文档的“套路”来“填充”我们的各种页面就可以了。

说到数据绑定，小软在开发的时候需要这样的功能：给定一个图片列表，当点击某张图片时，切换到另外的状态，表示被选中。嗯，其实就是实现一个类似tab导航的功能，不过那个已经官方封装好了，只需要填入图片路径就可以了（如下图，以官方小程序demo为例）。

当我没有想到这个共性的时候，作为一个程序员，我开始胡乱瞎搞。我首先想到的就是列出两个数组，把所有图片绑定到同一个事件上，当发生点击时，判断哪个是触发源，然后改变其状态。听起来很有道理，用数组也是一种很省力的方法，但是却掉进了一个小坑。在小程序的js中，改变数据的this.方法（js中改变数据绑定的方法）中引用的键值不能有下标，比如我写i，它会把i当成字符串，而不是变量。

最终这个想法失败了，我立刻想到了开发中的切换（其实就是小程序的tab切换），所以最后用三元运算符解决了这个问题，在数据的传递和返回过程中，文件之间的联系非常紧密。

当然后来我尝试过使用wxss（微信层叠样式表）样式作为变化状态，也成功了。总之就是三元运算的运用比较特殊。

小程序开发框架中列表渲染和条件渲染也是常用的，列表渲染是微信小程序提供的一种循环写法，即在前端用一个或者无意义的来控制属性，其他数据以数组形式存放。数据在js数据中，调用时使用以item为前缀的key在循环组件中填充不同的数据，其中wx.key可以替代wx.for，更加严谨的写法可以忽略成本的差异。条件渲染暂时没用，至于小软目前面临的问题，对于可以用条件渲染解决的问题，小软最终选择了三元运算符号。

至于事件处理，这个应该是整个UI最核心的部分了，小程序的事件机制和网页制作的区别是显而易见的，由于PC网页和移动端的用户使用习惯不同，会产生很多不同的动作事件，这就导致了PC网页和小程序的事件机制存在差异。

除了最常见的点击机制，还有长按、多点触摸触发、更具体的结束等特殊事件。它区分嵌套盒子模型中的父容器是否也属于同一事件。在本次开发中用的不多。

先说一下小程序事件和开发的区别。在开发中，写一个事件处理函数，首先要划分封装，也就是所谓的面向对象，明确调用方法，使用的时候实例化各个类。小程序开发就省去了很多代码，只剩下我们需要自己编写的函数。这一方面得益于js作为脚本语言对于开发的优化，另一方面也得益于官方提供的接口。

数据参数也是小程序开发中非常重要的一部分，比如页面跳转和请求的数据很多时候形式相同但内容不同，通过参数传递进行信息交互是一种非常有效的请求和反馈方式。

接下来最基础的就是小程序使用的标签语言和网页开发中的组件的区别。

小程序中的组件大部分和网页开发中的组件有一定的对应关系，比如盒子模型、各类表单组件、媒体组件等，此外小程序中还包含一些适配移动端特点的组件，比如页面加载时的进度条组件

，使用手指滑动选择滚动选择器

、可用手指触摸进行绘画的画布组件等。

其中最重要的，大概就是小程序开发框架中可以跨页面引用的模板组件了！因为它不仅节省了代码的长度，更重要的是满足了前端开发的一种思想。

对于前端来说，当我们每篇文章的二级页面主结构都一样的时候，只需要引入一个模板来指定文章页面的样式，内容就由请求的数据来填充，设计最重要的是省代码，其实就体现了OO的设计原则（如下图，是官方demo的模板）。

最后我们来谈谈小程序在布局方面的异同。

HTML一般采用流体布局，响应式页面使用百分比来指定大组件的大小，从而达到自适应屏幕宽度的目的。

小程序为了适配手机屏幕宽度，有了更方便的单位rpx，在小程序中，所有屏幕宽度统一划分为rpx，不分长度，这样就可以根据不同手机屏幕，调整各个组件的尺寸，减轻了设计和前端布局的压力。

在移动端应用中，和 等布局的使用更能针对不同模式的应用，但需要更多的布局知识，小程序的弹性布局虽然属性较多，但依然是一种很好的模式。

最后是背景方面。

其实从后台角度来说，开发网页和开发微信小程序在功能上并没有太大的区别，所以下面我就给大家问一些常见的问题。

传递和接收值的问题：

第一个坑就是传递给小程序的值的格式，小程序默认类型是/json，这样传值的时候后端试了各种方法还是收不到数据，网上看到这个坑，需要把-type改成/x-www-form-才能有效传递信息。

关于后端接收的问题，之前做网页的时候，什么名字，怎么用，网上教程很多，所以完全没担心过接收处理的问题。但是我对小程序确实不太了解，没有官方文档，也没有在线小程序。后端的教程大部分都是用PHP写的，对于初学者来说似乎很难，只能一步步尝试在控制台里改正错误。还是要多看官方文档，基本内容讲得比较清楚。