小程序学习第三天（组件，导航，自定义组件，组件通信，api）

容器组件

1.滑动视图容器

```html
<!-- 滑块视图容器 默认有150px高度
        swiper内部必须嵌套swiper-item -->
<view class="swiper">
    <swiper autoplay interval="2000" circular previous-margin="50" next-margin="50" bindchange="swiperchange">
        <swiper-item>
            <image src="/imgs/01b93faa92360794.jpg!cr_1053x420_4_0!q70.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image src="/imgs/94fe6bb1060a6947.jpg!cr_1053x420_4_0!q70.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image src="/imgs/01b93faa92360794.jpg!cr_1053x420_4_0!q70.jpg"></image>
        </swiper-item>
    </swiper>
    <view class="dots">
        <view class="{{index==active?'active' :''}}" wx:for="{{3}}"></view>
    </view>
</view>

<swiper autoplay interval="1000" circular vertical style="height: 100rpx;line-height: 100rpx;">
    <swiper-item>182****1234刚刚领取了800元现金</swiper-item>
    <swiper-item>152****4321刚刚领取了800元现金</swiper-item>
</swiper>
```

```js
    data: {
        active:0
    },
    swiperchange(e){
        console.log(e);
        this.setData({
            active:e.detail.current
        })
    },

```

**tips1**

# 三、表单组件

**input输入框/radio/radio-group单选项目及组\checkbox/checkbox-group多选项目及组\switch开关选择器\button按钮组件\form表单组件**

代码案例

wxml

```html
<!--pages/form/form.wxml-->

<view class="contain">
    <form bindsubmit="submit">
        <view class="row">
            <view class="tit">手机号：</view>
            <!-- type 键盘响应类型 -->
            <input type="text" model:value="{{phone}}" placeholder="请输入手机号" placeholder-style="color:#f00" bindinput="input" name="phone" />
        </view>
        <view class="row">
            <view class="tit">密码：</view>
            <input type="text" password name="pass" />
        </view>

        <view class="row">
            <view class="tit">性别：</view>
            <radio-group bindchange="radio" name="sex">
                <radio value="m" checked>男</radio>
                <radio value="w" disabled>女</radio>
                <radio value="s" color="orange">保密</radio>
            </radio-group>
        </view>
        <view class="row">
            <view class="tit">爱好：</view>
            <checkbox-group bindchange="checkbox" name="hobby">
                <checkbox value="eat" checked>吃饭</checkbox>
                <checkbox value="sleep" disabled>睡觉</checkbox>
                <checkbox value="qiao" color="orange">敲代码</checkbox>
            </checkbox-group>
        </view>

        <picker mode="region" bindchange="region" name="region">
            <view>地区选择器</view>
        </picker>
        <view class="row">您选择的地区是：{{con}}</view>

        <picker mode="selector" range-key="name" range="{{[{id:100,name:'小米'},{id:101,name:'黑米'}]}}" bindchange="region">
            <view>普通选择器</view>
        </picker>

        <button size="mini" type="primary" loading form-type="submit">提交</button>
        <button size="mini" type="warn"  plain form-type="reset">重置</button>

        <button size="mini" type="primary" loading open-type="contact">联系客服</button>

    </form>
</view>
```

js：

```js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        phone:"",
        con:""
    },
    input(e){
        console.log(e);
    },
    radio(e){
        console.log(e);
    },
    checkbox(e){
        console.log(e);
    },
    region(e){
        console.log(e);
        this.setData({
            con:e.detail.value
        })
    },
    submit(e){
        console.log(e);
    },
```

**总结**

```css
    双向数据绑定：model:value  
    
    总结表单提交步骤：
        1.给button  添加 form-type为submit
        2.给form表单添加 bindsubmit
        3.给每一个组件添加name作为key
```

**tips2**

# 四、导航

## 1.导航组件（声明式导航）

navigator--a

**导航到普通页面**

```html
<!-- 导航组件 -->

<!-- 导航到普通页面  
        navigate 跳转到普通页面，不能跳转到tabbar 保留之前的页面10层 -->
<navigator open-type="navigate" url="../form/form?id=100&name=小米">
    <button>跳转到普通页面</button>
</navigator>

<!-- redirect  跳转到普通页面，不能跳转到tabbar 关闭之前的页面 -->
<navigator open-type="redirect" url="../form/form">
    <button>跳转到普通页面</button>
</navigator>

```

**后退导航**

```html
<navigator open-type="navigateBack" delta="1">
    <button>返回</button>
</navigator>

```

