好奇心日历/每日日报小程序开发笔记：基础知识、如何规划、小大坑

我们开发了两个微信小程序，分别是好奇心日历（词典+每天小投票）和好奇心日报（轻（ Quant）版本），就在图片上方：

本文结合具体实践经验，主要介绍微信小程序的基础知识、开发过程中遇到的难点、项目架构设计、最佳实践以及遇到的陷阱。 文章内容很多。想看建筑设计和避坑技巧请直接浏览下方文字。这本小书没有目录，颇为悲哀。

值得再次指出的是：微信小程序的内容部分是混合模式而非原生，所以性能不佳，绑定的点击事件明显延迟。

每个部分都有边框包围。最小细节的原生视图

如上图所示，边框包围的所有部分都是最小细节的原生视图。可以看到，微信小程序的整个内容部分都是原生视图。

小程序的基础知识是什么？

整个微信小程序由一个应用实例和多个页面实例组成，其中应用实例指小程序应用，多个页面指小程序的多个页面。
另外，微信小程序不允许你自定义组件，这导致很难用微信小程序开发更复杂的应用程序。

微信小程序本身非常简单，几乎和模板语言一样困难。阅读官方教程即可开始。
我也建议你先开始，然后详细阅读官方文档。由于微信官方文档仍在进行重大更新，请务必查看最新的官方文档。

微信小程序的基础知识主要分为以下几个部分：
✦ 两个配置文件和两个基本功能
✦ WXML 模板语法 ❙mp ❀ 页面之间 ❀ 页面显示
✦ 互动事件✦官方组件和官方 API
各个部分稍后会介绍...微信小程序，主要包含以下配置：
✦pages：页面路径数组，表示小程序要加载的所有页面，其中数组的第一个元素代表小程序的主页。
✦窗口：微信原生功能，不太可定制。您可以设置小程序的状态栏、导航栏、标题和窗口背景颜色。
✦ tabBar：微信原生功能，不太可定制。适用于普通Tab应用，Tab栏可以位于顶部或底部； tabBar是一个数组，只支持2-5个tab。
✦ networkTimeout：配置小组件网络请求的超时时间。
✦ debug：调试模式切换。建议在开发模式下开启。不要忘记在正式发布时将其关闭。

配置的主要区域

页面的全局配置文件

除了上面提到的全局配置外，各个页面还可以在配置中单独配置 ' 并且只会去到当前页面生效。
只能针对 Windows 配置。还有两个比较有用的配置项：
✦enablePullDownRefresh：是否启用下拉刷新
✦disableScroll：只能配置为禁止页面上下滚动。可以实现完美的滑屏滑动（不勾选）

App() 小程序注册入口，全球唯一

App()用于注册小程序，全球只有一个，全球唯一这里也可以放置数据进行操作。

小程序不提供销毁方法，只有进入后台一定时间或者系统资源占用过高才会真正销毁。

Page() 页面注册登录

Page()用于注册页面，并维护页面的生命周期和数据。

每个生命周期的细节和流程可以参见下图：

和维护应用程序和页面的配置属性。 App()和Page()维护应用程序和页面的各种生命周期和数据。

那么APP和Page如何传输数据呢？页面如何显示？

WXML模板语法、页面渲染

小程序虽然是混合模式，但并没有使用HTML渲染，而是完全通过自定义标签来显示页面。我不知道这样做的好处，但是有很多问题：不能跨浏览器、难以解析富文本、不支持iframe视频、无法跳转到外部链接。
与所有模板语言一样，WXML 支持数据绑定、条件渲染、循环、模块化和其他功能。

数据绑定

在 WXML 中，您可以使用字符串 {{}} 来访问 ‽数据绑定。例如：条件渲染

条件渲染，适用于WXML输出，具体取决于不同状态中的数据，例如：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

W循环渲染XML，例如：

// wx:for 表示需要遍历的数据
// wx:key 使用唯一的字段来标识，有利于提升性能
// wx:for-index 表示数组的下标
// wx:for-item 表示数组的元素
<view wx:for="{{[{id:1, message: 'HelloWorld1'}, {id:2, message: 'HelloWorld2'}]}}" 
    wx:key="id" 
    wx:for-index="idx" 
    wx:for-item="item">
  {{idx}}: {{}}
</view>

WX：keyis对于提高重新渲染效率很有用。我们建议添加

模块化

