小程序代码构成:
项目文件类型:
1、.json 后缀的 JSON 配置文件
2、.wxml 后缀的 WXML 模板文件 ==> HTML
3、.wxss 后缀的 WXSS 样式文件 ==> CSS
4、.js 后缀的 JS 脚本逻辑文件 ==> js
一、WXML 模板
1、标签名字有点不一样:WXML 用的标签是 view, button, text
2、多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
3、大小写敏感
JSON 语法
JSON的值只能是以下几种数据格式:
1、数字,包含浮点数和整数
2、字符串,需要包裹在双引号中
3、Bool值,true 或者 false
4、数组,需要包裹在方括号中 []
5、对象,需要包裹在大括号中 {}
6、Null
还需要注意的是 JSON 文件中无法使用注释,试图添加注释将会引发报错。
属性:
navigationBarTitleText:小程序标题
共同属性:
控件
button、image、view、switch 、template
实例:
模板(template):
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
运算
1、条件逻辑:wx:if、wx:elif
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
2、列表渲染:wx:for
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
<!-- array 是一个数组 -->
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
<!-- 对应的脚本文件
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
-->
使用 wx:for-item 指定数组当前元素的变量名,使用 wx:for-index 指定数组当前下标的变量名:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
使用 wx:for-item 指定数组当前元素的变量名,使用 wx:for-index 指定数组当前下标的变量名:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
类似 block wx:if ,也可以将 wx:for 用在 标签上,以渲染一个包含多节点的结构块。例如:
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
引用
WXML 提供两种文件引用方式import和include。
1、import 可以在该文件中使用目标文件定义的 template,如:
在 item.wxml 中定义了一个叫 item的 template :
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml,就可以使用 item模板:
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
2、使用include 引入
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
二、WXSS 样式
三、Flex(弹性布局) 布局简介
推荐学习网址:Flex教程
容器的属性
以下6个属性设置在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1 flex-direction属性
flex-direction属性决定主轴的方向(即项目的排列方向)。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
属性值:
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
3.2 flex-wrap属性
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
它可能取三个值。
(1)nowrap(默认):不换行。
(2)wrap:换行,第一行在上方。
(3)wrap-reverse:换行,第一行在下方。
3.3 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
.box {
flex-flow: <flex-direction> <flex-wrap>;
}
3.4 justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
3.5 align-items属性
align-items属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
项目的属性
以下6个属性设置在项目上。
- order
- flex-grow
- flex-shrink
- flex-basis
- flex align-self
4.1 order属性
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
.item {
order: <integer>;
}
4.2 flex-grow属性
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
4.3 flex-shrink属性
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。
4.4 flex-basis属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
4.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值
4.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
小程序相关:
1. 数据绑定
- 小程序
- data中初始化数据
- 修改数据: this.setData()
- 修改数据的行为始终是同步的
- 数据流:
- 单项: Model —> View
- Vue
- data中初始化数据
- 修改数据: this.key = value
- 数据流:
- Vue是单项数据流: Model —> View
- Vue中实现了双向数据绑定: v-model
- React
- state中初始化状态数据
- 修改数据: this.setState()
- 自身钩子函数中(componentDidMount)异步的
- 非自身的钩子函数中(定时器的回调)同步的
- 数据流:
- 单项: Model —> View
2. 获取用户基本信息
- 用户未授权(首次登陆)
- button open-type=‘getUserInfo’
- 用户已经授权(再次登陆)
- wx.getUserInfo
3. 前后端交互
- 语法: wx.request()
- 注意点:
- 协议必须是https协议
- 一个接口最多配置20个域名
- 并发限制上限是10个
- 开发过程中设置不校验合法域名: 开发工具 —> 右上角详情 ----> 本地设置 —> 不校验
- 异步请求封装实例:
1)、参加一个request.js 文件,封装一个函数
request.js 文件
import config from './config'//配置信息
export default (url,data={},method='GET')=>{
return new Promise((resolve,reject)=>{
//1 、new Promise初始化promise实例的状态为pendibg
wx.request({
url: config.host+url,
data,
method,
success:(res)=>{
resolve(res.data);
},
fail:(err)=>{
reject(err);
}
})
})
}
config.js配置文件
// 配置服务器相关信息
export default {
host: 'http://localhost:3000'
}
2)、
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210603145931690.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk5OTE4Mg==,size_16,color_FFFFFF,t_70)
使用(调用request请求)
onLoad: async function (options) {
let result=await request('/banner',{type:2});
console.log(result);
},
4. 本地存储
- 语法: wx.setStorage() || wx.setStorageSync() || …
- 注意点:
- 建议存储的数据为json数据
- 单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB
- 属于永久存储,同H5的localStorage一样
扩展内容
1. 事件流的三个阶段
- 捕获: 从外向内
- 执行目标阶段
- 冒泡: 从内向外
2. 事件委托
- 什么是事件委托
- 将子元素的事件委托(绑定)给父元素
- 事件委托的好处
- 减少绑定的次数
- 后期新添加的元素也可以享用之前委托的事件
- 事件委托的原理
- 冒泡
- 触发事件的是谁
- 子元素
- 如何找到触发事件的对象
- event.target
- currentTarget VS target
- currentTarget要求绑定事件的元素一定是触发事件的元素
- target绑定事件的元素不一定是触发事件的元素
3. 定义事件相关
- 分类
- 标准DOM事件
- 自定义事件
- 标准DOM事件
- 举例: click,input。。。
- 事件名固定的,事件由浏览器触发
- 自定义事件
- 绑定事件
- 事件名
- 事件的回调
- 订阅方: PubSub.subscribe(事件名,事件的回调)
- 订阅方式接受数据的一方
- 触发事件
- 事件名
- 提供事件参数对象, 等同于原生事件的event对象
- 发布方: PubSub.publish(事件名,提供的数据)
- 发布方是提供数据的一方
- 绑定事件
3、数据劫持代理
使用Object.defineProperty()方法实现数据劫持代理(和vue都是单项数据流)
实例:
劫持data中的数据,代理到let _this对象中。