uniapp开发教程,uniapp实例教程

　　uni-app开发教程,uni-app实例教程

　　UNI-APP开发(仿饿)开发课程：进入学习

　　推荐（免费）：uni-app开发教程

　　文章目录

　　简介，网络请求2，图像处理1。大学。选择图像(对象)2。大学。预览图像(对象)3。大学。getimageinfo (object) 4。大学。saveimagephotoalbum(对象)3、上传下载文件1。大学。上传文件(对象)2。大学。下载文件(对象)4。数据缓存1。大学。setStorage (object) 2。大学。setStorageSync (key，Data) 3。大学。GetStorage (object) 4。大学。GetStorageSync (key) 5。大学。RemoveStorage (object) 6。大学。RemoveStoragesync (key)摘要前言

　　本文主要介绍uni-app提供的一些基本接口，包括：网络请求接口，用于承载特定的数据，请求到特定的地址，通过指定的请求方法返回请求结果；图像处理界面，包括选择、预览、获取信息、保存到本地等界面。文件处理接口，包括文件上传和下载接口；数据缓存接口，包括同步或异步保存、获取或删除数据的接口。

　　一、网络请求

　　小程序为了正常运行，需要和服务器进行交互，一般通过接口来实现。

　　数据交互通常通过网络请求接口来实现。

　　Uni.request(OBJECT)是用于发起网络请求的接口。

　　对象的常用参数如下：

　　名称类型是否是必需的。默认值表示urlString是不带developer的接口地址dataObject/String/ArrayBuffer。未设置不带请求的无参数headerObject。无法设置ReferermethodString。没有GET请求方法，包括GET、POST、PUT、DELETE等方法。time enough No 60000 time out，unit msdataTypeString No json如果设置为json，会尝试对返回的数据做一次json。ParseResponsetTypeString No text设置响应的数据类型。合法值：text，arraybuffersuccessFunction No，No，No，No，No，No，No，No，No，No，No，No，No，No，No，No，No，No，

　　模板

　　视角

　　{{res}}/view/templatescript

　　导出默认值{

　　data() {

　　返回{

　　res:“”

　　}

　　},

　　onLoad() {

　　uni.request({

　　网址：“https://demo.hcoder.net”，

　　方法：“GET”，

　　成功：函数(res){

　　console.log(res)

　　}

　　})

　　},

　　昂秀(){

　　console.log(索引onshow )

　　},

　　onHide() {

　　console . log( ide上的索引)

　　},

　　方法：{

　　}

　　}/脚本样式

　　/样式显示：

　　如您所见，数据data在请求后返回。

　　描述：

　　每个小程序平台在运行时，网络相关的API在使用前都需要配置域名白名单。所以在使用小程序进行测试时，需要在微信开发者中心设置域名，或者不要在项目本地配置中勾选合法域名，如下：

　　然后请求json数据并使用POST方法，如下所示：

　　模板

　　视角

　　{{res}}/view/templatescript

　　导出默认值{

　　data() {

　　返回{

　　res:“”

　　}

　　},

　　onLoad() {

　　常量请求1=uni.request({

　　URL: https://demo . h coder . net/index . PHP？m=getJson ，

　　成功：函数(res) {

　　console . log(RES . data)；

　　}

　　});

　　//

　　常量请求2=uni.request({

　　URL: https://demo . h coder . net/index . PHP ，

　　数据：{

　　姓名：“科利”，

　　“年龄”:18岁

　　},

　　方法： POST ，

　　标题：{

　　“内容类型”:“应用程序/x-www-form-urlencoded”

　　},

　　成功：函数(res) {

　　console . log(RES . data)；

　　}

　　});

　　},

　　昂秀(){

　　console.log(索引onshow )

　　},

　　onHide() {

　　console . log( ide上的索引)

　　},

　　方法：{}

　　}/scriptstyle/style显示：

　　如您所见，数据也被返回。

　　二、图片处理

　　1.uni.chooseImage(OBJECT)

　　从本地相册中选择图片或用相机拍照。

　　对象的常用参数如下：

　　参数type是否是必需的表示countNumber No，可以选择的图片的最大数量。默认为9sizeTypeArray No，原始图片，压缩后的压缩图片。两者默认都有extensionArray No，根据文件扩展名过滤，每一项都不能是空字符串。默认情况下不过滤。SourceTypeArray无相册从相册中选择图片，相机使用相机。默认情况下，两者都有。如果您需要直接打开相机或直接选择相册，请仅使用一个选项。如果successFunction成功，将返回图片的本地文件路径列表。tempFilePathsfailFunction无接口调用失败的回调函数applet，AppcompleteFunction无接口调用结束时的回调函数(成功和失败的调用都将被执行)。index.vue如下：

