微信小程序(新)必备知识

组件化开发

小程序在未出现组件之前,要重用的话,只能简单(复制)粗暴(黏贴)

组件化开发的优势:
1、可复用(wxml/wxss/js)
2、代码分离,可维护(更重要)
  • 定义组件
先创建components文件夹:用于存放组件,然后再创建组件文件夹
注意组件的文件名并不是组件名,而页面文件名是页面名,组件名是引用时才确定的
  • 引入与使用组件
页面先引用后使用

在页面的配置文件(.json)中引入组件
{
    "usingComponents": {
        "组件名":"/components/tab/index"
    }
}

在页面中使用组件
<组件名 />
  • 全局样式的继承
(定义在app.wxss中)全局样式,页面是全部继承的,而自定义组件只是部分继承

**全局样式一般设置字体和字体大小
只支持font、color样式组件可以继承,其他样式不继承
  • 组件设计原则
1、尽量不要留空白间距
  • 组件事件与绑定
1、给组件绑定事件(.wxml)
components/love/index.wxml

2、实现组件事件处理函数(.js)
methods: {
   tapLove(ev){
      console.log(ev);
   }
}
  • 组件data与properties的区别
页面只有data,而组件有data和properties

data与properties中的数据都可以在组件中进行单向数据绑定

原理:
与页面其实一样,小程序编译后,data与properties将会和并成一个data 
(如果data中与peoperties中有重名数据,优先peoperties)
所以进行动态数据绑定还是使用this.setData()方法

使用原则:
data:内部数据
properties:外部数据(页面调用组件,传递进来的数据,不传递就使用默认值)
  • 组件获取外部数据的途径
1、通过组件属性(接收参数,而页面是通过onLoad(options)接收)
2、通过getApp().globalData.xxx 获取全局数据
3、通过缓存获取全局数据
  • 组件与业务逻辑
到底业务逻辑是放在组件中还是该放在页面中?
由于组件是可复用的,每个页面都可以使用同一个组件,此时需要看清楚这个业务逻辑是 **共有** 还是 **个性** 的
共有的必须写在组件内(例如样式)
个性的必须写在页面中(例如请求URL)
  • observer函数
组件的属性值被更改时的响应函数,注意如果在observer函数中使用this.setData()修改自身属性可能发生死循环导致内存溢出

插件开发

事件与事件处理

  • 事件作用
1、事件是视图层到逻辑层的通讯方式(小程序内置事件)
2、组件与页面的通讯(自定义事件)
  • 小程序内置事件
长按事件:longpress
点击事件:tap
触摸动作开始:touchstart
触摸后移动:touchmove
触摸动作结束:touchend

还有各个组件上都有各自特定的事件
  • 事件绑定(绑定事件处理函数)
有2种方式:bind、catch 无论是内置还是自定义事件,都是使用这种方式
写法:
bind:tap/bind:touchmove
catch:tap/catch:touchmove

bind与catch的区别
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
  • 事件分类
事件分为页面事件和组件事件

页面事件主要写在页面中,在页面wxml内组件先绑定事件bind:tap,在js中再绑定事件处理函数
组件事件主要写在组件中,在组件wxml内组件先绑定事件bind:tap,在js中再绑定事件处理函数

**页面与组件在事件绑定和处理上是完全独立的2个部分,互相没有关联,也不能互换
**组件的事件可以冒泡到页面上去
  • 自定义事件激活及处理
// 自定义事件激活
this.triggerEvent('myevent', {
    param:"wutao"
}, {});
// 第一个参数:自定义事件名称
// 第二个参数:detail对象,自定义数据(传参数)
// 第三个参数:触发事件的选项

// 自定义事件处理:在页面wxml的组件调用标签处写下如下代码

新布局

flex 新一代布局样式,以前很难实现的布局,现在变简单了
  • 注意
1、元素本身不会因为display:flex而改变原本块状或行间特性
2、flex下的item元素会变成行间特性(原本块状特性改变)

新单位

