一、安卓和ios时间兼容问题
一般后台所用的时间格式为(2020-01-01),但ios只支持2020/01/01 这种日期格式,因此需要将格式统一转换为(2020/01/01)
const format = ordTime.replace(/-/g, '/')
二、安卓和ios中padding和margin
在小程序中,页面最下面的一个元素如果想距离底部一定距离要用padding-bottom,用 margin-bottom IOS无效
三、在手机中页面打开PDF页面
PDF为一个链接,想着把PDF的链接嵌到web-view中,就像一个h5页面一样,实际情况是ios显示正常,安卓打开页面空白
<web-view src="{{link}}"></web-view>
于是就使用了以下方法,安卓和ios都有效
wx.downloadFile({
// 示例 url,并非真实存在
url: contractUrl,
success: function(res) {
const filePath = res.tempFilePath
wx.openDocument({
filePath: filePath,
success: function(res) {
console.log('打开文档成功')
}
})
}
})//可参考官方的openDocument方法
四、修改图片调取小程序相机和相册功能
官方提供了wx.chooseImage(从本地相册选择图片或使用相机拍照)
按照官方说的,应该直接能够调起来以下这样的选择入口(可是ios能调起来,安卓手机调不出来这样的选择地方),于是就只能自己写一个这的的popup,去结合调取相册还是相机
<view class="itemTwoChild rightView" aria-hidden="true" bindtap="showChoosePop">
修改
</view>
<!-- 给个触发事件显示下面 -->
<van-action-sheet
show="{{ show }}"
actions="{{ actions }}"
bind:close="onClose"
bind:select="onSelect"
/>
data:{
show: false,
actions: [
{
name: '拍照',
// method:this.isPhoto
},
{
name:'从相册选择',
// method:this.isAlbum
},
{
name: '取消',
// method:this.onClose
}
],
}
//选择相片
showChoosePop() {
this.setData({
show: true
})
},
onSelect(event){
this.setData({ show: true })
if (event.detail.name == "拍照"){
this.setData({
type:'camera'
})
this.chooseImage()
} else if (event.detail.name == "从相册选择"){
this.setData({
type: 'album'
})
this.chooseImage()
}else{
this.setData({
show: false
})
}
},
// 修改图片
chooseImage(e) {
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
sourceType: [this.data.type], //可选择性开放访问相册、相机//动态控制选择相册或相机
success: res => {
const imagesFile = res.tempFilePaths
var str = imagesFile.toString()
var format = str.substr(str.length - 3, 3).toUpperCase()
// 截取三位,jpeg为peg
if (format == 'JPG' || format == 'PEG' || format == 'PNG') {
wx.showLoading({
title: '上传中...',
mask: true
})
wx.uploadFile({
url: api.getAddressUrl('/member/upload?memberId=75'),
filePath: imagesFile[0],
name: 'file',
header: { 'content-type': 'multipart/form-data','X-Auth-Token': getApp().globalData.Cookie },
success: (resp) => {
var str = resp.data //返回的结果,可能不同项目结果不一样
var pic = JSON.parse(str)
if (pic.code === 200) {
this.setData({
avatarUrl: pic.data.avatarUrl
})
}
},
fail: (res) => {
},
complete: () => {
wx.hideLoading()
this.setData({
show: false
})
}
});
} else {
// this.setData({
// avatar: url
// })
Toast("只能上传JPG/JPEG/PNG格式的图片");
}
},
fail:res =>{
this.setData({
show: false
})
}
})
},
五、安卓和ios手机textarea最高级问题
textarea属于原生组件,层级太高且无法改变,导致textarea怎么做都像一直浮在上面一样(安卓机显示这样可能要多,苹果也有部分机型显示)
解决方法目前只查到三种(万事不敢绝对,大厂有解决的我也没看到过代码,狗头):
1.cover-view
覆盖在原生组件之上的文本视图,层级大于textarea,正所谓一山更比一山高,可以覆盖住textarea
优点:从根本上解决textarea层级过高浮在最上面
缺点:cover-view里面只支持嵌套 cover-view、cover-image,嵌套其他的则无效
用于按钮之类的层级问题再好不过,把view改成cover-view就能解决大部分问题,因为嵌套其他的无效所以用组件则嵌套不进去,如果我想写一个popup层里面包含想三级联动,时间选择器这种复杂的组件拿来用还好,用cover-view写一个原生的想想就好,做起来.....
<cover-view class="btn">提交</cover-view>
<!--//用cover-view替换层级低的view-->
2.隐藏textarea
举个例子:就拿popup层来说,textarea的层级要比popup层高,这时候textarea里面的文字就会浮动在popup层上面,如果当popup层显示的时候,把textarea隐藏掉就好了
优点:单纯的解决bug
缺点:如果在设计上popup出现时textarea本身就看不见了,这个是可以接受,因为当你出现后,textarea就看不见了,用户在视觉上没有发现变化,但是当popup和textarea同时在一个页面存在,设计上可以同时看见他们两,你去隐藏textarea就能看到变化了,视觉上不友好了
3.替换textarea
就是在不同时候,用东西把textarea替换掉
优点:基本能解决textarea层级过高的问题
缺点:替换textarea可能有细微抖动,解决好textare的样式问题,做到一比一精仿textare,让人看不出你替换了textarea
<view class="desc-box">
<view class='text desc-text' wx:if="{{show}}" >
<text>{{duty}}</text>
</view>
<textarea wx:else placeholder="描述你在该项目中起到的作用或主要职责" maxlength="1000" class='text' name="textarea" bindinput="dutyInput" value="{{duty}}" />
</view>
<!--通过控制show来控制是显示text还是textarea,我这边做的就是展示popup层时用text,关闭popup层时用textarea-->
六、Picker与input在一起使用时,先点击input获取焦点,再点击Picker时input焦点没有消失,键盘覆盖在picker上面
选择器覆盖到键盘下面,同时输入框聚焦可以输入,贴原本代码,使用了vant-weap组件
<!-- van-field为输入框,和input一样 -->
<van-field required value="{{ name }}" label="姓名" placeholder="输入姓名" border="{{ false }}" class="form-input-item" bind:input="nameInput" />
<!-- 输入框为做工作年限值的点击显示picker层和选择值得显示 -->
<van-field required value="{{ workValue }}" label="工作年限" placeholder="选择工作年限" readonly border="{{ false }}" class="form-input-item" right-icon="arrow" icon="arrow" bindtap="showPopup1"></van-field>
<!-- 把picker放进popup层中使用 -->
<van-popup show="{{show}}" position="bottom">
<van-picker show-toolbar title="请选择工作年限" columns="{{ columns1 }}" value-key="dictValue" bind:cancel="onCancel" bind:confirm="onConfirm" />
</van-popup>
解决方法:
1.给picker绑定点击事件并且input为readonly(如果还是有问题就加上disabled,把禁用的文字颜色再调回只读颜色)。点击后调用wx.hideKeyboard()隐藏掉键盘。
2.使用view模拟input的placeholder(input组件没有真正的使用到,只有值的显示和点击事件)
3.给input绑定focus变量,点击后设置focus的变量为false