首页 > 互联网课堂

小程序小知识点

发布时间:2020-03-14 09:17:30访问人数:

小程序样式


全局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文件要写关键字<wxs src="相对地址" module="util">

调用的时候{{util.func()}}


 


Promise.all([promise对象1,promise对象2,,,]).then(res=>{})

promise串行请求。注意:Promise.all函数是当所有的promise对象都返回值之后才执行。

与Promise.all()对应的有Promise.race()函数。这个函数当参数中promise对象一有返回值,就会马上执行。不会等别的promise的响应结果。


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


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


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


properties:{

      openType: {

                   String 

          }

}


<component1 open-typ={{}}>


 


组件只能继承极少数全局样式。里面就包括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给自定义样式。


<view class="container">

    <my-component></mycomponent>

</view>

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


<view>

    <text></text>

    <button></button>

</view>

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


.container my-component{

    color: red;

}

必须得是以下的形式


.container my-component>view{

    color: red;

}

第二种方式:


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

<view style="{{param}}"></view>


第三种方式:


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



宇宸网络 Copyright © 2010-2020
地址:即墨天山一路信和居  
地址:青岛市南福州南路87甲福林大厦-A座
鲁ICP备20004321号 

鲁公网安备 37028202000792号

  • QQ
  • 电话
  • 首页
  • 留言
  • 返回顶部