rpx 是小程序提供的一种自适应单位,与iphone6的尺寸是1:1, 推荐设计稿以IPHONE6为原型

rpx 与 px 的区别是什么?

1、px不会自适应,无论什么机型,什么尺寸屏幕都是一个大小,有些字体不随设备屏幕发生变化时使用px
2、rpx会自适应,根据机型发生相应改变

Promise

  • 串行请求(请求之间有依赖)
// 请求1
let req1 = new Promise((resolve, reject) => {});
// 请求2
let req2 = new Promise((resolve, reject) => {});
// 请求3
let req3 = new Promise((resolve, reject) => {});

// 要求执行顺序1、2、3
req1.then(res => {
    return req2;
}).then(res => {
    return req3;
});
  • 并行请求(请求之间无依赖)
// 请求1
let req1 = new Promise((resolve, reject) => {});
// 请求2
let req2 = new Promise((resolve, reject) => {});
// 请求3
let req3 = new Promise((resolve, reject) => {});

// 要求并行执行1、2、3 全部执行完才执行then中的回调函数
Promise.all([req1, req2, req3])
.then(res => {

});

// 要求并行执行1、2、3 谁先执行完就执行then中的回调函数
Promise.race([req1, req2, req3])
.then(res => {

});
  • 复合请求(既有串,也有并)
// 请求1
let req1 = new Promise((resolve, reject) => {});
// 请求2
let req2 = new Promise((resolve, reject) => {});
// 请求3
let req3 = new Promise((resolve, reject) => {});

let req4 = req1.then(res => {
    return req2;
})

// 要求串行执行1、2,与3并行执行
Promise.all([req4, req3])
.then(res => {

});

// 要求串行执行1、2,与3并行执行
Promise.race([req4,, req3])
.then(res => {

});
  • then中的返回值
有4种情况:
1、返回Promise
2、返回具体的值
3、不返回
4、抛错误
无论2还是3,then都会返回一个Promise对象,而且对象中执行resolve()方法
// 有返回值val
resolve(val)

// 不返回
resolve(undefined)

**所以后面then都会执行第一个函数
  • catch
catch为then的语法糖,它是then(null, rejection)的别名。
也就是说,catch也是then,它用于捕获错误,它的参数也就是是then的第二个参数。
所以,假设catch中如果return 值的话,新的Promise对象也会是接受状态。

var example = new Promise((fulfill, reject)=>{
    let i = 1;
    reject(i);
})
example
.catch(()=>{console.log('我是第一个catch的回调函数'); return 1;})
.then(() =>{console.log('我是第一个then的回调函数');    throw Error    })
.catch(()=>{console.log('我是第二个catch的回调函数')})
.then(() => {console.log('我是第二个then的回调函数')})


调用reject函数后,promise变为rejected状态,故执行第一个catch的回调函数
第一个catch的回调函数return 1,故执行第一个then的回调函数
第一个then的回调函数throw Error,故执行第二个catch的回调函数
第二个catch的回调函数ruturn undefined(如上文所言),故执行第二个then的回调函数

链接描述

自定义登录态

请求封装

全局样式

全局样式写在:app.wxss

page{
    color: #999999;
    font-size: 33rpx;
}

wxs页面脚本

  • wxs作用
1、页面渲染

2、数据处理

**wxs可以使用js代替,是否代替取决于个人决定
**wxs类似html页面中内嵌js代码
**wxml文件内部不能编写js或调用js,如果想调用,必须使用wxs
  • wxs使用两种方式
1、使用.wxs文件(可重用性更好)

// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";




 {{tools.msg}} 
 {{tools.bar(tools.FOO)}} 

2、使用标签(在wxml中)



var msg = "hello world";

module.exports.message = msg;


 {{m1.message}} 

注意事项

1、CSS选择器其实比官方文档支持得更多
2、自定义组件的容器如果是行间元素,那么最外层元素会有最小高度21px,所以请尽量使用块状元素作为容器
3、wxml不但可以获取对象的属性,还可以获取具体数组元素
{{arr[0]}}
{{obj.pro}}

你可能感兴趣的