小程序代码的构成--项目结构
1、了解项目的基本组成结构
(1)、pages
pages 是用来存放所有小程序的页面
(2)、utils
utils 是用来存放工具性质的模块(例如:格式化时间的自定义模块)
(3)、app.js
app.js 是小程序项目的入口文件
(4)、app.json
app.json 是小程序项目的全局配置文件
(5)、app.wxss
app.wxss 是小程序项目的全局样式文件
(6)、project.config.json
project.config.json 是项目的配置文件
(7)、sitemap.json
sitemap.json 是用来配置小程序及其页面是否允许被微信索引
2、小程序页面的组成部分
小程序官方建议把所有小程序页面都存放在 pages 目录中,以单独的文件夹存在。
其中每个页面由 4 个基本文件组成,分别是:
① .js 文件(页面的脚本文件,存放页面的数据,事件处理函数等)
② .json 文件(当前页面的配置文件,配置窗口的外观。表现等)
③ .wxml 文件(页面的模板结构文件)
④ .wxss 文件(当前页面的样式表文件)
小程序代码的构成 -- JSON 配置文件
1、JSON配置文件的作用
JSON 是一种数据格式,在实际开发中,JSON 总是以配置文件的形式出现。小程序项目中也不例外:通过不同的 .json 配置文件,可以对小程序项目进行不同级别的配置。
小程序中有4种 .json 配置文件,分别是:
① 项目根目录中的 app.json 配置文件
② 项目根目录中的 project.config.json 配置文件
③ 项目根目录中的 sitemap.json 配置文件
④ 每个页面文件夹中的 .json 配置文件
2、app.json 文件
app.json 是当前小程序的全局配置,包括了小程序的所有 页面路径、窗口外观、界面表现、底部tab等
Demo 项目里面的 app.json 配置内容如下:
① pages:用来记录当前小程序所有页面的路径
② window:全局定义小程序所有页面的背景色、文字颜色、窗口颜色等
③ style:全局定义小程序组件所使用的样式版本,默认是 v2
④ sitemapLocation:用来指明 sitemap.json 的位置
3、project.config.json 文件
project.config.json 是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置,例如:
-
setting 中保存了编译相关的配置
-
projectname 中保存的是项目名称
-
appid 中保存的是小程序的账号 ID
4、sitemap.json文件
微信现已开放小程序内搜索,效果类似于PC网页的 SEO。sitemap.json 文件用来配置小程序页面是否允许微信索引
当开发者允许微信索引时,微信会通过-爬虫的形式,为小程序的页面内容建立索引。当用户搜索关键字和页面的索引匹配成功时,小程序的页面将可能展示在搜索结果中。
注意:sitemap 的索引提示是默认开启的,如需关闭sitemap的索引提示,可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 里的值改为 false。
5、页面的 .json 配置文件
小程序中的每一个页面,可以使用 .json 文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖 app.json 的 window 中相同的配置项。
6、新建小程序页面
只需在 app.json > pages 中新增页面的存放路径,小程序开发者工具即可帮我们自动创建对应的页面文件。
7、修改项目首页
只需调整 app.json > pages 数组中页面路径的前后顺序,即可修改项目的首页。小程序会把排在第一位的页面,当作项目首页进行渲染。
小程序代码的构成 -- WXML 模板
1、什么是 WXML
WXML(WeiXin Markup Language)是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的HTML。
2、WXML 和 HTML 的区别
① 标签名称不同
-
HTML (div、span、img、a)
-
WXML(view、text、image、navigator)
② 属性节点不同(如跳转标签)
-
<a href = "#"></a>
-
<navigator url = "/pages/home/home"></navigator>
③ 提供了类似于 Vue 中的模板语法
-
数据绑定
-
列表渲染
-
条件渲染
小程序代码的构成 -- WXSS 样式
1、什么是WXSS
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式,类似于网页开发中的 CSS 。
2、WXSS和CSS的区别
① 新增了 rpx 尺寸单位
-
CSS 中需要手动进行像素单位换算,例如:rem
-
WXSS 在底层支持新的尺寸单位 rpx,在不同大小的屏幕上小程序会自动进行换算
② 提供了全局的样式和局部样式
-
项目根目录中的 app.wxss 会作用于所有小程序页面
-
局部页面的 .wxss 样式仅对当前页面生效
③ WXSS仅支持部分 CSS 选择器
-
.class 和 #id
-
element
-
并集选择器、后代选择器
-
::after 和 ::before 等伪类选择器
小程序代码的构成 -- JS 逻辑交互
1、小程序中的 .js 文件
一个项目里仅仅提供界面展示是不够的,在小程序中,我们通过 .js 文件来处理用户的操作。例如:响应用户的点击、获取用户的位置等。
2、小程序中的 .js 文件的分类
小程序中的 JS 文件分为三大类,分别是:
① app.js
-
是整个小程序项目的入口文件,通过调用 App( ) 函数来启用整个小程序
② 页面的 .js 文件
-
是页面的入口文件,通过调用 Pages( ) 函数来创建并运行页面
③ 普通的 .js 文件
-
是普通的功能模板文件,用来封装公共的函数或属性供页面使用
小程序的宿主环境 -- 宿主环境简介
1、什么是宿主环境
宿主环境(host environment)指的是程序运行所必须的依赖环境。例如:
Android 系统和 iOS 系统是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的,所以,Android 是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的。
2、小程序的宿主环境
手机微信是小程序的宿主环境
小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,例如:
微信扫码、微信支付、微信登录、地理定位、ETC……
3、小程序宿主环境包含的内容
① 通信模型
② 运行机制
③ 组件
④ API
小程序的宿主环境 -- 通信模型
1、通信的主体
小程序中通信的主体是渲染层和逻辑层,其中:
① WXML 模板和 WXSS 样式工作在渲染层
② JS 脚本工作在逻辑层
2、小程序的通行模型
小程序中的通信模型分为两部分:
① 渲染层和逻辑层之间的通信
-
由微信客户端进行转发
② 逻辑层和第三方服务器之间的通信
-
由微信客户端进行转发
小程序的宿主环境 -- 运行机制
1、小程序启动的过程
① 把小程序的代码包下载到本地
② 解析 app.json 全局配置文件
③ 执行 app.js 小程序入口文件,调用 App( ) 创建小程序实例
④ 渲染小程序首页
⑤ 小程序启动完成
2、页面渲染的过程
① 加载解析页面的 .json 配置文件
② 加载页面的 .wxml 模板和 .wxss 样式
③ 执行页面的 .js 文件,调用 Pages( ) 创建页面实例
④ 页面渲染完成
小程序的宿主环境 -- 组件
1、小程序中组件的分类
小程序中的组件也是由宿主环境提供的, 开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类,分别是:
① 视图容器
② 基础内容
③ 表单组件
④ 导航组件
⑤ 媒体组件
⑥ map 地图组件
⑦ canvas 画布组件
⑧ 开放能力
⑨ 无障碍访问
2、常用的视图容器类组件
① view
-
普通视图区域
-
类似于 HTML 中的 div ,是一个块级元素
② scroll-view
-
可滚动的视图区域
-
常用来实现滚定列表效果
③ swiper 和 swiper-item
-
轮播图容器组件和轮播图 item 组价
3、view 组件的基本使用
实现如图的 flex 横向布局效果:
4、scroll-view 组件的基本使用
实现如图的纵向滚动效果:
5、swiper 和 swiper-item 组件的基本使用
实现如图的轮播图效果:
6、swiper 组件的常用属性
属性 类型 默认值 说明
indicator-dots boolean false 是否显示面板指示点
indicator-color color rgba(0,0,0,3) 指示点颜色
indicator-active-color color #000000 当前选中的指示点颜色
autoplay boolean false 是否自动切换
interval number 5000 自动切换时间间隔
circular boolean false 是否采用衔接滑动
7、常用的基础内容组件
① text
-
文本组件
-
类似于 HTML 中的 span 标签,是一个行内元素
② rich-text
-
富文本组件
-
支持把 HTML 字符串渲染为 WXML 结构
8、text 组件的基本使用
通过 text 组件的 selectable 属性(不用写值),实现长按选中文本内容的效果:
9、rich-text 组件的基本使用
通过 rich-text 组件的 nodes 属性节点,把 HTML 字符串渲染为对应的 UI 结构:
<rich-text nodes="<h1 style='color: red;'>标题</h1>"<rich-text>
例如商品详情页:服务器返回的是一串 HTML 的标签,我们需将这些 HTML 标签渲染到页面上,展示出一个商品的详情页。
10、其它常用组件
① button
-
按钮组件
-
功能比 HTML 中的 button 按钮丰富
-
通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
② image
-
图片组件
-
image 组件默认宽度约 300px 、高度 240px
③ navigator
-
页面导航组件
-
类似于 HTML 中的 a 链接
11、button 按钮的基本使用
12、image 组件的基本使用
13、image 组件的 mode 属性
image 组件的 mode 属性用来指定图片的裁剪和缩放模式,常用的 mode 属性值如下:
scaleToFill:(默认值)缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素。
aspectFit:缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来,也就是说,可以完整地将图片显示出来。
aspectFill:缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来,也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix:缩放模式,宽度不变,高度自动变化,保持原图宽高比不变。
heightFix:缩放模式,高度不变,宽度自动变化,保持原图宽高比不变。
小程序的宿主环境 -- API
1、小程序 API 概述
小程序 API 是由宿主环境提供的,通过这些丰富的小程序 API ,开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地存储、支付功能等。
2、小程序 API 的 3 大分类
① 事件监听 API
-
特点:以 on 开头,用来监听某些事件的触发
-
举例:wx.onWindowFResize(function callback) 监听窗口尺寸变化的事件
② 同步 API
-
特点1:以 Sync 结尾的 API 都是同步 API
-
特点2:同步 API 的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
-
举例:wx.setStorageSync('key','value') 向本地存储中写入内容
③ 异步 API
-
特点:类似于 jQuery 中的 $.ajax(options) 函数,需要通过 success、fall、complete 接收调用的结果
-
举例:wx.request( ) 发起网络数据请求,通过 success 回调函数接收数据
协同工作和发布 -- 协同工作
1、了解权限管理需求
在中大型的公司里,人员的分工非常仔细,同一个小程序项目,一般会有不同岗位、不同角色的员工同时参与设计与开发。
此时处于管理需要,我们迫切需要对不同岗位、不同角色的员工的权限进行边界的划分,使他们能够高效的进行协同工作。
2、了解项目成员的组织结构
3、小程序的开发流程
协同工作和发布 -- 小程序成员管理
1、成员管理的两个方面
小程序成员管理体现在管理员对小程序项目成员及体验成员的管理:
① 项目成员:
-
表示参与小程序开发、运营的成员
-
可登录小程序管理后台
-
管理员可以添加、删除项目成员、并设置项目成员的角色
② 体验成员:
-
表示参与小程序内测体验的成员
-
可使用体验版小程序,但不属于项目成员
-
管理员及项目成员均可添加、删除体验成员
2、不同项目成员对应的权限
3、开发者的权限说明
① 开发者权限:可使用小程序开发者工具及对小程序的功能进行代码开发
② 体验者权限:可使用体验版小程序
③ 登录权限:可登录小程序管理后台,无需管理者确认
④ 开发设置:设置小程序服务器域名,消息推送及扫描普通链接二维码打开小程序
⑤ 腾讯云管理:云开发相关设置
WXML 模板语法 -- 数据绑定
1、数据绑定的基本原则
① 在 data 中定义数据
② 在 WXML 中使用数据
2、在 data 在定义页面的数据
在页面对应的 .js 文件中,把数据定义到 data 对象中即可。
3、Mustache 语法的格式
把 data 中的数据绑定到页面中渲染,使用 Mustache 语法(双大括号)将变量包起来即可。语法格式为:
4、Mustache 语法的应用场景
-
绑定内容
-
绑定属性
-
运算(三元运算、算术运算等)
5、动态绑定内容
页面的数据如下:
页面的结构如下:
6、动态绑定属性
7、三元运算
需要查看当前页面的所有数据,可在调试器中 AppData查看
8、算术运算
WXML 模板语法 -- 事件绑定
1、什么是事件
事件是渲染层到逻辑层的通讯方式,通过事件 可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
2、小程序中常用的事件
类型 绑定方式 事件描述
tap bindtap 或 bind:tap 手指触摸后马上离开,类似于 HTML 中的 click 事件
input bindinput 或 bind:input 文本框的输入事件
change bindchange 或 bind:change 状态改变时触发
3、事件对象的属性列表
当事件回调触发的时候,会收到一个事件对象 event ,它的详细属性如下所示:
属性 类型 说明
type String 事件类型
timeStamp Integer 页面打开到触发事件所经过的毫秒数
target Object 当前事件的组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合
detail Object 额外的信息
touchers Array 触摸事件,当前停留在屏幕中的触摸点信息的数组
changeTouches Array 触摸事件,当前变化的触摸点信息的数组