3.小程序页面的顺序和新增
(1).新建一个小程序页面
只需要在app.json
的 pages
数组中新增页面的存放路径
,小程序开发者工具即可帮我们自动创建对应的页面文件。
(2).修改项目首页
只需要调整 app.json
的pages
数组中首页路径的前后顺序,即可修改项目的首页。小程序会把排在第一位的页面,当作项目首页进行渲染
。
4.WXML模板 ♻
WML(WeiXin Markup Language
)是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的HTML。
(1).WML和HTML的区别
标签名称不同
:
- HTML (div、span、img、a)
- WXML(view、text、image、navigator)
属性节点不同
:
- < a href=“#”>超链接
- < navigator url=“/pages/home/home”>
提供了类似于Vue中的模板语法
:
- 数据绑定
- 列表渲染
- 条件渲染
5. WXSS样式♻
WXSS(WeiXin Style Sheets)
是一套样式语言,用于描述WXML的组件样式,类似于网页开发中的CSS.
(1).WXSS和CSS的区别
新增了rpx尺寸单位
- CSS中需要手动进行像素单位换算,列如 rem
- WXSS在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算。
提供了全局的样式和局部样式
- 项目根目录中的app.wxss会作用所有小程序页面
- 局部页面的.wxss样式仅对当前页面有效
WXSS仅支持部分CSS选择器
- 类选择器和id选择器
- element 元素选择器
- 并集选择器、后代选择器
- ::after和::before等伪类选择器
6.三种JS逻辑交互♻
一个项目仅仅提供界面展示是不够的,在小程序中,我们通过.js文件来处理用户的操作。列如: 响应用户的点击、获取用户的位置等等。
(1).app.js
- 是整个小程序项目的入口文件,通过调用==APP()==函数来启动整个小程序。
// app.js App({ onLaunch() { // 展示本地存储能力 const logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId } }) }, globalData: { userInfo: null } })
(2).页面的.js文件
- 是页面的入口文件,通过调用==Page()==函数来创建并运行页面。
// pages/list/list.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
(3).普通的.js文件
- 是普通的功能模块文件,用来封装公共的函数或属性供页面使用。
- 比如utils下面的utils.js的格式化时间的功能。
(三)、小程序的宿主环境
1.什么是宿主环境
宿主环境(hos environment
)指的是程序运行所必须的依赖环境
。脱离了宿主环境的软件是没有任何意义的。
2.小程序的宿主环境
手机微信是小程序的宿主环境。小程序借助宿主环境提供的能力,可以完成许多网页无法完成的功能,列如:
3.小程序宿主环境包含的内容
- 通信模型
- 运行机制
- 组件
- API
4.通信模型 ⭐
(1).通信的主体
小程序中通信的主题是渲染层和逻辑层,其中:
- WXML模板和WXSS样式工作在渲染层。
- JS脚本工作在逻辑层。
(2). 小程序的通信模型
小程序中的通信模型分为两部分:
- 渲染层和逻辑层之间的通信
- 逻辑层和第三方服务器之间的通信。
5.运行机制 ⭐
(1). 小程序启动的过程
小程序的代码包下载到本地
。解析app.json全局配置文件
。执行app.js小程序的入口文件,调用App()创建小程序实列
。渲染小程序首页
。小程序启动完成
。
(2). 页面渲染的过程
加载解析页面的.json配置文件
加载页面的.wxml模板和.wxss样式
执行页面的.js文件,调用Page()创建页面的实列
页面渲染完成
。
6. view 组件 ⭐
小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。挂房把小程序的组件分为了九大类、
1. 视图容器 2. 基础内容 3. 表单组件 4. 澳航组件 5. 媒体组件 6. mao地图组件 7. canvas画布组件 8. 开放能力 9. 无障碍访问
(1). 常用的试图容器类组件
1.view组件 (1).普通试图区域组件 (2).类似于HTML中的div,是一个块级元素 (3).常用来实现页面的布局效果 2.scroll-view (1).可滚动的试图区域 (2).常用来实现滚动列表效果 3.swiper和swip-item (1).轮播图容器组件和轮播图item组件
1. ⭐view组件
如果想要文本垂直居中,那么就让块级(div)的高与text-height的像素大小一致。
list.wxml
<!--pages/list/list.wxml--> 设置三个div块级元素--- <view class="container1"> <view>A</view> <view>B</view> <view>C</view> </view>
list.wxss 渲染
/* pages/list/list.wxss */ /* 对container1这个类选择器下的 view标签进行渲染 */ .container1 view{ width: 100px; height: 100px; text-align: center; line-height: 100px; } /* 对container1这个类选择器下的 view标签的第一个子标签进行渲染 */ .container1 view:nth-child(1){ background-color: aquamarine; } .container1 view:nth-child(2){ background-color: rgb(81, 43, 172); } .container1 view:nth-child(3){ background-color: rgb(211, 36, 167); } /* 对整个container1做渲染 */ .container1{ /* 横向布局 */ display: flex; /* 在每一个盒子旁边留有空白 */ justify-content: space-around; }
2. ⭐scroll-view 组件 (scroll)
我们如果要实现纵向滚动的话,我们需要进行五步操作。设置div块的目的是为了生成一个触发条件,当我们块级元素大于边框的时候,才会触发。
1.list.wxml
1. 第一步: 我们要先添加上scroll-view标签 2. 第二步: 我们设置允许y轴滚动 scroll-y。 scroll-x 允许x轴滚动
<!--pages/list/list.wxml--> <!-- 1. 第一步: 我们要先添加上scroll-view标签 2. 第二步: 我们设置允许y轴滚动 scroll-y。 scroll-x 允许x轴滚动 --> <scroll-view class="container1" scroll-y> <view>A</view> <view>B</view> <view>C</view> </scroll-view>
2.list.wxss
.container1{ 3. /* 整个大盒子全部包裹着 */ border: 1px solid red; 4. /* 设置整个大盒子的宽度 */ width: 100px; 5. /* 设置整个大盒子的高度 */ height: 120px; }
/* pages/list/list.wxss */ /* 对container1这个类选择器下的 view标签进行渲染 */ .container1 view{ width: 100px; height: 100px; text-align: center; line-height: 100px; } /* 对container1这个类选择器下的 view标签的第一个子标签进行渲染 */ .container1 view:nth-child(1){ background-color: aquamarine; } .container1 view:nth-child(2){ background-color: rgb(81, 43, 172); } .container1 view:nth-child(3){ background-color: rgb(211, 36, 167); } /* 对整个container1做渲染 */ .container1{ /* 整个大盒子全部包裹着 */ border: 1px solid red; /* 设置整个大盒子的宽度 */ width: 100px; /* 设置整个大盒子的高度 */ height: 120px; }