小程序-开发组件及一些小规范

ps：函数是一个可复用的最小单元

1. 新建一个组件文件夹components

• 在components再新建组件 like文件夹
• 右键新建组件 index

2. 在页面里引用组件

• 修改页面json文件
  添加usingComponents内容
  在页面进行注册组件时需要制定一个规范
  v- 或者其他规范都可以

{
  "usingComponents": {
    "v-like":"/components/like/index"
  }
} 

3. 相对路径和绝对路径

相对路径：根据页面所在层级../ 一直返回到需要引用的层级下
绝对路径：加 / 表示从根目录开始

// 相对路径
"v-like":"../../components/like/index"
// 绝对路径
"v-like":"/components/like/index"

4. 编写组件

• 组件中写image标签时，如果不设置宽高，那么就会使用默认宽高300px, 225px

5. 小程序尺寸单位与设计原则 （设计稿以iphone6 750像素为例）

• 问题 为什么根据设计图提供的图片设置宽高后，图片尺寸还是过大
• px rpx
  px 像素单位
  rpx 小程序像素单位（可以自适应）
  当系统拿到的图片尺寸是32px，28px
  用px设置时：width：32/2px height: 28/2 px;
  用rpx设置时：width：32rpx height：28px；
• 大多数情况可以用rpx
• 字体可以用px （其他的根据情况选择）

6. 如何给全局进行一些样式设定

• 在app.wxss中给page设置样式
  小程序自动会给整个项目页面添加page标签用来包含所有内容。

page {
  font-family: "PingFangSC-Thin";
  font-size: 32rpx;
}

• 组件会继承全局设置的样式
  可以被组件继承的样式不多，有：font-size color
• 减少在全局样式文件中添加样式，防止污染组件。

7.组件的宽度固定还是自适应

当用view标签时，默认是块状元素，占一行。
用flex来布局时，效果是占一整行，为了处理这个问题
可以考虑固定宽度，或者用inline-flex来消除块级影响。

8.数据来源的三种途径

• wxml ：直接写在wxml上
• js-》wxml：写在js里，然后传给wxml
• 服务器-》js-》wxml：先从服务器请求数据，然后通过js处理传到wxml

9.组件的封装性，开放性及粒度

• 封装性
  不需要从组件外传入到组件的数据，一般直接封装。这类属性直接放入properties
  properties是个JavaScript对象，可以指定三个属性type,value,observe
  type(类型)：Number,String,Object
  value(初始值): 初始值
  observer(函数): function(){
  }
• 开放性
  思考哪些应该封装在内部，哪些是需要开放出来的

// 封装性体现
properties: {
    isLike:{
      type: Boolean,
      value: false,
      observer: function () {
        
      }
    },
    likeImg:{
      type: String,
      value: 'images/like.png',
      observer: function () {
        
      }
    },
    noLikeImg:{
      type: String,
      value: 'images/like@dis.png',
      observer: function () {
        
      }
    }
  },
// 开放性体现
data: {
    isLike: true,
    likeCount: 99,
    likeImg: 'images/like.png',
    noLikeImg: 'images/like@dis.png'
  },

• 粒度
  非常简单的功能，非常复杂的功能