小程序（一）

1.介绍

 1.1 小程序与普通网页的区别

• 运行环境不同：网页运行在浏览器环境中，小程序运行在微信环境中。
• 开发模式不同：网页的开发模式：浏览器+代码编辑器，而小程序有自己的一套开发模式，需要申请开发账号。
• API不同：由于运行环境不同，所以小程序中，无法调用DOM和BOM的API，但小程序中可以调用微信开发环境提供的各种API，如：地理定位、扫码、支付。

1.2 小程序项目结构

• pages 用来存放所有小程序的页面。
• utils 用来存放工具性质的模块
• app.js 小程序的入口文件。
• app.json 小程序项目的全局配置文件。
• app.wxss 小程序项目的全局样式文件。
• project.config.json 项目的配置文件。
• sitemap.json 用来配置小程序及其页面是否允许被微信索引。

1.3 小程序页面的组成

   每个页面由4个基本文件组成：

• .js 文件：脚本文件
• .json 文件：当前页面的配置文件
• .wxml 文件：模板结构文件
• .wxss 文件：样式文件

2.组件

2.1 视图容器组件

（1）view

        普通视图区域，类似于 div，是一个块级元素。

（2）scroll-view

        可滚动的视图区，常用来实现滚动列表效果。

（3）swiper 和 swiper-item

        轮播图容器组件和轮播图 item 组件。

        swiper 组件的常用属性：

      

 2.2 基础内容组件

（1）text

        文本组件，类似于 span 标签，是一个行内元素。

        通过组件的 selectable 属性，实现长按选中文本内容效果。

（2）rich-text

        富文本组件，支持把 HTML 字符串渲染为 WXML 结构。

2.3 其他组件

（1）button

        按钮组件，通过 open-type 属性可以调用微信提供的各种功能。

（2）image

        图片组件，默认宽度约 300px，高度约 240px。

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

（3）navigator

        页面导航组件，类似于 a 链接。

3.API

        小程序的 API 是宿主环境提供的，通过这些丰富的小程序 API，开发者可以方便的调用微信提供的能力，如：获取用户信息、本地存储、支付功能等。

（1）事件监听 API 

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

（2）同步 API

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

（3）异步 API

• 特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果
• 举例：wx. request () 发起网络数据请求，通过 success 回调函数接收数据