小程序的十万个为什么丨第一期

极乐君

发布于 2018-07-31 14:49:21

4640

发布于 2018-07-31 14:49:21

文章被收录于专栏：极乐技术社区

问答

Q：拼多多微信小程序消息提示功能如何实现？

A：可以使用websocket进入页面时建立连接，服务器端一旦有消息，就可以推送客户端了。然后根据服务器端相应，把信息显示出来就行了。

问答

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 ? '&nbsp; ➝' : '&nbsp; ⇄'}}{{ticket.isTurning == true ? '&nbsp; '+ticket.turningCity : ''}} {{ticket.isTurning == true ?   (ticket.isSingleFlight == true ? '&nbsp; ➝' : '&nbsp; ⇄') : ''}} &nbsp;{{ticket.arrivalCity}} &nbsp; &nbsp; &nbsp; {{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：微信小程序一次性上传多张图片？

微信提供的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 删除

小程序