WXML 模块化，这允许重用一些 wxml 片段，这一点非常重要。例如：

data 一对一匹配页面状态。在微信小程序中设计一个好的数据结构对于页面以及页面代码都有很大的帮助。
微信小程序不支持该标签，那么如何实现页面之间的跳转呢？

页面间跳转

小程序以堆栈的形式维护了历史中所有访问过的页面，并提供了多种页面间跳转的方式；结合上面提到的 App() 和 Page() 每个生命周期都有不同的跳转方法和生命周期关联，如下所示：

例如页面变化对应的生命周期（页面 A 和 B 是 Tabbar 页面，C 是 Tabbar 页面）是从页面打开的页面，页面D是从页面C打开的页面为例）

好吧，APP和Page负责维护小程序的生命周期和数据，模板负责接受数据完成页面显示所必需的，而页面之间的跳转则更负责网站的转换。那我们就简单说一下这个案例吧。

交互事件

事件绑定

那么另一个问题：tapName()自定义参数我们如何接受自定义参数？

事件传递参数

自定义参数传递主要有两种方式：
第一种方式：将参数绑定到wxml标签，然后使用第二种方式：直接或与其他数据一起

至此实现了一个完整的小程序框架

✦小程序仅由逻辑和视图两部分组成，不提供组件化解决方案视图非常简单，模板语法有点不完善
✦ 小程序框架自动支持逻辑层到视图层的数据绑定。当数据改变时，视图自动改变
✦视图层到逻辑层的过渡主要通过事件实现

框架有，小程序也提供了官方组件用于快速开发，以及用于开发应用程序功能的 API。

这部分就不详细介绍了。还需要注意的是，小程序的官方文档仍在大规模更新中。一定要查看最新版本
官方组件：
官方API：

微信小程序 基础就是上面的内容了，并不复杂，可以一边查一边写。

更多进阶内容呈现如下。内容主要与好奇心日报小程序项目相关。先看效果：

好奇新日报实战效果图

如何设计微信小程序？

搭建系统及目录结构

搭建系统

由于微信小程序本身根本不支持设计，所以我搭建了一个：wxapp-redux-starter。
使用 gulp 进行编译和构建。主要功能如下：
✦ 集成 Redux，数据管理更方便
✦ 开发过程中使用 ‽ml x 替代 wxml，更友好开发者工具
✦ 在开发过程中，不要用少，而是使用wxss

wxss，功能更多 ✦ 介绍 es-promise ，所以你可以创建和使用 Promise
✦ 添加 promisify 工具功能，方便添加官方 转换为Pormise模式 ✦引入normalizr，可以统一数据让数据管理更便捷
✦ 自动引入 ES2015功能转换
✦ wxml/wxs s/js/img压缩，相比开发工具减少了体积提供的压缩

构建库结构

按页面、组件、redux、供应商/库和图像的主要部分拆分，并直接进入库。

小程序工程目录

✦ dist 目录 ：构建输出文件存放在此目录中。
✦ src 目录 ：开发模式文件，包括应用程序、页面、组件、图像和其他静态资源、实用程序库、Redux 数据管理器和第三方库。
✦ ：不用说，gulp 构建任务的输入文件。
✦：不用说，管理者会产生任务依赖性。
✦thirdPlugins：由于小程序不支持直接使用npm，因此可以独立下载构建，然后复制给厂家。有时需要进行简单的修改。

构建系统对src目录中的代码进行编译和处理，并输出到dist目录中。迷你开发工具只需要导入dist目录即可。

构建工具让代码开发变得更加方便，但是很快我们又遇到了另一个烦人的问题，那就是我们如何处理分散在各处的数据？
要知道微信小程序并没有提供组件化的解决方案，所以将组件写成无状态组件特别合适，但是在页面上处理太多的数据就很混乱了。有没有办法集中管理数据？ ？

引入了用于集中数据管理的 Redux。有兴趣的话可以访问以下页面：
Redux 总体介绍：Redux 入门教程、应用状态管理器
水平和垂直分割状态：状态规划，Redux 开发的第一步 Redux 最佳实践：Redux开发最重要的部分，Reducer最佳实践

这里简单介绍一下微信小程序引入Redux以及微信小程序接入Redux。安装redux后引入Redux dist目录 复制到vendors目录。需要简单修改即可使用
。只需将208行压缩版本(i)更改为(i || {})即可。

