2.1、利用HbuilderX初始化项目

文章目录 三、网络 四、跳转 五 、数据缓存 六、位置 2、查看位置

一、介绍

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

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

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

为什么要去学习uni-app？

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

二、环境搭建

安装编辑器 下载地址

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

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

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

2.1、利用初始化项目 2.2、运行项目

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

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

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

注意：

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

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

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

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

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

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

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

pages所有的页面存放目录

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

组件存放目录

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

三、网络 1、发起请求

uni.() 发起网络请求.

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

2、上传

uni.()本地资源上传到开发者服务器，客户端发起一个 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 = chooseImageRes.tempFilePaths;//上传图片const uploadTask = uni.uploadFile({url: 'https://www.escook.cn/api/cart',// 要上传文件资源的路径。filePath: tempFilePaths[0],// 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容name: 'file',// HTTP 请求中其他额外的 form dataformData: {'user': 'test'},// 接口调用成功的回调函数success: (uploadFileRes) => {console.log(uploadFileRes.data);}});//获取文件长度，上传时间uploadTask.onProgressUpdate((res) => {console.log('上传进度' + res.progress);console.log('已经上传的数据长度' + res.totalBytesSent);console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);// 测试条件，取消上传任务。if (res.progress > 50) {uploadTask.abort();}uni.showToast({title: '上传成功',duration: 1000});});},// 接口调用失败的回调函数fail() {uni.showToast({title: '上传失败',duration: 1000});}});},}}
</script><style>
</style>

3、下载

uni.()下载文件资源到本地，客户端直接发起一个 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: 'https://www.escook.cn/api/cart', // 下载成功后以 tempFilePath 的形式传给页面，res = {tempFilePath: '文件的临时路径'}success: (res) => {if (res.statusCode === 200) {console.log('下载成功');}}});// onProgressUpdate 获取下载进度、已经下载的数据长度、预期需要下载的数据总长度downloadTask.onProgressUpdate((res) => {console.log(res)console.log('下载进度' + res.progress);console.log('已经下载的数据长度' + res.totalBytesWritten);console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);// 满足测试条件，取消下载任务。if (res.progress > 50) {downloadTask.abort();}});}}}
</script><style>
</style>

4、 1、.()

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

2、.send()

通过 连接发送数据

3、.close()

关闭 连接

4、.()

监听 连接打开事件

5、.()

监听 连接关闭事件

6、.()

监听 错误事件

四、跳转 1、uni.()

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

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

注意

2、uni.()

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

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

注意

3、uni.()

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

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

注意

4、uni.()

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

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

注意

5、uni.()

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

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

总结 6、窗口动画

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

1、API

有效的路由 API

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

二、组件

open-type 有效值

<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.()

将数据存储在本地缓存中指定的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>

2、uni.(key,data)

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

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

3、uni.()

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

<template><view><button type="warn" @click="getStorage">本地缓存获取key的内容</button></view>
</template>
<script>export default {methods: {getStorage() {uni.getStorage({// 本地缓存中的指定的 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、uni.(key)

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

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

5、uni.()

异步获取当前 相关信息。

<template><view><button type="warn" @click="getStorageInfo">异步获取当前storage的相关信息</button></view>
</template>
<script>export default {methods: {getStorageInfo() {uni.getStorageInfo({// 接口调用的回调函数，详见返回参数说明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、uni.()

同步获取当前 的相关信息

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

7、uni.()

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

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

8、uni.(key)

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

try {uni.removeStorageSync('storage_key');
} catch (e) {// error
}

9、uni.()

清理本地数据缓存

uni.clearStorage();

10、uni.()

同步清理本地数据缓存

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

六、位置 1、获取位置 1、uni.()

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

<template><view><button type="warn" @click="getLocation">获取当前的地理位置、速度</button></view>
</template>
<script>export default {methods: {getLocation() {uni.getLocation({// 默认为 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.()

打开地图选择位置

<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.()

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

<template><view><button type="warn" @click="openLocation">使用应用内置地图查看位置</button></view>
</template>
<script>export default {methods: {openLocation() {uni.getLocation({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>

未完，待续中…