2019-08-01 17:20:56 kivets 阅读数 138

微信小程序中,导入使用本地图片,开发时在电脑上显示正常,iOS上也能正常显示,但是在Android上图片显示空白,
如图:

在这里插入图片描述

原因:网上查找,说有可能是这些原因

1.image src中的图片地址对英文字母大小写敏感,必须确认大小写对得上;

2.图片大小问题。似乎微信小程序对程序中用到的图片有大小要求,用到的本地图片要小于10KB才能顺利在真机上也能显示。因此通过用Photoshop CC把原来使用的png图片压缩成小图片输出到小于10KB再放回images文件夹下使用就可以了。

但是他说的两点我都符合,最后自己才发现,原来是路径中存在中文导致的

比如说现在这样导入本地图片

import adviceImg from '@images/icon/icon_jyxx@2x.png';
import notificationImg from '@images/icon/icon_通知公告@2x.png';
import dynamicImg from '@images/icon/icon_关注动态@2x.png';

显示就是这样的

忽略未读消息数小红点

2019-02-21 15:44:01 QQ694885382 阅读数 3096

问题:

苹果手机无法显示图片,是一片空白。

解决办法:

1,上传到服务器:

把图片上传到服务器,加载服务器路径。但是有没有更好的办法呢,不然太浪费服务器资源了,只是用来临时显示而已,还得定时清理!

2,base64编码:

方法中的o是临时文件路径,如:

这个是什么鬼http://tmp/wx5b87edd0dd429d6a.o6zAJsz5nfs8GC8rAXMkp1MPPvWQ.ESaZcv2wT8DLd31f956ae829471fa326853c65cb03f3.png

2019-10-29 17:10:09 weixin_39240599 阅读数 46

点击下方标题可快速定位

01.【小程序】IOS 端在 showLoading 和 hideLoading 之后 showToast 会不显示
02.【小程序】1rpx border 在 IOS 端显示不全问题
03.【H5页面】img 标签 在 IOS 端不显示图片
04.【H5页面】定位,拒绝授权后获取定位授权弹框不再显示
05.【小程序】 横向滚动,隐藏滚动条
06.【小程序】 修改按钮默认样式
07.【小程序】用数字控制循环次数
08.【小程序】修改 checkbox 样式
09.【小程序】swiper 组件一直只要滑动就会触发事件
10.【小程序】用户信息 <open-data> 样式
11.【小程序】textarea 穿透弹框

1.【小程序】IOS端在showLoading和hideLoading之后showToast会不显示

解决办法:在获取数据之后,设置定时器显示showToast

eg: setTimeout(function(){
      wx.showToast({
	    title: res.data.message,
	    icon: 'none'
      });
    },100)
2. 【小程序】1rpx border 在IOS端显示不全问题

解决办法:试过将 width 设置为 min-width,解决了一部分
后来发现将border: 1rpx 改成 border: 1px 就好了,在iPhone X上没有问题

3. 【H5页面】img标签 在IOS端不显示图片

解决办法:将改用div标签,图片设置被背景图显示:background-image: url("");

4. 【H5页面】定位,拒绝授权后获取定位授权弹框不再显示

一开始也很头疼,不知道是哪里的问题,为什么拒绝授权之后就不再出现呢,苹果这么傲娇的吗…

之后看到 这个博客 终于知道了原因和解决办法,但是真的好鸡肋啊,因为定位拒绝都被缓存手机授权隐私里面,就像第一次进入APP向你申请的权限,又或者网页的广告连接被拉进黑名单里,就再也不弹出来了。
解决办法:

手机设置:
(设置)Settings -> (通用)Genera -> (重置) Reset-> (重置定位于隐私)Reset Location & Privacy.
(设置)Settings ->( 隐私)Privacy 开启 Location Services.

5.【小程序】 横向滚动,隐藏滚动条
  • 横向滚动要对scroll-view 设置宽度,添加 white-space: nowrap; 对滚动区域内容进行不换行处理。
<scroll-view class="scroll_H" scroll-x="true" style="width: 100%">
    <view class="scroll-item_H"></view>
    <view class="scroll-item_H"></view>
    <view class="scroll-item_H"></view>
 </scroll-view>
 .scroll_H{
  	white-space: nowrap;
}
.scroll-item_H{
 	width:335rpx;
 	height:420rpx;
 	background:rgba(255,255,255,1);
 	box-shadow:0px 4rpx 15rpx 0px rgba(153,153,153,0.24);
 	border-radius:6rpx;
 	display: inline-block;
}
  • 隐藏滚动条,在最外层套一个view。原理就是内部元素高度大于外部元素的高度,然后外部通过 overflow-y: hidden 将滚动条直接隐藏
