小程序的十万个为什么丨第一期
问答
Q：拼多多微信小程序消息提示功能如何实现？
A：可以使用websocket进入页面时建立连接，服务器端一旦有消息，就可以推送客户端了。然后根据服务器端相应，把信息显示出来就行了。
问答
Q
Q：微信小程序 flex布局 如何使弹出的键盘不遮挡输入框？
这样评论输入框是在页面底部。但是每次键盘弹出的时候，会遮挡住输入框。请问应该怎么解决这个问题呢？
page { height: 100%; display: flex !important; flex-direction: column !important; justify-content: space-between !important;
}
<view class="weui-panel">
<view class="weui-panel__bd" wx:if="{{ticket.deleted != true}}">
<view class="weui-media-box weui-media-box_text">
<view class="weui-media-box__title weui-media-box__title_in-text">{{ticket.title}}</view>
<view class="weui-media-box__desc">
<text class="info" decode="{{true}}">
{{ticket.departureCity}} {{ticket.isSingleFlight == true ? ' ➝' : ' ⇄'}}{{ticket.isTurning == true ? ' '+ticket.turningCity : ''}} {{ticket.isTurning == true ? (ticket.isSingleFlight == true ? ' ➝' : ' ⇄') : ''}} {{ticket.arrivalCity}} {{ticket.departureDate}}
</text>
<text class="desc" decode="{{true}}">
{{ticket.comment == null ? '' : ticket.comment}}
</text>
</view>
<view class="weui-media-box__info">
<view class="weui-media-box__info__meta">发布时间：{{ticket.publishDate}}</view>
<view class="weui-media-box__info__meta weui-media-box__info__meta_extra" wx:if="{{role == 'admin'}}" bindtap="onEdit">编辑</view>
<view class="weui-media-box__info__meta weui-media-box__info__meta_extra" wx:if="{{role == 'admin'}}" bindtap="edit" bindtap="onDelete" data-id="{{ticket.id}}">删除</view>
</view>
</view>
</view>
</view>
<view id="comment" class="comment">
<view class="weui-cells__title">评论</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell">
<view class="weui-cell__bd">
<input class="comment-input" bindfocus="inputComment" cursor-spacing='1000' maxlength="10" placeholder="最大输入长度10" />
</view>
</view>
</view>
</view>
A：设置cursor-spacing='20'指定光标与键盘的距离为20px。20为例。
问答
Q
Q：微信小程序一次性上传多张图片？
微信提供的wx.uploadFiles() ，每次只能上传一份文件，如果需要一次性上传多个图片，用递归是可以做出来的。但是我现在的需求是用户发动态，用户一次性可以发好几张图片，这样的话，就会造成有几张图片就会请求了几次，这时候我如何去确定当前的请求呢？我在数据库里，这几张图片都应该是是属于同一条记录的，这怎么做到呢？
A：我的做法是使用promise来处理多个上传请求，然后每个上传请求完成后返回地址。 全部上传完成后在请求一次，保存这几条地址到数据库。
promisify.js:
module.exports = (api) => { return (options, ...params) => { return new Promise((resolve, reject) => {
api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);
});
}
}
我封装的上传函数upload，放在network.js中:
function upload(options) { var url = options.url,
path = options.path,
name = options.name, // data = options.data,
extra = options.extra,
success = options.success,
progress = options.progress,
fail = options.fail console.log("upload url:" + url) const uploadTask = wx.uploadFile({ url: url, filePath: path, name: name, formData: extra, success: function (res) { console.log(res); var data = res.data try {
data = JSON.parse(res.data) console.log(data)
} catch (e) { console.log(data) throw(e)
} if (res.statusCode == 200 && data.code == 1000) { if (success) {
success(data)
}
} else { if (fail) {
fail(data)
}
}
}, fail: function (res) { console.log(res) if (fail) {
fail(res)
}
}
})
uploadTask.onProgressUpdate((res) => { console.log('上传进度', res.progress) console.log('已经上传的数据长度', res.totalBytesSent) console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend) if (progress) (
progress(res)
)
})
}module.exports = { upload: upload
}
const network = require("../../utils/network.js")const promisify = require("../../utils/promisify.js")//转为promise对象const upload = promisify(network.upload)//上传函数uploadMultiImage: function (paths) { let z = this
let url = '...'
const promises = paths.map(function (path) { return upload({ url: url, path: path, name: 'file', extra: {},
})
})
wx.showLoading({ title: '正在上传...',
})
Promise.all(promises).then(function (datas) { //所有上传完成后
wx.hideLoading() // 服务器返回的路径
let paths = datas.map(data => { return data.data
}) // 保存，这里可以选择发送一个请求，保存这几条路径
images = images.concat(paths)
z.setData({ images: images
})
}).catch(function (res) {
wx.hideLoading()
util.handleFail(res)
})
}
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-03-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读