草庐IT

uniapp 转微信小程序遇到的坑

hmily43 2023-08-30 原文

在uniapp转微信小程序过程中经验总结:总体来说对于小一点并且功能不复杂的页面,相对于使用微信小程序语法制作小程序uniapp制作还是相对快捷,uniapp在功能组件方面大于微信小程序自带组件。uniapp在语法校验没有微信小程序严格。在自作过程中遇到的问题总结如下:​

1.icon不支持部分格式,最好引入全部格式,转微信不报错。

2.v-if在编译的时候在小程序那边是变成display:none\block来控制的,所以使用定位会造成盒子错乱,距离尺寸不好把控,所以在使用v-if的时候尽量多套一个盒子去适配好一点。
v-show在使用这个的时候小程序那边虽然也用display:none\block去控制的,但是这里会有一个css选择器的权重问题,用v-show去控制的话会照成控制盒子不生效等问题,所以尽量避免使用v-show去控制盒子

如果已经转过来了,在原有的v-show的dom外再加一层view , 使用数据性hidden

3.input  中的placeholder要有赋值,如:placeholder:“ ”,不然会转成  placeholder 为 true

4.不支持外链canvas页面,需要外链的话微信小程序访问外部链接_花铛的博客-CSDN博客_微信小程序跳转外部链接

5.选择器最好全部写成class ,对别的选择器不友好。

6.加载外部链接的图片,给image标签外加一个wx:if,如下:

<image wx:if="{{showImage}}" src="/image/Weatherpic/{{now.cond_code}}.png"></image>

定义showImage:0,在onShow中showImage=1,显示图片

7.组件属性必须赋值,如:<uni-datetime-picker
v-model="datetimerange"
type="datetimerange"
returnType="timestamp"
start=""
end=""
rangeSeparator="至"
/>

通过转化为小程序,start=‘’将转化为start  没有初始赋值会出现bug 不能选择

8.input框再打入文字的时候消失,在input加入属性:always-embed="true"或者取消外面高度

参考:input键盘弹出时,滚动页面,输入框内容错位问题 | 微信开放社区

9.input框输入时,输入内容上移,给父级view  添加height:100vh;overflow:hidden;overflow-y:auto;就行

10.has not been registered yet报错先解决所有的错误,有引用的数据必须有初始值

11.Component is not found in path "pages/index/group"(using by "pages/index/index")报错,在路径引入正确的情况下,在.json文件中添加  "component": true;(作为引入的子组件)

12.uniapp 防止事件捕获和冒泡 @touchmove.stop.prevent=“”,后面必须写入函数,函数可以什么都不做,不然会有问题,正确格式 @touchmove.stop.prevent='donothing'

13.uniapp转微信小程序,子组件会被打包压缩到父组件中

14.微信小程序只支持mqtt4版本

待续。。。。

有关uniapp 转微信小程序遇到的坑的更多相关文章

  1. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止,这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  2. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  3. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  4. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  5. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  6. ruby - Nokogiri:遇到 nil:NilClass 错误 "undefined method ‘text’” - 2

    我是程序员的新手,请原谅我的新手。所以我正在使用Nokogiri来抓取警方的犯罪记录。这是下面的代码:require'rubygems'require'nokogiri'require'open-uri'url="http://www.sfsu.edu/~upd/crimelog/index.html"doc=Nokogiri::HTML(open(url))putsdoc.at_css("title").textdoc.css(".brief").eachdo|brief|putsbrief.at_css("h3").textend我使用选择器小工具书签来查找日志(.brief)的C

  7. Ubuntu20.04系统WineHQ7.0安装微信 - 2

    提供3种Ubuntu系统安装微信的方法,在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信:ubuntu20.04安装最新版微信--可以支持微信最新版,但是适配的不是特别好;比如WeChartOCR.exe报错。2.原生微信安装:linux系统下的微信安装(ubuntu20.04)--微信适配的最好,反应最快,但是微信版本只到2.1.1,版本太老,很多功能都没有。3.深度deepin-wine6安装微信:ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好,当前个人使用此种方法1个月,微信版本3.4;没什么大问题,尚可。一、WineHQ7.0安装微信

  8. 微信小程序订餐系统 - 2

    对传统的餐饮商家来说,小程序很好地解决了餐厅线下线上连接的问题,在引流获客、节约人力、营销宣传、塑造会员体系、改善消费体验等方面都有很大帮助。小程序点餐可以帮助餐饮企业节省一大把人力开支。一个包含扫码点单、菜品管理、优惠券推送、外卖配送的小程序,商家花几万元就能完成开发测试并投入。商家为什么要开通“扫码点餐”1.解决服务员不够用的问题。2.不怕顾客跑单漏单。3.在微信就能管理菜品、查看营业额。4.订单小票显示顾客桌号和已点菜品。5.可在“附近的小程序”找到您的门店。如今餐饮业常用的三种经营模式:1堂食点单模式客人通过小程序堂食点单。商家可以在微信扫码点餐小程序管理后台根据自己店内情况来设置不同

  9. 最新版人脸识别小程序 图片识别 生成二维码签到 地图上选点进行位置签到 计算签到距离 课程会议活动打卡日常考勤 上课签到打卡考勤口令签到 - 2

    技术选型1,前端小程序原生MINA框架cssJavaScriptWxml2,管理后台云开发Cms内容管理系统web网页3,数据后台小程序云开发云函数云开发数据库(基于MongoDB)云存储4,人脸识别算法基于百度智能云实现人脸识别一,用户端效果图预览老规矩我们先来看效果图,如果效果图符合你的需求,就继续往下看,如果不符合你的需求,可以跳过。1-1,登录注册页可以看到登录页有注册入口,注册页如下我们的注册,需要管理员审核,审核通过后才可以正常登录使用小程序1-2,个人中心页登录成功以后,我们会进入个人中心页我们在个人中心页可以注册人脸,因为我们做人脸识别签到,需要先注册人脸才可以进行人脸比对,进

  10. ruby - 在 ubuntu 中安装 rvm 时遇到问题 - 2

    我刚刚使用以下命令在我的机器上安装了rvmbash在我的终端里得到了这个InstallationofRVMto/home/rahul/.rvm/iscomplete.当我转到/home/rahul/.rvm/时,我能够看到所有必要的文件夹,但是当我在终端中输入rvm命令时,出现此错误rvm--versionNocommand'rvm'found,butthereare19similaronesrvm:commandnotfound我该如何解决?编辑我还在我的bashrc中添加了以下几行if[[-n"$PS1"]];thenif[[-s$HOME/.rvm/scripts/rvm]];t

随机推荐