微信小程序一

Posted 2021-09-06 想成为大师啊

基础组件（常用）

组件名	说明
view	视图容器
scroll-view	可滚动视图容器
swiper	滑块视图容器

JS的数据通过数据绑定可以在wxml上进行渲染

JS里面的onload函数是页面刷新后加载数据的函数，一般在onload里面写初始化数据的部分。

---

数据绑定：WXML中的动态数据均来自对应的Page的data

const app = getApp()

Page({
  data: {
    userName: "你好",
    person: {
      "username": "hello",
      "password": "111",
      "age": 20
    },
    books: [
      "三国演义",
      "水浒传",
      "西游记",
      "红楼梦"
    ]
  },
  onLoad() {
    
  },
})

<!--通过变量名得到对应值-->
<view>{{ userName }}</view>	<!--你好-->
<!--相当于字符串，所以不会输出 你好-->
<view>userName</view>	<!--userName-->

<!--相当于字典：由key得到value-->
<view>{{ person.username }}</view>	<!--hello-->

<!--相当于数组或者列表，有下标-->
<view>{{ books[0] }}</view>	<!--三国演义-->

<!--相当于数组或者列表，直接全部打印出来-->
<view>{{ books }}</view>	<!--三国演义,水浒传,西游记,红楼梦-->

<!-- if-else条件判断，必须写在引号里面-->
<view wx:if="{{ person.age > 18 }}">可以上网</view>
<view wx:else>不可上网</view>

<!--这两者的区别：第一种是两个整型数相加；第二种是字符串拼接-->
<view>{{ person.age + 10 }}</view>
<view>{{ person.age }} + 10</view>

简单绑定：数据绑定使用Mustache语法（双大括号）将变量包起来，类似上面的写法。

不可自定义data，微信小程序的WXML只会去读取JS中data里面的数据，而不会去读取自定义里面的数据。

变量渲染：

1、使用双大花括号。
2、获取对象的值，通过下标获取数组中的值。
3、可以做运算，比如判断，四则运算等。
4、总而言之一句话：需要使用JS中传过来的值，就必须使用双大括号。

列表渲染：

1、通过语法 wx:for="{{列表}}"来渲染一个列表。

2、循环中，默认的下标名称是index，默认的值的名称是item。如果想要修改循环列表的值和下标的名称，那么可以通过 wx:for-index 和 wx:for-item 来指定

3、如果想要在循环中渲染多个标签，那么也可以通过block来实现

<!--打印换行列表中的值-->
<view wx:for="{{[1,2,3,4,5]}}">{{item}}/{{index}}</view>

从JS中获取到的值，去WXML中渲染出来

JS部分

