小程序 基本常识（一）

1.1. 小程序页面的组成部分

1、小程序代码构成 .json  .wxml  .wxss   .js

组成部分

.json 后缀的 JSON 配置文件 // 配置文件 分为app.json 全局配置  局部配置文件比全局配置文件优先级要高
.wxml 后缀的 WXML 模板文件 
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

2、小程序配置 app.json
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等

配置文件

{
  "pages":[
    "pages/index/index", //所有小程序的页面，都存放在 pages 目录中，以单独的文件夹存在
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",// 加载时候出现的三个小圆点  可以是light 和 dark
    "navigationBarBackgroundColor": "#fff", // 导航栏背景颜色
    "navigationBarTitleText": "Weixin", //导航栏标题文字内容
    "navigationBarTextStyle":"black" //导航栏标题颜色，仅支持 black / white
  }
}

1.2. 小程序的运行环境和通信机制

1.2.1、文档：微信客户端

1.2.2、概念

宿主环境（host environment）指的是程序运行所必须的依赖环境。例如：
Android系统和 iOS 系统是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行
的，所以，
Android 是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的！

小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：
微信扫码、微信支付、微信登录、地理定位、 etc …
小程序的宿主环境包含以下几部分内容
① 通信模型
② 运行机制
③ 组件
④ API

1.2.3、通信模型 : 文档

小程序中通信的主体是渲染层和逻辑层，其中：
① WXML 模板和 WXSS 样式工作在渲染层
② JS 脚本工作在逻辑层

而所谓的通信模型指的是: ① 渲染层和逻辑层之间的通信
② 逻辑层和第三方服务器之间的通信
这两部分的通信都是通过微信客户端进行转发

运行机制
小程序的运行机制主要讲两部分
① 小程序启动的过程
把小程序的代码包下载到本地
解析 app.json 全局配置文件
执行 app.js 小程序入口文件，调用 App() 创建小程序实例
渲染小程序首页
小程序启动完成
② 某个页面渲染的过程
加载解析页面的 .json 配置文件
加载页面的 .wxml 模板和 .wxss 样式
执行页面的 .js 文件，调用 Page() 创建页面实例
页面渲染完成

1.3、常见组件

view div
text、 span
rich-text 富文本
scroll-view 滚动的组件
Swiper、轮播图
button、按钮组件
image…相当于 img =>也是个组件

1、Text and rich-text ：富文本

<view>
    <!-- selectable is deprecated, use user-select instead -->
    <text selectable>hello world</text>

    <rich-text nodes="<h1 class='my-h1' style='color: red;'>Hello World</h1>"></rich-text>
</view>

2、Swiper 常见属性 ：轮播图

indicator-dots：是否显示面板指示点
indicator-color：指示点颜色
indicator-active-color：激活指示点颜色
autoplay：是否自动切换
interval：自动切换时间间隔
circular：是否采用衔接滑动

3、Button ：按钮组件

可以通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）

<button open-type="share">分享</button>

4、 image ： 图片组件

scaleToFill：默认，不保持比例，使图片填满 image 元素
aspectFit：保持比例，使图片长边完全展示，image 区域可能有空白
aspectFill：保持比例，图片完全填充 image，可能发生截取

1.4 常见 API

1.4.1 事件监听类

特点：以 on 开头，用来监听某些事件的触发

举例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件

1.4.2 同步 API

特点 1：以 Sync 结尾的 API 都是同步 API

特点 2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常

举例：wx.setStorageSync('key', 'value') 向本地存储中写入内容

1.4.3 异步 API

文档

特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果

举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据

1.5 协同工作

文档