美文网首页前端开发那些事儿
小程序-开发组件及一些小规范

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

作者: JX灬君 | 来源:发表于2021-07-30 15:21 被阅读0次

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'
  },
  • 粒度
    非常简单的功能,非常复杂的功能

相关文章

网友评论

    本文标题:小程序-开发组件及一些小规范

    本文链接:https://www.haomeiwen.com/subject/mlvqvltx.html