微信小程序学习笔记

  • Post author:
  • Post category:小程序

一、Node.js主题

1、npm:node.js包管理工具,有超过60万个JavaScript代码包可供下载

2、Node.js:运行在服务端的JavaScript,基于Chrome JavaScript建立的一个平台,基于Google V8引擎。

3、Nodejs安装教程:Nodejs安装教程_彭佼的博客-CSDN博客

4、NodeJS使用教程:Node.js 教程 | 菜鸟教程

 5、使用package.json

Package.json位于模块的目录下,用于定义包的属性。

 6、NodeJS回调函数

NodeJS异步编程的直接体现就是回调。

回调函数在完成任务后就会被调用,Node使用了大量的回调函数,Node所有API都支持回调函数。

回调函数一般作为函数的最后一个参数出现。

Function foo1(name, age, callback){}

Function foo2(value, callback1, callback2){}

7、NodeJS事件

Node.js有多个内置的事件,可以通过引入events模块,并通过实例化EventEmitter类来绑定和监听事件。

通过eventEmitter.on绑定事件处理程序

通过eventEmitter.emit触发事件。

8、NodeJS EventEmitter

所有异步I/O操作在完成时都会发送一个事件到事件队列。

EventEmitter的核心就是事件触发与事件监听器功能的封装。

EventEmitter的每个事件由一个事件名和若干个参数组成,事件名是一个字符串,通常表达一定的语义。对于每个事件,EventEmitter支持若干个事件监听器。

当事件触发时,注册到这个事件的事件监听器被依次调用,事件参数作为回调函数参数传递。

 

9、NodeJS Buffer缓冲区

JavaScript语言自身只有字符串数据类型,没有二进制数据类型。

但在处理像TCP流或文件流时,必须使用到二进制数据。因此在NodeJS中,定义了一个Buffer类,该类用于创建一个专门存放二进制数据的缓存区。

 

写入缓冲区:buf.write()

从缓冲区读取数据:buf.toString()

将Buffer转换位JSON对象:buf.toJSON()

缓冲区合并:Buffer.concat()

缓冲区比较:buf.compare(otherBuffer);

拷贝缓冲区:buf.copy()

缓冲区裁剪:buf.slice()

缓冲区长度:buf.length

10、Stream流

Stream是一个抽象接口,Node中有很多对象实现了这个接口。

所有的Stream对象都是EventEmitter的实例,常用的事件有:

data – 当有数据可读时触发

end – 没有更多的数据可读时触发

error – 在接收和写入过程中发生错误时触发

finish – 所有数据已被写入到底层系统时触发。

读取文件示例:

 

11、模块系统

为了让NodeJS的文件可以相互调用,NodeJS提供了一个简单的模块系统。

NodeJS提供了exports和require两个对象,其中exports是模块公开的接口,require用于从外部获取一个模块的接口,即获取模块的exports对象。

如果要对外暴露属性或方法,就用exports就行;要暴露对象(类似class,包含了很多属性和方法),就用module.exports。

 

12、NodeJS函数

在JS中,一个函数可以作为另一个函数的参数。我们可以先定义一个寒暑假,然后从传递,也可以在传递参数的地方直接定义函数。NodeJS中函数的使用与JS类似。

普通函数:

 

匿名函数:

 

13、全局对象

它及其所有属性都可以在程序的任何地方访问。

__filename:表示当前正在执行的脚本的文件名

__dirname:表示当前执行脚本所在的目录

SetTimeout(cb, ms):在指定的毫秒(ms)数后执行指定函数(cb)。它只执行一次指定的函数。

setInterval(cb, ms):在指定的毫秒(ms)数后执行指定函数(cb),该方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭。

console:用于提供控制台标准输出。

process:用于描述当前Node.js进程状态的对象,提供了一个与操作系统的简单接口。

14、文件系统

Var fs = require(‘fs’);

NodeJs文件系统中的方法均有异步和同步版本,例如读取文件内容的函数有异步的fs.readFile()和同步的fs.readFileSync()。异步的方法函数最后一个参数为回调函数,回调函数的第一个参数包含了错误信息(error)。

15、常用工具

Util是一个Nodel.js核心模块,提供常用函数的集合,用于弥补核心JS的功能过于精简的不足。

