首页 >> 大全

2.1、利用HbuilderX初始化项目

2023-12-03 大全 14 作者:考证青年

文章目录 三、网络 四、跳转 五 、数据缓存 六、位置 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>

未完,待续中…

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了