uniapp开发注意事项

更新日期: 2020-07-07阅读: 2.5k标签: uniapp

1.static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。


2.css、less/scss 等资源同样不要放在 static 目录下,建议这些公用的资源放在 common 目录下。


3.template内引入静态资源,如image、video等标签的src属性时,可以使用相对路径或者绝对路径。


4.js文件不支持使用/开头的方式引入。


5.css文件或style标签内引入css文件时(scss、less文件同理),只能使用相对路径。


6.编译期判断环境可用条件编译,运行期判断可用uni.getSystemInfoSync().platform判断环境。


7.在字体或高度中使用了 rpx ,那么需注意这样的写法意味着随着屏幕变宽,字体会变大、高度会变大。如果你需要固定高度,则应该使用 px 。


8.App端,在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位,只支持 px,不支持 rpx。


9.小程序不支持在css中使用本地文件,包括本地的背景图和字体文件。需以base64方式方可使用。


10.背景图片微信小程序不支持相对路径(真机不支持,开发工具支持)。


11.字体图标网络路径必须加协议头 https。


12.非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 模块,安装的模块及其依赖的模块使用的 API 必须是 uni-app 已有的 API


13.小程序组件需要放在项目特殊文件夹 wxcomponents(或 mycomponents、swancomponents)。


14.当需要在 vue 组件中使用小程序组件时,注意在 pages.json 的 globalStyle 中配置 usingComponents,而不是页面级配置。


15.以:这样的方式设置px像素值,其值为实际像素,不会被编译器转换。


16.若需要禁止蒙版下的页面滚动,可使用 @touchmove.stop.prevent="moveHandle",moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数


17.App端和H5端支持v-html,其他端不支持v-html。


18.uni-app不需要 plus ready 在html中使用plus的api。


19.在普通的 H5+ 项目中,需要使用 document.addEventListener 监听原生扩展的事件。uni-app 中,没有 document。可以使用 plus.globalEvent.addEventListener 来实现。


20.App端若要使用操作window、document的库,需要通过renderjs来实现。


21.tabbar 切换第一次加载时可能渲染不及时,可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花。


22.tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar 页面,只会触发每个页面的onShow,不会再触发onLoad。


23.分包加载配置,subPackages 为小程序的分包加载机制。在App里始终为整包。subPackages 里的pages的路径是 root 下的相对路径,不是全路径。


24.splash(启动封面)是App必然存在的、不可取消的。splash只能是标准png,不要用jpg改名为png。


25.所有组件与属性名都是小写,单词之间以连字符-连接。


26.APP-vue和小程序中,请勿在 scroll-view 中使用 map、video 等原生组件。小程序中 scroll-view 中也不要使用 canvas、textarea 原生组件。


27.scroll-view 不适合放长列表,有性能问题。长列表滚动和下拉刷新,应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。


28.除了文本节点以外的其他节点都无法长按选中。


29.如需调节checkbox,radio大小,可通过css的scale方法调节,如缩小到70%。


30.页面结构复杂,css样式太多的情况,使用 image 可能导致样式生效较慢,出现 “闪一下” 的情况,此时设置 image{will-change: transform} ,可优化此问题。


31.自定义组件里面使用 <image>时,若 src 使用相对路径可能出现路径查找失败的情况,故建议使用绝对路径。


32.App平台:使用 <video/> 组件,打包 App 时必须勾选 manifest.json->App 模块权限配置->VideoPlayer 模块。


33.App平台:如果使用的视频路径为本地路径,需要配置资源为释放模式:在 manifest.json 文件内 app-plus 节点下新增 runmode 配置,设置值为liberate。


34.webview在App 平台同时支持网络网页和本地网页,但本地网页及相关资源(js、css等文件)必须放在 uni-app 项目根目录->hybrid->html 文件夹下;小程序仅支持加载网络网页,不支持本地html。


35.H5端onBackPress只能监听页面导航栏的返回按钮的点击事件,不能监听浏览器返回以及手机的返回。


36.发出请求的method的值必须大写,有效值在不同平台差异说明不同。