简单修改一下，Redux就可以正常使用了

连接微信小程序和Redux

连接Redux和微信小程序真的很好用。我在charleyw/wechat-weapp-redux中找到了现成的解决方案，可以直接使用。

完整的 Redux 解决方案如下，包括： Store 插入到应用程序中，将状态数据和归约方法映射到页面。随着状态的变化，它也会更新，从而触发页面重新渲染。

需要说明的是，为了尽快提供数据，我们对wechat-weapp-redux/src/进行了优化更改。修改如下

呈现Redux的好处

引入Redux的好处是可以集中管理数据，让页面代码变得绝对简单，把所有组件变成简单可复用的无状态组件。
此外，Redux 使离线缓存更加方便，数据重用也更加容易。

Redux的引入解决了数据到处扩散的问题。我们参考Redux的管理理念制定了一套简单的组件解决方案：假设我们将所有组件设计为无状态组件，并且组件的数据源为 ，我们是否也可以将组件数据的管理提取到一个单独的文件中？接下来说一下我们使用的简单组件方案。

简单的组件化方案

组件化方案的本质是集中管理组件的相关数据，只有默认的数据和数据操作功能。

比如《好奇心日报》的详情页就有一个工具栏。 Toolbox并不复杂，主要提供返回等类似功能。点赞功能仅对文章详情有效，机构详情页隐藏点赞功能。

工具箱组件

只要遵循一定的代码规范，这个 Redux 组件解决方案简单易用。这样的设计当然是为了复用，但也让页面的逻辑变得极其简单。

开发过程中遇到了哪些困难&&微信小程序遇到了多少坑？

微信小程序目前确实还不是公测版本。开发工具不完善，真机和开发环境的性能相差很大，部分组件性能较差，部分功能出现故障。只有经历了这些陷阱，我们才真正知道你有多“爱”微信小程序。这里总结一下我们在微信小程序中遇到的开发难点和比较明显的陷阱。 † 该函数由后台程序统一转换。如果您的前端需要转换，我们建议您考虑以下想法。

感谢这个wxParse组件，它节省了我很多时间。我把它推荐给了每一个人。期间如果遇到什么问题，请与大家分享。
✦ wxParse 默认级别仅支持 10 级 html 嵌入。如果您想支持更深层次，请复制一些模板。
✦ wxParse 提供了图片加载成功的回调wxParseImgLoad，非常有用。但是，如果富文本中的图像具有预设的宽高比，则不需要依赖此回调。直接根据屏幕宽度计算图像高度，优先占用空间，避免了频繁的侧晃。
✦ 如果您有富文本格式的自定义小部件，只需更改其中的模板即可。

个性化模块风格

数据对账

对账详情请百度。
这里简单介绍一下扁平化的应用场景：
好奇日报的研究院有一个三级表结构：论文>问题>机会❝。后台返回的数据是三级嵌套数据。 ，如果要修改字段，需要三层嵌套循环！如果你想获取所有选中的选项，你需要一个三层嵌套循环！

优化页面渲染速度

数据复用，例如列表页的数据复用，可以让详情页标题等字段立即显示。
离线缓存可以让列表页和详情页即时显示，甚至可以减少请求次数。

无论是数据复用还是离线缓存，配合数据均衡使用都非常方便。

小程序默认会设置代理，会和Shadowsocks等VPN冲突（最新版本已修复）

解决办法很简单，设置微信小程序不使用代理即可；或暂时禁用 VPN。
最新版本的开发者工具解决了这个问题。

最新版本的微信小程序已停止支持Promise。

开发者可以自行引入兼容库，推荐使用es6-promise。使用时直接出示Promise即可。

不知道为什么微信暂时下架了Promise。统一构建不是很好吗？

小程序无法达到完美的整页效果，会有上下拖拽的感觉（预计最新版本已修复，有待实际验证）。

如果小程序向上或向下滚动，继续滑动，就会变成拖拽现象。而且这种拉动现象是无法停止的。
最新版本可以配置页面disableScroll功能。待实际检查后，该问题有望得到解决。 ？之前动画是通过设置left属性来实现的。小米5、华为V8等高端Android手机会出现明显的延迟。当然，原因是X5内核。最新版本进行了修复和更改，性能得到了一定程度的提升。

滑动性能提升

✦ 文档没有标记为垂直旋转，但确实可以。

