微信小程序平台能力——讲笑话情话服务

小程序码

页面wxml

<view class="hxt-flex-column" style="background-color: #F5F5F5;">
    <view class="hxt-flex-fill" style="height: 1px;">
        <scroll-view style="height: 100%;" scroll-y scroll-into-view="{{IdName}}" enhanced fast-deceleration bounces>
            <view class="cu-chat" wx:for="{{message}}">
                <view id="{{index==message.length-1?'last':''}}" class="cu-item self" wx:if="{{item.senderId==1}}">
                    <view class="main">
                        <view class="content bg-green shadow">
                            <text>{{item.text}}</text>
                        </view>
                    </view>
                    <view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
                    <!-- <view class="date">{{item.showTime}}</view> -->
                </view>
                <view id="{{index==message.length-1?'last':''}}" class="cu-item" wx:if="{{item.senderId!=1}}">
                    <view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
                    <view class="main" bindtap="copy" data-text="{{item.text}}">
                        <view class="content shadow">
                            <text>{{item.text}}</text>
                        </view>
                    </view>
                    <!-- <view class="date ">{{item.showTime}}</view> -->
                </view>
            </view>
        </scroll-view>
    </view>
    <view class="cu-bar input">
        <view class="action">
            <text class="cuIcon-sound text-grey"></text>
        </view>
        <input class="solid-bottom" bindfocus="InputFocus" bindblur="InputBlur" maxlength="300" cursor-spacing="10" model:value="{{text}}" placeholder="4: 土味情话, 5: 心灵鸡汤" confirm-type="send"></input>
        <view class="action">
            <text class="cuIcon-emojifill text-grey"></text>
        </view>
        <button class="cu-btn bg-green shadow" bindtap="submit">发送</button>
    </view>
</view>

页面js

const date = new Date();
Page({

    /**
    * 页面的初始数据
    */
    data: {
        text: '',
        message: [],
        IdName: ''
    },

    /**
    * 生命周期函数--监听页面加载
    */
    onLoad: function (options) {
    },
    post: function (text) {
        var _this = this, message = _this.data.message;
        wx.serviceMarket.invokeService({
            service: 'wxcae50ba710ca29d3', // 'wx_mp_appid',
            api: 'jokebot',
            data: {
                "mode": text, // 返回普通笑话
            },
        }).then(res => {
            console.log(res.data.data_list[0].result);
            var arr = {
                type: 'text',
                url: '',
                read: false,
                recalled: false,
                showTime: date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日 ' + date
                    .getHours() + ':' + date.getMinutes(),
                status: 'success',
                senderId: 2,
                text: res.data.data_list[0].result
            };
            message.push(arr);
            _this.setData({ message: message });
            _this.setData({ IdName: 'last' });
        }).catch(err => {
            console.error('invokeService fail', err)
            wx.showModal({
                showCancel: false,
                title: 'fail',
                content: err + '',
            })
        })
    },
    InputFocus: function (e) {
        this.setData({ IdName: 'last' });
    },
    InputBlur: function (e) {
        this.setData({ IdName: '' });
    },
    submit: function (e) {
        var _this = this, text = _this.data.text, message = _this.data.message;
        var arr = {
            type: 'text',
            url: '',
            read: false,
            recalled: false,
            showTime: date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日 ' + date
                .getHours() + ':' + date.getMinutes(),
            status: 'success',
            senderId: 1,
            text: text
        };
        message.push(arr);
        _this.setData({ message: message, text: '' });
        _this.post(text);
    },
    copy: function (e) {
        wx.setClipboardData({
            data: e.currentTarget.dataset.text,
            success(res) {
                console.log(res)
            }
        })
    },
    /**
    * 生命周期函数--监听页面初次渲染完成
    */
    onReady: function () {

    }
})

app.wxss

/**app.wxss**/
@import "static/font-awesome/font-awesome.wxss";
@import "/components/colorui/main.wxss";
@import "components/colorui/icon.wxss";
@import "components/colorui/animation.wxss";
page {
  height: 100%;
  width: 100%;
  background-color: #FFF;
  overflow: hidden;
}

.hxt-flex,
.hxt-flex-column {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.van-dropdown-menu .van-dropdown-menu__item {
  justify-content: start;
}
.hxt-flex-column {
  height: 100%;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}

.hxt-flex-fill {
  flex: 1;
}

.hxt-line {
  display: flex;
  align-items: center;
  flex-direction: row;
  font-size: 24rpx;
  color: #999;
  margin: 32rpx 0;
}

.hxt-line:before,
.hxt-line:after {
  display: block;
  content: '';
  flex: 1;
  height: 2rpx;
  background-color: #d7d7d8;
}

.hxt-line:before {
  margin-right: 20rpx;
}

.hxt-line:after {
  margin-left: 20rpx;
}