api开发工具的使用.md · 王澎/零基础移动端系统设计与开发

# 移动系统开发

课件的地址：

https://gitee.com/wing2004/abs-apicloud/blob/master/api%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7%E7%9A%84%E4%BD%BF%E7%94%A8.md

app开发本质上涉及到多方面的知识：html css js java php mysql.......；从底层技术开始学周期太长，并不适用，特别是对于非计算机出生的同学。本课程的目的希望能够在选择合适的开发工具的基础上，自顶向下进行学习，以尽早实现app案例开发为目标，先入门然后进行更深入的学习。

当代app开发的趋势：无代码开发与低代码开发

无代码开发的代表：ivx，氚云，简道云，牛刀......
https://sspai.com/post/64949

低代码开发：国内工具：apicloud uniapp   国外:  flutter 等

选择apicloud的原因：灵活性与易用性的折中

apicloud收费的问题

# apicloud开发工具的使用

## classwork1.1：账号注册，下载并安装apicloud的开发工具

https://www.apicloud.com/

开发工具下载
https://www.apicloud.com/studio3#downloadBtn

## 开发工具的使用

相关视频：http://www.apicloud.com/video_play/18_1

## 多端应用的开发

https://docs.apicloud.com/apicloud3/#/overview/index?index=0&subIndex=0

APICloud 自 3.0 起，已从跨平台技术全面升级为多端技术：

1.  使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App，且多端渲染效果统一；
    
2.  全新的 App 引擎 3.0 不依赖 webView，提供百分百的原生渲染，保障 App 性能和体验与原生 App 一致；
    
3.  现有 api 直接映射兼容小程序接口，延续已有开发习惯；

同时 APICloud 3.0 仍然保留了 2.0 的所有技术栈和开发体验，为方便开发者对跨平台技术和多端技术的理解和区分，我们对创建的应用类型进行了明确的区分。

主要包括四种类型：

1. Native App
Native App 适合功能强大、性能卓越的 App 开发，如果您仅有 App 需求，应选择 Native App 模式

2. MX App
MX App 适合小程序优先的场景，如果您的业务重点在小程序端，不需要丰富的功能和苛刻的体验，应选择 MX App 模式。开发完的小程序代码，可百分百编译为同等功能的 App，相当于开发一个小程序，“白送”一个 App

3. App Clip
苹果小程序

4. Web App

### classwork1.2：创建一个新的多端avm项目，并导入到云端

## 目录结构说明

https://docs.apicloud.com/apicloud3/#/basic/project?index=1&subIndex=0

page 文件夹下包含了所有的页面文件stml
其他文件夹保存的是上述stml文件需要调用的资源
config文件对应的app的一些基本设置

##   多端项目是由 stml 文件构成

