微信小程序总结

微信小程序操作

1.注释快捷键

ctrl+k --> ctrl+c

2.bindtap（绑定事件）

绑定事件

1、不带参数的绑定方式

index.wxml文件中：share表示绑定的事件名称

<view class='enjoy' bindtap='share'>立即分享</view>
1

index.js文件中：

share(){
    console.log('分享。。。。')
}
123

2、带参数的绑定方式

index.wxml文件中：
  share表示绑定的事件名称，data-id对应的是要传递过去的参数，data- 后面的名称可以自定义，在js文件中要拿到这个参数就要对应的点出data- 后面的自定义名称

<view wx:for="{{titleList}}" wx:for-index="index" wx:for-item="itemTitle" wx:key="index+itemTitle" bindtap='getLists' data-id="{{itemTitle.bid}}">
    <view>{{itemTitle.title}}</view>
    <view class='line'></view>
</view>

12345

index.js文件中：
  因为wxml文件中 data- 后面的自定义名称是 id，所以在这里直接通过 e.currentTarget.dataset.id 取出来即可

getLists(e) {
    // 拿到对应参数 有两种方式都可以拿到对应的参数
    console.log('e---->', e.currentTarget.dataset.id)
    //或者
    console.log('e.target.dataset.id---->', e.target.dataset.id)
}

3.wx:for和wx:for-item（循环）

wx:for="{{list}}"用来循环数组，而list即为数组名；wx:for-item="items" 即用来定义一个循环过程中每个元素的变量的

如果是一维数组,按照如下方式循环出来：

<view wx:for="{{list}}">
{{index}} {{item.name}}
</view>

以上代码中，item即为list的别名。

如果是二维甚至多维数组，按照如下方式循环：

<view wx:for="{{parentList}}">
{{item.id}}
<view wx:for="{{item.childList}}" wx:for-item="items">
{{items.name}}{{item.account}}
</view>
</view>
for (var i = 0 ; i < list.length; i++) {
var xxx = list[i];
}

等同于

<view wx:for="{{list}}" wx:for-item="xxx"></view>

谨记：wx:for是循环数组，wx:for-item即给列表赋别名

4.setData()使用

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
参数说明：

Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。

其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。

注意：

1. 直接修改this.data，而不调用this.setData()，是无法改变当前页面的状态的，会导致数据不一致
2. 仅支持可以JSON化的数据
3. 单次设置的数据不能超过1024KB，尽量避免一次设置过多的数据
4. 不要把data中的任何一项的value设为undefined，否则这一项将不能被设置，可能会有潜在的问题

代码示例：

Page({

  /**
   * 页面的初始数据
   */
 data: {
    value:"初始值"    //定义一个变量value，赋值为：“初始化”
  
  },
   /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  }
  })

1234567891011121314151617

在页面中显示：

在onLoad（）函数中调用setData（）

  onReady: function () {
    this.setData({
      value:"调用setData（）修改后的值"
    })
  
  },
123456

再次运行：

5.ICON图片居中

wxss中添加

.icon-box{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 300px;
}

6.text中加空格

<text decode="{{true}}">是否开启风扇：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</text> 

7.JavaScript中用if-else

通过if-else判断快关按键执行不同函数

  switch1Change: function(event) {
    var checkedValue = event.detail.value;
    if(checkedValue){
      this.SendA(event)
    }else{
      this.SendB(event)
    }
  },

8.数组转字符串

需要将数组中的所有元素用某个字符连接成字符串

如图用join关联

9.字符串转数组

实现方法为将字符串按某个字符切割成若干个字符串，并以数组形式返回

var s = “abc，abcd，aaa”；
ss = s.split(",");  //在每个逗号（，）处进行分解 ["abc","abcd","aaa"]

var sl = "helloworld";
ssl = sl.split(' '); //["h","e","l","l","o","w","o","r","l","d"]

3、字符串转数字

将字符串转换成数字，需要用到parseInt函数，即parseInt(string)

例如：

1、parseInt('123')，返回的结果就是int型的123

2、parseInt('123abc')，返回的结果就是123

如果解析不到数字，可以用isNaN()函数来检测

parseFloat：字符串转浮点型用法也是同上

10、数字转字符串

1、toString()函数

var i = 100; i.toString()

2、数字+任意字符串