uni-app简答题

（含图）

 参数名

参数说明

备注

username

用户名

不能为空

l  响应内容：

注册失败：

{

"errMsg": "request:ok",

"data": {

    "msg": "该用户名已被注册，请重新提交",

    "code": 400,

    }

}

注册成功：

{

"errMsg": "request:ok",

"data": {

    "msg": "注册成功",

    "code": 200,

    }

}

（含图）

服务端api说明

l  功能：获取水果数据信息

l  请求地址：https://autumnfish.cn/fruitApi/fruits

l  请求方法：get

l  请求参数：无

l  响应内容：json

¡  icon：图片的base64编码，直接设置给image组件的src即可显示

{

"msg": "列表获取成功",

"data": [

    {

    "id": 1,

    "name": "草莓",

    "info": "蔷薇目蔷薇科植物",

     "icon":"data:image/png;base64..."

    }

       ]

}

h5端的界面：

（含图）

微信小程序的界面：

（含图）

代码：

<template>

<view>

<view class="title">您经常使用的设备或程序是：</view>

<checkbox-group name="">

 （                                                    ）

<label>

<checkbox value="computer" /><text>电脑</text>

</label>

<label>

<checkbox value="phone" /><text>手机</text>

</label>

（                                                   ）

（                                                    ）

<label>

<checkbox value="weixin" /><text>微信小程序</text>

</label>

<label>

<checkbox value="app" /><text>app</text>

</label>

（                                                    ）

</checkbox-group>

</view>

</template>

<style>

.title{

margin-bottom: 15rpx;

（                                                    ）

font-size: 48rpx;

color: #990000;

（                                                    ）

（                                                    ）

font-size: 48rpx;

font-weight: bold;

（                                                    ）

}

</style>

（含图）

写出实现以上效果的uniapp组件代码，以及CSS代码。

（含图）

请写出实现该效果的uniapp组件代码和CSS代码。