我是如何写超大型小程序代码的，写一个小程序难吗

你 和一头骆驼准备穿过沙漠前面是一眼望不到头的沙海你的目的是要穿过 沙漠到达对面的绿洲。 现在你写的每一行代码就是往骆驼上负重。 当然SEO排名服务你的目的是要穿过 沙漠到达对面的绿洲。 现在你写的每一行代码就是往骆驼上负重。 当然有些 负重是 必须 的比如水和食物。

可能会由于负重太多骆驼严重拖累行程甚至可能永远走不出沙漠。

本文目录：

请慎重设置 data

请三思组件间如何通信

友好的使用 sass

不可或缺的 template & @import

理解多页应用的单页应用

第三方库

请善待主包

小程序有包大小限制单个主包或者子包不能超过 2M总包不能高于 12M。

有大小限制那么对于超大型小程序就要悠着点了否则超包那就是家常便饭了当然小程序这个远不及浏览器的内存和性能也提醒着我们要悠着点。

现在请开始给骆驼负重！！！

小程序的 Page 给我们提供了一个 data 对象。这个 data 对象的数据更新则直接影响 wxml 的内容。有 vue 或者 react 开发经验的同学可能再熟悉不过了。当然小程序我们需要使用 setData 来更新数据。

这是官网上的描述：

小程序的视图层目前使用 WebView 作为渲染载体而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上WebView 和 JavascriptCore 都是独立的模块并不具备数据直接共享的通道。当前视图层和逻辑层的数据传输实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据需要将其转换为字符串形式传递同时把转换后的数据内容拼接成一份 JS 脚本再通过执行 JS 脚本的形式传递到两边独立环境。

简而言之js 逻辑层的 data 的数据是需要转换成字符串再使用 JS 脚本传输到 wxml 的视图层。文档也明确了传输不实时。实际上如果数据量大还很慢。

data 对象是类似 vue 的 data是 reactivity 的。vue 的 reactivity 的数据是都需要 Object.defineProperty（或者 Proxy）的。

比如看到有代码在 data 里面放大量的数据而这些数据根本上在 wxml 里面用不上仅仅是为了存储一个对象在其他文件模块（同 this）的时候能直接用。还看到在 data 里面设置 isLoading 对象这个仅仅是为了在点击的时候做一个锁等接口调用完成再把 isLoading 改为 false。

以上情况在小程序代码中比比皆是。这些都有一个通病忽略了性能随心使用 data导致一个页面在 data 下设置的变量可能占满一屏的高度。

那我们如何做呢？

那么其他变量我们怎么做呢？有两种方案：

1、设置在实例作用域外脱离 Page 或者 Component 对象。

2、设置在实例作用域内但是脱离 data 对象不需要 reactivity。

a) 如果是 Page 可以直接新增一个 customData

b) 如果是 Component可以使用 pureData。

经过实验证明对于逻辑复杂数据量大的页面很好的优化你的 data对性能提升比较明显。

组件间通信方式：

子组件向父组件：triggerEvent

父组件向子组件：props

父组件向子组件：selectComponent

订阅发布模式：emit、on

当前前三者都是小程序直接提供的方式第四种我们需要写一个公共的 emitter 组件。下面我们来分析下这种情况。

子组件向父组件通信这种在开发中非常常见子组件响应了操作如果需要同步给父组件直接用 this.triggerEvent然后在父组件中定义 bind 就行。

父组件向子组件传参这种也非常常见如果你需要传参给子组件需要做如下两步：

1、父组件需要在 reactivity 的 data 中设置数据;

标签： data数据组件对象