// 简单设置vertical即可，但由于官方文档并未备注，尽量不要使用。可以自己开发一个swiper组件。
<swiper vertical="true"></swiper>

✦ swiper组件的小点确实是可以自定义的，但是官方文档没有解释，开发者工具也看不到。只有将鼠标悬停在元素上时才能看到相应的类。这是一个简单的假设。我们看一下，最后分析一下它是如何实现的。

刷点的实现原理

WXSS小程序font-face url不接受路径作为参数

可以将字体文件转换为base64然后引用。

font-face 接受base64，但不接受url

同样，如果我们想使用iconfont，我们可以使用类似的解决方案，在base64之后导入iconfont字体文件。

小程序的margin性能有问题（最新版本已修复）

如果之前进行了margin驱动，系统会取较小的值。这会导致下边距等设置无效。

画布问题

画布没有彻底检查。到目前为止，我们主要发现了两个问题，如下图所示：
✦ 层次结构问题，画布总是覆盖其他元素。
✦ 支撑不好，小米5和iPhone 5s的图纸看起来变形。

用canvas绘制饼图时有bug

终于通过CSS3制作饼图了

<template name="pie">
    <view class="com-pie">
        

微信小程序rpx导致精度问题-left/margin-right会导致页面崩溃左右晃动。 我认为是rpx导致的精度问题。
rpx 本质上会转换为像素。在不同宽度的设备上，实际的rpx值将被转换为带小数位的px值。舍入可能会出现问题。之前在QQ浏览器使用rem布局的时候也遇到过类似的情况。问题。

rpx精度问题

性能不合理，带特殊字符系统会报错

✦请求返回404错误，同时还会触发成功回调。
不要想当然地认为系统会发出失败回调来确定请求的成功或失败。请使用返回的状态来判断。只有不合规的请求才会触发失败。

回调

✦ 如果请求的数据中有特殊字符（如\u2820），系统会报错。
只会出现在真实设备上，开发者工具没有任何问题。估计有几个特殊字符会导致这个问题。

特殊字符导致关机

开发者工具，切换页面时wxml有时不同步变化

希望微信什么时候能解决。

微信小程序给wxml模板赋值时，如果在解构之前到来，可能会出现错误信息

最新版本会遇到这个问题。虽然老版本没有显示任何错误，但有些真机却出现了问题。
原因不明。遇到这个问题的朋友可以考虑绕过。

破坏赋值导致错误

微信小程序滚动视图暴露的bindscroll函数无法实时监听

基于实时获取滚动位置的功能无法实现。例如，滚动时动态隐藏和显示工具栏。

最新版开发工具无法关闭自动更新

微信小程序默认监听文件变化，然后自动更新。
但缺点是每次都是完全更新，而不是模块热插拔，影响开发速度。特别是喜欢频繁按 Command + S 的开发人员可能会发现您的小部件不断更新。建议关闭。

建议禁用文件更改监控

但是，如果不选中，开发者工具将自动更新到最新版本。

微信小程序不支持requestAnimationFrame

微信小程序不支持requestAnimationFrame

requestAnimationFrame。缺乏支持的原因尚不清楚。

函数可以接受参数

这个参数是由URL决定的，也就是URL携带的参数。
官方文档有点混乱，所以我在这里解释一下。例如：如果 URL 中传递 id=1，则 不是 。

参数文档描述混乱

不要传递太多无用的数据，影响渲染效率，在iOS上尤其明显

尽量传递精简的数据，并在View中保持简单的绑定连接。能。

真机上设备有一定几率会卡顿。不确定这是代码问题还是小部件问题。

有遇到类似问题的朋友欢迎关注。

最后你能说什么？

本文主要关注三个方面：微信小程序的基础知识、微信小程序的设计以及开发过程中遇到的问题。

微信小程序基础知识主要包括：
✦ 两个配置文件 && 两个基本功能
✦ WXML 模板语法、Jut、页面显示 ❙秒 ❙页面之间的秒 ❙ ✦ 交互事件
✦ 官方组件和官方 API

微信小程序的设计内容主要包括以下内容：
✦ 构建系统和目录结构
✦ 引入 Redux 进行数据集中管理 ❜♺组件 最后介绍了微信小程序开发过程中出现的难点和陷阱。

微信小程序本身并不复杂，但开发过程却相当费力。尤其是第一次在真机上运行的时候，感觉这个世界充满了恶意。

文/Qixiu_qixiuss