# MiniApp

**Repository Path**: ikulm/mini-app

## Basic Information

- **Project Name**: MiniApp
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-27
- **Last Updated**: 2021-10-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MiniApp

#### 小程序学习笔记 文档[https://developers.weixin.qq.com/miniprogram/dev/component/text.html]


#### 一、布局

 1. 水平居中、垂直居中

```css
/* 弹性布局设置居中 */
.post_like{
  display: flex;
  flex-direction: row;
  justify-content: center;/*弹性布局水平居中*/
  align-items: center;/*弹性布局垂直居中*/
}
```

 2. 设置列表分割线

```css
border-top: 1px solid #ddd; /*上边线灰色*/
```

 3. 外部样式：自定义组件有些需要修改的样式交由外部使用者重新定义。
 步骤：在自定义组件中定义好样式名
 

```javascript
Component({

  /**
 1. 外部样式类名
   */
  externalClasses:['f-class'],
  /**
 2. 组件的属性列表
   */
  properties: {

  },
```
![在这里插入图片描述](https://img-blog.csdnimg.cn/1cc8b941996e4a8a9d42acd2fe07b798.png) 

使用：外部调用者重新编写需要的样式  
![在这里插入图片描述](https://img-blog.csdnimg.cn/434eb8e8ab74449e87915806e6c836d3.png)  
注意：外部样式可能会与原有的样式有相同的属性名而不起作用，需要提高外部样式的优先级  

![在这里插入图片描述](https://img-blog.csdnimg.cn/b57d648f886e49d7a8d38c02032b5856.png)

 4. 网格布局

```css
/**
*网格布局
*/
.search-container{ 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 30rpx 28rpx;/**上下 左右*/
  justify-content: space-between;
}

/*
*保证网格布局的时候不足一样出现两个分部在屏幕两边
*/
.search-container::after{
  content:'';
  width:200rpx;/*等于itemview的宽度*/
}
```

#### 二、列表渲染

 1. 列表: 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
 使用 **wx:for-item** 可以指定数组当前元素的变量名
	使用 **wx:for-index** 可以指定数组当前下标的变量名

```javascript
	<block wx:for="{{dataList}}" wx:for-index="idx" wx:for-item="item">
	   <text class="post_date">{{item.date}}</text>
	</block>
```
#### 三、模块导出导入
 

 1. 导出
 

```javascript
// module.exports = {
//   localData:localData
// }
	export{
	  localData
	}
```

 2. 导入：需要的页面顶部

```javascript
//导入本地数据，require必须相对路径
// var postData = require("../../data/data.js")
// console.log(postData)
	import {localData} from '../../data/data.js'
	console.log(localData)
```
#### 四、本地数据缓存

 1. 同步存储和读取（小数据：用户偏好设置等）
 	

```javascript
	//存储
   	wx.setStorageSync('token','token_123')
   //读取
    let token = wx.getStorageSync('token')
    //删除
    wx.removeStorageSync('token')
```

 2. 异步存储和读取
 	

```javascript
	// 异步方式存储和获取数据比较大时，总的本地存储不超过10M,单个不超过1M
    wx.setStorage({
      key:"image",
      data:"这是base64格式的图片数据"
    })
    //异步读取方式
    wx.getStorage({
      key:'image',
      success(event){
        console.log(event.data)
      }
    })
```

#### 五、回调

 1. success(result)回调函数
 2. 回调结果 await 和async（修饰await所在函数上） 结合

```javascript
  async onClickShare(event){
    const result = await wx.showActionSheet({
      itemList: ['分享到qq','分享到朋友圈','分享到'],
    })
    //处理点击回调结果 await 和async
    console.log(result)
  },
```
#### 六、自定义组件

 1. 新建Component
 2. 自定义组件属性，包含属性名、类型、默认值
 	

```javascript
  /**
 1. 组件的属性列表
   */
  properties: {
    text:{
      type:String,//属性类型
      value:"123"//属性默认值
    },
    bean:Object,//任意类型的属性，可设置一个js对象
  },
```
 3. 外部引用，需要的页面配置文件json中引用【名称：组件路径】

```javascript
  "usingComponents": {
    "l-icon":"/miniprogram_npm/lin-ui/icon/index",
    "m-post":"/widget/post/index"
  },
```

 4. 使用，根据3定义的组件名称，使用即可，同时可设置1定义的属性

#### 七、view绑定自定义属性
通过data-[属性名]，属性名：一般小写“-”连接，在js中驼峰名称引用，例如：

 1. 定义

```javascript
  <!--data-post-id 自定义属性postId -->
  <view data-post-id="{{item.postId}}" bindtap="onItemClick" class="post_container">
```

 2. 获取
 

```javascript
  onItemClick(event){
    //获取绑定view的自定义属性
    let detailId = event.currentTarget.dataset.postId
    console.log(detailId)
    wx.navigateTo({
      url: '/pages/postDetail/postDetail?pId='+detailId,
    })
  },
```
#### 八、自定义事件
一般在自定义组件中，内部的点击事件等需要抛出给外部，这时就需要自定义事件。

 1. 定义（组件内部js）

```css
 /**
 1. 组件的方法列表
 2. 组件的开发者不应该决定
 3. 点击之后做什么事情 不应该
 4. 组件的使用者
 5. 自定义事件
   */
  methods: {
    onClick(params) {
      const pId = this.properties.item.postId
      // triggerEvent函数两个参数：（函数名，detail{需要的参数以对象的新式传递}）
      this.triggerEvent('postclick',{
        pid:pId
      })
    },
  }
```
 2. 使用(外部调用)

```javascript
<m-post bind:postclick="onItemClick" item="{{item}}"></m-post>
```

 3. 监听回调，并获取参数

```javascript
  onItemClick(event){
    //获取绑定view的自定义属性
    let detailId =  event.detail.pid
  },
```