Const util = require(‘util’);

Uitl.inspect()是一个将任意对象转换为字符串的方法,通常用于调试和错误输出。

16、GET/POST请求

GET请求直接被嵌入在路径中,URL是完整的请求路径,包括了?后面的部分,因此可以手动解析后面的内容作为GET请求的参数。

POST请求的内容全部都在请求体中,http.ServerRequest并没有一个属性内容为请求体,原因是等待请求体传输可能是一件耗时的工作。

17、Express框架

它是一个简洁灵活的Web应用框架,使用Express可以快速地搭建一个完整功能的网站。

 

18、连接MySQL

 

二、微信小程序主题

1、微信开发工具中使用TDesign的方法,见链接:

从0到一开发微信小程序(7)—小程序组件库(提高开发效率)_zhz小白的博客-CSDN博客

(1)使用npm

npm i tdesign-miniprogram -S –production

(2)安装完之后,需要在微信开发者工具中对 npm 进行构建:工具 – 构建 npm

(3)修改app.json

将** app.json **中的 **“style”: “v2” **移除。

因为 该配置 表示启用新版组件样式,将会导致 TDesign 的组件样式错乱。

2、自定义组件:components目录

在根目录下新建components文件夹。

自定义组件的方法:

 

可参考:

微信小程序-Components自定义组件/数据交互_微信小程序components_王冬瓜的排骨汤的博客-CSDN博客

在js的properties(组件属性)中进行属性设定,也是与外部调用沟通的参数。

3、 CSS样式  

!important:有多次定义时提升优先权
display:flex:弹性布局
border-radius: 给组件添加圆角的边框
overflow:如果元素中的内容超出了给定的宽度和高度属性,overflow属性可以确定是否显示滚动条等行为。
font-weight: 字体粗细;font-size:字体大小,占用空间大小
background: linear-gradient。通过渐变生成背景。
flex-direction: 设置主轴方向
flex-warp:设置子元素是否换行
flex-flow:复合属性,相当于同时设置了flex-direction和flex-warp
justify-content:定义项目在主轴上的对齐方式。Space-between:先两边贴边,再平分剩余空间。

4、微信原生组件:
scroll-view:可滚动视图区域

5、自定义的tabBar

当tabBar的custom定义为true时,默认的tabBar会消失,配置为true只是为我们自定义让出位置。

自定义tabBar组件:在根目录下添加自定义custom-tab-bar文件,名字和路径都是严格要求的。构建的是Component的方式。

 

6、wx:for 相关使用

wx:for语法:小程序渲染列表时,使用wx:for控制属性来绑定一个数组,绑定后即可使用数组中各项数据来渲染该组件。

 

此时索引默认为index,项目名默认为item。

wx:for-item:定义数组当前项的变量名,替代item

wx:for-index:定义数组当前项的下标变量名,替代index。

wx:key:指定列表中项目的唯一的标识符。

7、tdesign的tabBar组件

value属性:当前选中标签的索引。

Split:是否需要分割线

8、页面跳转
wx.switchTab 跳转主页
跳转到tabBar页面,并关闭其他所有非tabBar页面,用于跳转到主页。

页面url必须以”/”开头。

9、搜索框实现

达到这个效果需要做3个事情:

(1)t-icon拿到搜索小图标

(2)t-search拿到不带背景颜色的搜索框

(3)上述两个组件放在view中,view的css设置为:

 

10、js中的export和import、require:

import声明引入某个模块,既可以引入整个模块中的内容,也可以引入部分内容,区别在于有没有from关键字。

特别写法之; import x from “y.js”,这种写法引入的是模块中的默认值,x可自定义,默认值是和default搭配的export语句。

Import中加{}和不加{}的区别

如果来源js中export时明确指定export组建的名称,那么加大括号并且大括号中指定引用组件的名称;如果来源js是默认输出,那么引用时不用大括号,且名称随意。

Export基本写法:

Export class User{}

Export function getMax(){}

Require,可以导入export的东西

Const general = require(‘./general.js’);

11、new Promise()

Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)。从语法上说,Promise是一个对象,从它可以获取异步操作的消息。

它有两个参数,第一个是成功resolve调用的方法,第二个是失败reject调用的方法。

then方法就是在异步操作执行完后,用链式调用的方式执行回调函数。

