微信小程序开发02-小程序基本介绍 .pdfVIP

微信⼩程序开发02-⼩程序基本介绍

前⾔

前⾯我们研究了下微信⼩程序的执⾏流程，因为拿不到源码，只能算我们的猜想，我们需要更加了解⼩程序还需要做具体的项⽬，于是我们将原来那套还算复杂的

业务拿出来：

（有些晦涩有些乱，但是对于整体了解⼩程序结构有帮助）

我们⽤⼩程序实现这⾥的代码，看看是个什么样的体验，另外我这⾥想保证代码最⼤程度重⽤，为后续⼀端代码四端运⾏做前驱探索。

页⾯复杂度还是⽐较⾼的，包括了：

①弹出层

②页⾯跳转

③缓存

④数据请求

⑤列表页、滚动分页

⑥

我相信完成了这个例⼦，我们对⼩程序业务代码怎么写会有⽐较好的了解，于是让我们开始今天的代码吧。

⼩程序的布局

为什么不使⽤HTMLCSS

微信⼩程序这种平台型的超越Hybrid系统诞⽣还是有⼀些客观条件的，其中⼀个就是移动端的应⽤相对来说简单的多，想想PC负责的布局，如果要使⽤⼩程序实

现，那么复杂度会提⾼很多。

⼩程序代码编写逻辑层依旧使⽤JS完成，但是结构层以及样式层推出了：

①WXML，WeixinMarkupLanguage，是微信设计的⼀套标签语⾔，与HTML类似，做过ReactVue的同学会⾮常熟悉

②WXSS，WeiXinStyleSheets，是⼀套样式语⾔，⽤于定义样式，与CSS类似，⼀般认为是CSS的⼦集

因为⼩程序中UI组件都是Native实现，所以⼩程序直接⼿起⼑落压根放弃让我们使⽤HTML容器，这样做我觉得有个好处是：

为了更好的限制，我之前也在做Hybrid乃⾄前端框架，⼀般来说我会限制到View级别的实习，要求必须按照我的规则做，但是因为⼊⼝为index.html⽂件，我甚⾄

将全局控制器App的实例化放到了main.js⾥⾯，只提供了建议的做法，事实上HTML还是太过灵活，有些同事逐渐根本不按照我们的规则玩，他觉得他的做法更

好，但是这样⼀来便会破坏了项⽬的总体性，后续的⼯程性的优化或者监控可能就不能帮助他了，从某个⾓度来说，我是认可⼩程序的做法的。

我们之前在这⾥研究过⾃定义标签的做法：

1articleclass=cmlistid=main

2divclass=js_sort_wrappersort-bar-wrapper

3mySortBar:entity=sortEntity/mySortBar

4/div

5myList:entity=listEntity:sort=sort/myList

6/article

从这个⽂章以及⼩程序的实现可以看出基本的概念：

①标签的出现根本不是做标签⽤，⽽是为了让JS捕捉执⾏相关逻辑，最后⽣成真正的标签

②为了做更好的限制，⼩程序根本不提供⼊⼝index.html⽂件了，所以这⾥的标签是⽤作JS做模板解析后⽣成Native能识别的代码，更具体点说是，Native实现了

⼀个组件，组件有很多规则，可以使⽤JS去调⽤，正如我们这⾥的header组件调⽤逻辑（JS会设置Native的Header组件展⽰），这⾥如果不太清晰可以参考下这

个⽂章：

当然，⼩程序底层具体是不是这么做，我们不得⽽知，如果有⼩程序的同事，可以指导下：），⾄此，我觉得可以从技术层⾯说明为什么不直接使⽤HTMLCSS

了：更好的业务限制+⽅便JS解析模板被Native执⾏。

⼩程序组件

我们之前做Hybrid应⽤的时候，事实上只提供了⼀个真正具有结构的组件Header，其他loading类的提⽰组件都⽐较简单，⽽我们看看⼩程序提供了哪些组件呢：

容器类组件

viewscroll-viewswiper等作为容器组件存在，这⾥官⽅有基本介绍，我们这⾥看看其中⼀个即可：

这⾥官⽅给了⼀个demo进⾏说明：

1viewclass=section

2viewclass=section__titleflex-direction:row/view

3viewclass=flex-wrpstyle=flex-direction:row;

4viewclass=flex-itembc_green1/view

5viewclass=flex-itembc_red2/view

6viewclass=flex-itembc_blue3/view

7/view

8/view

9viewclass=section

10viewclass=section__titlef