<view class="scroll-view">
	<scroll-view class="scroll_H" scroll-x="true" style="width: 100%">
		<view class="scroll-item_H"></view>
		<view class="scroll-item_H"></view>
		<view class="scroll-item_H"></view>
	 </scroll-view>
 </view>
 .scroll-view{
	 height: 400rpx;
	 overflow-y: hidden
 }
6.【小程序】 修改按钮默认样式
  • 宽度要加上 !important
    高度要设置min-height, 并加上 !important

或者

  • app.json 里基础组件样式"style": "v2",删除
7.【小程序】用数字控制循环次数

就像在vue里面,可以直接v-for="5",就能循环5次,那样小程序上是这样的:
在页面对应的js文件,data里添加参数:starNum: 5,
而页面上这样写:wx:for="{{starNum-0}}"

<block wx:for="{{starNum-0}}" wx:for-index="sindex" wx:key="sindex">
	<view> xxx... </view>
</block>
8.【小程序】修改checkbox样式

之前遇到一个需求,很普遍的需求,提交订单的时候会有个协议,默认不勾选,需要用户自己勾选。

想过radio组件,因为样式很接近,都是圆圆的,改个颜色就好。但是问题是,用户可以取消选择。

这样就有点麻烦了,而这个交互就是checkbox可以做到,但是它原生样式勾选框是方型的。

之后上网看到这一篇文章,解决了这个样式问题。