Promise + reject(失败) + awit搭配示例:

  

Promise + resolve(成功) + awit搭配示例:

  

12、wx内置方法:
wx.stopPullDownRefresh():停止当前页面的下拉和刷新。

wx.pageScrollTo():将页面滚动到目标位置

13、sync和await

async用于声明一个function是异步的,而await用于等待一个异步方法执行完成。

参考:理解 JavaScript 的 async/await – 知乎

14、let:

用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

15、js中3个点…

比如” …item”,item是一个字典。

3个点是扩展运算符,相当与flatten的功能,比如上面就将item的各项平铺开。

16、问号点(?.)

当访问多层对象属性(比如 res.data.list)时,如果属性res.data为空,则会报引用错误,为此我们不得不这么处理:

let dataList = res && res.data && res.data.list

有了可选链,就可以对一个为null或者undefined属性安全引用。

let dataList = res?.data?.list

17、map()方法:按照原始数组元素顺序依次处理元素。

语法:array.map(function(currentValue, index, arr), thisValue)

18、components父子组件之间传值
父向子传值使用的是属性绑定,子组件中的properties对象进行接收父组件传递过来的值。
子向父传值使用的是自定义事件,父组件通过自定义事件中的事件对象e来接收子组件传递过来的值

例子见:微信小程序父子组件之间传值_微信小程序组件传值_但行好事wlw的博客-CSDN博客

19、页面之间传递数据

通过链接上带参数的方式如下:

传递方:

wx.navigateTo({

          url: ‘../search-result/search_result?result=’ + res.data,

        })

接收方:

onLoad(options) {

    console.log(options.result);

}

20、components使用

微信小程序组件封装及调用-原生

21、slot标签:

它是一个占位符 插槽。等到父组件调用子组件的时候,再传递标签过来,最终这些被传递过来的标签就会替换slot插槽的位置。

在子组件用slot标签占位:

在父组件使用子组件时传递内容:

 

参考:微信小程序-slot插槽功能

在微信小程序中,插槽slot默认只有一个,如果希望组件中使用多个插槽,需要在组件的.js文件中定义multipleSlots为true。

22、箭头函数 () => {}

ES6增加了使用箭头(=>)语法定义函数表达式。

普通函数function(){}

let sum = function(a, b){

       return a + b

}

箭头函数 () => {}

let sum = (a, b) => {

       return a + b

}

箭头函数在只有一个参数时可以不要括号。

let double = x => {return 3*x}

在只有一个表达式时,箭头函数也可以不要大括号。

let double = x => 2 * x;

23、Components中的externalClasses

作用:可以让父组件的样式更改到子组件里面。

示例:

 

24、给事件处理函数传参

e.currentTarget.dataset可以获取到传递的参数,data-index这个index就是传递的参数。

示例:

 

25、微信小程序引用iconfont图标

首先,下载iconfont文件,可参考:微信小程序iconfont图标字体解决方案 – 知乎,并放到某个目录下面

然后,在根目录的app.wxss中import该文件

@import ‘style/iconfont.wxss’;

26、报错:

“switchTab:fail can not switch to no-tabBar page”
原因:没有在app.json的tabBar对应的list中添加页面信息

27、async + await搭配示例

28、Component的组件生命周期函数
created():在组件实例刚刚被创建时执行
attached():在组件实例进入页面节点树时执行
ready():在组件布局完成后执行
moved():在组件实例被移动到节点树另一个位置时执行
detached():在组件实例被从页面节点树移除时执行

29、wx.createSelectorQuery().select获取DOM节点位置

返回一个SelectorQuery对象实例

SelectorQuery.in (设置选取范围)

SelectorQuery.select (选择节点 | 页面中匹配到的第一个)

SelectorQuery.selectAll (选择当前页面下匹配选择器的所有节点)

SelectorQuery.selectViewport (获取显示区域的尺寸、滚动位置等信息)

SelectorQuery.exec (执行所有的请求,请求结果按请求次序构成数组)

BoundingClientRect:获取节点信息

30、scroll-view

可滚动视图区域。

Scroll-y:允许纵向滚动

Scroll-into-view:设置哪个方向可滚动,则在哪个方向滚动到该元素


版权声明:本文为benben044原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。