小程序简介

小程序与网页开发的区别

  1. 运行环境不同
  2. API不同
  3. 开发模式不同

项目结构

  1. pages 用来存放所有小程序的页面
  2. utils用来存放工具性质的模块（例如格式化时间的自定义模块）
  3. app.js小程序项目的入口文件
  4. app.json小程序项目的全局配置文件
  5. app.wxss小程序项目的全局样式文件
  6. project.config.json项目的配置文件
  7. sitemap.json用来配置小程序及其页面是否允许被微信索引

json配置文件的作用

json是一种数据格式，常以配置文件形式出现

  1. app.json是当前小程序的全局配置，包括小程序所有页面路径，窗口外观，界面表现，底部tab
  2. project.config.json是项目配置文件，记录对小程序开发工具所作的个性化配置
  3. sitemap.json用来配置小程序及其页面是否允许被微信索引
  4. 页面的json文件来对页面窗口外观进行配置，会覆盖app.json 和window中相同的配置
  5. 新建程序页面和修改项目主页

WXML模板

WXML(weixin Markup Language)是小程序框架设计的一套标签语言，用来构建小程序页面的结构，类似HTML

区别：

  1. 标签名称不同
  2. 属性节点不同
  3. 提供类似Vue中的模板语法

WXSS样式

WXSS(weixin Style Sheets)是一套样式语言，用来描述WXSS的组件样式，类似CSS

区别：

  1. 新增rpx尺寸单位
  2. 提供全局样式和局部样式
  3. WXSS仅支持部分CSS选择器

JS逻辑交互

小程序js文件分为三大类

  1. app.js 是整个小程序项目的入口文件，通过调用APP()函数来启动整个小程序
  2. 页面的js文件 是页面的入口文件，通过调用Page()函数来创建并运行页面
  3. 普通的js文件 是普通的功能模块文件，用来封装公开的函数或属性供页面使用

宿主环境简介

宿主环境指的是程序运行所必须的依赖环境

手机微信是小程序的宿主环境，小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如微信扫码，微信支付

小程序宿主环境包含的内容

  1. 通信模型
  2. 运行机制
  3. 组件
  4. API

通信模型

小程序中通信的主体是渲染层和逻辑层

  1. WXML模板和WXSS样式工作在渲染层
  2. JS脚本工作在逻辑层
  3. 渲染层和逻辑层之间的通信是由微信客户端进行转发
  4. 逻辑层和第三方服务器之间的通信是由微信客户端进行转发

运行机制

小程序启动过程

  1. 把小程序的代码包下载到本地
  2. 解析app.json全局配置文件
  3. 执行app.js小程序入口文件，调用APP()创建小程序实例
  4. 渲染小程序首页
  5. 小程序启动完成

页面渲染过程

  1. 加载解析页面的json配置文件
  2. 加载也买你的wxml模板和wxss样式
  3. 执行页面的js文件，调用Page()创建页面实例
  4. 页面渲染完成

组件

小程序的组件也是由宿主环境提供，官方把小程序组件分为了9大类，分别是

  1. 视图容器
  2. 基础内容
  3. 表单组件
  4. 导航组件
  5. 媒体组件
  6. map地图组件
  7. canvas画布组件
  8. 开放能力
  9. 无障碍访问

常用视图容器类组件

  1. view 普通视图区域，类似div，块级元素，常用来实现页面布局效果
  2. scroll-view 可滚动试图区域，常用来实现滚动列表效果
  3. swiper和swiper-stem 轮播图组件和轮播图item组件

swiper组件常用属性

属性 类型 默认值 说明
indicator-dots boolean false 是否显示面板指示点
indicator-color color rgba(0,0,0,.3) 指示点颜色
indicator-active-color color #00000 当前选中的指示点颜色
autoplay boolean false 是否自动切换
interval number 5000 自动切换时间间隔
circular boolean false 是否采用衔接滑动

常用基础内容组件

  1. text 文本组件，类似span标签，行内块元素
  2. rich-text 富文本组件，支持把HTML字符串渲染为WXML结构

其他常用组件

  1. button 按钮组件，功能比HTML中的button按钮丰富，通过open-type属性可以掉用微信提供的各种功能
  2. image 图片组件，默认宽度300px 高度240px
  3. navigator 页面导航组件。类似HTML的a链接

image组件的mode属性

image组件中的mode属性用来指定图片的裁剪和缩放模式

mode值 说明
scaleToFill 默认值，缩放模式，不支持纵横比缩放图片，图片宽高完全拉伸填满image元素
aspectFit 缩放模式，保持纵横比缩放图片，图片长边能完全显示出来，也就说，可以完整将图片显示出来
aspectFill 缩放模式，保持纵横比缩放图片，只能保证推按短边能完全显示，也就是说，图片通常在水平或垂直方向是完整的，另一个方向会发生截取
widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高不变
heightFix 缩放模式，高度不变，宽度自动变化，保持原图宽高不变

API

小程序API是由宿主环境提供的

三大类：

事件监听API

  • 特点：以on开头，用来监听某些事件的触发
  • 举例：wx.onWindowResize(function callback)监听窗口尺寸变化的事件

同步API

  • 特点：以Sync结尾的API都是同步API，同步API执行的结果，可以通过函数返回值直接获取，执行错误会抛出异常
  • 举例：wx.setStorageSync(‘key’, ‘value’)向本地存储中写入内容

异步API

  • 特点：类似JQ中$.ajax(options)函数
  • 举例：wx.request() 发起网络数据请求，通过success回调函数接收数据