1. border 1px问题
解决方案:
- 改为2px
- 原素更改宽度 1px调整
2. 弹层scroll击穿底部
解决方案:
- 弹层添加
capture-catch:touchmove="myCatchTouch"
myCatchTouch: function() {
console.log('stop user scroll it!');
return;
},
复制代码
- 底部添加样式
style={
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
复制代码
3. textarea placeholder 滚动
解决方案: 添加fixed属性
<textarea placeholder="备注留言"
maxlength='50'
fixed
name="textarea"
placeholder-style='font-size: 28rpx;color: #C7C7CD;text-align: justify;line-height: 42rpx;border-radius:10rpx !important'
bindinput='setRemark'
cursor-spacing='100'/>
复制代码
4. Do not have hidden handler in current page:
Do not have hidden handler in current page: pages/huodongye/huodongye. Please make sure that hidden handler has been defined in pages/huodongye/huodongye, or pages/huodongye/huodongye has been added into app.json
5. button去除边框
强制border:none
无效
实现方案:
button::after {
border: none
}
复制代码
6. 收集多个form_id供推送消息使用
在button 或者input框等可点击的元素外面嵌套多层form以及button,多次触发submit
事件即可
7.脚本中使用js方法
项目中需要根据返回的数字显示汉字,需要在wxml中使用方法。
官方解决方案:WXS
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
注意
- wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
- wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。
- wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。
- wxs 函数不能作为组件的事件回调。 由于运行环境的差异,在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
示例:
<!--wxml-->
<!-- 下面的 getMax 函数,接受一个数组,且返回数组中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) {
var max = undefined;
for (var i = 0; i <array.length; ++i) {
max = max === undefined ? array[i] : (max >= array[i] ?
max : array[i]);
}
return max;
}
module.exports.getMax = getMax;
</wxs>
<!-- 调用 wxs 里面的 getMax 函数,参数为 page.js 里面的 array -->
<view>{{m1.getMax(array)}}</view>
复制代码
8. navigateBack bug
复现: 登录拦截失败后应用的redirectTo
,用户登陆成功后 应用navigateBack
没有返回上一级;
解决方法:
navigateBack
应该与navigateTo
配对使用;
so, 把redirectTo
改为navigateTo
,再应用navigateBack({delta: 1})
就成功了。
教训:老娘有史以来写的最严重的线上bug.哎,测试时以为是后端bug,测试方案没覆盖全。小程序接口使用前还是得快速念一遍啊。
9. e.target与e.currentTarget的区别
e.target
涉及事件委托。
10. 关于小程序生命周期,与app.js执行顺序
问题描述:init函数需要app.js执行后的全局变量
onLoad: function () {
console.log('onLoad')
if (app.globalData.boliSid) {
if (!app.globalData.isBoundMobile) {
wx.redirectTo({
url: "/pages/binding/binding",
})
return false
}
this.setData({
isBinding: true
})
this.init()
} else {
app.getAuthKey().then(res => {
if (res.data.code == 200) {
app.globalData.boliSid = res.data.data.boli_sid
app.globalData.isBoundMobile = res.data.data.is_bound_mobile
}
if (!app.globalData.isBoundMobile) {
wx.redirectTo({
url: "/pages/binding/binding",
})
return false
}
this.setData({
isBinding: true
})
// 这里是ajax请求啊
this.init()
})
}
console.log(app.globalData,'global')
}
复制代码
init函数:
init: function(e) {
let that = this
console.log(e,'e')
console.log(app.globalData,'init global')
let configData = {
boli_sid: app.globalData.boliSid,
map_lat: app.globalData.latitude,
map_lng: app.globalData.longitude,
page: 1,
size: 10,
type: 0
}
console.log(configData,'configData')
let config = {
data: configData,
url: 'https://test.anjuy.cn/@wxapp/logistic/index',
isLoading: true
}
axios(config).then(res => {
// console.log(res.data,'data')
if (res.data.code == 200) {
that.setData({
initData: res.data.data
})
console.log( this.data.initData,'res')
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
}
}).catch(e => {
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
})
},
复制代码
正常执行; 必须确保app.js全局变量正常才能执行init() 注意同步异步事件
11.onPullDownRefresh not work
onPullDownRefresh触发条件??
onPullDownRefresh: function () {
console.log(this.data.page,'page')
this.init()
},
onReachBottom: function () {
this.init()
},
复制代码
解决方案: 需要json文件进行配置
{
"enablePullDownRefresh": true,
"onReachBottomDistance": 50,
}
复制代码
12. wx.showToast不执行
问题描述:请求成功200后添加代码,toast组件一直未执行
axios(config).then( res => {
if(+res.data.code == 200){
wx.showToast({
title: '取件成功',
icon: 'success',
duration: 1500
})
that.search = that.selectComponent('#mySearch');
that.search.delValue();
that.init()
}
}, e => {
console.log(e)
})
复制代码
解决方案:
setTimeout(() => {
wx.showToast({
title: '取件成功',
icon: 'success',
duration: 1500
})
},300)
复制代码
13 input框高度
当设置的字体过大,如80rpx,输入框会发生切割,文字展示不全; 重设input高度,覆盖默认的height和min-height
input {
font-size: 80rpx;
line-height: 90rpx;
height: 90rpx;
min-height: 90rpx;
}
复制代码
14 scroll-view
<scroll-view class="comments" scroll-x="true">
<view style="display:flex;align-items:top;">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
</view>
</scroll-view>
复制代码
- comments 必须加上
white-space: nowrap;
<view style="display:flex;align-items:top;">
为了解决内部滚动元素底部对齐问题 3) 内部元素item
必须加上display: inline-block;
to be solved