上海浦东网站设计公司,常营网站建设公司,网站后台更新文章 前台不显示,ui网站模板一、介绍
如果是刚入门小程序的#xff0c;又或者刚听到这个名词的人#xff0c;可能跟我之前一样#xff0c;带着诸多的疑惑。比如#xff1a;
什么是uniapp#xff1f;它和原生微信小程序有什么异同之处#xff1f;
为什么推荐uniapp开发#xff1f;
这里一句话两…一、介绍
如果是刚入门小程序的又或者刚听到这个名词的人可能跟我之前一样带着诸多的疑惑。比如
什么是uniapp它和原生微信小程序有什么异同之处
为什么推荐uniapp开发
这里一句话两句话解释了可能还是云里雾里的。我的建议是看看下面这个视频个人觉得讲的很清楚明白。
开发微信小程序使用原生开发还是uniapp开发详细介绍原生小程序与uni-app开发的优缺点_哔哩哔哩_bilibili
二、环境搭建hello world
2.1 下载HBuilderX
HBuilderX-高效极客技巧
当然你可以选择其他IDE但是官网推荐HBuilderX天然整合uniapp。
2.2 下载微信开发者工具
我们要最终打包成微信小程序就必须在微信开发者工具去预览那么需要下载微信开发者工具了。
微信开发者工具下载地址与更新日志 | 微信开放文档
2.3 创建uniapp项目
HBuilderX下载下来后直接双击运行HBuilderX.exe文件即可它是免安装的。
然后我们新建一个uniapp项目按照下图操作即可。
然后它会默认生成项目的基本结构。
2.4 在浏览器运行
然后第一次运行时控制台会提示自动去下载相关的插件下载完成后需要你再次重新运行。
2.5 在微信开发者工具运行
然后启动测试一下发现失败了。经过检查它报错的这两项也没问题啊。
那么问题可能是出在微信开发者我们需要进入微信开发者工具-设置-安全然后把服务的端口号打开。
接着重新运行即可。
2.6 在手机上运行
安卓、ios同理不过需要用数据线连接上。
操作类似感兴趣的可以去试试这里不再演示了。不过要注意的是ios端麻烦点好像现在不支持直接运行了。
三、项目基本目录结构
四、开发规范概述
为了实现多端兼容综合考虑编译速度、运行性能等因素uni-app约定了如下开发规范 页面文件遵循Vue单文件组件规范 组件标签靠近小程序规范详细见uni-app组件规范 接口能力js api靠近微信小程序规范但需将前缀wx替换为uni详见uni-app接口规范 数据绑定及事件处理同Vue.js规范同时补充了App以及页面的生命周期 为兼容多端运行建议使用flex布局进行开发 五、全局配置文件pages.json
pages.json 文件用来对 uni-app 进行全局配置决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
5.1 globalStyle全局样式
用于设置应用的状态栏、导航条、标题、窗口背景色等。
ps以下我都只列举了个人认为比较常见的属性如果有需要强烈建议去官网看最全。
导航栏背景颜色、标题颜色、标题文本
属性类型默认值描述平台差异说明navigationBarBackgroundColorHexColor#F8F8F8导航栏背景颜色同状态栏背景色APP与H5为#F8F8F8小程序平台请参考相应小程序文档navigationBarTextStyleStringblack导航栏标题颜色及状态栏前景颜色仅支持 black/white支付宝小程序不支持请使用 my.setNavigationBarnavigationBarTitleTextString导航栏标题文字内容navigationStyleStringdefault导航栏样式仅支持 default/custom。custom即取消默认的原生导航栏需看使用注意微信小程序 7.0、百度小程序、H5、App2.0.3 演示
注意如果你没有修改完全成功或者都不生效可能是设置了页面的配置样式导致的它会覆盖掉全局样式配置中相同属性的样式。这是因为页面配置优先级高于全局配置。我们删除掉页面配置样式即可。
导航栏开启下拉刷新、下拉背景、下拉样式
属性类型默认值描述平台差异说明backgroundColorHexColor#ffffff下拉显示出来的窗口的背景色微信小程序backgroundTextStyleStringdark下拉 loading 的样式仅支持 dark / light微信小程序enablePullDownRefreshBooleanfalse是否开启下拉刷新详见页面生命周期。onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离单位只支持px详见页面生命周期 演示
5.2 pages页面路由
uni-app 通过 pages 节点配置应用由哪些页面组成pages 节点接收一个数组数组每个项都是一个对象其属性值如下
属性类型默认值描述pathString配置页面路径styleObject配置页面窗口表现配置项参考下方 pageStyle
Tips
pages节点的第一项为应用入口页即首页应用中新增/减少页面都需要对 pages 数组进行修改文件名不需要写后缀框架会自动寻找路径下的页面资源
例如项目创建时默认生成的
如果不清楚我将在第六章创建新页面和页面的配置中演示它的使用。 5.3 tabBar
如果应用是一个多 tab 应用可以通过 tabBar 配置项指定一级导航栏以及 tab 切换时显示的对应页。
具体请见第七章 5.4 condition 开发启动模式
启动模式配置仅开发期间生效用于模拟直达页面的场景如小程序转发后用户点击所打开的页面。
属性说明
属性类型是否必填描述currentNumber是当前激活的模式list节点的索引值listArray是启动模式列表
list说明
属性类型是否必填描述nameString是启动模式名称pathString是启动页面路径queryString否启动参数可在页面的 onLoad 函数里获得
注意 在 App 里真机运行可直接打开配置的页面微信开发者工具里需要手动改变编译模式。 演示 再创建一个测试页测试一下
配置condition条件
六、创建新页面和页面的配置
可以直接新建页面也可以先创建目录再创建文件。
然后去pages.json文件中设置页面路径同时也可以配置一下页面样式。
完成我们先通过浏览器打开看看输入该路径即可看到刚刚创建的页面。
而且发现它成功覆盖了全局样式的导航栏标题文字。
七、配置tabBar
7.1 基本设置
Tips
当设置 position 为 top 时将不会显示 icontabBar 中的 list 是一个数组只能配置最少2个、最多5个 tabtab 按数组的顺序排序。tabbar 切换第一次加载时可能渲染不及时可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花hello uni-app使用了此方式tabbar 的页面展现过一次后就保留在内存中再次切换 tabbar 页面只会触发每个页面的onShow不会再触发onLoad。顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话不建议使用 tabbar 的顶部设置而是自己做顶部选项卡可参考 hello uni-app-模板-顶部选项卡。
属性类型必填默认值描述平台差异说明colorHexColor是tab 上的文字默认颜色selectedColorHexColor是tab 上的文字选中时的颜色backgroundColorHexColor是tab 的背景色borderStyleString否blacktabbar 上边框的颜色可选值 black/white也支持其他颜色值App 2.3.4 、H5 3.0.0listArray是tab 的列表详见 list 属性说明最少2个、最多5个 tabpositionString否bottom可选值 bottom、top top 值仅微信小程序支持
list属性的属性值如下
属性类型必填说明平台差异pagePathString是页面路径必须在 pages 中先定义textString是tab 上按钮文字在 App 和 H5 平台为非必填。例如中间可放一个没有文字的号图标iconPathString否图片路径icon 大小限制为40kb建议尺寸为 81px * 81px当 position 为 top 时此参数无效不支持网络图片不支持字体图标selectedIconPathString否选中时的图片路径icon 大小限制为40kb建议尺寸为 81px * 81px 当 position 为 top 时此参数无效 演示
7.2 个性化设置
我们看到很多小程序它的底部导航栏很多都有哪种中间图标突起的例如这样
它是怎么做到的呢
其实也是tabbar里面的配置项midButton属性和list属性评级即可。
属性类型必填默认值描述平台差异说明midButtonObject否中间按钮 仅在 list 项为偶数时有效App 2.3.4、H5 3.0.0
midButton 属性说明
属性类型必填默认值描述widthString否80px中间按钮的宽度tabBar 其它项为减去此宽度后平分默认值为与其它项平分宽度heightString否50px中间按钮的高度可以大于 tabBar 高度达到中间凸起的效果textString否中间按钮的文字iconPathString否中间按钮的图片路径iconWidthString否24px图片宽度高度等比例缩放backgroundImageString否中间按钮的背景图片路径iconfontObject否字体图标优先级高于 iconPath
具体代码如下
它有个特点就是目前只支持app、H5也就是说小程序这些是无法展示的。
且midButton没有pagePath需监听点击事件自行处理点击后的行为逻辑。
具体可查阅官网pages.json 页面路由 | uni-app官网 如果我们希望小程序端也有这个功能怎么办呢其实可以自定义tabbar把原生的tabbar隐藏掉。
具体实现这里就不写了稍微有些复杂。感兴趣后面自己再搜索相关方法。官网也有相关介绍pages.json 页面路由 | uni-app官网
当然你也可以去uniapp插件市场搜索人家弄好的插件这样更简单一点跟着要求一步一步调整即可。
后续有时间我也会专门补充如何自定义设置tabbar。 八、组件
组件是视图层的基本组成单元。组件是一个单独且可复用的功能模块的封装。
直白讲就是标签。uniapp中除了可以使用html提供的默认标签外uniapp还封装了一些组件可以使用。 8.1 text
文本组件。用于包裹文本内容。
属性说明
属性名类型默认值说明平台差异说明selectableBooleanfalse文本是否可选user-selectBooleanfalse文本是否可选微信小程序spaceString显示连续空格钉钉小程序不支持decodeBooleanfalse是否解码百度、钉钉小程序不支持
space 值说明
值说明ensp中文字符空格一半大小emsp中文字符空格大小nbsp根据字体设置的空格大小
8.2 icon
icon
图标
属性说明
属性名类型默认值说明typeStringicon的类型sizeNumber23icon的大小单位pxcolorColoricon的颜色同css的color
各平台 type 有效值说明
平台type 有效值App、H5、微信小程序、QQ小程序success, success_no_circle, info, warn, waiting, cancel, download, search, clear支付宝小程序info, warn, waiting, cancel, download, search, clear, success, success_no_circle,loading百度小程序success, info, warn, waiting, success_no_circle, clear, search, personal, setting, top, close, cancel, download, checkboxSelected, radioSelected, radioUnselect 演示 由于 icon 组件各端表现存在差异可以通过使用 字体图标 的方式来弥补各端差异。 字体图标
另外uniapp默认提供的图标就这些如果希望使用个性化的图标那么就可以使用字体图标。
uniapp 支持使用字体图标使用方式与普通 web 项目相同需要注意以下几点
支持 base64 格式字体图标。支持网络路径字体图标。小程序不支持在 css 中使用本地文件包括本地的背景图和字体文件。需以 base64 方式方可使用。网络路径必须加协议头 https。从 http://www.iconfont.cn 上拷贝的代码默认是没加协议头的。从 http://www.iconfont.cn 上下载的字体文件都是同名字体字体名都叫 iconfont安装字体文件时可以看到在 nvue 内使用时需要注意此字体名重复可能会显示不正常可以使用工具修改。使用本地路径图标字体需注意 为方便开发者在字体文件小于 40kb 时uni-app 会自动将其转化为 base64 格式字体文件大于等于 40kb仍转换为 base64 方式使用的话可能有性能问题如开发者必须使用则需自己将其转换为 base64 格式使用或将其挪到服务器上从网络地址引用字体文件的引用路径推荐使用以 ~ 开头的绝对路径。 话不多说我们直接演示
除了html页面其他都复制到项目中按照如下步骤即可
ok这样就算配置完成了我们就可以在页面中使用了。
然后我们打开下载下来的文件中的html页面找到图标对应的字体样式进行使用使用时去掉前面的 . 号。
字体图标的颜色、大小等我们也可以通过css样式去改变。 问题 有时候你会发现你完全按照我的步骤做的结果在浏览器中可以使用但是小程序中使用无法显示且控制台还报错。这个时候要么换种资源要么去调整一下使用https开头的网络资源。具体的问题具体解决就好了。 九、页面样式与布局
uni-app 的 css 与 web 的 css 基本一致。
uni-app 有 vue 页面和 nvue 页面。vue 页面是 webview 渲染的、app 端的 nvue 页面是原生渲染的。在 nvue 页面里样式比 web 会限制更多。
本文重点介绍 vue 页面的样式注意事项。
9.1 尺寸单位
uni-app 支持的通用 css 单位包括 px、rpx。
rpx即响应式px一种根据屏幕宽度自适应的动态单位以750宽的品目为基准750rpx恰好为屏幕宽度屏幕变宽rpx实际显示效果会等比放大。
9.2 样式导入
使用import语句可以导入外联样式表import后跟需要导入的外联样式表的相对路径用 ; 表示语句结束。 9.3 选择器
目前支持的选择器有
选择器样例样例描述.class.intro选择所有拥有 classintro 的组件#id#firstname选择拥有 idfirstname 的组件elementview选择所有 view 组件element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件::afterview::after在 view 组件后边插入内容仅 vue 页面生效::beforeview::before在 view 组件前边插入内容仅 vue 页面生效
注意 在 uni-app 中不能使用 * 选择器。 微信小程序自定义组件中仅支持 class 选择器 page 相当于 body 节点例如 !-- 设置页面背景颜色使用 scoped 会导致失效 -- page { background-color: #ccc; }
9.4 全局样式与局部样式
定义在 App.vue 中的样式为全局样式作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式只作用在对应的页面并会覆盖 App.vue 中相同的选择器。
注意
App.vue 中通过 import 语句可以导入外联样式一样作用于每一个页面。nvue 页面暂不支持全局样式 9.5 使用sass
我们在项目根目录下可以看到一个 uni-scss文件。
uni-scss 是 uni-ui提供的一套全局样式 通过一些简单的类名和sass变量实现简单的页面布局操作比如颜色、边距、圆角等。 那么如何使用sass呢 首先安装sass插件
使用记得在style标签中加上属性 langscss
十、Vue基本语法复习
uniapp是基于vue进行封装的框架。所以要像使用好它必须会vue。如果你会vue那么可以跳过这里不看如果你不会那么我会简单跟大家一起学习一下。
获取事件对象
如果v-on:中方法没有传参数那么默认拿到的是事件对象
只需要在方法上传一个形参即可。
十一、uniapp的生命周期
应用的生命周期
App.vue/App.uvue | uni-app官网 生命周期的概念 一个对象从创建、运行、销毁的整个过程。 生命周期函数 在生命周期中每个阶段会伴随着函数的触发这些函数被称为生命周期函数。
uni-app支持如下应用生命周期函数
函数名说明onLauch当uni-app初始化完成时触发全局只触发一次onShow当uni-app启动或从后台进入前台显示onHide当uni-app从前台进入后台onError当uni-app报错时触发
页面的生命周期
页面简介 | uni-app官网
uni-app 支持如下页面生命周期函数
函数名说明平台差异说明最低版本onInit监听页面初始化其参数同 onLoad 参数为上个页面传递的数据参数类型为 Object用于页面传参触发时机早于 onLoad百度小程序3.1.0onLoad监听页面加载其参数为上个页面传递的数据参数类型为 Object用于页面传参参考示例onShow监听页面显示。页面每次出现在屏幕上都触发包括从下级页面点返回露出当前页面onReady监听页面初次渲染完成。注意如果渲染速度快会在页面进入动画完成前触发onHide监听页面隐藏onUnload监听页面卸载onResize监听窗口尺寸变化App、微信小程序、快手小程序onPullDownRefresh监听用户下拉动作一般用于下拉刷新参考示例onReachBottom页面滚动到底部的事件不是scroll-view滚到底常用于下拉下一页数据。具体见下方注意事项onTabItemTap点击 tab 时触发参数为Object具体见下方注意事项微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
我们最小化页面然后打开
我们从tabBar切换也是一样的道理。 十二、下拉刷新 前面讲过下拉刷新的一种方式是通过全局配置。
但是我们不推荐我们希望那个页面有需要就开启没有需要不要开启。
我们希望下拉刷新了触发一些事件
只需要通过onPullDownRefresh函数即可。在前面页面的生命周期函数中有列举过。
一旦刷新完成之后我们就可以通过uni.stopPullDownRefresh();关闭
十三、上拉加载
我们发现还没有触底就开始说触底了这是因为有默认的触底距离 。我们可以设置默认触底距离
然后再来测试一下就好了。这里不演示了。
触底之后我们可以给他加载下一页数据。
十四、网络请求
uni.request(OBJECT) | uni-app官网
14.1 uni.request(OBJECT)
发起网络请求。 在各个小程序平台运行时网络相关的 API 在使用前需要配置域名白名单。 OBJECT 参数说明
参数名类型必填默认值说明平台差异说明urlString是开发者服务器接口地址dataObject/String/ArrayBuffer否请求的参数App 3.3.7 以下不支持 ArrayBuffer 类型headerObject否设置请求的 headerheader 中不能设置 RefererApp、H5端会自动带上cookie且H5端不可手动修改methodString否GET有效值详见下方说明timeoutNumber否60000超时时间单位 msH5(HBuilderX 2.9.9)、APP(HBuilderX 2.9.9)、微信小程序2.10.0、支付宝小程序dataTypeString否json如果设为 json会尝试对返回的数据做一次 JSON.parseresponseTypeString否text设置响应的数据类型。合法值text、arraybuffer支付宝小程序不支持sslVerifyBoolean否true验证 ssl 证书仅App安卓端支持HBuilderX 2.3.3不支持离线打包withCredentialsBoolean否false跨域请求时是否携带凭证cookies仅H5支持HBuilderX 2.6.15firstIpv4Boolean否falseDNS解析时优先使用ipv4仅 App-Android 支持 (HBuilderX 2.8.0)enableHttp2Boolean否false开启 http2微信小程序enableQuicBoolean否false开启 quic微信小程序enableCacheBoolean否false开启 cache微信小程序、字节跳动小程序 2.31.0enableHttpDNSBoolean否false是否开启 HttpDNS 服务。如开启需要同时填入 httpDNSServiceId 。 HttpDNS 用法详见 移动解析HttpDNS微信小程序httpDNSServiceIdString否HttpDNS 服务商 Id。 HttpDNS 用法详见 移动解析HttpDNS微信小程序enableChunkedBoolean否false开启 transfer-encoding chunked微信小程序forceCellularNetworkBoolean否falsewifi下使用移动网络发送请求微信小程序enableCookieBoolean否false开启后可在headers中编辑cookie支付宝小程序 10.2.33cloudCacheObject/Boolean否false是否开启云加速详见云加速服务百度小程序 3.310.11deferBoolean否false控制当前请求是否延时至首屏内容渲染后发送百度小程序 3.310.11successFunction否收到开发者服务器成功返回的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
method 有效值
注意method有效值必须大写每个平台支持的method有效值不同详细见下表。
methodAppH5微信小程序支付宝小程序百度小程序字节跳动小程序、飞书小程序快手小程序京东小程序GET√√√√√√√√POST√√√√√√√√PUT√√√x√√xxDELETE√√√x√xxxCONNECTx√√xxxxxHEAD√√√x√xxxOPTIONS√√√x√xxxTRACEx√√xxxxx
success 返回参数说明
参数类型说明dataObject/String/ArrayBuffer开发者服务器返回的数据statusCodeNumber开发者服务器返回的 HTTP 状态码headerObject开发者服务器返回的 HTTP Response HeadercookiesArray.string开发者服务器返回的 cookies格式为字符串数组
data 数据说明
最终发送给服务器的数据是 String 类型如果传入的 data 不是 String 类型会被转换成 String。转换规则如下 对于 GET 方法会将数据转换为 query string。例如 { name: name, age: 18 } 转换后的结果是 namenameage18。 对于 POST 方法且 header[content-type] 为 application/json 的数据会进行 JSON 序列化。 对于 POST 方法且 header[content-type] 为 application/x-www-form-urlencoded 的数据会将数据转换为 query string。 测试 我们先用springboot搞一个测试接口。
接口没有问题然后我们试一试
ok搞定
我们发现一个问题就是小程序内部运行机制与网页不同小程序中的代码并不运行在浏览器中因为小程序开发中不存在数据的跨域请求限制。
所以我们不做跨域处理也可以访问。 问题 如果微信开发者工具中没有发送成功可以试试如下方法。
14.2 二次封装请求对象
如果像上面那样每次调用我都要去写请求的ip地址端口号显得有些麻烦。
假如说ip地址或者端口号变了那就得每一个请求都要逐一修改这是很恐怖的
所以我们需要统一进行二次封装对这些公共的参数统一进行设置或者修改。减少冗余提高效率。 request.js const BASE_URL http://localhost:8000 export const myRequest (options) { return new Promise((resove,reject){ uni.request({ url: BASE_URL options.url, method: options.method || GET, data: options.data || {}, success: (res) { if(res.data.code ! 1){ return uni.showToast({ title:获取数据失败 }) } resove(res) }, fail: (err) { uni.showToast({ title:请求接口失败 }), reject(err) } }) }) } main.js 测试编写页面调接口 这次我们换个接口试试
哈哈其实上面的那个接口是我年初写的现在找不到代码了自己重写
我们尝试关闭接口再次刷新页面发现页面显示请求接口失败。ok完全符合。
又因为我们的请求是通过Promise返回的所以我们可以异步的去调用方法。稍微修改一下也能成功获取到。记得重启后端项目哦
十五、数据缓存
15.1 uni.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中会覆盖掉原来该 key 对应的内容这是一个异步接口。
OBJECT 参数说明
参数名类型必填说明keyString是本地缓存中的指定的 keydataAny是需要存储的内容只支持原生类型、及能够通过 JSON.stringify 序列化的对象successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
15.2 uni.getStorage(OBJECT)
从本地缓存中异步获取指定 key 对应的内容。
OBJECT 参数说明
参数名类型必填说明keyString是本地缓存中的指定的 keysuccessFunction是接口调用的回调函数res {data: key对应的内容}failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
success 返回参数说明
参数类型说明dataAnykey 对应的内容
15.3 uni.removeStorage(OBJECT)
从本地缓存中异步移除指定 key。
OBJECT 参数说明
参数名类型必填说明keyString是本地缓存中的指定的 keysuccessFunction是接口调用的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
15.4 uni.setStorageSync(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中会覆盖掉原来该 key 对应的内容这是一个同步接口。
15.5 uni.getStorageSync(KEY)
从本地缓存中同步获取指定 key 对应的内容。
15.6 uni.removeStorageSync(KEY)
从本地缓存中同步移除指定 key。 十六、图片的上传和预览
16.1 上传 uni.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照。
App端如需要更丰富的相机拍照API如直接调用前置摄像头参考plus.camera 微信小程序从基础库 2.21.0 开始 wx.chooseImage 停止维护请使用 uni.chooseMedia 代替。 OBJECT 参数说明
参数名类型必填说明平台差异说明countNumber否最多可以选择的图片张数默认9见下方说明sizeTypeArrayString否original 原图compressed 压缩图默认二者都有App、微信小程序、支付宝小程序、百度小程序extensionArrayString否根据文件拓展名过滤每一项都不能是空字符串。默认不过滤。H5(HBuilder X2.9.9)sourceTypeArrayString否album 从相册选图camera 使用相机默认二者都有。如需直接开相机或直接选相册请只使用一个选项cropObject否图像裁剪参数设置后 sizeType 失效App 3.1.19successFunction是成功则返回图片的本地文件路径列表 tempFilePathsfailFunction否接口调用失败的回调函数小程序、AppcompleteFunction否接口调用结束的回调函数调用成功、失败都会执行
crop 参数说明
参数名类型必填说明平台差异说明qualityNumber否取值范围为1-100数值越小质量越低仅对jpg格式有效。默认值为80。widthNumber是裁剪的宽度单位为px用于计算裁剪宽高比。heightNumber是裁剪的高度单位为px用于计算裁剪宽高比。resizeBoolean否是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注设置为false时在裁剪编辑界面显示图片的像素值设置为true时不显示
Tips count 值在 H5 平台的表现基于浏览器本身的规范。目前测试的结果来看只能限制单选/多选并不能限制数量。并且在实际的手机浏览器很少有能够支持多选的。 sourceType 值在 H5 平台根据浏览器的不同而表现不同一般不可限制仅使用相册部分浏览器也无法限制是否使用相机。 可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限uni.authorize(OBJECT) | uni-app官网 App端如需选择非媒体文件可在插件市场搜索文件选择其中Android端可以使用Native.js无需原生插件而iOS端需要原生插件。 选择照片大多为了上传uni ui封装了更完善的uni-file-picker组件文件选择、上传到uniCloud的免费存储和cdn中一站式集成。强烈推荐使用。
注文件的临时路径在应用本次启动期间可以正常使用如需持久保存需在主动调用 开发微信小程序使用原生开发还是uniapp开发详细介绍原生小程序与uni-app开发的优缺点_哔哩哔哩_bilibili在应用下次启动时才能访问得到。
success 返回参数说明
参数类型说明tempFilePathsArrayString图片的本地文件路径列表tempFilesArrayObject、ArrayFile图片的本地文件列表每一项是一个 File 对象
File 对象结构如下
参数类型说明pathString本地文件路径sizeNumber本地文件大小单位BnameString包含扩展名的文件名称仅H5支持typeString文件类型仅H5支持
ok这是简单的从本地获取图片到页面展示。但是真正的上传还没有完成。
这里我打算调用后端接口完成上传过程。 暂时写到这里太累了。
如果这篇博客反响还不错的话我会尽快完成跟新的 感谢大家的鼓励~ 精选32套源码目录
IT之家小程序版客户端(使用 Mpvue 开发兼容 Web)ithome-lite-master.zipmpvue 仿网易严选mpvue-shop-master.zipmpvue-音乐播放器mpvue-music-master.zipmpvue性能测试与体验miniweibo-master.zipmpvue改造的日历.zipmpvue框架仿滴滴出行didi-master.zipmpVue高仿美团小程序教程mpvue-meituan-master.zipuni APP自动更新并安装.vueuni-app nvue沉浸式状态栏(线性渐变色).vueuni-app 二维码生成器分享wxqrcode.zipuni-app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master.zipuni-app 自定义底部导航栏uni-app-bottom-navigation-master.zipuni-app全局变量的几种实现方式.zipuni-app的markdown富文本编辑器插件uniapp-markdown-master.zipuni-app自定义导航栏title-custom.zipuniapp聊天实例支持图片语音表情.zipuniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zipvue-mpvue-ChatRobot聊天机器人vue-mpvue-ChatRobot-master.zip【小程序】CNode社区mpvue-cnode-master.zip【插件、图表】7种图表漂亮丰富uniCharts.zip一款播课类小程序, 基于 mpvue 构建mp-podcast-mpvue-master.zip云档新版小程序端基于mpvue开发cloud-doc-v2-master.zip仿uc浏览器列表.vue仿扎克新闻mpZAKER-master.zip仿网易云UImusic播放器mpvue-music-master.zip仿追书神器的小说阅读器小程序wx-book-master.zip参照米家APP布局和样式,编写的一款智能家居小程序smart-home-master.zip商城实例mpvue-xbyjShop-master.zip基于 mpvue 实现豆瓣电影微信小程序mpvue-douban-master.zip基于mpvue的优酷mpvue-youku-master.zip校园助手示例SHUhelper-master.zip类似mui中的chat(聊天窗口)实现uniapp-chat-master.zip美团外卖(第三方)开源程序mpvue-master.zip美食搜索mpvue-FG-master.zip豆瓣平分mpvue-douban-pingfen-master.zip顶部tabbar.vue
源码截图
源码获取
关注公众号「码农园区」回复 【uniapp源码】即可获取全套源码下载链接
