小程序小知识点

小程序样式

全局app.wxss中给page{}设定样式，会给页面全局设定样式。因为，每个页面默认会在最外层嵌套一个page标签。

还有一个*{}通用选择器，默认匹配任何标签，不知道小程序支不支持。

另外一个小知识点。当一个容器display设置为flex的时候，默认状态下，它的宽度是100%。我们不想要它百分百，而且这个宽度想要它自适应，那我们可以使用display: inline-flex;语句。其宽度会随着元素大小自动放大缩放。

 

config.js文件

export const config = {
    appId: '123456'
}

export let hello = function(){
    console.log('hello world!');
}

在要导入的index.js文件中导入

import {config as appConfig, hello} from "../../config.js"
//绝对路径是不可以的。

第二种方法

config.js文件

const config = {
    appId: '123456'
}

let hello =  function(){
    console.log('hello world!');
}

export{
config,
hello as helloWorld
}

导入的index.js文件中

import {config, helloWorld} from "../../config.js"

在每个js文件中，把要用到的变量都在data中定义一下。定义为Null或者其他值。这是个好的习惯。

max-width这个属性，特别好！例如在设置text标签文字居中的同时实现自动换行的css样式时，我们可以用这个属性！在文字比较少的时候，会自适应宽度。

 

自定义事件的定义以及监听。很重要，没掌握。

observer()函数会在属性值发生变化的时候被触发，这个函数很有用，但是千万要记住，不能再observer函数当中改变属性值！这样会导致无限递归，最后内存泄漏！

wxs学习！

IntersectionObserver

 

很多元素样式设置出现没有预料的情况，很多时候是因为没有设置高度和宽度。所以，我们在设置样式的时候，要是他的宽度是100%就设置成100%。很重要。

 

关于服务器请求以及本地缓存另外一种考虑思路。

加入缓存会在相当大的程度上提高用户体验。但是，加入本地缓存会极大的提高数据管理的难度。

这个时候我们要学会取舍。

1.每次加载数据肯定是要请求一次网络请求，来验证本地缓存是不是跟服务器数据是同步的。

2.我们要把一些不变的量进行缓存。而由于用户交互产生的数据(例如，点赞)，应该每次都去服务器加载数据，而不是写入缓存。(这个体验，并不算是最好的，但是会相当大的降低数据管理的难度！)

 

小程序组件间通信主要是父子组件间的通信，并不是同一级之间的通信。

JavaScript函数传参，传递多个参数的时候传递对象是最好的。例如

func({a,b={},c='something'}){...}

//下面来调用
func({
    a: 'urls',
    b: {
        name: 'Joe',
        age: 18
    },
    c: 'another thing'
});

wxs大体上跟ES5的语法规则是一致的，所以说不支持const let这类变量类型，也不支持ES6提供的类似语法。虽然wxs和JavaScript是两个语言，但是我们写代码的时候，照着ES5语法规则的JavaScript代码就可以了，大体上都是一致的。

 

wxs的应用
wxs代码可以写在.wxml文件中，也可以单独写在.wxs文件中。wxml文件内可以调用wxs代码。
wxs文件中代码为

var func = function(){
        return '123';
}

module.export = {
    func: func
}

wxml导入wxs文件要写关键字
调用的时候{{util.func()}}

 

Promise.all([promise对象1,promise对象2,,,]).then(res=>{})
promise串行请求。注意：Promise.all函数是当所有的promise对象都返回值之后才执行。
与Promise.all()对应的有Promise.race()函数。这个函数当参数中promise对象一有返回值，就会马上执行。不会等别的promise的响应结果。

避免重复http请求可以考虑在函数中加锁。小技巧。

组件插槽标签get！其样式要加 !important。这个是微信框架的问题。

组件property属性要是是两个单词构成的，则在给组件传值的时候要用连字符形式。如：

properties:{
      openType: {
                   String 
          }
}

 

