小程序结构

项目结构

pages 用来存放所有小程序的页面

utils 用来存放工具性质的模块

app.js 小程序项目的入口文件

app.json 小程序项目的全局配置文件

app.wxss 小程序项目的全局样式文件

project.config.json 项目的配置文件

sitemap.json 用来配置小程序机器页面是否允许被微信索引(爬虫搜索)

WXML

标签名称

HTML 的标签为 div span img a

XWML 的组件为 view text image navigator

属性节点

<a href='#'>超链接</a>
<navigator url='#'>超链接</navigator>

模板语法

类似Vue中的数据绑定 列表渲染 条件渲染

WXSS

rpx像素单位

CSS中需要手动进行像素单位换算 例如 rem

WXSS在底层支持新的尺寸单位rpx 在不同的大小的屏幕上小程序会自动进行换算

提供全局样式和局部样式

项目根目录中的app.wxss会作用于所有小程序页面

局部页面的.wxss样式仅对当前页面生效

WXSS仅支持部分CSS选择器

.class 和 #id

element

并集选择器、后代选择器

::after和::before等伪类选择器

sitemap.json

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "disallow", // allow 允许被索引 disallow 不允许被索引
  "page": "*"
  }]
}

工作流程

通信模型

逻辑层 Js脚本

渲染层 WXML和WXSS

逻辑层和渲染层之间的通信 通过微信客户端转发

逻辑层和第三方服务器之间的通信( 数据请求 数据响应 ) 通过微信客户端转发

运行机制

1.把小程序代码包下载到本地

2.解析app.json全局配置文件

3.执行app.js小程序入口文件，调用App() 创建小程序实例

4.渲染小程序首页

5.小程序启动完成

页面渲染

1.加载解析页面的.json配置文件

2.加载页面的.wxml模板和.wxss样式

3.执行页面的.js文件 调用Page() 创建页面实例

4.页面渲染完成