　　模板

　　视角

　　button type= primary @ click= img 上传图片/按钮

　　/view/templatescript

　　导出默认值{

　　data() {

　　返回{

　　}

　　},

　　onLoad() {

　　},

　　昂秀(){

　　console.log(索引onshow )

　　},

　　onHide() {

　　console . log( ide上的索引)

　　},

　　方法：{

　　img: function(){

　　uni.chooseImage({

　　计数：9，

　　sizeType:压缩，

　　成功：函数(res){

　　console.log(res)

　　}

　　})

　　}

　　}

　　}/scriptstyle/style显示：

　　可以看到，上传成功后，结果返回临时图片的路径链接。

　　2.uni.previewImage(OBJECT)

　　预览图片。

　　对象的常用参数如下：

　　参数类型必选说明currentString/Number当前显示图片的链接/索引值视情况而定。如果该值未填写或无效，则它是URL的第一个URL数组。这是要预览的图片的链接列表。指示器字符串无图片指示器样式。可接受的值：“默认”-底部点指示器；“数字”——顶部数字指示器；「无」-不显示指标loopBoolean否，是否可以循环预览，默认值为falselongPressActionsObject否，长按图片显示操作菜单，如未填写，默认值为保存相册成功Function否，接口调用成功的回调函数failFunction否，接口调用失败的回调函数completeFunction否，接口调用结束的回调函数(调用成功或失败都会执行)。index.vue如下：

　　模板

　　视角

　　button type= primary @ click= img 上传图片/按钮

　　/view/templatescript

　　导出默认值{

　　data() {

　　返回{

　　}

　　},

　　onLoad() {

　　},

　　昂秀(){

　　console.log(索引onshow )

　　},

　　onHide() {

　　console . log( ide上的索引)

　　},

　　方法：{

　　img: function(){

　　uni.chooseImage({

　　计数：9，

　　sizeType:压缩，

　　成功：函数(res){

　　console . log(RES)；

　　uni.previewImage({

　　URL:RES . tempfile paths，

　　})

　　}

　　})

　　}

　　}

　　}/scriptstyle/style显示：

　　可以看到，调用uni.chooseImage上传图片后，可以在成功的回调函数中再次调用uni.previewImage实现预览。

　　预览的图像链接可以是uni.chooseImage上传的内部临时图像，也可以是自定义的外部图像，如下所示：

　　模板

　　视角

　　按钮类型= primary @ click= img 显示图片/按钮

　　/view/templatescript

　　导出默认值{

　　data() {

　　返回{

　　}

　　},

　　onLoad() {

　　},

　　昂秀(){

　　console.log(索引onshow )

　　},

　　onHide() {

　　console . log( ide上的索引)

　　},

　　方法：{

　　img: function(){

　　uni.previewImage({

　　网址：[ https://bk img . cdn . BCE Bos . com/pic/95 eef 01 F3 a 292 df 56 F9 e 63 a6 b 2315 c 6034 a 87320？x-bce-process=image/resize，m_lfit，w_220，h_220，limit_1 ， https://bk img . cdn . BCE Bos . com/pic/83025 aafa 40 F4 bfb 112d 51 e 70 D4 f 78 f 0 f 6361880？x-bce-process=image/resize，m_lfit，w_220，h_220，limit_1 ， https://bk img . cdn . BCE Bos . com/pic/622762 d0f 703918 f 8453 f 4795 F3 d 269758 EEC 487？x-bce-process=image/resize，m_lfit，w_220，h_220，limit_1]

　　})

　　}

　　}

　　}/scriptstyle/style显示：

　　如你所见，外部图片也可以正常显示。

　　3.uni.getImageInfo(OBJECT)

　　获取图片信息。

　　对象的常见参数和含义如下：

　　参数类型必需说明srcString是映像的路径，可以是相对路径、临时文件路径、存储文件路径或网络映像路径。successFunction No interface调用成功的回调函数failFunction No interface调用失败的回调函数completeFunction No interface最后调用回调函数(成功和失败的调用都将被执行)。index.vue如下：

　　模板

　　视角

　　按钮type= primary @ click= img 获取图片信息/按钮

　　/view/templatescript

　　导出默认值{

　　data() {

　　返回{

　　}

　　},

　　onLoad() {

　　},

　　昂秀(){

　　console.log(索引onshow )

　　},

　　onHide() {

　　控制台。日志( ide上的索引)

　　},

　　方法：{

　　img: function(){

　　uni.getImageInfo({

　　src:https://cn.bing.com/th？id=OHR。ZH假日酒店cn 8122183595 1920 x 1080。jpgrf=ladi gue _ 1920 x 1080。jpg PID=HP ，

　　成功：函数(资源){

　　console.log(res)

　　}

　　})

　　}

　　}

　　}/脚本样式/样式显示：

　　可以看到，获取到了图片的大小、类型和方向等信息。

　　4.uni.saveImageToPhotosAlbum(OBJECT)

　　保存图片到系统相册。

　　目标常见参数如下：

　　参数名类型必填说明文件路径字符串是图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径成功功能否接口调用成功的回调函数故障函数否接口调用失败的回调函数完成功能否接口调用结束的回调函数（调用成功、失败都会执行)index.vue如下：