Page({
  data: {
    books: [
      '三国演义',
      '水浒传',
      '西游记',
      '红楼梦'
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
})

WXML部分，可以修改for循环的标签名称——item和index

block可以同时渲染多个标签

<view wx:for="{{[1,2,3,4,5]}}">{{item}}/{{index}}</view>
<view wx:for="{{books}}" wx:for-item="abc" wx:for-index="idx">{{abc}}/{{idx}}</view>

<block wx:for="{{books}}">
  <view>{{item}}</view>
  <view>{{index}}</view>
</block>

---

实战：九九乘法表

WXML

<view class="row" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="row">
  <view class="col" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="col">
    <view wx:if="{{row >= col}}">
      {{row}} * {{col}} = {{row*col}}
    </view>
  </view>
</view>

WCSS

.row{
  display: flex;
  justify-content: flex-start;
  font-size: 17rpx;
}
.row .col{
  width: 100rpx;
}

在大容器row里面定义的格式，被包含在内的col也会跟着排版

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex-direction:

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap:

• nowrap（默认）：不换行。
• wrap：换行，第一行在上方。
• wrap-reverse：换行，第一行在下方。

justify-content:

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items:

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

wx:key
JS部分

Page({
  data: {
    // lines: [
    //   {
    //     "id": 1,
    //     "name": "switch1"
    //   },
    //   {
    //     "id": 2,
    //     "name": "switch2"
    //   },
    //   {
    //     "id": 3,
    //     "name": "switch3"
    //   },
    //   {
    //     "id": 4,
    //     "name": "switch4"
    //   }
    // ]
    lines: [1,2,3,4,5]
  },
  tapevent: function(event){
    var lines = this.data.lines;
    // lines.splice(0,0,{
    //   id: 5,
    //   name: "switch5"
    // });
    lines.splice(0,0,6);
    this.setData({
      lines: lines
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
})

WXML部分

<view wx:for="{{lines}}" wx:key="name">
  <switch>{{item.name}}</switch>
</view>

<button bindtap="tapevent">更新</button>

<view wx:for="{{lines}}" wx:key="*this">
  <switch>{{item}}</switch>
</view>

<button bindtap="tapevent">更新</button>

如果JS部分有属性的话，key后面就可以通过属性来进行锁定；如果没有属性，类似列表：则通过 *this 来进行锁定

wx:key 的值以两种形式提供：

1、字符串或者数字，代表在for循环的array中item的某个property，该property的值需要是列表中唯一的字符串或数字，且不能动态改变。在写的时候，直接写这个property的名字就可以了，不需要写 item.property 的形式，并且不需要加中括号。

2、保留关键字 *this 代表在for循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：当数据改变触发渲染层重新渲染的时候，会校正带有key的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

3、即使列表中的组件没有发生状态改变，那么也建议使用 wx:key 。因为如果不使用，那么以后重新渲染的时候，就会把之前组件销毁掉，然后重新创建，性能会很低。

如不提供 wx:key ，会报一个 warning ，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

---

include
include 可以将目标文件除了 外的整个代码引入，相当于是拷贝到 include 位置

---

参数传递
JS部分

Page({

  /**
   * 页面的初始数据
   */
  data: {
    articles: [
      {
        'id': 1,
        'title': '钢铁是怎样炼成的'
      },
      {
        'id': 2,
        'title': '互联网风口推动者的生意'
      }
    ]
  },
  /*
    view被点击事件
  */
  onViewClick: function(event){
    console.log("hello")
  },
  /**
   * 文章被点击事件
   */
  onArticleClick: function(event){
  // 获取event里面的数据
    var dataset = event.currentTarget.dataset;
    console.log(dataset)
    // console.log(event)
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
})

WXML部分

<view bindtap="onViewClick">
  请点击我
</view>

<view class="article-group" wx:for="{{articles}}" bindtap="onArticleClick" data-id="{{item.id}}" data-title="{{item.title}}">
  {{item.title}}
</view>

WCSS部分

.article-group{
  font-size: 14px;
  height: 40px;
  padding: 10px;
  line-height: 40px;
  border-bottom: 1px solid #e4e4e4;
}

---

flex布局：

flex布局是继标准流布局、浮动布局、定位布局后的第四种布局方式。这种方式可以非常优雅的实现子元素居中或均匀分布，，甚至可以随着窗口缩放自动适应。flex布局在浏览器中存在一定的兼容性。但在小程序中，是完全兼容flex布局的，并且微信官方也是推荐使用flex布局的。

WXML部分：

<view class="outter">
  <view class="inner">1</view>
  <view class="inner">2</view>
</view>

WXSS部分:

.outter{
  display: flex;
  justify-content: space-between;
  background: pink;
  width: 300px;
  height: 300px;
}

.inner{
  width: 100px;
  height: 100px;
  background: gray;
  border: 1px solid #e4e4e4;
  box-sizing: border-box;/*将设置的边框所占的px隐藏在长宽内*/
}

---

转载于：https://www.jianshu.com/p/e4f371d6dc5e

flex布局一共有6个属性：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

1）flex-direction：很好理解就是定义容器中所有组件的排列方向，排列方向的话有4种row（从左到右）， row-reverse（从右到左）， column（从上到下）， column-reverse（从下到上），但常用的基本就是row和column这两种了，其它两种逆向排序目前没发现能用在什么样的布局上。默认值为row。

2）flex-wrap：定义了容器内组件在一条轴线排不下，如何换行。换行方式有3种 nowrap（不换行）， wrap（换行）， wrap-reverse（逆向换行），默认值为nowrap，当然我们常用的也是前两种，第三种逆向换行，我也是没想到这种诡异的换行方式能用在哪种布局上。

3）flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap，笔者个人还是喜欢将两者分开定义。

4）justify-content: 定义了项目在主轴上的对齐方式，这也是flex比原先的h5布局要强的地方，原先的h5布局要实现各种对齐还是比较麻烦的。

• flex-start（默认值）：左对齐；项目靠近父盒子的左侧
• flex-end：右对齐；项目靠近父盒子的右侧
• center： 居中；所有项目会挨在一起在父盒子的中间位置
• space-between：两端对齐，项目之间的间隔都相等；项目沿主轴均匀分布，位于首尾两端的子容器与父容器紧紧挨着。
• space-around：每个项目两侧的间隔相等；项目沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。
• space-evenly：项目在主轴上均匀分布，首尾两端的子容器到父容器的距离跟子容器间的间距是一样的。

5）align-items：定义项目在交叉轴上如何对齐。

• flex-start：交叉轴的起点对齐；起始端对齐
• flex-end：交叉轴的终点对齐；末尾端对齐
• center：交叉轴的中点对齐；中间对齐
• baseline: 基线对齐，这里的 baseline 默认是指首行文字，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6）align-content：定义了多轴线的对齐方式（多行时才使用）

• flex-start：从上往下排列。
• flex-end：末尾端对齐。
• center：中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

7）flex属性：flex属性是flex-grow、flex-shrink、flex-basis三个属性的简写。假设以上三个属性同样取默认值，则flex的默认值是 0、1、auto，（前四个学会就行）

• auto：等价于 1 1 auto。也就是允许增长，允许缩小，宽度为自动。
• none：等价于 0 0 auto。也就是不允许增长，不允许缩小，宽度为自动。
• 非负数字：这个数字表示的是flex-grow的值，flex-shrink为1，表示允许缩小，flex-basis为0%。可以认为他就是把剩余的空间进行填充
• 0：对应的三个值分别为 0 1 0%。
• 长度或者百分比：则这个值视为 flex-basis 的值，而flex-grow为1，flex-shrink为1
• 两个非负数字：分别视为 flex-grow 和 flex-shrink 的值，flex-basis取 0%
• 一个非负数字和一个长度或百分比：则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1