组件只能继承极少数全局样式。里面就包括font和color这两个。其他的都不继承。

老师在5-13里说组件里bindtap最好写成bind:tap。不知道为什么。。。可能是代码风格会更好看一些。

 

小程序model的概念。我们可以把主要的业务逻辑都写进一个对象里面。然后页面import进来之后实例化对应的对象。
我们在根目录下新建一个目录model，之后新建对应的js文件。这一个个js文件对应于一个个对象。我们还可以把util里面写的对象在这里import进来或者直接继承。 这里还有一个代码风格问题。我们创建的对象都采用ClassnameModel这种命名方式。

业务逻辑最好是写在使用方。组件只负责一些份内的事儿。

自定义事件 this.triggerEvent('eventName',{设置自定义事件event.detail属性},{第三个参数一般不会用到})
自此，我们在页面中监听这个事件用bind:eventName来监听。

 

组件间通信与事件

组件间通信

组件间的基本通信方式有以下几种。

• WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据（自基础库版本 2.0.9开始，还可以在数据中包含函数，这是个骚操作）。
• 事件：用于子组件向父组件传递数据，可以传递任意数据。
• 如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

Behavior 组件行为复用

自定义组件中可以包含外部组件行为

// 自定义组件 my-component 内部
var myBehavior = require('my-behavior')
Component({
  behaviors: [myBehavior],
  properties:{}
})

Behavior的定义方式跟component的定义方式几乎一样。只不过它用Behavior关键词来定义的。

let MyBehavior = Behavior({
  properties:{}，
  data:{},
  methods:{
   func(){}
  }
})

export {MyBehavior}

Observer函数

第一种方法：

Component({
  observers: {
    'some.subfield': function(subfield) {
      // 使用 setData 设置 this.data.some.subfield 时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
      subfield === this.data.some.subfield
    },
    'arr[12]': function(arr12) {
      // 使用 setData 设置 this.data.arr[12] 时触发
      // （除此以外，使用 setData 设置 this.data.arr 也会触发）
      arr12 === this.data.arr[12]
    },
  }
})

如果需要监听所有子数据字段的变化，可以使用通配符 ** 。

Component({
  observers: {
    'some.field.**': function(field) {
      // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
      field === this.data.some.field
    },
  },
  attached: function() {
    // 这样会触发上面的 observer
    this.setData({
      'some.field': { /* ... */ }
    })
    // 这样也会触发上面的 observer
    this.setData({
      'some.field.xxx': { /* ... */ }
    })
    // 这样还是会触发上面的 observer
    this.setData({
      'some': { /* ... */ }
    })
  }
})

 第二种方法：

可以给每个对象属性定义observer函数。接受两个参数。一个是newVal,另外一个oldVal

Component({
  properties: {
    min: {
      type: Number,
      value: 0
    },
    min: {
      type: Number,
      value: 0,
      observer: function(newVal, oldVal) {
        // 属性值变化时执行
      }
    },
    lastLeaf: {
      // 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种
      type: Number,
      optionalTypes: [String, Object],
      value: 0
    }
  }
})

Bugs & Tips:

• 数据监听器监听的是 setData 涉及到的数据字段，即使这些数据字段的值没有发生变化，数据监听器依然会被触发。
• 如果在数据监听器函数中使用 setData 设置本身监听的数据字段，可能会导致死循环，需要特别留意。
• 数据监听器和属性的 observer 相比，数据监听器更强大且通常具有更好的性能。

 

自定义组件样式：

第一种方式：hack

例如以下的布局中给my-component给自定义样式。

假设my-component组件的布局是如下的

在wxss文件中写入以下代码是无效的

.container my-component{
    color: red;
}

必须得是以下的形式

.container my-component>view{
    color: red;
}

第二种方式：

将样式通过参数传递的方式传给自定义组件，之后在组件中接受并把参数绑定到view的style中。

第三种方式：

在组件中加上externalClasses:['className']