　　模板

　　视角

　　按钮类型=primary @click=img 上传图片并下载/按钮

　　/view/templatescript

　　导出默认值{

　　data() {

　　返回{}

　　},

　　onLoad() {

　　},

　　昂秀(){

　　console.log(索引昂秀’)

　　},

　　onHide() {

　　控制台。日志( ide上的索引)

　　},

　　方法：{

　　img: function() {

　　uni.chooseImage({

　　计数：9,

　　sizeType:压缩，

　　成功：函数(资源){

　　控制台。日志(分辨率)；

　　uni.saveImageToPhotosAlbum({

　　filePath: res.tempFilePaths[0]，

　　成功：函数(){

　　console.log(保存成功);

　　}

　　})

　　}

　　})

　　}

　　}

　　}/脚本样式/样式显示：

　　可以看到，可以实现将图片保存到本地，并且图片信息一致。

　　三、文件上传和下载

　　1.uni.uploadFile(OBJECT)

　　将本地资源上传到开发者服务器，客户端发起一个邮政请求，其中内容类型为多部分/格式数据。

　　目标常见参数如下：

　　参数名类型必填说明urlString是开发者服务器urlfilesArray否需要上传的文件列表。使用文件时，文件路径和名字不生效文件类型字符串平台之间存在关系文件类型，图像/视频/音频文件文件否要上传的文件对象文件路径字符串是要上传文件资源的路径名字串是文件对应的钥匙，开发者在服务器端通过这个键可以获取到文件二进制内容页眉对象否超文本传送协议请求标题，标题中不能设置ReferertimeoutNumber否超时时间，单位msformDataObject否超文本传送协议请求中其他额外的表单数据成功函数否接口调用成功的回调函数故障函数否接口调用失败的回调函数完成功能否接口调用结束的回调函数（调用成功、失败都会执行)index.vue如下：

　　模板

　　视角

　　按钮类型=primary @click=img 上传文件/按钮

　　进度：percent=percent 笔画宽度=20 /

　　/view/templatescript

　　var _自我

　　导出默认值{

　　data() {

　　返回{

　　百分比：0

　　}

　　},

　　onLoad() {

　　_ self=这个

　　},

　　昂秀(){

　　console.log(索引昂秀’)

　　},

　　onHide() {

　　控制台。日志( ide上的索引)

　　},

　　方法：{

　　img: function() {

　　uni.chooseImage({

　　计数：1,

　　sizeType: [compressed]，

　　成功：函数(资源){

　　var img file=RES . tempfile paths[0]；

　　控制台。日志(img文件)；

　　var uper=uni.uploadFile({

　　网址： https://demo.hcoder.net/index.php？c=超级测试，

　　文件路径：imgFile，

　　名称："文件",

　　成功：功能（升级){

　　console.log(upres)

　　}

　　});

　　超级。onprogress update(function(prores){

　　_ self。percent=pro RES . progress

　　console.log(上传进度普罗雷斯。进步)；

　　console.log(已上传数据长度pro RES . totalbytessent)；

　　console.log(预期需要上传数据总长度普罗雷斯。totalbytesexpectedtosend)；

　　})

　　}

　　})

　　}

　　}

　　}/脚本样式/样式显示：

　　可以看到，在上传图片文件之后，获取到了实时的上传进度、并在进度条中同步显示。