stml（single template markup language）文件是一个专用的文件类型，其结构和 Vue 的单文件组件 (SFC）相似，用类 Html 语法描述一个组件/页面。更多关于 stml 可参考  [stml 页面介绍]
(https://docs.apicloud.com/apicloud3/#/basic/stmlpage?index=1&subIndex=1)。

在创建 stml 文件之前，我们需要在项目根目录下新建一个 pages 目录，只有放置在 pages 目录下的 stml 文件才会被正确编译。

打开 APICloud Studio 3 并导入项目，在项目结构的 pages 目录上点鼠标右键，在弹出的菜单中选择“新建 stml 文件”，然后输入文件名回车确认，这样就创建了一个默认的空白的 stml 页面，我们可以简单的添加一个 text 文本。

```js
<template name='tpl'>
    <view class="page">
        <text>APICloud</text>
    </view>
</template>
<script>
    export default{
        name: 'tpl',
        apiready(){//like created

},
        data() {
            return{

}
        },
        methods: {

}
    }
</script>
<style>
    .page {
        height: 100%;
    }
</style>
```

### 预览 stml 文件

预览stml文件效果有以下三种方式：

-   实时预览

在 stml 页面编辑区内点鼠标右键，选择“实时预览”，将会启动 Studio 3 的内置浏览器进行预览。

-   WiFi 真机实时预览

说明视频 ：http://www.apicloud.com/video_play/18_12

使用 WiFi 真机实时预览时，需要手机端安装 AppLoader 或者自定义 loader，并在 loader 内连接 Studio。
在 stml 页面编辑区内点鼠标右键，选择“WiFi 真机实时预览”，页面将会自动在已连接 Studio 的手机端 loader 里面显示。

### classwork1.3：

*  下载apploader，并实现上面简单项目wifi真机实时预览

https://docs.apicloud.com/Download/download

*  创建生鲜电商项目，并实现wifi真机预览

从生鲜的例子也可以看到所有页面都有stml完成，并都在page这个文件夹内

## apicloud的前端组件（小程序）

### stml文件的结构说起
 stml（single template markup language）文件是一个专用的文件类型，用类 Html 语法描述一个组件/页面。

一个 stml 文件一般包含三种类型的顶级语言块`<template>`，`<script>`和`<style>`，同时支持引入外部 js 或者 css 文件，以及其他 stml 组件。

stml 文件最终被分别编译为 APP、小程序代码。

其中<template>部分负责页面元素的定义与布局，而<style>部分负责展示部分的修饰，这两个部分共同构建了app的前端。

## view

https://docs.apicloud.com/apicloud3/#/component/view?index=4&subIndex=0
view 是通用容器组件，内部可以放置任意组件。默认布局方式为flex布局。
注意这些组件主要用于小程序。但是由于这些组件本质三个源于html的组件，因此很多都有对应关系，并且对应修饰方法大多类似

比如：view 是通用容器组件，内部可以放置任意组件。默认布局方式为flex布局。view和html中的div是对应的，因此有很多配可以借鉴
https://www.runoob.com/css/css-boxmodel.html

* 理解下面代码的调用规则
* 
####

### css基础

https://www.runoob.com/css/css-tutorial.html

```jsx
<template>
    <scroll-view class="main" scroll-y>
        <text class="title">水平布局</text>
        <view class="horizontal">
            <view class="item red"></view>
            <view class="item green"></view>
            <view class="item blue"></view>
        </view>
        <text class="title">垂直布局</text>
        <view class="vertical">
            <view class="item red"></view>
            <view class="item green"></view>
            <view class="item blue"></view>
        </view>
    </scroll-view>
</template>
<style>
    .main {
        width: 100%;
        height: 100%;
    }
    .title {
        padding: 10px 0;
        font-size: 20px;
    }
    .horizontal{
        flex-direction: row;
        width: 300px;
        height: 200px;
    }
    .vertical {
        flex-direction: column;
        width: 200px;
        height: 300px;
    }
    .item {
        flex: 1;
    }
    .red {
        background-color: #f00;
    }
    .green {
        background-color: #0f0;
    }
    .blue {
        background-color: #00f;
    }
</style>
<script>
    export default {
        name: 'test',
        data(){
            return {
            }
        },
        methods:{
            
        }
    }
</script>
```
*  class选择器
https://www.runoob.com/css/css-id-class.html

* CSS 盒子模型(Box Model)
https://www.runoob.com/css/css-boxmodel.html

#### view的常用特征：background-color；width；height；padding；flex-direction；border

border: 5px  solid  rgb(0, 87, 128);
padding: 25px;
margin: 25px;

-   **Margin(外边距)**  - 清除边框外的区域，外边距是透明的。
-   **Border(边框)**  - 围绕在内边距和内容外的边框。
-   **Padding(内边距)**  - 清除内容周围的区域，内边距是透明的。
-   **Content(内容)**  - 盒子的内容，显示文本和图像。

#### classwork 2.1

请创建一个红色的色块（注意view无法单独创建，view里面必须有内容）

* 创建一个带边框的view，具体见图 2-1-1
* 创建一个嵌套view，见图2-1-2
* 创建多个并列嵌套，见图 2-1-3

* 创建如下嵌套
通过view组件嵌套完成如下布局： 2-2-4

## text标签

```jsx
<template>
    <scroll-view class="main" scroll-y>
        <text class="text">普通文本</text>
        <text class="text bold">粗体文本</text>
        <text class="text italic">斜体文本</text>
        <text class="text shadow">Text-shadow 效果</text>
    </scroll-view>
</template>
<style>
    .main {
        width: 100%;
        height: 100%;
    }
    .text {
        height: 30px;
        font-size: 18px;
    }
    .bold {
        font-weight:bold;
    }
    .italic {
        font-style:italic;
    }
    .shadow {
        text-shadow:2px 2px #f00;
    }
</style>
<script>
    export default {
        name: 'test'
    }
</script>
```
### text常用特征：font-size；width；height；font-style

### classwork2.2

* 完成如下嵌套text 2-2-1

## image标签

https://docs.apicloud.com/apicloud3/#/component/image?index=4&subIndex=3
```jsx
<template>
<scroll-view class="main" scroll-y>
    <view class="item">
        <text class="name">原图</text>
        <image class="originImage" src={src} mode="widthFix"></image>
    </view>
    <view class="item" v-for="(item, index) in list">
        <text class="name">{item.text}</text>
        <image class="image" src={src} mode={item.mode}></image>
    </view>
</scroll-view>
</template>
<style>
.main {
    width: 100%;
    height: 100%;
    padding: 0 8px;
}
.name {
    padding: 10px 0;
}
.originImage {
    width: 100%;
}
.image {
    width: 150px;
    height: 150px;
    background-color: #ddd;
}
</style>
<script>
export default {
    name: 'test',
    data(){
        return {
            src: 'http://img.mp.itc.cn/q_70,c_zoom,w_640/upload/20170421/06ec60b558ba4c1e81f8aa0f689fa873_th.jpeg',
            list: [{
                mode: 'scaleToFill',
                text: 'scaleToFill：不保持纵横比缩放图片，图片完全拉伸适应'
            }, {
                mode: 'aspectFit',
                text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
            }, {
                mode: 'aspectFill',
                text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
            }, {
                mode: 'top',
                text: 'top：不缩放图片，只显示图片的顶部区域'
            }, {
                mode: 'bottom',
                text: 'bottom：不缩放图片，只显示图片的底部区域'
            }, {
                mode: 'center',
                text: 'center：不缩放图片，只显示图片的中间区域'
            }, {
                mode: 'left',
                text: 'left：不缩放图片，只显示图片的左边区域'
            }, {
                mode: 'right',
                text: 'right：不缩放图片，只显示图片的右边边区域'
            }, {
                mode: 'top left',
                text: 'top left：不缩放图片，只显示图片的左上边区域'
            }, {
                mode: 'top right',
                text: 'top right：不缩放图片，只显示图片的右上边区域'
            }, {
                mode: 'bottom left',
                text: 'bottom left：不缩放图片，只显示图片的左下边区域'
            }, {
                mode: 'bottom right',
                text: 'bottom right：不缩放图片，只显示图片的右下边区域'
            }]
        }
    }
}
</script>
```

### image

https://docs.apicloud.com/apicloud3/#/component/image?index=4&subIndex=3

image 组件用于显示图片。

本地图片一般放在image文件夹内，注意不同的相对位置..../的层次也需要不同

### 相对路径

所谓相对路径，就是相对于自己的目标文件位置。
在同一个目录:<body background="bg.jpg">
在其所在目录的“img”子目录里:<body background="img/bg.jpg"> (由于“img”目录是“第2章”目录下的子目录，因此在“img”前不用再加上“/”字符。)
在其所在目录的上级目录里:<body background="../bg.jpg"> (在相对路径里常使用“../”来表示上一级目录。如果有多个上一级目录，可以使用多个“../”.)
在其所在目录的上级目录里的“img”子目录里:<body background="../img/bg.jpg">

```jsx
<template>
<scroll-view class="main" scroll-y>
    <view class="item">
        <text class="name">原图</text>
        <image class="originImage" src={src} mode="widthFix"></image>
    </view>
    <view class="item" v-for="(item, index) in list">
        <text class="name">{item.text}</text>
        <image class="image" src={src} mode={item.mode}></image>
    </view>
</scroll-view>
</template>
<style>
.main {
    width: 100%;
    height: 100%;
    padding: 0 8px;
}
.name {
    padding: 10px 0;
}
.originImage {
    width: 100%;
}
.image {
    width: 150px;
    height: 150px;
    background-color: #ddd;
}
</style>
<script>
export default {
    name: 'test',
    data(){
        return {
            src: 'http://img.mp.itc.cn/q_70,c_zoom,w_640/upload/20170421/06ec60b558ba4c1e81f8aa0f689fa873_th.jpeg',
            list: [{
                mode: 'scaleToFill',
                text: 'scaleToFill：不保持纵横比缩放图片，图片完全拉伸适应'
            }, {
                mode: 'aspectFit',
                text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
            }, {
                mode: 'aspectFill',
                text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
            }, {
                mode: 'top',
                text: 'top：不缩放图片，只显示图片的顶部区域'
            }, {
                mode: 'bottom',
                text: 'bottom：不缩放图片，只显示图片的底部区域'
            }, {
                mode: 'center',
                text: 'center：不缩放图片，只显示图片的中间区域'
            }, {
                mode: 'left',
                text: 'left：不缩放图片，只显示图片的左边区域'
            }, {
                mode: 'right',
                text: 'right：不缩放图片，只显示图片的右边边区域'
            }, {
                mode: 'top left',
                text: 'top left：不缩放图片，只显示图片的左上边区域'
            }, {
                mode: 'top right',
                text: 'top right：不缩放图片，只显示图片的右上边区域'
            }, {
                mode: 'bottom left',
                text: 'bottom left：不缩放图片，只显示图片的左下边区域'
            }, {
                mode: 'bottom right',
                text: 'bottom right：不缩放图片，只显示图片的右下边区域'
            }]
        }
    }
}
</script>
```
### 本地引用与外链

### v-for方法与变量的引用

v-for 来源于vue，一种用来在页面上循环输出元素的方法

https://www.cnblogs.com/wangyfax/p/10073159.html

stml 中的变量在data中定义，在template中使用，注意使用时得加{}

### classwork 2.3

* 网上找一张图片，用两种方式显示此图片：一种直接使用网络地址，一种下载到本地并引用（注意图片的相对位置）
* 修改变量显示多张图片与文字混合 2-3-1

## button

button 组件定义一个按钮。

https://docs.apicloud.com/apicloud3/#/component/button?index=4&subIndex=5

```jsx
<template>
    <scroll-view class="main" scroll-y>
        <button onclick={this.btnAction}>默认按钮</button>
        <button class="btn" onclick={this.btnAction}>自定义按钮</button>
    </scroll-view>
</template>
<style>
    .main {
        width: 100%;
        height: 100%;
    }
    button {
        margin: 8px;
    }
    .btn {
        width: 200px;
        height: 40px;
        color: #fff;
        background-image: linear-gradient(to bottom, #00b, #006);
    }
</style>
<script>
    export default {
        name: 'button-test',
        data(){
            return {
            }
        },
        methods:{
            btnAction(e){
                api.alert({
                    msg: '触发了点击事件'
                });
            }
        }
    }
</script>
```

### onclick  ; this的意义

* onclick 代表点击动作

* this 代表此程序的全局变量

* js函数的定义btnAction(e) 其中e的作用

### api.alert

https://docs.apicloud.com/Client-API/api#4

弹出带一个按钮的对话框，更多按钮的对话框请使用confirm方法

alert({params}, callback(ret, err))

参数

title：

- 类型：字符串
- 默认值：无
- 描述：（可选项）标题

msg：

- 类型：字符串
- 默认值：无
- 描述：（可选项）内容

buttons：

- 类型：字符串数组
- 默认值：["确定"]
- 描述：（可选项）按钮

### classwork 3.1

* 在image标签的案例代码里加入按钮，并能点击弹出菜单
* 通过对list中的mode变量重新赋值，实现点击按钮改变image案例代码中一个图片的显示方式。

## input标签

https://docs.apicloud.com/apicloud3/#/component/input?index=4&subIndex=6

input 组件定义一个输入框。

```jsx
<template>
    <scroll-view class="main" scroll-y>
        <input placeholder="输入限制为10，自动获取焦点" maxlength="10" autofocus/>
        <input type="password" placeholder="密码输入框"/>
        <input placeholder="数字键盘" keyboard-type="number"/>
        <input placeholder="键盘完成按钮文字为搜索" confirm-type="search" onconfirm={this.onconfirm}/>
    </scroll-view>
</template>
<style>
    .main {
        width: 100%;
        height: 100%;
    }
    input {
        margin: 8px;
        width: auto;
    }
</style>
<script>
    export default {
        name: 'test',
        methods:{
            onconfirm(e){
                api.alert({
                    msg: '搜索' + e.detail.value
                });
            }
        }
    }
</script>
```

* 输入框的数据类型

### onconfirm

与onclick点击按钮事件相比，代表回撤按键事件 ，同样可以触发某个函数动作

### classwork 3.2

* 请在input的案例代码中通过v-for循环输出若干text 如 图3_2_1
* 修改最后一个input, 实现输入任意字符，回撤后会在上面的text列表的最后一行呈现（自行学习js中通过push方法给列表增加元素）

## picker

picker 组件定义一个滚动选择器。

除了通用属性，对于不同的 mode，拥有不同的属性。

https://docs.apicloud.com/apicloud3/#/component/picker?index=4&subIndex=10

### 属性

| **属性名称** | **类型**    | **默认值** | **必填** |       **说明** |
| ------------ | ----------- | ---------- | -------- | -------------: |
| mode         | string      | selector   | 否       |     选择器类型 |
| disabled     | boolean     | false      | 否       |       是否禁用 |
| oncancel     | eventhandle | 无         | 否       | 取消选择时触发 |

```jsx
<template>
    <scroll-view class="main" scroll-y>
        <safe-area></safe-area>
        <picker class="picker" id="selector" mode="selector" value={selectorValue} onChange={this.selectorChange}>
            <text>选择性别：{genderDesc}</text>
        </picker>
        <picker class="picker" id="multiSelector" mode="multiSelector" value={multiSelectorValue} onChange={this.multiSelectorChange}>
            <text>选择年月：{dateDesc}</text>
        </picker>
        <picker class="picker" id="areaMltiSelector" mode="multiSelector" range-key="name" value={areaMltiSelectorValue} onchange={this.areaMultiSelectorChange} oncolumnchange={this.areaMultiSelectorColumnChange}>
            <text>选择区域：{areaDesc}</text>
        </picker>
    </scroll-view>
</template>
<style>
    .main {
        width: 100%;
        height: 100%;
    }
    .picker {
        margin: 8px;
    }
</style>
<script>
    export default {
        name: 'test',
        data(){
            return {
                genderDesc: '',
                dateDesc: '',
                areaDesc: '',
                selectorValue: 0,
                multiSelectorValue: [0, 0],
                areaMltiSelectorValue: [0, 0, 0],
                genderList: ['男','女'],
                dateList: [[1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990],[1,2,3,4,5,6,7,8,9,10,11,12]],
                areaList: [],
                areaInfo: [{
                    "name": "北京",
                    "sub": [{
                        "name": "北京市",
                        "sub": [{
                            "name": "东城区"
                        }, {
                            "name": "西城区"
                        }, {
                            "name": "海淀区"
                        }, {
                            "name": "朝阳区"
                        }, {
                            "name": "丰台区"
                        }, {
                            "name": "石景山区"
                        }, {
                            "name": "昌平区"
                        }, {
                            "name": "通州区"
                        }]
                    }]
                }, {
                    "name": "河南省",
                    "sub": [{
                        "name": "郑州市",
                        "sub": [{
                            "name": "中原区"
                        }, {
                            "name": "金水区"
                        }]
                    }, {
                        "name": "驻马店市",
                        "sub": [{
                            "name": "西平县"
                        }, {
                            "name": "泌阳县"
                        }]
                    }]
                }]
            }
        },
        methods:{
            apiready() {
                var selector = document.getElementById('selector');
                selector.setData({
                    data: this.data.genderList
                });

var multiSelector = document.getElementById('multiSelector');
                multiSelector.setData({
                    data: this.data.dateList
                });

this.initAreaData(this.data.areaMltiSelectorValue);
            },
            initAreaData(values) {
                var component0 = [];
                for (var i=0;i<this.data.areaInfo.length;i++) {
                    component0[i] = this.data.areaInfo[i];
                }
                var component1 = component0[values[0]]['sub'];
                var component2 = component1[values[1]]['sub'];
                var dataList = [component0, component1, component2];
                this.data.areaList = dataList;
                var picker = document.getElementById('areaMltiSelector');
                picker.setData({
                    data: dataList
                });
            },
            selectorChange(e) {
                this.data.selectorValue = e.detail.value;
                this.data.genderDesc = this.data.genderList[this.data.selectorValue];
            },
            multiSelectorChange(e) {
                this.data.multiSelectorValue = e.detail.value;
                this.data.dateDesc = this.data.dateList[0][this.data.multiSelectorValue[0]] + '-' + this.data.dateList[1][this.data.multiSelectorValue[1]];
            },
            areaMultiSelectorChange(e) {
                var value = e.detail.value;
                this.data.areaMltiSelectorValue = value;
                var region = '';
                if (this.data.areaList.length > 0) {
                    for (var i=0;i<value.length;i++) {
                        var index = value[i];
                        var list = this.data.areaList[i];
                        region += list[index].name;
                    }
                }
                this.data.areaDesc = region;
            },
            areaMultiSelectorColumnChange(e) {
                var column = e.detail.column;
                if (column == this.data.areaList.length-1) {
                    return;
                }
                var value = e.detail.value;
                var selectValue = this.data.areaMltiSelectorValue;
                selectValue[column] = value;
                if (column == 0) {
                    selectValue[1] = 0;
                    selectValue[2] = 0;
                } else if (column == 1) {
                    selectValue[2] = 0;
                }
                this.initAreaData(selectValue);
            }
        }
    }
</script>
```

### apploader 安装

https://docs.apicloud.com/Download/download

### wifi真机预览功能的使用

需要同一个wifi下；终端-通过wifi连接设备，会弹出一个二维码；手机端apploader app下悬浮点击扫描此二维码完成连接；点击某个stml文件选择wifi真机预览则可在手机上看到对应页面。

### classwork 3.3

* 完成apploader 的安装，完成手机与电脑的连接；拷贝picker的案例代码，通过wifi真机预览查看其效果。

### picker选项数据的两种定义方式

* setdata;   getElementById  只支持app但是效率更高
* range；支持微信小程序，效率略低

### onchange的使用

* 注意这里的e.detail.value为列表中的顺序

* onchange,onclick,onconfirm(学过的动作)

### classwork 4.1

* 用两种方式完成一个简单选项，（选择项为：大一，大二，大三，大四）一种通过range直接定义，一种通过setdata定义，并在真机中展示并截图上传

### classwork 4.2

* 完成上面选项的动作，比如当选择大三的时候，选项右侧会显示大三，注意避免出现与之前的选项联动
* 完成一个多重选项（[大一....大四]，["大数据"，"电子商务"，"国际贸易"]），并实现选择与显示

### 选项的联动

* range-key

## 微信文档链接

* https://q.qq.com/wiki/develop/miniprogram/component/

## 安卓模拟器的安装

https://www.xyaz.cn/

这个就是一个windows下的安卓系统，安装好启动后，安装apploader，然后通过里面的apploader设置IP和端口，就可以通过电脑实现wifi真机模拟预览了。

## checkbox label checkbox-group radio

https://docs.apicloud.com/apicloud3/#/component/checkbox?index=4&subIndex=11

```js
<template>
    <scroll-view class="main" scroll-y>
        <checkbox-group class="group" onchange={this.checkboxgroupChanged}>
            <label>
                <checkbox checked color="#f0f" value="checkbox_c"/>
                <text>中国</text>
            </label>
            <label>
                <checkbox color="#f0f" value="checkbox_a"/>
                <text>美国</text>
            </label>
        </checkbox-group>
        <checkbox-group class="group" onchange={this.checkboxgroupChanged}>
            <label>
                <checkbox checked icon="../../image/check.png" selectedIcon="../../image/checked.png" value="checkbox_c"/>
                <text>中国</text>
            </label>
            <label>
                <checkbox icon="../../image/check.png" selectedIcon="../../image/checked.png" value="checkbox_a"/>
                <text>美国</text>
            </label>
        </checkbox-group>
    </scroll-view>
</template>
<style>
    .main {
        width: 100%;
        height: 100%;
    }
    .group {
        flex-direction:row;
    }
    label {
        margin: 5px;
    }
</style>
<script>
    export default {
        name: 'test',
        methods:{
            checkboxgroupChanged(e) {
                console.log(JSON.stringify(e.detail.value));
            }
        }
    }
</script>
```

* checkbox定义单个选项
* checkbox-group 整合多个选项
* label用来修饰选项
* JSON.stringify 把js中的变量转换为字符串
* value定义选项对应的值

### classwork5.1

* 完成一个有关爱好的checkbox-group， 选项为["音乐"，"小说"，"游戏"],每当改变是console会输出相应的结果
* 完成有关年级的radio，选项为[大一，大二，大三，大四],每当改变时console会输出结果

## form

https://docs.apicloud.com/apicloud3/#/component/form?index=4&subIndex=16

```js
<template>
    <scroll-view class="main" scroll-y>
        <form onsubmit={this.onsubmit}>
            <checkbox-group class="item" name="checkbox">
                <label>
                    <checkbox checked value="checkbox_c"/>
                    <text>中国</text>
                </label>
                <label>
                    <checkbox value="checkbox_a"/>
                    <text>美国</text>
                </label>
            </checkbox-group>
            <radio-group class="item" name="radio">
                <label>
                    <radio checked value="radio_c"/>
                    <text>中国</text>
                </label>
                <label>
                    <radio value="radio_a"/>
                    <text>美国</text>
                </label>
            </radio-group> 
            <view class="item">
                <text>input: </text>
                <input name="input" placeholder="input"/>
            </view>
            <view class="item">
                <text>textarea: </text>
                <textarea name="textarea" placeholder="textarea"/>
            </view>
            <view class="item">
                <text>switch: </text>
                <switch checked="true" name="switch"/>
            </view>
            <view class="item">
                <text>slider: </text>
                <slider value="40" name="slider"/>
            </view>
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </form>
    </scroll-view>
</template>
<style>
    .main {
        width: 100%;
        height: 100%;
    }
    form {
        margin:5px;
    }
    button {
        margin:5px;
    }
    .item {
        flex-direction:row;
        align-items:center;
        margin: 5px;
    }
</style>
<script>
    export default {
        name: 'test',
        methods:{
            onsubmit(e) {
                console.log(JSON.stringify(e.detail));
            }
        }
    }
</script>
```

### classwork 5.2

* 完成一个按钮，点击按钮，console输出上面两个选择项的结果

## swiper swiper-item

https://docs.apicloud.com/apicloud3/#/component/swiper?index=4&subIndex=19

swiper 定义滑动视图，支持上下或左右滑动。其中只可放置 swiper-item 组件。

注：可以通过 v-for 循环 swiper-item 的方式来实现轮播视图，使用时 v-for 中的 item 需进行更名，如改成 _item。

也可以通过 load 方法实现，App 端建议使用 load 方法，优化性能。

```jsx
<template>
    <scroll-view class="main" scroll-y>
        <text class="title">通过v-for加载</text>
        <swiper class="swiper" autoplay circular indicator-dots indicator-color="#ddd" indicator-active-color="#f0f">
            <swiper-item class="swiper-item" v-for="(_item,_index) in dataList">
                <text class="desc">{_item}</text>
            </swiper-item>
        </swiper>
        <text class="title">通过load方法加载</text>
        <view class="container">
            <swiper class="swiper" id="customSwiper" autoplay circular onchange={this.onchange}>
                <swiper-item class="swiper-item" reusable>
                    <text class="desc">{item}</text>
                </swiper-item>
            </swiper>
            <view class="indicator">
                <view v-for="(item,index) in dataList" class={'indicator-item '+(index==this.data.current?'indicator-item-active':'indicator-item-normal')} ></view>
            </view>
        </view>
    </scroll-view>
</template>
<style>
    .main {
        width: 100%;
        height: 100%;
    }
    .swiper {
        width: 100%;
        height: 200px;
        background-color: blue;
    }
    .swiper-item {
          justify-content: center;
    }
    .title {
        padding: 10px 0;
        font-size: 20px;
    }
    .desc {
        width: 100%;
        text-align: center;
    }
    .container {
        width: 100%;
        height: 200px;
    }
    .indicator {
        flex-direction: row;
        justify-content: center;
        position: absolute;
        width: 100%;
        height: 20px;
        bottom: 8px;
    }
    .indicator-item {
        width: 15px;
        height: 8px;
        margin: 3px;
    }
    .indicator-item-normal {
        background-color: #ddd;
    }
    .indicator-item-active {
        background-color: red;
    }
</style>
<script>
    export default {
        name: 'test',
        data(){
            return {
                dataList: ['item1', 'item2', 'item3', 'item4'],
                current: 0
            }
        },
        methods:{
            apiready() {
                var customSwiper = document.getElementById('customSwiper');
                customSwiper.load({
                    data: this.data.dataList
                });
            },
            onchange(e){
                this.data.current = e.detail.current;
            }
        }
    }
</script>
```

### 两种数据导入方式

* 通过v-for 适合小程序
* 通过load方法，适合app
* 理解load方法后面的v-for的作用
* 前端的判断：(index==this.data.current?'indicator-item-active':'indicator-item-normal')

### classwork 5.3

* 通过v-for 实现一个图片轮播
* 通过load方式实现一个图片轮播

## 创建生鲜电商模板

* 如果模板数量到上上限了请删除以前不用的模板。-删除方法。

### classwork6.1 创建生鲜模板

## api.openWin

https://docs.apicloud.com/Client-API/api#33

* 生鲜模板中的新窗口转跳

### 简单的打开窗口

```jsx
        fnOpenPersonalCenterWin() {
            var userInfo = $kn.getUserInfo();
            if (userInfo && userInfo.id) {
                api.openWin({
                    name: 'personalcenter',
                    url: '../personalcenter/personalcenter.stml'
                });
            } else {
                // 没有登录，打开登录Window
                api.openWin({
                    name: 'login',
                    url: '../login/login.stml'
                });
            }
        },
```

classwork 6.2

* 基于上面的图片轮播，完成动作：点击图片则转跳到特定某个图片展示页面

### 窗口参数传递

* 一个重要的应用场景：点击对应商品图片，转跳到对应商品的详情页。这个过程分为两个关键：1 获取当前标签的对应参数；传递参数给打开的新页面

* 见生鲜电商源码 main页面

```jsx
        fnOpenDetailWin(e) {
            var id = e.currentTarget.dataset.id;
            var wareCount = e.currentTarget.dataset.wareCount;
            
            api.openWin({
                name: 'ware'+id,
                url: '../ware/ware.stml',
                pageParam: {
                    wareId: id,
                    wareCount: wareCount
                },
                animation: {
                    type: "fade"
                }
            });
        },
```

```jsx
        apiready() {
            this.data.swiperHeight = api.winWidth;
            if (api.pageParam.wareCount) {
                this.data.wareCount = api.pageParam.wareCount;
            }
            // 获取商品详情数据
            this.getWareInfo(api.pageParam.wareId);
        },

```

* 从上面的代码来看获取参数是通过e.currentTarget.dataset，通过如下代码我们可以看看currentTarget这个属性有哪些方法？并且尝试了解下不同方法分别获取了哪些标签数据

```jsx
        con1(e){
            //console.log(JSON.stringify(e.currentTarget))
            //console.log(JSON.stringify(e.currentTarget.nodeName))
            //由于js不像python能够那么方便的help，这段代码是非常重要的调试工具
            console.log(JSON.stringify(e.currentTarget.attributes.src));
            for(i in e.currentTarget){
                console.log(i)
            }
        },
```

### classwork 6.3

* 基于6.2题代码，通过参数传递，是的点击不同图片跳转到不同图片的详情页。

## 云数据的使用

* 之前的前端只是躯壳，数据才是灵魂
* 点击创建云数据
* 开启测试服务
* 创建第一个model(数据表)，添加列与行
* 基于云函数开发，点击某个开发好的函数，点击更新启动服务
* 等待服务启动则可以去api调试看默认接口
* 测试默认接口

### classwork6.4

* 在你的应用里开启自己的云服务，创建一个商品表：此表包含商品ID，商品标题，商品图片，商品价格，商品介绍，所属商家ID（列名用英文或是拼音）
* 请往商品表中添加若干数据
* 启动服务，测试api接口

## 前端获取云数据

* https://docs.apicloud.com/Client-API/api#3
* https://docs.apicloud.com/Cloud-API/data-cloud-api
* 网页设计中的增删改查

## api调试方法

classwork 7.1

* 按条件查询某一行记录
* 按条件删除某一行记录
* 按条件更新谋一行记录

### 简单的get方法

```jsx
        methods:{
            btnAction(e){
                api.alert({
                    msg: '触发了点击事件'
                });
                api.ajax({
                    url: 'https://a6185862934135-dev.apicloud-saas.com/api/employees',
                    method: 'get',
                }, function(ret, err) {
                    if (ret) {
                        api.alert({ msg: JSON.stringify(ret) });
                    } else {
                        api.alert({ msg: JSON.stringify(err) });
                    }
                });
            },
        }
    }
```

### classwork 7.2

* 制作一个按钮，点击按钮获取商品表中的数据，在菜单中显示。
* 从新完成image标签中的classwork 2.3，做出多商品展示界面，但是这时商品信息需要通过ajax从数据库中获得

### 简单的post方法

* data：

- 类型：JSON 对象
  - 默认值：无
  - 描述：（可选项）POST 数据，method 为 get 时不传。以下字段除了 values 和 files 可以同时使用，其它参数都不能同时使用。
  - 内部字段：

```js
  {
      stream："",  //以二进制流的方式提交文件。stream为文件路径（字符串类型），支持绝对路径，以及fs://、cache://、box://等文件路径协议。可直接使用其他端API返回的结果，如api.getPicture回调的ret.data等
      body："",    //以纯文本的方式提交数据，body支持字符串及JSON对象（若要校验数据完整性，需将JSON对象转换成字符串再传入）。提交JSON对象时，需设置application/json类型的Content-Type头
      values：{},  //以表单方式提交参数（JSON对象）, 如 {"field1": "value1", "field1": "value2"} (直接传JSON对像.)
      files：{}    //以表单方式提交文件，支持多文件上传（JSON对象）,如 {"file": "path"}，也支持同一字段对应多文件：{"file":["path1","path2"]}。文件路径，支持绝对路径，以及fs://、cache://、box://等文件路径协议。可直接使用其他端API返回的结果，如api.getPicture回调的ret.data等.
  }
  ```

```jsx
// 表单方式提交数据或文件
api.ajax({
    url: 'http://192.168.1.101:3101/upLoad',
    method: 'post',
    data: {
        values: {
            name: 'haha'
        },
        files: {
            file: 'fs://a.gif'
        }
    }
}, function(ret, err) {
    if (ret) {
        api.alert({ msg: JSON.stringify(ret) });
    } else {
        api.alert({ msg: JSON.stringify(err) });
    }
});

// 提交JSON数据
api.ajax({
    url: 'http://192.168.1.101:3101/upLoad',
    method: 'post',
    headers: {
        'Content-Type': 'application/json;charset=utf-8'
    },
    data: {
        body: {
            name: 'haha'
        }
    }
}, function(ret, err) {
    if (ret) {
        api.alert({ msg: JSON.stringify(ret) });
    } else {
        api.alert({ msg: JSON.stringify(err) });
    }
});
```

＊　注意value与body的区别

### classwork7.3

* 制作一个按钮，点击按钮往item表中提交一份数据
* 制作一个form表单，通过表单提交数据，并写入数据库（https://docs.apicloud.com/apicloud3/#/component/form?index=4&subIndex=16）

## 条件查询与删除

* https://docs.apicloud.com/Cloud-API/data-cloud-api

条件过滤(Where filter)

在过滤器指定一组逻辑条件匹配,类似于一个where子句的SQL查询

* 注意get下是不能通过data传数据的，只能通过改变url实现

* 注意和调试界面参数对应关系

Examples

```js
GET /mcm/api/cars?filter={"where":{"carClass":"fullsize"}}//查询使用
GET /api/items?where={"itemid":"3"}'//删除与更新使用
```

### classwork 8.1

* 更改之前的按钮，点击按钮只获取特定条件下的商品（比如itemid==3）
* 点击按钮删除特定条件下的商品
* 点击按钮更新特定条件下某商品的某特征

## 组件开发

https://docs.apicloud.com/apicloud3/#/components-guide/js-define-component?index=5&subIndex=2

```html
<template>  
    <view class='header'>
        <text>Hello APP</text>
    </view>  
</template>  
<script>
    export default {  
        name: 'api-test'
    }
</script>
<style scoped>
    .header{
        height: 45px;
    }
</style>
```

```html
<template>  
    <view class='header'>
        <text>{this.data.title}</text>
    </view>  
</template>  
<script>
    export default {  
        name: 'api-test',
        data(){
            return {
                title: 'Hello APP'
            }
        }
    }
</script>
<style scoped>
    .header{
        height: 45px;
    }
</style>
```

```html
<template>  
    <view class="app">  
        <img src="./assets/logo.png" />  
        <api-test></api-test> 
    </view>  
</template>
<script>
    import './components/api-test.stml'  
    
    export default {  
        name: 'app-index',  
        data: function () {  
            return {
                title: 'Hello APP'
            }
        }  
    }  
</script>  
<style>  
    .app {   
        text-align: center;  
        margin-top: 60px;  
    }  
</style>
```

### 向子组件传值

向子组件传值采用 props 的方式，这里以一个示例来进行说明。

定义子组件，在 props 里面注册一个 title 属性：

```html
// api-test.stml:

<template>
    <text>{title}</text>
</template>
<script>
    export default {
        name:'api-test',
        props:{
            title: String
        }
    }
</script>
```

```html
// app-index.stml:

<template>  
    <view>  
        <api-test title="Hello App!"></api-test> 
    </view>  
</template>
<script>
    import './components/api-test.stml'  
    
    export default {  
        name: 'app-index'
    }  
</script>
```

### classwork 8.2

* 完成一个最简单的组件，并引用它
* 了解生鲜电商的头部导航栏组件，模仿其组件，完成一个带参数的组件：手机头部导航栏，中间字符通过参数传入，并引用它

## 机房本地保存问题

## 电商案例研究

### classwork 9.1

* 模仿《生鲜电商》利用之前的云数据模型，完成其商品列表

### classwork 9.2

* 完成某个商品详情页，详情页数据通过get方法调取某个特定itemid的商品

### classwork 9.3

* 点击商品列表的某个商品，则跳转到此商品的详情页

## 用户注册与登录

### classwork 10.1

* 在云数据中导入生鲜配送的模型，并导入user表中的远程函数，
* 创建一个用户注册界面（无需链接数据库）

### classwork 10.2

* 基于注册界面，实现用户注册功能（数据能写入user表）
* 实现注册功能的容错

### classwork 10.创建一个login界面

* 实现登录功能
* 实现登录的容错

## 期末大作业

基于你的想法和apicloud完成一个app

截止时间1月6日

形式：提交项目源代码以及一个说明的word文件，说明文件包含页面截图与功能说明，以及数据表展示有说明。

要求

1，必须包含5个以上的页面。（20分）

2，需要建立数据模型，至少两张数据表。（20分）

3，在前端用到了数据的增删改查等多种调取方式。比如用户注册等（20分）

4，页面前端元素内容丰富。比如，是否使用组件，是否有swaper，是否有picker等（20分）

5，app富有创意。（20分）

每项满足基本要求一般给（12分）多加分少减分

不要抄袭，雷同作业都记零分。

### classwork 11.1

* 创建一个订单页面
* 通过商品详情的订购按钮跳转到订单页（暂时不用传递数据过去）

### classwork 11.2

* 在商品详情页实现点击加减完成商品购买量的数据设定（需要重新定义数据传递才行）
* 点击购买后把商品详情与购买量传递到订单页，并计算出订单总金额

### classwork 11.3

* 实现转跳订单页时，需要判断是否登录，如果没登录跳转到登录页
* 创建一个用户页，并在用户页实现退出登录按钮

### classwork 12.1

* 在个人信息页显示个人ID
* 构建订单模型（表），包含商品各项特征，总价格，总购买量，用户id，购买状态等信息

### classwork 12.2

* 在详情页点击“立即购买”，则会在订单表中提交一条订单记录，状态为“未付款”
* 在订单页点击“确认”，则会把对应订单表中的订单状态更新为“已经付款”

### classwork 12.3

* 构建某个用户的所有订单页展示, 可以通过个人信息页中的所有订单点入

王澎/零基础移动端系统设计与开发

简介

发行版

贡献者

近期动态

王澎/零基础移动端系统设计与开发 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

王澎/零基础移动端系统设计与开发