uni-app入门学习

(3)v-for的使用

data中定以一个数组，最终将数组渲染到页面上

data () {

return {

arr: [

{ name: ‘刘能’, age: 29 },

{ name: ‘赵四’, age: 39 },

{ name: ‘宋小宝’, age: 49 },

{ name: ‘小沈阳’, age: 59 }

]

}

}

利用v-for进行循环

名字：{{item.name}}—年龄：{{item.age}}

6.uni中的事件

(1)事件绑定

在uni中事件绑定和vue中是一样的，通过v-on进行事件的绑定，也可以简写为@

<button @click=“tapHandle”>点我啊

事件函数定义在methods中

methods: {

tapHandle () {

console.log(‘真的点我了’)

}

}

(2)事件传参

• 默认如果没有传递参数，事件函数第一个形参为事件对象

// template

<button @click=“tapHandle”>点我啊

// script

methods: {

tapHandle (e) {

console.log(e)

}

}

• 如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据

// template

<button @click=“tapHandle(1)”>点我啊

// script

methods: {

tapHandle (num) {

console.log(num)

}

}

• 如果获取事件对象也想传递参数

// template

<button @click=“tapHandle(1,$event)”>点我啊

// script

methods: {

tapHandle (num,e) {

console.log(num,e)

}

}

7.uni的生命周期

(1)应用的生命周期

生命周期的概念：一个对象从创建、运行、销毁的整个过程被成为生命周期。

生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数

uni-app 支持如下应用生命周期函数：

| 函数名 | 说明 |

| — | — |

| onLaunch | 当uni-app 初始化完成时触发（全局只触发一次） |

| onShow | 当 uni-app 启动，或从后台进入前台显示 |

| onHide | 当 uni-app 从前台进入后台 |

| onError | 当 uni-app 报错时触发 |

(2)页面的生命周期

uni-app 支持如下页面生命周期函数：

| 函数名 | 说明 | 平台差异说明 | 最低版本 |

| — | — | — | — |

| onLoad | 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例 | | |

| onShow | 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 | | |

| onReady | 监听页面初次渲染完成。 | | |

| onHide | 监听页面隐藏 | | |

| onUnload | 监听页面卸载 | | |

8.下拉刷新

开启下拉刷新

在uni-app中有两种方式开启下拉刷新

• 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh

• 通过调用uni.startPullDownRefresh方法来开启下拉刷新

通过配置文件开启

创建list页面进行演示

杭州学科

{{item}}

通过pages.json文件中找到当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh

{

“path”:“pages/list/list”,

“style”:{

“enablePullDownRefresh”: true

}

}

通过API开启

api文档

uni.startPullDownRefresh()

监听下拉刷新

通过onPullDownRefresh可以监听到下拉刷新的动作

export default {

data () {

return {

arr: [‘前端’,‘java’,‘ui’,‘大数据’]

}

},

methods: {

startPull () {

uni.startPullDownRefresh()

}

},

onPullDownRefresh () {

console.log(‘触发下拉刷新了’)

}

}

关闭下拉刷新

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

案例演示

<button type=“primary” @click=“startPull”>开启下拉刷新

杭州学科

{{item}}

9.上拉加载

通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px

通过onReachBottom监听到触底的行为

<button type=“primary” @click=“startPull”>开启下拉刷新

杭州学科

{{item}}

10.网络请求

搭建后端

• 软件phpStudy

• 安装

• 

• \heima_shop_server 在这里 npm i node .\src\app.js

• timers.active() is deprecated. Please use timeout.refresh() instead.

• timers.unenroll() is deprecated. Please use clearTimeout instead.

• 以上两个报错不影响使用

• mysql://root:root@127.0.0.1:3306/dtcmsdb4 冒号后是数据库密码

网络请求

• 在uni中可以调用uni.request方法进行请求网络请求

• 需要注意的是：在小程序中网络相关的 API 在使用前需要配置域名白名单。

发送get请求

<button @click=“sendGet”>发送请求

发送post请求

11.数据缓存

uni.setStorage

官方文档

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

代码演示

<button type=“primary” @click=“setStor”>存储数据

uni.setStorageSync

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

代码演示

<button type=“primary” @click=“setStor”>存储数据

uni.getStorage

从本地缓存中异步获取指定 key 对应的内容。

代码演示

<button type=“primary” @click=“getStorage”>获取数据

uni.getStorageSync

从本地缓存中同步获取指定 key 对应的内容。

代码演示

<button type=“primary” @click=“getStorage”>获取数据

uni.removeStorage

从本地缓存中异步移除指定 key。

代码演示

<button type=“primary” @click=“removeStorage”>删除数据

uni.removeStorageSync

从本地缓存中同步移除指定 key。

代码演示