　　除了使用uni.uploadFile(对象),还可以使用更好的APIuniCloud.uploadFile，uniCloud提供了免费加拿大和更好的易用性，包括安全的内容交付网络直传。

　　2.uni.downloadFile(OBJECT)

　　下载文件资源到本地，客户端直接发起一个字符串请求，返回文件的本地临时路径。

　　目标常见参数如下：

　　参数类型是否是必需的表明urlString是下载资源的urlheaderObject。不能在头中设置HTTP头、头、ReferertimeoutNumber。无超时，单位mssuccessFunction。不会，下载成功后会以tempFilePath的形式发送到页面。RES={tempfilepath:文件的临时路径 }failFunction无接口调用失败回调函数completeFunction无接口调用结束回调函数(调用成功或失败都会执行)index.vue如下：

　　模板

　　视角

　　button type= primary @ click= img 下载文件/按钮

　　进度：percent=percent 笔画宽度=20 /

　　/view/templatescript

　　var _ self

　　导出默认值{

　　data() {

　　返回{

　　百分比：0，

　　}

　　},

　　onLoad() {

　　_ self=this

　　},

　　昂秀(){

　　console.log(索引onshow )

　　},

　　onHide() {

　　console . log( ide上的索引)

　　},

　　方法：{

　　img: function() {

　　const down=uni.downloadFile({

　　URL: https://bk img . cdn . BCE Bos . com/pic/95 eef 01 F3 a 292 df 56 f 9 e 63 a6 b 2315 c 6034 a 87320？x-bce-process=image/resize，m_lfit，w_220，h_220，limit_1 ，

　　成功：函数(res) {

　　if (res.statusCode===200) {

　　console . log(RES)；

　　uni.saveImageToPhotosAlbum({

　　filePath: res.tempFilePath，

　　成功：函数(){

　　console.log(保存成功)；

　　}

　　})

　　}

　　}

　　});

　　down . onprogressupdate((prores)={

　　_ self . percent=pro RES . progress；

　　Console.log(下载进度 prores . progress)；

　　Console.log(下载数据长度 pro RES . total bytes written)；

　　Console.log(下载数据的预期总长度 prores . totalbytesexpectedtowrite)；

　　});

　　}

　　}

　　}/scriptstyle/style显示：

　　可以下载图片到本地保存。

　　四、数据缓存

　　在APP或小程序中，可以使用本地存储保存一些数据，比如用户登录数据。使用用户名密码或第三方登录方式登录后，会将用户信息保存到服务器，并在键值对的形式将用户id和用户随机码(与用户匹配)发送到本地。每次与远程区域交互时，保存的用户数据都会发送到远程区域进行验证。

　　1.uni.setStorage(OBJECT)

　　将数据存储在本地缓存中指定的键中将覆盖与该键对应的原始内容。这是一个异步的界面，可以边存储边进行其他操作。

　　对象参数及其含义如下：

　　参数类型是否是必需的，表明keyString是本地缓存中指定的键数据。Any是需要存储的内容。它只支持可以通过JSON.stringify序列化的原生类型和对象successFunction No interface调用成功的回调函数failFunction No interface调用失败的回调函数completeFunction No interface调用结束的回调函数(无论成功还是失败都会执行)2.uni.setStorageSync(KEY,DATA)

　　将数据存储在本地缓存中指定的键中将覆盖与该键对应的原始内容。这是一个同步界面，其他操作只能在数据存储完成后进行。

　　其参数具有以下含义：

　　参数类型是否是必需的，表明keyString是本地缓存中指定的键数据。Any是需要存储的内容。仅支持可以通过JSON.stringify序列化的本机类型和对象。当使用uni.setStorageSync(KEY，DATA)存储数据时，需要使用try.捕捉.语句块来捕获异常。

　　setStorage和setStorageSync的简单用法如下：

　　模板

　　视角

　　button type= primary @ click= async save 异步保存数据/button

　　button type= primary @ click= sync save 同步保存数据/button

　　/view/templatescript

　　导出默认值{

　　data() {

　　返回{}

　　},

　　onLoad() {

　　},

　　昂秀(){

　　console.log(索引onshow )

　　},

　　onHide() {

　　console . log( ide上的索引)

　　},

　　方法：{

　　异步保存：函数(){

　　uni.setStorage({

　　关键字：“名称”，

　　数据：“科利”，

　　失败：函数(){

　　console.log(“保存失败”)

　　}

　　});

　　},

　　syncsave: function(){

　　尝试{

　　uni.setStorageSync(年龄， 18 )

　　}catch(e){

　　console.log(e)

　　}

　　}

　　}

　　}/scriptstyle/style显示：

