微信小程序预热(二)：小程序五脏组成介绍

蔚落 2022-01-26 13:53 631阅读 0赞

九层之台起于垒土，想要完成一个小程序项目，当然要明白小程序是有哪几部分构成的，及每一部分各自所起的作用、这几部分之间的关联。弄清楚的了这些问题才能明白小程序的实现原理。

上节预热一种使用微信开发者工具新建了一个helloworld的小程序，如果你的环境还没搭建，也不知道如何建立第一个小程序项目，请参考：[微信小程序预热一][Link 1]

## 1.小程序代码构成 ##

这里创建了建了一个 QuickStart 项目，界面如下：

1.  整体构成  
    ![微信开发者工具新建项目后的页面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]
    
    从上图可以知道项目中生成了4种不同类型的文件，分别是：
    
    <table> 
     <thead> 
      <tr> 
       <th>件类型</th> 
       <th>作用</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>json</td> 
       <td>JSON 配置文件 ，扮演静态配置角色</td> 
      </tr> 
      <tr> 
       <td>wxml</td> 
       <td>WXML 模板文件，类似html角色</td> 
      </tr> 
      <tr> 
       <td>wxss</td> 
       <td>WXSS 样式文件 ，类似css角色</td> 
      </tr> 
      <tr> 
       <td>js</td> 
       <td>JS 脚本逻辑文件，类似javascript角色</td> 
      </tr> 
     </tbody> 
    </table>
    
    小程序项目由上面4种类型的文件组成。
2.  json文件
    
    app.json：当前小程序的全局配置。包含所有页面路径、界面表现、网络超时时间、底部Tab等。 [详情点这里][Link 2]
    
    ![app.json配置][app.json]
    
    project.config.json：工具的个性化配置，如界面颜色、编译配置等。 [详情点这里][Link 2]
    
    ![工具配置][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]  
    page.json：页面配置，用来设置页面的整体样式等。[详情点这里][Link 2]
3.  WXML模板
    
    WXML（WeiXin Markup Language）是框架设计的一套标签语言，在小程序中，类似HTML的角色，结合基础组件、事件系统，可以构建出页面的结构如下:
    
    ![WXML模板][WXML]  
    [详情点这里][Link 2]
4.  WXSS样式
    
    WXSS具有css的大部分属性，它新增了尺寸单位，提供了全局样式和局部样式。如下：
    
    ![WXSS配置][WXSS]
    
    [详情点这里][Link 2]

## 2.小程序运行环境 ##

1.  渲染层和逻辑层
    
    小程序运行环境分为渲染层和逻辑层。WXML模板和WXSS样式工作在渲染层，渲染层的界面使用了WebView 进行渲染。js脚本工作在逻辑层，使页面具有一些行为。逻辑层采用JsCore线程运行JS脚本。
    
    小程序通信模型如下：
    
    ![小程序通信模型][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 2]
    
    [详情][Link 3]
2.  组件
    
    小程序提供的丰富的组件，使用各种组件可以搭起我们的小程序。只需要在 WXML文件中 写上对应的组件标签名字就可以把该组件显示在界面上。  
    例如：`<map></map>`，就可以在界面显示地图。  
    [组件详情][Link 4]
3.  API
    
    小程序官方提供了很多官方原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能、扫一扫等。  
    [API详情][Link 4]

## 3.发布 ##

小程序从开发到上线一般要经过如下步骤：

预览-> 上传代码 -> 提交审核 -> 发布 ->获得小程序码

## 每天进步一点点、充实一点点、加油！ ##

[Link 1]: https://blog.csdn.net/w1418899532/article/details/90647459
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]: /images/20220126/07fd9fb80e8d44d69dd926fefee91caa.png
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html
[app.json]: /images/20220126/ab49a2af9ffc48d381fae927c598994d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 1]: /images/20220126/3ae69f7192f8456a81a999fd4ffc1d9c.png
[WXML]: /images/20220126/7512e3278de24135abece2643e4307e9.png
[WXSS]: /images/20220126/6c0adf2a6da4473e8f896e3fb638ecc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70 2]: /images/20220126/9755e0a4b6824d2cae73eea78cc14bbc.png
[Link 3]: https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/framework.html#%E6%B8%B2%E6%9F%93%E5%B1%82%E5%92%8C%E9%80%BB%E8%BE%91%E5%B1%82
[Link 4]: https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/framework.html#%E7%BB%84%E4%BB%B6