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

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

作者: 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