微信小程序学习笔记-2

1. 新建小程序页面

1. app,json的“pages”中增加路径“pages/list/list”
2. 小程序默认把app,json的“pages”中，排在第一位的页面当做项目首页进行渲染

"pages": [

    "pages/index/index",

    "pages/logs/logs",

    "pages/list/list"

  ]

如index就是此项目的首页渲染

1. WXML模板(WeiXin Markup Language)

1. WXML是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的HTML。
2. WXML和HTML的区别
   • 标签名称不同
     HTML (div, span,img, a)
     WXML (view, text,image, navigator)
   • 属性节点不同
     <a href="#">超链接</a>
     <navigator url="/pages/home/home"></navigator>
   • 提供了类似于Vue中的模板语法
     数据绑定
     列表渲染
     条件渲染

1. WXSS样式（Weixin Style Sheet）

1. WXSS是一套样式语言，描述WXML组件，类似于CSS。
2. WXSS和 CSS 的区别

• 新增了rpx尺寸单位
  CSS中需要手动进行像素单位换算，例如rem
  WXSS在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换
• 提供了全局的样式和局部样式
  项目根目录中的app.wxss 会作用于所有小程序页面
  局部页面的.wxss样式仅对当前页面生效
• WXSS仅支持部分CSS选择器
  .class 和 #id
  element
  并集选择器、后代选择器
  :：after和：：before 等伪类选择器

1. JS逻辑交互

JS三类文件

• app.js：整个项目的入口文件，调用APP()函数启动整个项目
• 页面的.js文件：调用Page()函数创建并运行页面
• 普通.js文件：普通功能模块文件，封装公共的函数或属性供页面使用，如util中的util.js

1. 宿主环境（host environment）

1. 指程序运行所必须的依赖环境，手机微信是小程序的宿主环境
2. 小程序宿主环境内容含：通信模型、运行机制、组件、API
3. 通信模型：【通信主体渲染层（WXML、WXSS）+ 逻辑层（JS脚本）】

• 渲染层和逻辑层间的通信（微信客户端转发）
• 逻辑层和第三方服务器间的通信（微信客户端转发）

1. 运行机制

1. 代码包下载到本地
2. 解析app.json全局配置文件
3. 执行app.js入口文件，调用App()创实例
4. 渲染首页

• 加载解析页面的.json配置文件
• 加载页面.wxml模板、.wxss样式
• 执行页面.js文件，调用Page()创页面实例
• 页面渲染完成

    5. 启动完成