37.localhost、127.0.0.1等服务器地址,只能在电脑端运行,手机端连接时不能访问。请使用标准IP并保证手机能连接电脑网络。


38.App支持多文件上传,微信小程序只支持单文件上传,传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。


39.如果想打开web url,在App平台可以使用 plus.runtime.openURL或web-view组件;H5平台使用 window.open;小程序平台使用web-view组件(url需在小程序的联网白名单中)。


40.navigateTo, redirectTo 只能打开非 tabBar 页面,switchTab 只能打开 tabBar 页面.


41.H5端页面刷新之后页面栈会消失,此时navigateBack不能返回,如果一定要返回可以使用history.back()导航到浏览器的其他历史记录.


42.App端如需选择非媒体文件,可在插件市场搜索文件选择,其中Android端可以使用Native.js,无需原生插件,而iOS端需要原生插件。


43.关于一些权限的使用,类似相机,语音,都要先判断一下设备的访问权限是否开启。


44.屏幕高度=状态栏高度+原生导航栏高度+可使用窗口高度+原生tabbar高度。


45.分享到 QQ 必须含有 href 链接,分享文字到 QQ 时,title 必选,不能直接分享到QQ空间,可以分享到QQ,然后在QQ的界面里选择QQ空间。


46.从APP分享到微信时,无法判断用户是否点击取消分享,因为微信官方禁掉了分享成功的返回值。


47.支付的传参要注意orderInfo在不同的环境下传参类型不一致。


48.关于文本超出展示...,需要在超出展示盒子的内部在内嵌一层子元素,否则app端会有问题。

链接: https://www.fly63.com/article/detial/9403

uni-app 微信小程序授权登录

uni.getUserInfo 接口调用方式起初通过button 来获取用户信息,或者 直接调用 uni.getUserInfo 来获取信息 在当前微信更新接口后,这2个接口将直接返回匿名用户数据,不在弹窗提示

uniapp之this作用域

发现了点击按钮1可以更新title内容,但是点击按钮2却无法更新title内容。这个究竟是为什么呢?在changeTitle2方法的success方法中,该success方法指向闭包,所以this属于闭包

uniapp 页面跳转传值和接收

首先介绍最原始的跳转方法,类似于html中的 a 标签,不过在uniapp中需要将 a 标签换成 <navigator url=跳转的地址>……</navigator>

uniapp验证码倒计时60s的实现

发送验证码时,不能让客户一直发送验证码,所以需要设置一个60s后才能发送一次;具体代码实现:因为app和其他app不太一样,所以需要选择以这样的方式展示是时间,但是js逻辑代码是一样的;

uni-app中使用computed计算属性

computed里面的属性不能在data属性中出现,用来监控computed中自定义的变量 ,computed合适多个变量或对象处理后返回一个结果值,其中一个值发生变化则computed监控的属性值就会发生变化

uni-app开发经验分享: 多页面传值的三种解决方法

开发了一年的uni-app,在这里总结一些uni-app开发中的问题,提供几个解决方法,分享给大家:问题描述:一个主页面,需要联通一到两个子页面,子页面传值到主页面,主页面更新

uni-app开发注意事项

当重复设置某些属性为相同的值时,不会同步到view层。 例如:每次将scroll-view组件的scroll-top属性值设置为0,只有第一次能顺利返回顶部。 这和props的单向数据流特性有关

uniapp页面通信方法总汇

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

uniapp/小程序实现Url生成二维码图片

基于QR.createQrCodeImg方法生成二维码,在使用uniapp开发的小程序,app应用,某一页面需要将网页Url生成的二维码进行展示,即将Url生成为base64的二维码图片。

uniapp在onLaunch中使用redirectTo或reLaunch跳转页面后点击事件失效

使用uniapp编译成小程序时,在生命周期onLaunch中运用redirectTo或reLaunch跳转页面后点击事件失效,但是如果你重定向的页面中有使用navigator组件跳转后再返回,点击事件又有效了,在原生微信小程序中重定向没有问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!