uniapp学习笔记之知识点大总结

uniapp学习笔记之知识点大总结

文章目录

• 一、uniapp介绍
• 二、环境搭建
• • 2.1、利用HbuilderX初始化项目
  • 2.2、运行项目
  • 2.3、介绍项目目录和文件作用
• 三、网络
• • 1、发起请求
  • 2、上传
  • 3、下载
  • 4、SocketTask
  • • 1、Message(callback)
    • 2、SocketTask.send(object)
    • 3、SocketTask.close(object)
    • 4、Open(callback)
    • 5、Close(callback)
    • 6、Error(callback)
• 四、跳转
• • • 1、uni.navigateTo(object)
    • 2、directTo(object)
    • 3、Launch(object)
    • 4、uni.switchTab(object)
    • 5、uni.navigateBack(object)
    • 总结
    • 6、窗口动画
• 五 、数据缓存
• • 1、uni.setStorage(object)
  • 2、uni.setStorageSync(key,data)
  • 3、Storage(object)
  • 4、StorageSync(key)
  • 5、StorageInfo(object)
  • 6、StorageInfoSync()
  • 7、veStorage(object)
  • 8、veStorageSync(key)
  • 9、uni.clearStorage()
  • 10、uni.clearStorageSync()
• 六、位置
• • 1、获取位置
  • • 1、Location(object)
    • 2、uni.chooseLocation(object)
  • 2、查看位置
  • • 1、uni.openLocation(OBJECT)

一、uniapp介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

即使不跨端，uni-app同时也是更好的小程序开发框架。

具有vue和微信小程序的开发经验，可快速上手uni-app

为什么要去学习uni-app？

相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。

二、环境搭建

安装编辑器HbuilderX 下载地址

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

下载App开发版，可开箱即用

安装微信开发者工具 下载地址

2.1、利用HbuilderX初始化项目

• 点击HbuilderX菜单栏文件>项目>新建

• 选择uni-app,填写项目名称，项目创建的目录
  

2.2、运行项目

在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行

在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app

在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

注意：

• 如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功
• 微信开发者工具在设置中安全设置，服务端口开启

2.3、介绍项目目录和文件作用

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

unpackage就是打包目录，在这里有各个平台的打包文件

pages所有的页面存放目录

static静态资源目录，例如图片等

components组件存放目录

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

• 页面文件遵循 Vue 单文件组件 (SFC) 规范
• 组件标签靠近小程序规范，详见uni-app 组件规范
• 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
• 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发

三、网络

1、发起请求

发起网络请求.

