【小程序】基础笔记

一、布局

1. 水平居中、垂直居中

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

2. 设置列表分割线

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

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

Component({

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

  },

使用：外部调用者重新编写需要的样式

注意：外部样式可能会与原有的样式有相同的属性名而不起作用，需要提高外部样式的优先级，

4. 网格布局

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

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

5. 文字超出显示省略号（前提是固定宽度）

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;

二、列表渲染

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

	<block wx:for="{{dataList}}" wx:for-index="idx" wx:for-item="item">
	   <text class="post_date">{{item.date}}</text>
	</block>

三、模块导出导入

1. 导出

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

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

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

四、本地数据缓存

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

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

2. 异步存储和读取

	// 异步方式存储和获取数据比较大时，总的本地存储不超过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所在函数上） 结合

  async onClickShare(event){
    const result = await wx.showActionSheet({
      itemList: ['分享到qq','分享到朋友圈','分享到'],
    })
    //处理点击回调结果 await 和async
    console.log(result)
  },

六、自定义组件

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

  /**
 1. 组件的属性列表
   */
  properties: {
    text:{
      type:String,//属性类型
      value:"123"//属性默认值
    },
    bean:Object,//任意类型的属性，可设置一个js对象
  },

3. 外部引用，需要的页面配置文件json中引用【名称：组件路径】

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

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

七、view绑定自定义属性

通过data-[属性名]，属性名：一般小写“-”连接，在js中驼峰名称引用，例如：

1. 定义

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

2. 获取

  onItemClick(event){
    //获取绑定view的自定义属性
    let detailId = event.currentTarget.dataset.postId
    console.log(detailId)
    wx.navigateTo({
      url: '/pages/postDetail/postDetail?pId='+detailId,
    })
  },

八、自定义事件

一般在自定义组件中，内部的点击事件等需要抛出给外部，这时就需要自定义事件。

1. 定义（组件内部js）

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

2. 使用(外部调用)

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

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

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