关于小程序开发，个人的一些理解

Posted 2022-03-02 openglnewbee

微信小程序，是腾讯在微信app内部打造的一个平台或者说容器，相当于把一个应用当作了一个相对开放的操作系统，来承载不同的应用（但小程序多了一个小字，意味着它必然会有很多的约束）。从技术实现上，它可能并不是那么的惊世骇俗，但这个思路和开发平台式的app，则是开创性的。这意味着app突破了操作系统的束缚，构建自己的平台，同时也冒着极大的风险（比如被苹果应用商店下架）。我相信这是长期博弈和平衡的结果，也意味着微信和腾讯绝不是手机开发商可以忽视的力量，强大如苹果，也需要和微信进行合作，给它让渡了极大的空间。

上面的基本属于技术无关的扯淡，下面开始正题。

小程序开发的主要概念：

1. wxss+wxml+js+json (其实还有个wxs,是自定义的简单语法，用于增强wxml的逻辑特性，属于锦上添花的东西，不是必要的，这里不介绍了，感兴趣可以自行了解下)

小程序并非类似vue/react的组件式的物理文件结构，而是将样式和结构、逻辑都分离，其设计哲学更类似传统的web开发而非现代的组件开发模式。这可能会让一些人觉得不太舒服，但现在规则制定者是微信，我们没有别的选择（真的没有？不可能，在前端领域没有这种说法，我们一天可以涌现出十个新轮子！分分钟给你封装一套出来！ mpvue/wepy了解一下？喜欢折腾的同学可以搞起来）。

wxss: 类似于css，支持大部分css的功能，有一些扩展（比如导入）

wxml: 类似于html，在其中也可以嵌入简单的语法（支持if/else和for）和数据绑定，这点又类似vue。

js: 这个没什么好说的了，js语法，但样例代码好像都是es5语法，说明小程序没有更亲近es6（没有把es6作为default）。

json: 使用json作为配置文件(工程相关等，辅助上面几个，比如引入自定义组件、定义默认行为等)。

2.关于组件 （component）: 小程序最核心的东西可能就是官方提供的这些组件了，通过它们来搭建出我们想要的UI和功能。我们也可以自定义组件用来复用。这里的component 和 react里面的概念不完全一样。

3. 关于页面 （page）: 这里的页面就是我们理解的页面，包含了页面和相关的功能。每一个页面都有自己独立的wxss+wxml+js+json。从这个角度来看，小程序的开发还是模块化的。

--------------------------------华丽的分割线--------------------------------

对于一个移动应用开发，主要分为两个部分： UI + 业务逻辑

小程序的UI: wxss实现了样式，wxml实现了结构，在wxml里面使用官方组件和自定义组件。

业务逻辑：通过js来构建model和数据流、操作等，并绑定到wxml。

所以，对于一个小程序的开发，我们可以总结一些简单的步骤：

1. 拆分需要实现的页面(需要实现几个页面，分别定义page)，页面内规划简单的结构，通过哪些组件实现

2. 对各个页面先实现wxml， 在wxss里面写好占位的css class， 后续进行填充和修改

3. 对各个页面规划需要的model和数据流、操作，实现xxxPage.js。

4. 跨组件使用的数据可以放在app里面共享。

5. 使用json解决配置相关的问题。

进阶:

对于复杂的UI实现，我们可能希望引入外部的自定义组件来解决问题；同样对于复杂的业务逻辑，也需要redux/mobx这样的方案来更高效、优雅的去解决数据绑定的问题。 小程序官方技术栈并不包括这部分的内容（小程序的目标也不是让它做的多么复杂），小程序的生态也没有那样成熟，所以这个进阶的过程可以认为是痛并快乐着的踩坑之旅，有能力的同学当然也可以自己去造一些组件或者方案的轮子，为社区贡献自己的一份力量。

总结：

小程序的限制很多，它并不是一个很现代的开发方式，也可能不会让你觉得非常的舒服；但现实来看，它有这些优点：

1. 上手门槛比较低，前端和移动端开发都可以转型来做，上手比较快

2. 实现出来的体验基本上优于h5(我理解官方组件功不可没)

3. 依托于微信生态，可能有流量红利以及社交传播的便利性

就这三点已经可以看出小程序的价值。 

话不多说，我去写我的小程序了。再见。