<template><view class="content"><button type="warn" @click="handelClick()">发送网络请求</button><view>{{contant}}</view></view>
</template><script>export default {data() {return {contant: ''}},onLoad() {},methods: {handelClick() {quest({//url请求接口url: '',//请求方式method:"GET",//成功返回数据success: (res) => {ant=resuni.showToast({title: '获取数据成功',duration: 2000});},//fail() {console.log('请求失败')}})}}}
</script><style>
</style>

2、上传

uni.uploadFile(object)本地资源上传到开发者服务器，客户端发起一个 POST 请求。

<template><view class="content"><button @click="handelClickPic()" type="warn">上传图片</button></view>
</template><script>export default {data() {return {contant: ''}},onLoad() {},methods: {//上传图片handelClickPic() {uni.chooseImage({success: (chooseImageRes) => {const tempFilePaths = pFilePaths;//上传图片const uploadTask = uni.uploadFile({url: '',// 要上传文件资源的路径。filePath: tempFilePaths[0],// 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容name: 'file',// HTTP 请求中其他额外的 form dataformData: {'user': 'test'},// 接口调用成功的回调函数success: (uploadFileRes) => {console.log(uploadFileRes.data);}});//获取文件长度，上传时间ProgressUpdate((res) => {console.log('上传进度' + res.progress);console.log('已经上传的数据长度' + alBytesSent);console.log('预期需要上传的数据总长度' + alBytesExpectedToSend);// 测试条件，取消上传任务。if (res.progress > 50) {uploadTask.abort();}uni.showToast({title: '上传成功',duration: 1000});});},// 接口调用失败的回调函数fail() {uni.showToast({title: '上传失败',duration: 1000});}});},}}
</script><style>
</style>

3、下载

uni.downloadFile(object)下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。

<template><view class="content"><button @click="addClickPic()" type="warn">下载图片</button></view>
</template><script>export default {data() {return {contant: ''}},onLoad() {},methods: {		addClickPic(){const downloadTask = uni.downloadFile({// 下载资源的 urlurl: '', // 下载成功后以 tempFilePath 的形式传给页面，res = {tempFilePath: '文件的临时路径'}success: (res) => {if (res.statusCode === 200) {console.log('下载成功');}}});// onProgressUpdate 获取下载进度、已经下载的数据长度、预期需要下载的数据总长度ProgressUpdate((res) => {console.log(res)console.log('下载进度' + res.progress);console.log('已经下载的数据长度' + alBytesWritten);console.log('预期需要下载的数据总长度' + alBytesExpectedToWrite);// 满足测试条件，取消下载任务。if (res.progress > 50) {downloadTask.abort();}});}}}
</script><style>
</style>

4、SocketTask

1、Message(callback)

监听 WebSocket 接受到服务器的消息事件

2、SocketTask.send(object)

通过 WebSocket 连接发送数据

3、SocketTask.close(object)

关闭 WebSocket 连接

4、Open(callback)

监听 WebSocket 连接打开事件

5、Close(callback)

监听 WebSocket 连接关闭事件

6、Error(callback)

监听 WebSocket 错误事件

四、跳转

1、uni.navigateTo(object)

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

uni.navigateTo({url:'./car/index'
});

注意

• 页面跳转路径有层级限制，不能无限制跳转新页面
• 跳转到 tabBar 页面只能使用 switchTab 跳转
• 路由API的目标页面必须是在pages.json里注册的vue页面。
• APP-NVUE平台暂不支持以OpenerEventChannel()方式获取eventChannel，请换用this.$scope.eventChannel来获取。

2、directTo(object)

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

directTo({url: './hoem/index'
});

注意

• 跳转到 tabBar 页面只能使用switchTab跳转

3、Launch(object)

关闭所有页面，打开到应用内的某个页面。

Launch({url: './hoem/index'
});
export default {onLoad: function (option) {console.log(option.id);}
}

注意

• 如果调用了 uni.preloadPage(OBJECT) (opens new window)不会关闭，仅触发生命周期 onHide

• H5端调用之后之前页面栈会销毁，但是无法清空浏览器之前的历史记录，此时navigateBack不能返回，如果存在历史记录的话点击浏览器的返回按钮或者调用history.back()仍然可以导航到浏览器的其他历史记录。

4、uni.switchTab(object)

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

//pages.json
{"tabBar": {"list": [{"pagePath": "pages/home/index","text": "首页"},{"pagePath": "pages/other/other","text": "其他"}]}
}//home.vue
uni.switchTab({url: '/pages/home/index'
});

注意

• 如果调用了 uni.preloadPage(OBJECT) (opens new window)不会关闭，仅触发生命周期 onHide

5、uni.navigateBack(object)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码// 此处是A页面
uni.navigateTo({url: 'B?id=1'
});// 此处是B页面
uni.navigateTo({url: 'C?id=1'
});// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({delta: 2
});

总结

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 不能在App.vue里面进行页面跳转。
• H5端页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。

6、窗口动画

窗口的显示/关闭动画效果，支持在 API、组件、pages.json 中配置，优先级为：API = 组件 > pages.json
1、API
有效的路由 API

• navigateTo
• navigateBack

uni.navigateTo({	url: '../test/test',	animationType: 'pop-in',	animationDuration: 200});
uni.navigateBack({	delta: 1,	animationType: 'pop-out',	animationDuration: 200});

二、组件
open-type 有效值

• navigateTo
• navigateBack

<navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator>
<navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator>

三、pages.json
pages.json 中配置的是窗口显示的动画

"style": {"app-plus": {"animationType": "fade-in","animationDuration": 300}
}

显示动画与关闭动画，会有默认的对应规则。但是如果通过 API 或组件配置了窗口关闭的动画类型，则不会使用默认的类型。

五 、数据缓存

1、uni.setStorage(object)

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

<template><view><button type="warn" @click="setStorage">异步数据缓存</button></view>
</template>
<script>export default {methods: {setStorage() {uni.setStorage({// 本地缓存中的指定的 keykey: 'storage_key',// 需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象data: '好好学习天天向上',// 接口调用成功的回调函数success: function() {uni.showToast({title: '存储成功',duration: 1000})},// 接口调用失败的回调函数fail() {uni.showToast({title: '存储失败',duration: 1000})}});}}}
</script>

• uni-、uni_、dcloud-、dcloud_为前缀的key，为系统保留关键前缀。如uni_deviceId、uni_id_token，请开发者为key命名时避开这些前缀。

2、uni.setStorageSync(key,data)

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

try {uni.setStorageSync('storage_key', 'hello');
} catch (e) {// error
}

3、Storage(object)

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

<template><view><button type="warn" @click="getStorage">本地缓存获取key的内容</button></view>
</template>
<script>export default {methods: {getStorage() {Storage({// 本地缓存中的指定的 keykey: 'storage_key',// 接口调用的回调函数，res = {data: key对应的内容}success: function(res) {console.log(res.data)uni.showToast({title: '获取成功',duration: 1000})},//失败fail() {uni.showToast({title: '获取失败',duration: 1000})}});}},}
</script>

4、StorageSync(key)

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

try {const value = StorageSync('storage_key');if (value) {console.log(value);}
} catch (e) {// error
}

5、StorageInfo(object)

异步获取当前 storage 相关信息。

<template><view><button type="warn" @click="getStorageInfo">异步获取当前storage的相关信息</button></view>
</template>
<script>export default {methods: {getStorageInfo() {StorageInfo({// 接口调用的回调函数，详见返回参数说明success: function(res) {uni.showToast({title: '获取数据成功',duration: 1000});console.log(res.keys);console.log(res.currentSize);console.log(res.limitSize);},// 接口调用失败的回调函数fail() {uni.showToast({title: '获取数据失败',duration: 1000});}});}},}
</script>

6、StorageInfoSync()

同步获取当前 storage 的相关信息

<template><view><button type="warn" @click="getStorageInfoSync">同步获取当前storage的相关信息</button></view>
</template>
<script>export default {methods: {getStorageInfoSync() {try {//获取信息const res = StorageInfoSync();console.log(res.keys);console.log(res.currentSize);console.log(res.limitSize);} catch (e) {// errorconsole.log(e)}}},}
</script>

7、veStorage(object)

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

<template><view><button type="warn" @click="removeStorage">从本地缓存中异步移除指定 key。</button></view>
</template>
<script>export default {methods: {removeStorage() {veStorage({// 本地缓存中的指定的 keykey: 'storage_key',// 接口调用的回调函数success: function(res) {console.log('success');uni.showToast({title: "成功",duration: 1000})},fail() {uni.showToast({title: "失败",duration: 1000})}});}},}
</script>

8、veStorageSync(key)

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

try {veStorageSync('storage_key');
} catch (e) {// error
}

9、uni.clearStorage()

清理本地数据缓存

uni.clearStorage();

10、uni.clearStorageSync()

同步清理本地数据缓存

try {uni.clearStorageSync();
} catch (e) {// error
}

六、位置

1、获取位置

1、Location(object)

获取当前的地理位置、速度等等。

<template><view><button type="warn" @click="getLocation">获取当前的地理位置、速度</button></view>
</template>
<script>export default {methods: {getLocation() {Location({// 默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标，可用于 uni.openLocation 和 map 组件坐标，App 和 H5 需配置定位 SDK 信息才可支持 gcj02。type: 'wgs84',// 传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度altitude: true,// 默认false，是否解析地址信息geocode: true,// 开启高精度定位isHighAccuracy: true,// 高精度定位超时时间(ms)，指定时间内返回最高精度，该值3000ms以上高精度定位才有效果highAccuracyExpireTime: 10000,success: function(res) {console.log('当前位置的经度：' + res.longitude);console.log('当前位置的纬度：' + res.latitude);console.log('速度：' + res.speed);console.log('位置的精确度：' + res.accuracy);console.log('高度：' + res.altitude);console.log('垂直精度：' + res.verticalAccuracy);console.log('水平精度：' + res.horizontalAccuracy);console.log('地址信息：' + res.address);uni.showToast({title: '获取成功',duration: 1000,})},fail() {uni.showToast({title: '获取失败',duration: 1000,})}});}}}
</script>

2、uni.chooseLocation(object)

打开地图选择位置

<template><view><button type="warn" @click="chooseLocation">打开地图选择位置</button></view>
</template>
<script>export default {methods: {chooseLocation() {uni.chooseLocation({success: function(res) {console.log('位置名称：' + res.name);console.log('详细地址：' + res.address);console.log('纬度：' + res.latitude);console.log('经度：' + res.longitude);}});}}}
</script>

2、查看位置

1、uni.openLocation(OBJECT)

使用应用内置地图查看位置。

<template><view><button type="warn" @click="openLocation">使用应用内置地图查看位置</button></view>
</template>
<script>export default {methods: {openLocation() {Location({type: 'gcj02', //返回可以用于uni.openLocation的经纬度success: function (res) {//纬度const latitude = res.latitude;//经度const longitude = res.longitude;uni.openLocation({latitude: latitude,longitude: longitude,success: function () {console.log('success');}});}});}}}
</script>

未完，待续中…