小程序 / 微信小程序知识点—代码类

最新推荐文章于 2023-09-12 17:54:46 发布

GllWyz

最新推荐文章于 2023-09-12 17:54:46 发布

阅读量564

点赞数

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/zhumizhumi/article/details/102783940

版权

小程序专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.小程序加唯一标识符 index属性

列表渲染添加唯一标识符的方式，不加肯定会包警告

<view wx:for="{{array}}" wx:key="key"> {{item}} </view>

2.app.json 有关注释的问题

在json文件中，/* 注释 */ 和 // 注释都是不可以使用的，但也不是没有办法解决，通过key:value的形式就可以在json文件夹中实现注释功能

3.生命周期函数

App中

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果，正常进入页面的时候onLaunch、onShow都会被执行

App({
  // 监听小程序初始化
  onLaunch: function () { 
    console.log('app--监听小程序初始化')
  },
  // 监听小程序启动或切前台
  onShow: function () {
    console.log('app--监听小程序启动或切前台')
  },
  // 监听小程序切后台
  onHide: function () {
    console.log('app--监听小程序切后台')
  }
})

Page页面中

注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等，正常进入页面的时候首页中的onLoad、onShow、onReady都会被执行，onLoad优先onShow执行，onShow优先onReady执行

Page({
  // 监听页面加载
  onLoad: function (options) {
    console.log('onLoad—监听页面加载')
  },
  // 监听页面显示
  onShow: function () {
    console.log('onShow—监听页面显示')
  },
  // 监听页面初次渲染完成
  onReady: function () {
    console.log('onReady—监听页面初次渲染完成')
  },
  // 监听页面隐藏
  onHide: function () {
    console.log('onHide—监听页面隐藏')
  },
  // 监听页面卸载
  onUnload: function () {
    console.log('onUnload—监听页面卸载')
  }
})

4.取值赋值

Page({
  data: {
    extraClasses: '',
  },
  clickDou () {
    // 取值
    console.log(this.data.extraClasses)
    // 赋值
    this.setData({
       extraClasses: 'wuyanzhi'
    })
  }
})

5.小程序弹框

<view  bindtap="touchstartC"> touchstart me! </view>

Page({
  touchstartC () {
    wx.showToast({
      title: '成功',
      icon: 'succes',
      duration: 1000,
      mask: true
    })
  }
})

6.组件属性(需要在双引号之内)

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
  }
})

7.IF属性

（1）一般的IF判断

<view wx:if="{{condition}}"> </view>

Page({
  data: {
    condition: true
  }
})

（2） elif 以及 else的使用

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

（3）block wx:if

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性

8.for循环

（1）组合数组

<view wx:for="{{[zero, 1, 2, 3, 4]}}" wx:key="key"> {{item}} </view>

Page({
  data: {
    zero: 0
  }
})

最终组合成数组[0, 1, 2, 3, 4]

（2）一般循环

<view wx:for="{{array}}" wx:key="key">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

（3）指定数组当前元素、当前下标的变量名

<view wx:for="{{array}}" wx:key="key" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

（4）for循环的嵌套

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

（5）block 和 wx:for的结合使用

注：block不会被解析成标签，所以能用block的时候尽量就不要使用其他的标签了

可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块

<block wx:for="{{[1, 2, 3]}}" wx:key="key">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

9.wx:key

（1）key的作用

列表中项目的位置会动态改变或者有新的项目添加到列表中，列表中的项目保持自己的特征和状态，需要使用 wx:key 来指定列表中项目的唯一的标识符

（2）key的写法

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>

<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>

10.点击事件bindtap

类似于js中的click事件

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

详情：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

11.对象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>

Page({
  data: {
    a: 1,
    b: 2
  }
})

最终组合成的对象是 {for: 1, bar: 2}

注意

花括号和引号之间如果有空格，将最终被解析成为字符串

<view wx:for="{{[1,2,3]}} " wx:key="key">
  {{item}}
</view>

等同于

<view wx:for="{{[1,2,3] + ' '}}" wx:key="key">
  {{item}}
</view>

12.`wx:if` vs `hidden`

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好

13.boolean关键字

true：boolean 类型的 true，代表真值

false： boolean 类型的 false，代表假值

<checkbox checked="{{false}}"> </checkbox>

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值

14.三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

15.算数运算

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

view中的内容为 3 + 3 + d

16.逻辑判断

<view wx:if="{{length > 5}}"> </view>

17.字符串运算

<view>{{"hello" + name}}</view>

Page({
  data:{
    name: 'MINA'
  }
})

18.数据路径运算

<view>{{object.key}} {{array[0]}}</view>

Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

19.mark

可以使用 mark 来识别具体触发事件的 target 节点，

此外， mark 还可以用于承载一些自定义数据（类似于 dataset ）

当事件触发时，事件冒泡路径上所有的 mark 会被合并，并返回给事件回调函数。（即使事件不是冒泡事件，也会 mark ）

<view mark:myMark="last" bindtap="bindViewTap">
  <button mark:anotherMark="leaf" bindtap="bindButtonTap">按钮</button>
</view>

在上述 WXML 中，如果按钮被点击，将触发 bindViewTap 和 bindButtonTap 两个事件，事件携带的 event.mark 将包含 myMark 和 anotherMark 两项。

Page({
  bindViewTap: function(e) {
    e.mark.myMark === "last" // true
    e.mark.anotherMark === "leaf" // true
  }
})

20.更改顶部的样式

顶部的颜色和样式app.json中可以更改，也可以在每一个子页面中的json文件夹中进行更改

注：（1）同一种设置，子页面中的设置会把app.json中的设置给覆盖，也就是说，同一种设置属性子页面中级别更高，它们的写法也略有不同（2）页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性

app.json

子页面

没有设置子页面之前，子页面的显示就是app.json控制的，子页面设置之后子页面的显示就是子页面自己的设置

21.小程序首页的设置

app.json中，控制路由的pages字段中得哪一个路由是第一行，由这个路由控制的页面就是打开小程序的首页

22.内联样式 Style/Class

框架组件上支持使用 style、class 属性来控制组件的样式

style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />

23.样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}