　　如您所见，这两种方法都保存了数据。

　　3.uni.getStorage(OBJECT)

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

　　对象的参数及其含义如下：

　　参数类型是否为必选表示keyString是本地缓存中指定的keysuccessFunction，是接口调用的回调函数，RES={ data:key对应的内容}failFunction没有回调函数被接口调用失败completeFunction没有回调函数被接口调用结束(调用成功或失败都会执行)4.uni.getStorageSync(KEY)

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

　　参数及其含义如下：

　　参数类型是否是必需的，意味着keyString是本地缓存中指定的keygetStorageSync。您还需要使用try.捕捉.语句块来捕获异常。

　　getStorage和getStorageSync的简单用法如下：

　　模板

　　视角

　　button type= primary @ click= async Get 异步获取数据/button

　　button type= primary @ click= sync get 同步获取数据/button

　　/view/templatescript

　　导出默认值{

　　data() {

　　返回{}

　　},

　　onLoad() {

　　uni.setStorage({

　　关键字：“名称”，

　　数据：“科利”，

　　失败：函数(){

　　console.log(“保存失败”)

　　}

　　});

　　尝试{

　　uni.setStorageSync(年龄， 18 )

　　}catch(e){

　　console.log(e)

　　}

　　},

　　昂秀(){

　　console.log(索引onshow )

　　},

　　onHide() {

　　console . log( ide上的索引)

　　},

　　方法：{

　　asyncget: function(){

　　uni.getStorage({

　　关键字：“年龄”，

　　成功：函数(res) {

　　console . log( age: RES . data )；

　　}

　　})

　　},

　　syncget: function(){

　　尝试{

　　const name=uni . getstoragesync( name )；

　　如果(姓名){

　　console . log( name: name )；

　　}

　　}catch(e){

　　console . log(e)；

　　}

　　}

　　}

　　}/scriptstyle/style显示：

　　您可以获取之前保存的数据。

　　5.uni.removeStorage(OBJECT)

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

　　对象的参数及其含义如下：

　　参数类型是否为必选表示keyString是本地缓存中指定的keysuccessFunction，是接口调用failFunction无接口调用失败回调函数completeFunction无接口调用结束回调函数(调用成功或失败都会执行)6.uni.removeStorageSync(KEY)

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

　　参数描述：

　　参数type是否为必选，表示keyString是本地缓存中指定的keyremoveStorage和removeStorageSync。简单用法如下：

　　模板

　　视角

　　button type= primary @ click= async remove 异步删除数据/button

　　button type= primary @ click= sync remove 同步删除数据/button

　　/view/templatescript

　　导出默认值{

　　data() {

　　返回{}

　　},

　　onLoad() {

　　uni.setStorage({

　　关键字：“名称”，

　　数据：“科利”，

　　失败：函数(){

　　console.log(“保存失败”)

　　}

　　});

　　尝试{

　　uni.setStorageSync(年龄， 18 )

　　}catch(e){

　　console.log(e)

　　}

　　},

　　昂秀(){

　　console.log(索引onshow )

　　},

　　onHide() {

　　console . log( ide上的索引)

　　},

　　方法：{

　　异步删除：函数(){

　　uni.removeStorage({

　　关键字：“年龄”，

　　成功：函数(res) {

　　console.log(“异步删除成功”)；

　　}

　　})

　　},

　　syncremove: function(){

　　尝试{

　　uni . removestoragesync( name )；

　　console.log(“同步删除成功”)；

　　}catch(e){

　　console . log(e)；

　　}

　　}

　　}

　　}/scriptstyle/style显示：

　　此时您可以删除指定的数据。

　　Uni.getStorageInfo(OBJECT)和uni.getStorageInfoSync()用于异步和同步获取当前存储的信息，uni.clearStorage()和uni.clearStorageSync()用于异步和同步清理本地数据缓存。它们的用法类似于前三组接口。

　　总结

　　uni-app提供的js接口包括标准ECMAScript的js API和uni扩展API。每个接口都可以实现特定的功能，可以根据具体的需求进行选择和使用，进一步加快开发效率。以上是uni-app入门教程界面基本使用的详细内容。更多请关注我们的其他相关文章！