**导航到tab页面**

```html
<!-- switchTab 跳转tabbar页面  关闭非tabbar页面 不能携带参数 -->
<navigator open-type="switchTab" url="../index/index">
    <button>跳转到tabbar页面</button>
</navigator>

<!-- reLaunch 关闭所有页面  只打开目标页面-->
<navigator open-type="reLaunch" url="../index/index">
    <button>跳转到tabbar页面</button>
</navigator>

```

**导航到任何页面**

```html
<navigator open-type="reLaunch" url="../form/form">
    <button>跳转到tabbar页面</button>
</navigator>

```

## 2.路由API（编程式导航）

```html
<button bindtap="fun">api跳转</button>
```

```js
fun(){
        // 调用api
        wx.navigateTo({
          url: '../form/form?id=200',
        })
    },
```

## 3.导航传参

直接在url路径后直接==？ &==拼接参数

```html
<navigator open-type="navigate" url="../form/form?id=100&name=小米">
    <button>跳转到普通页面</button>
</navigator>
```

## 4.接收导航传参

在目标页面on/load生命周期接参

```js
    onLoad(option){
        console.log(option);
    }
```

## 5.跳转其他小程序

```html
wx8fc369471215e8ae

<navigator target="miniProgram" app-id="wx8fc369471215e8ae" version="release">
    <button>跳转到其他小程序</button>
</navigator>

```

# 五、自定义组件 ( 了解流程 )

## 1.概述

小程序支持简洁的组件化编程，开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；自定义组件在使用时与基础组件非常相似

## 2.创建自定义组件

```
1.可以先创建文件夹components
2.在创建组件同名文件夹my-button
    然后右键-新建component
```

## 3.组件引用与使用 

my-button.wxml

```html
<view bindtap="fun" class="{{size}} {{round?'br':''}}" style="background-color: {{color}};">
    <slot name="left"></slot>
    
    <slot name="center"></slot>
</view>
```

局部注册引用  使用组件的页面.json文件

```json
{
    "usingComponents": {
        "my-button":"/components/my-button/my-button",
        "my-sum":"/components/my-sum/my-sum"
    }
}
```

全局注册引用  app.json文件

```json
{
    "pages":[],//...省略]
    "usingComponents": {
        "my-button":"/components/my-button/my-button",
        "my-sum":"/components/my-sum/my-sum"
    }
}
```

## 4.组件样式

```
 注意事项:
     选择器必须使用class即可
   
   除了注意事项，其他的都和页面wxss表现一致
```

## 5.数据与方法 

```
1.初始化数据也是存放到data中，使用 {{}}进行渲染
2.自定义事件 需要放到methods中，
    设置data，及获取data中的数据，和页面的js文件保持一致即可
```

## 6.properties组件对外开放属性 

组件的对外属性，用来接收外界传递到组件中的数据,组件的 `properties` 和 `data` 的用法类似，它们都是可读可写的，只不过：

- `data` 更倾向于存储组件的私有数据
- `properties` 更倾向于存储外界传递到组件中的数据

properties属性不需要在自定义组件内部进行修改，是通过组件调用时传递进来的！！！ 属性的类型可以为 `String` `Number` `Boolean` `Object` `Array` 其一，也可以为 `null` 表示不限制类型。 

## 7.组件通信

my-button.js内定义：

```js
// Component构建组件
Component({
    options:{
        multipleSlots:true
    },
    /**
     * 组件的属性列表，props，接收外界传递的参数
     */
    properties: {
        size:{
            type:String,
            value:"small"
        },
        color:{
            type:String,
            value:"#ccc"
        },
        round:{
            type:Boolean,
            value:false
        }
    },

    /**
     * 组件的初始数据，组件内部私有数据的定义
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {
        fun(){
            //detail 对象
            let option = {
                value:{
                    size:this.properties.size
                }
            }
            this.triggerEvent('aa',option)
        }
    }
})
```

使用组件的页面使用：

```html
<my-button class="child" size="big" color="red" round="{{true}}" bindaa="fun"></my-button>

fun(e){
    console.log(e.detail)
}
```

**tips3**

## 8.slot插槽使用 

### 1）默认插槽

子组件 定义

```html
<view bindtap="fun" class="{{size}} {{round?'br':''}}" style="background-color: {{color}};">
    <slot></slot>
</view>
```

父组件 页面使用

```html
<my-button class="child" size="big" color="red" round="{{true}}" bindaa="fun">提交</my-button>
```

### 2）多个插槽

