Chaoszhu'Blog

Appearance

小程序基本知识 ​

分包加载 ​

分包加载

  • 优化小程序首屏加载，扩大小程序打包后代码超过 2M 的限制.【分包后总大小不能超过 16M】

app.json 中的 pages 第一项代表小程序的初始页面 ​

pages 的配置

  • 数组的第一项代表小程序的初始页面（首页）

project.config.json ​

配置文件说明

  • 更换电脑开发只需将该文件 copy 到根目录即可同等配置

默认图片宽高 ​

  • 小程序中插入图片后默认宽高是：width: 300px; height: 225px;

可以直接在标签中使用 style 书写内联样式 ​

使用 \n 可以做到换行 ​

px 与 rpx ​

  • rpx 不同分辨率下自适应
  • px 是一个固定的单位，逻辑分辨率，在不同分辨率下不会自适应

rpx 与 px 何时用？ ​

  • 设置图片宽高时一般用 rpx
  • 设置文字大小，内外边距时一般用 px

设计图一般是 750px 的。 ​

image

  • pt 为逻辑分辨率，px 为物理分辨率
  • 1 个 pt 可以是 1 个 px 构成，也可以是 2 个或者 3 个。理论 1 个 pt 中所包含的 px 越多，屏幕越清晰。但是超过@3x 人眼就没法识别了
  • iPhone6 下是 1 个 pt 由 2 个 px 构成 ，在 iPhone6 下的换算关系：1px = 1rpx = 0.5pt

为什么要用 iPhone6 的物理分辨率(750*1334)来做设计图? ​

  • iPhone6 下：1px = 1rpx // 因为更好换算，官方也推荐
  • iPhone6 Plus 下：1px = 0.6rpx

为什么 iPhone6 下 1px = 1rpx？ ​

  • 微信官方就是参照 iPhone6 这么设计的

小程序中没有 document 对象，因此不能使用 document.getElementByxxx 来操作 DOM。 ​

小程序是单向数据绑定 ​

  • 双向需要通过事件的方式做到

页面实例与组件实例的区别 ​

页面实例

  • 具备初始项：data、options、生命周期钩子、自定义方法等。
  • Page 实例应该是 new 出来的，因此可以通过 this 访问。但是注意，文档没有 methods 这个选项。如果写methods，只能通过普通实例的方式访问到，即this.methods.xxx
  • 应该是没有像 Vue 做一层代理，因此 data 数据需要通过 this.data.xxx 来访问
js
// Page实例
Page({
	data: {
		text: 'This is page data.',
	},
	onLoad: function(options) {
		// Do some initialize when page load.
	},
	onShow: function() {
		// Do something when page show.
	},
	onReady: function() {
		// Do something when page ready.
	},
	// ... 省略部分生命周期
	// Event handler.
	viewTap: function() {
		this.setData(
			{
				text: 'Set some data for updating view.',
			},
			function() {
				// this is setData callback
			}
		)
	},
	customData: {
		hi: 'MINA',
	},
})
data

组件实例

  • 具备初始项：properties(props)、data、observers(watch)、methods、behaviors(mixins)、options、生命周期钩子等。
  • 在组件中第一层中自定义方法通过this.xxx()无法访问调用。在methods中声明的方法，可以直接通过this.xxx()调用。
  • 在组件中this.properties === this.data为true，所以访问组件内数据都可以通过this.data.xxx访问到
js
Component({
  behaviors: [], // 混入内容，相当于Vue的mixins
  // 属性定义
  properties: {
    myProperty2: String, // 简化的定义方式
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    lastLeaf: {
      type: Number,
      optionalTypes: [String, Object], // 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种
      value: 0
    },
    min: {
      type: Number,
      value: 0,
      observer: function(newVal, oldVal) {
        // 属性值变化时执行, 比写在外层的observer性能更好
      }
    }
  }
  },
  data: {}, // 私有数据，可用于模板渲染
  // 写在lifetimes中的生命周期优先级更高，会覆盖外层的同名生命周期函数，推荐在lifetimes中书写
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 组件内部方法建议以下划线开头
    _myPrivateMethod: function(){
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
  }

})