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 回调函数接收数据