定义：

子组件 首先开启配置

```js
// Component构建组件
Component({
    options:{
        multipleSlots:true
    },
```

子组件 定义：

```html
<view bindtap="fun" class="{{size}} {{round?'br':''}}" style="background-color: {{color}};">
    <slot name="left"></slot>
    
    <slot name="center"></slot>
</view>
```

父组件 页面使用

```html
<my-button class="child" size="big" color="red" round="{{true}}" bindaa="fun">

    <text slot="center">提交</text>
    <text slot="left">返回</text>
    
</my-button>
```

## 9.observers 数据监听器 

```js
    data: {
        a:0,
        b:0,
        sum:0,
        obj:{
            name:"123"
        }
    },
    observers:{
        "a,b":function(a,b){
            // console.log(a,b);
            this.setData({
                sum:a+b
            })
        
        },
        "**":function(a){
            console.log(a);
        },
        "obj.name":function(a){
            console.log(a);
        }
    },

    /**
     * 组件的方法列表
     */
    methods: {
        add(){
            this.setData({
                a:++this.data.a
            })
        }
    }
```

## 10.组件的生命周期

- 组件实例刚刚被创建好时， `created` 生命周期被触发。此时还不能调用 `setData` 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
- 在组件完全初始化完毕、进入页面节点树后， `attached` 生命周期被触发。此时， `this.data` 已被初始化完毕。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
- 在组件离开页面节点树后， `detached` 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 `detached` 会被触发。

**tip4**

# 六、API

## 1.API概述

API（Application Programming Interface，应用程序接口）是一些预先定义的接口（函数），目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力。小程序提供主要的API:小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

### 1.1api分类

```
1.监听APi 
    以on开头
2.同步API
    以Sync结尾，执行结果 以函数返回值获取
3.异步API
    执行结果在回调函数中进行获取，也可以支持promise形式
    
    部分接口如 downloadFile, request, uploadFile, connectSocket, createCamera（小游戏）本身就有返回值， 它们的 promisify 需要开发者自行封装。
```

## 2.网络

## 2.网络

**语法**

```js
wx.request()
```

### 1)get/post

小程序的网络数据请求，不存在跨域问题，但是必须在小程序后台管理系统--开发设置--服务器域名配置进行配置，而且必须是https开头，同时localhost，127.0.0.1不支持配置；

在开发过程中，可以在开发者工具中--详情--本地设置--不检验合法域名（对号勾上）

```js
    wx.request({
            url:"https://route.showapi.com/1700-1",
            method:"post",
            data:{
                showapi_appid: 100079,
                showapi_sign: '9e038adb10ef4cf68db6bc8d0feed220'
            },
            timeout:60000,
            header:{
                "content-type":"application/x-www-form-urlencoded"
            },
            success:(res)=>{
                console.log(res)
            },
            fail:(err)=>{

            }
        })
```

### 2)封装网络请求

页面.js

```js
import http from "../../utils/http"
// console.log(http);

Page({
    async onShow() {
        let res = await http({
            url: "https://route.showapi.com/1700-1",
            data: {
                showapi_appid: 100079,
                showapi_sign: '9e038adb10ef4cf68db6bc8d0feed220'
            }
        })
        console.log(res);
```

模块http.js

```js
// 管理网络请求

import global from "./global"
let http = (option = {}) => {
    
    return new Promise((resolve, reject) => {

        wx.request({
            url: global.baseUrl + option.url,
            data: option.data || {},
            method: option.method || "GET",
            header: option.header || {
                "content-type": " application/json"
            },
            timeout: option.timeout || 60000,
            success: res => {
                resolve(res)
            },
            fail: err => {
                reject(err)
            }
        })
    })
}

export default http
```

模块global.js

```js
// 管理基础域名
// let baseUrl = "http://localhost:3000"
 
let baseUrl = "https://route.showapi.com"

export default {baseUrl}
```

# 七、课后作业

```
作业
    (1)当天课上代码至少练习1遍
    (2)结合网络api 底部选择器 路由导航实现   故事分类、列表页展示效果
    参考基础作业2小图及基础作业2小视频效果效果，结合故事接口文档，完成对应的效果
    参考知识点：
            网络api
            wxml、wxss语法
            
接口地址：https://www.showapi.com/apiGateway/view?apiCode=1700
    付费接口，需要会员账号
    系统参数（调用第三方接口都需要用到）
        showapi_appid: 100079
        showapi_sign: '9e038adb10ef4cf68db6bc8d0feed220'
  
```