原生WX小程序知识点总结_微信原生小程序开发,获取wx:for的索引

1.小程序中的data数据数据渲染----使用插值的语法{{}} 属性绑定也要使用插值的语法model:value=“{{}}” 例：<swiper autoplay="false">在这里插入代码片 <swiper-item> <image src=""></image> </swiper-item> …` 此时是不会禁止自动轮播的 因为这里的false当做字符串进行解析了

2.wx:for的语法格式为 wx:for="{{ 数据名称 }}"并且内置默认通过 index 获取数组的索引值， item 访问数组的单元值

<!-- pages/index/index -->
<view class="students">
    <view class="item">
        <text>序号</text>
        <text>姓名</text>
        <text>年龄</text>
        <text>性别</text>
    </view>
    <view class="item" wx:for="{{students}}"  wx:key="name">
        <text>{{index + 1}}</text>
        <text>{{item.name}}</text>
        <text>{{item.age}}</text>
        <text>{{item.gender}}</text>
    </view>
</view>`
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

上方的wx:key的值具有唯一性，使用是分为两种形式：

• 数组单元为简单类型数据时，使用 *this 指定为 wx:key 的值。
• 数组单元是对象类型时，可以直接写对象的属性名。
  开发中wx:for嵌套的现象是常见的，一般wx:for进行嵌套使用：方法wx:for-item=“{{数据}}”；wx:for-item2="{{数据}}"

3.wx:if和hidden的区别？

• wx:if 在条件为 true 时会将内容渲染出来，否则不会进行渲染，是通过【添加/删除】节点的方式来实现的;wx;else不能单独使用，必须配合 wx:if ，另外还有 wx:elif
  - hidden 在条件为 true 时会隐藏内容，否则会显示内容，是通过 display 样式属性来实现的.

4.block标签=>用于分组控制页面元素的渲染，并不会被渲染到页面当中，一般配合 wx:for 和 wx:if 来使用。

<block wx:if="{{isLogin}}">
   <view>a</view>
   <view>b</view>
   <view>...</view>
</block>
<view wx:else class="tips">空空如也~</view>
1
2
3
4
5
6

5.小程序的生命周期有哪些？

小程序生命周期分为三个部分，应用级别-页面级别-组件级别;
1.应用级别:
onLaunch—小程序初始化时会触发，只触发一次；
onShow—后台切入前台，小程序启动时；
onHide—前台切入后台时触发；
注意：
用户在点击右上角的胶囊关闭小程序时，小程序并不会被销毁，只是将小程序置于后台运行了，因此 onLaunch 并不会重复执行。当小程序执行停留在后台约 5 分钟后小程序会自动被销毁，再次打开小程序时 onLaunch 会再次被执行。 通过应用级别的生命周期可以进行一些全局性的设置，如检测用户的登录状态、获取小程序的场景值等。
场景值：所谓的场景值，描述的是用户打开小程序的方式，如扫码、搜索、分享等，并且每个场景都对应了一个数值，即场景值，根据这个场景值来判断用户打开小程序的方式，进而分析用户的行为
1001:发现栏小程序主入口
1011:扫描二维码
1007:单人聊天会话中的小程序消息卡片
获取小程序的场景值只能在全局生周期函数 onLaunch、onShow 中获取
例：