<button type=“primary” @click=“removeStorage”>删除数据

12.上传图片、预览图片

上传图片

uni.chooseImage方法从本地相册选择图片或使用相机拍照。

案例代码

<button @click=“chooseImg” type=“primary”>上传图片

预览图片

结构

<image v-for=“item in imgArr” :src=“item” @click=“previewImg(item)” :key=“item”>

预览图片的方法

previewImg (current) {

uni.previewImage({

urls: this.imgArr,

current

})

}

13.条件注释实现跨段兼容

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

**写法：**以 #ifdef 加平台标识 开头，以 #endif 结尾。

平台标识

| 值 | 平台 | 参考文档 |

| — | — | — |

| APP-PLUS | 5+App | HTML5+ 规范 |

| H5 | H5 | |

| MP-WEIXIN | 微信小程序 | 微信小程序 |

| MP-ALIPAY | 支付宝小程序 | 支付宝小程序 |

| MP-BAIDU | 百度小程序 | 百度小程序 |

| MP-TOUTIAO | 头条小程序 | 头条小程序 |

| MP-QQ | QQ小程序 | （目前仅cli版支持） |

| MP | 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序 | |

1)组件的条件注释

代码演示

h5页面会显示

微信小程序会显示

app会显示

2)api的条件注释

代码演示

onLoad () {

//#ifdef MP-WEIXIN

console.log(‘微信小程序’)

//#endif

//#ifdef H5

console.log(‘h5页面’)

//#endif

}

3)样式的条件注释

代码演示

/* #ifdef H5 */

view{

height: 100px;

line-height: 100px;

background: red;

}

/* #endif */

/* #ifdef MP-WEIXIN */

view{

height: 100px;

line-height: 100px;

background: green;

}

/* #endif */

14.uni中的导航跳转

1)利用navigator进行跳转

navigator详细文档：文档地址

跳转到普通页面

跳转到关于页面

跳转到tabbar页面

跳转到message页面

• open-type=“redirect” 使用这个属性不能返回了

2)利用编程式导航进行跳转

导航跳转文档

利用navigateTo进行导航跳转

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

<button type=“primary” @click=“goAbout”>跳转到关于页面

通过navigateTo方法进行跳转到普通页面

goAbout () {

uni.navigateTo({

url: ‘/pages/about/about’,

})

}

通过switchTab跳转到tabbar页面

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

跳转到tabbar页面

<button type=“primary” @click=“goMessage”>跳转到message页面

通过switchTab方法进行跳转

goMessage () {

uni.switchTab({

url: ‘/pages/message/message’

})

}

redirectTo进行跳转

关闭当前页面，跳转到应用内的某个页面。

<button type=“primary” @click=“goMessage”>跳转到message页面

goMessage () {

uni.switchTab({

url: ‘/pages/message/message’

})

}

通过onUnload测试当前组件确实卸载

onUnload () {

console.log(‘组件卸载了’)

}

3)导航跳转传递参数

在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收

传递参数的页面

goAbout () {

uni.navigateTo({

url: ‘/pages/about/about?id=80’,

});

}

接收参数的页面

15.uni-app中组件的创建

在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可

• 创建login组件，在component中创建login目录，然后新建login.vue文件

这是一个自定义组件

• 在其他组件中导入该组件并注册

import login from “@/components/test/test.vue”

• 注册组件

components: {test}

• 使用组件

组件的生命周期函数

| beforeCreate | 在实例初始化之后被调用。 | | |

| — | — | — | — |

| created | 在实例创建完成后被立即调用。 | | |

| beforeMount | 在挂载开始之前被调用。 | | |

| mounted | 挂载到实例上去之后调用。注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTick | | |

| beforeUpdate | 数据更新时调用，发生在虚拟 DOM 打补丁之前。 | 仅H5平台支持 | |

| updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 | 仅H5平台支持 | |

| beforeDestroy | 实例销毁之前调用。在这一步，实例仍然完全可用。 | | |

| destroyed | Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 | | |

16.组件的通讯

父组件给子组件传值

通过props来接受外界传递到组件内部的值

这是一个自定义组件 {{msg}}

其他组件在使用组件的时候传递值

子组件给父组件传值

通过$emit触发事件进行传递参数

这是一个自定义组件 {{msg}}

<button type=“primary” @click=“sendMsg”>给父组件传值

父组件定义自定义事件并接收参数

<test :msg=“msg” @myEvent=“getMsg”>

其他组件在使用组件的时候传递值

子组件给父组件传值

通过$emit触发事件进行传递参数

这是一个自定义组件 {{msg}}

<button type=“primary” @click=“sendMsg”>给父组件传值

父组件定义自定义事件并接收参数

<test :msg=“msg” @myEvent=“getMsg”>