# first-weapp-0213

**Repository Path**: johnkuo/first-weapp-0213

## Basic Information

- **Project Name**: first-weapp-0213
- **Description**: first-weapp-0213first-weapp-0213
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-13
- **Last Updated**: 2023-02-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# 小程序

```
.wxml, .wxss, .json, .js
```
## 全局
- app.js    => 全局js文件
- app.json  => 全局配置文件
- app.wxss  => 全局css文件

## 页面级
- index.js    => 页面js文件
- index.json  => 页面配置文件
- index.wxss  => 页面css文件
- index.wxml  => 页面



## WXML模板使用
1. `<import src="模板路径"/> + <template is="模板名字" data="{{ t: 数据 }}"/>`
```
<!-- 定义模板 -->
<template name="IF">
    <view wx:if="{{ t === 'A' }}">type a!</view>
    <view wx:elif="{{ t === 'B' }}">type b!</view>
    <view wx:elif="{{ t === 'C' }}">type c!</view>
    <view wx:else>Not A/B/C!</view>
</template>

<!-- 使用模板 -->
<import src="../../template/common.wxml"/>
<template is="IF" data="{{ t: type }}"/>
```
2. `<include src="模板路径"/>`
```
<!-- 定义模板： 写纯wxml片段 -->
<button type="primary" bindtap="handleGet">获取msg</button>
<block wx:for="{{ list }}" wx:for-index="ind" wx:for-item="it" wx:key="*this">
    <view>{{ ind * 10 }}.</view>
    <view>{{ it.text }}</view>
</block>
<button type="primary" bindtap="handleSet">设置msg</button>

<!-- 使用模板：相当于是拷贝到 include 位置 -->
<include src="../../template/list.wxml"/>
```

## 自定义组件
### 定义组件
```
// index.json
{
  "component": true
}

// index.wxml
<view class="counter">
    <button type="default" size="mini">-</button>
    <text>{{counter}}</text>
    <button type="primary" size="mini">+</button>
</view>
<view class="after">
    <slot></slot>
</view>

// index.wxss
.counter {
    padding: 20rpx;
    background-color: deepskyblue;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

//index.js
Component({
    data: {
        counter: 0
    },
})
```
### 使用组件
```
// 注册组件  页面.json 或 app.json
{  
  "usingComponents": {
    "my-counter": "/components/my-counter/index"
  }
}
// 使用
<my-counter></my-counter>
```