微信小程序真机预览跟本地不同的问题

最新推荐文章于 2023-05-26 10:52:38 发布
最新推荐文章于 2023-05-26 10:52:38 发布
阅读量3k 收藏 2
点赞数 3
分类专栏： 微信小程序 文章标签： 真机跟本地样式不同
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangxiujiang/article/details/77197373
版权

真机跟本地样式不同：

     情况一：可能使用了ios或安卓某一端不兼容的样式属性；目前编辑器检查越来越严格，标签不闭合可能导致一些奇怪的问题；
     情况二：使用了开发工具内的压缩代码，样式自动补全等设置，这些设置有时候会存在BUG会导致一些css丢失等问题；可以在取消部分设置后重试；
     情况三：颜色不对，或者设置颜色无效，请使用十六进制颜色码代替英文颜色；


赏花赏景赏时光
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
原创：跳坑指南——微信小程序真机预览跟本地不同的问题
AAASai_的博客
01-05 1万+
微信小程序中出现最多的一个问题，就是真机跟本地不同：我简单列举一些我发现的原因，给大家参考，大家也可以把自己发现的东西回复给我，给我参考： 本地看不到数据，就先让本地能看到数据，再看本帖。。。。 1：本地可以看到数据，ios不行，安卓可以； 可能是tsl版本问题不支持1.2导致，部分安卓可以允许tsl低于1.2而正常显示，而苹果不行； 解决方法：参考此帖排查问题并修复：request
微信小程序之1rpx的边框在部分机型上展示不全的问题
haoyanyu_的博客
08-10 1398
最近写小程序的商品列表时，商品卡片里需要展示商品的【优惠券】或者【包邮】标签。 设计稿里，标签的边框是0.5px， 在微信小程序里就是1rpx的宽度。 测试的时候发现在一部iphone6手机上，【包邮】的右边框展示不完整，如下图： 测试数据没有商品图片，忽略忽略，看【包邮】标签就好 ???? 包邮标签的样式写在css里， border: 1rpx solid #FF4444; border-width改成2rpx（即1px）是可以正常展示的，只不过边框变宽了，但是要按照稿子来啊*(审美缺失部的名头可是
微信小程序真机预览体验测试教程
03-29
前言 从小程序内测开始，有很多优秀的创意、想法已经在内测阶段开发完成。目前小程序开始公测，开放了小程序的申请和注册，但是还无法正式发布。那么我们在未正式发布之前，能不能在真机上体验一回微信小程序呢。答案是肯定的。 真机体验截图 (此图片来源于网络，如有侵权，请联系删除! ) 首先，我们先看一下在真机里微信小程序的手机截图，如果不明确的跟你说，这是微信小程序的话，估计你也会认为这是一个APP界面。但…..但这是如假包换的微信小程序呀，而且页面切换非常的流畅。 (此图片来源于网络，如有侵权，请联系删除! ) 这张截图，是在微信开发者工具的开发界面。 教程步骤 我们现在直接进入主题，微信小程序如何在
微信开发者工具更新版本后，模拟器显示与真机不一致
Ann_52547的博客
05-26 589
模拟器图片什么的显示不出来，真机扫码没有问题，听我说谢谢你 _
uniapp中app真机模拟以及小程序编译后css样式异常失效问题原因及解决方案
weixin_45745641的博客
01-01 1万+
最近写使用uniapp写app，开发的时候写样式都是使用浏览器h5进行调试一切正常，但是最后进行手机真机调试的时候css样式出现了异常，本文归纳常见的问题比如在h5页面显示正常：但是在真机调试app的实现则显示：vue页面在App端的渲染引擎默认是系统webview（不是手机自带浏览器，是rom的webview），在较老的手机上，比如Android4.4、5.0或iOS8，一些新出的css语法是不支持的。注意这不意味着不能使用flex，Android4.4也支持flex，只是不要使用太新的css。可以找An
微信小程序在不同移动设备上的差异导致原因
dearMengJJ的博客
07-19 2128
在不同的运行环境，ios、安卓、开发工具三个不同的运行环境 同样在iPhone手机上存在二倍像素、三倍像素问题，也会有差异。尽量适应偶数rpx单位使用 ...
微信小程序开发之——预览和真机调试效果不一样
我的博客
11-18 5025
一 预览和真机调试效果 预览效果 编译、真机效果 二 编译、预览和真机调试环境：都是develop 2.1 检测调试环境代码(app.js) debugger const accountInfo = wx.getAccountInfoSync(); //查看环境 this.globalData.envVersion = accountInfo.miniProgram.envVersion console.log("编译环境：" + this.globalData.envVe
小程序模拟器没问题，但在真机上样式错乱，这个要怎么解决？
leoly612200的博客
08-10 1万+
在开发工具上面有个远程调试，用对应有问题的手机扫码，调试代码可以发现问题！昨天就是通过这个找到问题的！很有帮助
微信小程序体验版与调试模式不同
热门推荐
lily_YourSun的博客
05-28 1万+
微信小程序体验版与调试模式不同真机体验版模式下不能发起网络请求，调试模式下可以正常发起网络请求 真机体验版模式下不能发起网络请求，调试模式下可以正常发起网络请求 出现以上情况，可以检查一下如下两个方面： 发起网络请求的协议是http还是https，有可能因为大意而漏写了s； 到微信公众平台里面，在左边菜单栏选择 “开发” -》开发设置 下面，看是否配置了相应的服务器域名 ...
解决微信小程序真机 showToast 不显示
03-29
花了一周多，终于把公司小程序做出来了。真机上测试发现调用 showToast 不显示，或者闪一下就没了。经过查找，发现是与 wx.showLoading 冲突了，两者调用的是同个框。 先放上我的错误代码：   // 请求事件 ...
微信小程序真机（手机预览）https访问本地服务程序
03-29
先声明，本人小白一名，应公司部门老大要求学习微信小程序，纯粹新手，到目前为止就只做了一个很low的小程序，后台服务程序(Java)是公司内部早就写好的，已有一套完整的Web系统和App，我做的就是写好小程序页面调用...
iOS 真机调试微信小程序
01-05
小程序开发完成之后，我们需要在真机上进行测试，真机调试方面小程序开发者工具有预览、远程调试和设置体验版本三大部分功能。除了这三种方式之外，我们还可以使用真机远程调试，在 iOS 上可以通过实现 Safari 调试...
微信小程序 实例汇总 完整项目源代码
11-01
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要针对移动设备，尤其是智能手机。它允许开发者在微信内创建原生体验的应用程序，无需通过应用商店即可供用户使用。这个压缩包文件“wechat”很可能包含了...
微信小程序 解决请求服务器手机预览请求不到数据的方法
08-31
在微信小程序的开发过程中，有时候会遇到一个棘手的问题，即在手机预览时请求服务器数据失败，而在微信开发者工具中却能正常获取。这个问题的关键在于服务器配置与微信小程序的安全域名设置不匹配。本文将详细解析这...
微信小程序 数字文本在ios上的表现和安卓不一致
weixin_45527865的博客
08-25 513
font-family: -apple-system,Helvetica,sans-serif; font-feature-settings:“tnum” 1;
微信小程序弹框wx.showToast、wx.showModal样式修改
weixin_45334111的博客
11-03 1万+
wx.showModal wx.showToast({ title: '失败',//提示文字 duration:2000,//显示时长 mask:true,//是否显示透明蒙层，防止触摸穿透，默认：false icon:'success', //图标，支持"success"、"loading" success:function(){ },//接口调用成功 fail: function () {
开发者工具iphone11样式正常，在真机的微信小程序上，图片被拉伸
qq_43600406的博客
05-30 672
开发这工具上显示的效果都是很正常的，放到其他机型，布局也很正常，但是，iphone11就非常不正常了，调了好久才发现好像是弹性盒子的问题，把弹性盒子去掉了，页面就显示正常了，特此记录下，这太坑人了 ![这个是Iphone11真机在小程序上的样式](https://img-blog.csdnimg.cn/df1ab46d7eeb4346ada5e5e7fd6fcaa2.png ...
uni-app手机端电脑端差别
mandarava的博客
01-30 1438
文章目录div标签的差别css的差别第三方库引用的差别 div标签的差别 table标签在手机端不显示可能是通病。 解决方法：使用flex布局。 如果已经写好了table表格，可以改成如下这样，会方便一些。 <view class="table"> <view class="thead"> <view class="tr"> <view c...
微信小程序预览本地文件js
最新发布
08-31
微信小程序提供了丰富的API来实现预览本地文件。其中，可以使用wx.openDocument()方法来预览本地文件。 首先，我们需要获取用户在小程序中选择的本地文件的临时文件路径。可以通过wx.chooseMessageFile()或wx.chooseImage()等方法来获得用户选择文件的临时路径。 然后，使用获取到的临时文件路径调用wx.openDocument()方法来打开预览文件。该方法的调用格式为： ```javascript wx.openDocument({ filePath: tempFilePath, // 本地文件的临时路径 success: function(res) { console.log('文件预览成功'); }, fail: function(res) { console.log('文件预览失败', res); } }); ``` 在预览文件成功的回调函数中，可以进行一些相应的处理，例如展示加载进度，或者执行其他操作。 需要注意的是，小程序并非能够支持所有文件类型的预览，支持的文件类型包括doc、xls、ppt、pdf、docx、xlsx、pptx等。在使用wx.openDocument()方法之前，可以先进行判断文件类型是否支持预览。 另外，文件预览功能只能在真机上预览，无法在开发者工具中进行预览。 通过以上步骤，我们就可以在微信小程序中实现本地文件的预览功能了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值