// app.js
App({
    onLaunch(params) {
        // 1001 发现栏小程序主入口
        // 1011 扫描二维码
        // 1007 单人聊天会话中的小程序消息卡片
        console.log(params.scene)
    },
    onShow(params) {
        // 也可以获取场景值 ID
        console.log(params.scene)
    },
})`
//过场景值发现最近一段时间大量用户是通过分享的方式打开小程序的，那说明用户分享的意愿很强，营销活动有成效，如果用户主动去搜索小程序，说明小程序的知名度和受欢迎程序都比较高等``
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.页面级别：
onLoad—监听页面加载–只会执行一次；
onShow—页面显示时触发；
onReady—页面初次渲染完成会触发，只会执行一次；
onHide—页面隐藏时会触发；
onUnload—页面销毁时会触发；
例：

// pages/index/index.js
Page({
    // ...省略前面小节的代码
    onShow() {
        // 其次执行
        console.log('首页处于显示状态...')
    },

    onReady() {
        console.log('首页初次渲染完成了...')
    },

    onLoad() {
        // 最先执行
        console.log('首页面加载完毕...')
    },

    onHide() {
        console.log('首页处于隐藏状态...')
    },

    onUnload() {
        console.log('首页面即将卸载...')
    }
}) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

onLoad和onReady只会执行一次，onShow和onHide会重复执行；普通链接跳转及切换 Tab 页面不会卸载，页面处理隐藏的状态
onLoad一般用于接收其他页面传过来的参数，代码例如：
传：

<!-- page/index/index.wxml -->
<navigator url="/pages/logs/logs?name=小明&age=18">跳转到日志页面</navigator>
1
2

收：

Page({
    data: {
        name: '',
        age: '',
    },
    onLoad(params) {
        // 查看地址中的参数
        console.log(params)

        // 记录存储地址参数
        this.setData({
            ...params
        })
    },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.组件级别
created ()—组件实例刚刚被创建好时触发；
attached ()—组件完全初始化完毕、进入页面节点树后触发
例：

Component({
    data: {
        message: '组件中初始的数据',
    },
    properties: {
        isLogin: {
            type: Boolean,
            value: true,
        },
        tips: String,
    },

    // 组件生命周期
    lifetimes: {
        created() {
            // this.setData({message: '此时不能调用 setData'})
            // 为当前组件实例自定义属性 author
            this.author = 'itcast';
        },
        attached() {
            // 没有什么限制了，可以执行任意的操作
            this.setData({
                message: '组件进入到页面节点了...'
            });
        },
    },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

6.常见的内置的API有哪些？

1.wx:request()API是用来发送网络请求的。类似我们之前VUE中使用的axios，用法例如：

wx.request({
    // 接口地址
    url: 'api/path/xxx',
    // 请求的方法
    method: 'GET｜POST|PUT',
    // 请求时的数据
    data: {},
    success(res) {
        // 成功响应的回调
    },
    // ...
})
1
2
3
4
5
6
7
8
9
10
11
12

注意事项：在使用此API调用接口的服务器地址（域名）的时候需要在小程序的管理后台进行设置配置服务器信息

2.页面加载提示API

• wx.showLoading 显示加载提示框。
• wx.hideLoading 隐藏加载提示框。

// 显示加载提示
wx.showLoading({
    title: '正在加载...',
    mask: true,
})
// 隐藏加载提示
wx.hideLoading()
1
2
3
4
5
6
7

配合案例使用：

// pages/index/index.js
Page({
    // ...省略前面小节代码
    // 获取学生表表
    getStudentList() {
        // 显示提示框
        wx.showLoading({
            title: '正在加载...',
            mask: true,
        })

        // 发起请求
        wx.request({
            url: 'https://mock.boxuegu.com/mock/3293/students',
            method: 'GET',
            // 这里注意因为 this 的原因，推荐使用箭头函数
            success: (res) => {
                this.setData({
                    // 更新 students 数组
                    students: res.data.result,
                })
            },
            complete() {
                // 隐藏提示框
                wx.hideLoading()
            },
        })
    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

wx.showLoading 的内置参数：

• title 指定显示的文字提示内容（不能省略）。

• mask 提供一个透明层阻止对页面其它内容进行操作。

• success 显示加载提示框成功后的回调（很少用到）。

• fail 显示加载提示框失败后的回调（很少用到）。

• complete 显示加载提示框完成后的回调（包括成功和失败两种情况）。

3.wx.showToast()信息提示

wx.showToast({
    title: '姓名只能为汉字!',
    duration: 2000,
    mask: true,
    icon: 'success'
})
title 指定显示的文字提示内容（不能省略）。

mask 提供一个透明层阻止对页面其它内容进行操作。

icon 指定图标类型。

duration 指定信息反馈的显示时长。

success 信息反馈成功后的回调（很少用到）。

fail 信息反馈失败后的回调（很少用到）。

complete 信息反馈完成后的回调（包括成功和失败两种情况）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4.本地存储
小程序中也能够像网页一样支持本地存储数据，用于在本地存一些临时性的数据，比如包含的用户登录状态 token 等，其包含以下 4个主要的 API

• wx.setStorageSync 在本地存入一个数据。
• wx.getStorageSync 读取本地的一个数据。
• wx.removeStorageSync 删除本地存储的一个数据。
• wx.clearStorageSync 清空本地存储的数据
  1.存入数据，wx.setStorageSync()。

// pages/storage/index.js
Page({
   // 存入本地数据
   setStorage() {
       wx.setStorageSync('name', '小明')
       // 可以直接存入对象，无需 JSON.stringify 处理
       wx.setStorageSync('user', {
           name: '小明',
           age: 18
       })
   },
})
1
2
3
4
5
6
7
8
9
10
11
12

取数据：wx.getStorageSync()

// pages/storage/index.js
Page({
    // 读取本地数据
    getStorage() {
        const name = wx.getStorageSync('name')
        // 对象类型的数据不必 JSON.parse 处理
        const user = wx.getStorageSync('user')
    },
})
1
2
3
4
5
6
7
8
9

删除数据：wx.removeStorageSync()

// pages/storage/index.js
Page({
    // 删除数据
    removeStorage() {
        wx.removeStorageSync('name')
    },
})
1
2
3
4
5
6
7

清空数据wx.clearStorageSync()

// pages/storage/index.js
Page({
    // 清空数据
    clearStorage() {
        wx.clearStorageSync()
    },
})
1
2
3
4
5
6
7

除了上述的 4 个 API 外，还有 4 个与之对应的异步版本的 API

• wx.setStorage() 在本地存入一个数据。
• wx.getStorage() 读取本地的一个数据。
• wx.removeStorage() 删除本地存储的一个数据。
• wx.clearStorage() 清空本地存储的数据