/* 未选中的 背景样式 */
checkbox .wx-checkbox-input{
   border-radius: 50%;
   width: 44rpx;
   height: 44rpx;
}
/* 选中后的 背景样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
   border: none;
   background: #108EE9;
}
9.【小程序】swiper组件一直只要滑动就会触发事件

在swiper组件 bindchange 绑定的事件中,添加判断

 if (e.detail.source === 'touch') {
       xxx...
 }
10.【小程序】用户信息 <open-data> 样式

建议不要用 <open-data type="userNickName"/> 去获取

最好是用户授权获取的 userInfo,再用普通组件去显示

因为试过 <open-data> 组件显示的头像姓名性别,布局上在模拟器没问题,真机就会有问题

11.【小程序】textarea穿透弹框

出现很奇怪的现象,textarea会穿透自定义的弹框组件,如何设置双方的层级都不能解决。之后是看到网上这一篇文章后才解决的。

思路就是,当弹框显示的时候,将textarea隐藏起来,但是通过蒙版还是能看到底部的内容,所以就要用text组件将文本内容同样显示出来。

textarea组件会穿透页面底部的按钮,不过应该是因为底部按钮是绝对定位,使用了 position: fixed;所以我调了层级z-index就不再能穿透

持续更新,有更好的解决方法希望能留下你的足迹,谢谢

2019-02-01 15:59:24 huihui_jiang 阅读数 141

@微信小程序----------踩坑记录
关于小程序一些小功能的代码都在这个GitHub上,感兴趣的可以去看看,
https://github.com/huihuijiang/miniProgram 目前有:列表左滑删除,拖拽浮标
一、小程序坑
1.scroll-view横向滚动的时候,包含文字图片等,元素错位,第二个元素掉下去;
hack:给子元素添加

vertical-align:top;

当使用scroll-view横向滚动时要注意几点:
父元素设置宽度,加上这两个样式overflow: hidden; white-space: nowrap;自元素设置成display: inline-block;vertical-align:top;
二、android 和 ios 兼容
1.不定宽高元素使用全铺背景图片,ios没有问题,安卓手机背景图片显示空白
hack:

background-size:cover;(元素加上这一属性)

2.安卓手机缓存严重问题
hack:
在图片后再加上一串随机数
在wxs中:(有些iOS手机不能识别小数的随机数,所以最好用整数

var random = Math.floor(Math.random() * 10 + 1) * 9;

3.ios不支持默认最小定时时间(0或不写)

4.截取字符串遇到表情,安卓没问题,ios会报错;
hack:(判断是否有表情)

var reg = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/;
var re = new RegExp(reg);
var en = str.slice(27, 29);
if (re.test(en)) {
title = str.slice(0, 27)
} else {
title =str.slice(0, 28)
}

5.getTime()时候,iOS必须把时间格式00-00-00转换成00/00/00

6.小程序获取胶囊按钮返回值(一直在变,目前的兼容代码

		const self = this;
		wx.getSystemInfo({
			success: function (res) {
				self.globalData.phonexh = res.model.indexOf("iPhone X");
				var menuButton = wx.getMenuButtonBoundingClientRect();
				//导航栏高度
				self.globalData.totalTopHeight =
					menuButton.height == menuButton.bottom ?
						menuButton.height :
						res.model.indexOf("iPhone") == 0 || (res.platform == 'android' && res.version == '7.0.3') ?
							menuButton.top + menuButton.height + (menuButton.top - res.statusBarHeight) :
							menuButton.top + menuButton.height + menuButton.top + res.statusBarHeight				
				//状态栏高度
				self.globalData.statusBarHeight = res.statusBarHeight;
				//标题栏高度
				self.globalData.titleBarHeight = self.globalData.totalTopHeight - res.statusBarHeight;

			}
		})

7.iOS使用overflow:auto;滚动会卡顿
hack:
-webkit-overflow-scrolling: touch

8.转发到微信列表的转发信息卡片图,iOS当图片尺寸不对时,会出现空白,安卓会自动截取左上角

9.iOS橡皮筋事件
hack:在page.json文件中
"disableScroll": true

10.iOS短时间多次扫码进入不会执行onload

11.new number()强制转换结果为undefined
hack:用parsefloat

12.iOS图片加上阿里云编辑参数加载失败
Hack:binderror事件中对src重新复制,记得带上随机数,不然会因为路径一样不请求,有时候不是一次就能重新请求成功的,所以下一次获取的时候记得去掉随机数

loadimgerror: function (e) {
        console.log("图片加载失败")
        this.setData({
           Src: e.target.dataset.src.split("?")[0] + '?' + Math.floor(Math.random() * 10 + 1) * 9
        })
    },

在这里插入图片描述
未完待续哦——

2017-09-21 09:33:29 NLYNN 阅读数 5458

升级到iOS11系统下自己的项目桌面app图标不见了,  自己在Xcode9下新建一个工程看一下, 设置图标是显示的, 但是假如CocoaPod就不显示了. 多方查询发现
图标不显示主要是cocoaPod出现了问题, 需要在podfile文件加入以下脚本 [标红的地方]

1.加入脚本
platform :ios, '8.0'

target ‘lqz’ do
    pod 'MJRefresh'
    pod 'AFNetworking'
    
post_install do |installer|
    copy_pods_resources_path = "Pods/Target Support Files/Pods-[工程名]/Pods-[工程名]-resources.sh"
    string_to_replace = '--compile "${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}"'
    assets_compile_with_app_icon_arguments = '--compile "${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}" --app-icon "${ASSETCATALOG_COMPILER_APPICON_NAME}" --output-partial-info-plist "${BUILD_DIR}/assetcatalog_generated_info.plist"'
    text = File.read(copy_pods_resources_path)
    new_contents = text.gsub(string_to_replace, assets_compile_with_app_icon_arguments)
    File.open(copy_pods_resources_path, "w") {|file| file.puts new_contents }

    
end

!!!!警告, 将[工程名] 换成自己工程的名称!!!!!!

2. cd 到当前工程目录 执行 $ pod install

3.打开文件手动修改
打开下面的文件
Pods-[工程名字]-resources.sh



修改前:

printf "%s\0" "${XCASSET_FILES[@]}" | xargs -0 xcrun actool --output-format human-readable-text 
--notices 
--warnings --platform "${PLATFORM_NAME}" 
--minimum-deployment-target "${!DEPLOYMENT_TARGET_SETTING_NAME}" ${TARGET_DEVICE_ARGS} 
--compress-pngs --compile "${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}"

修改后:

printf "%s\0" "${XCASSET_FILES[@]}" | xargs -0 xcrun actool --output-format human-readable-text --notices --warnings --platform "${PLATFORM_NAME}" --minimum-deployment-target "${!DEPLOYMENT_TARGET_SETTING_NAME}" ${TARGET_DEVICE_ARGS} --compress-pngs --compile "${BUILT_PRODUCTS_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}" --app-icon "${ASSETCATALOG_COMPILER_APPICON_NAME}" --output-partial-info-plist "${BUILD_DIR}/assetcatalog_generated_info.plist"

fi







到此, 重新打开工程即可!!









没有更多推荐了,返回首页