微信小程序学习

最新推荐文章于 2024-08-19 21:07:07 发布

IT-david

最新推荐文章于 2024-08-19 21:07:07 发布

阅读量320

点赞数

分类专栏：微信小程序开发文章标签：小程序微信

本文链接：https://blog.csdn.net/weixin_43999182/article/details/117463545

版权

微信小程序开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

微信小程序官网

小程序代码构成:

微信小程序官网

在这里插入图片描述

项目文件类型:

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. 数据绑定

小程序
1. data中初始化数据
2. 修改数据： this.setData()
  1. 修改数据的行为始终是同步的
3. 数据流：
  1. 单项： Model —> View
Vue
1. data中初始化数据
2. 修改数据: this.key = value
3. 数据流：
  1. Vue是单项数据流： Model —> View
  2. Vue中实现了双向数据绑定： v-model
React
1. state中初始化状态数据
2. 修改数据: this.setState()
  1. 自身钩子函数中(componentDidMount)异步的
  2. 非自身的钩子函数中(定时器的回调)同步的
3. 数据流：
  1. 单项： Model —> View

2. 获取用户基本信息

用户未授权(首次登陆)
1. button open-type=‘getUserInfo’
用户已经授权(再次登陆)
1. wx.getUserInfo

3. 前后端交互

语法: wx.request()
注意点:
1. 协议必须是https协议
2. 一个接口最多配置20个域名
3. 并发限制上限是10个
4. 开发过程中设置不校验合法域名：开发工具 —> 右上角详情 ----> 本地设置 —> 不校验
异步请求封装实例：
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() || …
注意点：
1. 建议存储的数据为json数据
2. 单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB
3. 属于永久存储，同H5的localStorage一样

扩展内容

1. 事件流的三个阶段

捕获: 从外向内
执行目标阶段
冒泡: 从内向外

2. 事件委托

什么是事件委托
1. 将子元素的事件委托(绑定)给父元素
事件委托的好处
1. 减少绑定的次数
2. 后期新添加的元素也可以享用之前委托的事件
事件委托的原理
1. 冒泡
触发事件的是谁
1. 子元素
如何找到触发事件的对象
1. event.target
currentTarget VS target
1. currentTarget要求绑定事件的元素一定是触发事件的元素
2. target绑定事件的元素不一定是触发事件的元素

3. 定义事件相关

分类
1. 标准DOM事件
2. 自定义事件
标准DOM事件
1. 举例： click，input。。。
2. 事件名固定的，事件由浏览器触发
自定义事件
1. 绑定事件
  1. 事件名
  2. 事件的回调
  3. 订阅方: PubSub.subscribe(事件名，事件的回调)
  4. 订阅方式接受数据的一方
2. 触发事件
  1. 事件名
  2. 提供事件参数对象，等同于原生事件的event对象
  3. 发布方: PubSub.publish(事件名，提供的数据)
  4. 发布方是提供数据的一方