微信小程序开发学习笔记

1、app.json是对整个小程序的全局配置。

2、app.wxss是整个小程序的公共样式表。

3、逻辑层:

App和Page方法：使用于程序和页面注册

getApp和getCurrentPages方法：使用于获取App实例和当前页面栈

API:微信提供了扫一扫，支付等微信功可以

1）App()函数使用来注册应使用程序，通过传入一个对象参数来操作程序，参数说明：

onLaunch:程序初始化完成时触发

onShow:程序启动或者由后端进入前端时触发

onHide:程序从前端进入后端时触发

onError：程序发生脚本错误时触发

其余：能在对象内自己设置数据或者者方法应使用于全局作使用域中

2）getApp()函数是一个使用于获取小程序实例的全局函数

3）Page()函数使用于注册一个页面，传入一个对象作为参数，使用于指定初始数据，生命周期函数等，参数说明：

data：页面初始数据

onLoad：页面加载时的生命周期函数

onReady:页面首次渲染完成的生命周期函数

onShow:页面显示

onHide：页面隐藏

onUnload：页面卸载

onShareAppMessage：右上角分享

其余：自己设置函数（如事件响应函数等 ）

4）setData()使用于将数据的改变及时通过到View层进行相应改变，同时改变对应的this.data值

注意：不可以直接通过this.data来修改数据，这样会造成数据不一致的问题。

5）getCurrentPages()使用于获取当前页面实例

4、微信小程序框架的视图层主要内容：WXML、WXSS，WXML，WXSS能看成是HTML，CSS对应的结构，其写法也大致相同。

WXML是小程序框架实现的标签语言，有点像React的组件标签。其结合基础组件、事件系统，能构建出页面的结构。

常使用的几个标签如下：

1）数据绑定

{{message}}

// page.js

Page({

data: {

message: 'Hello World!'

}

})

如上： 在Page()内传入对象，并初始化数据data，设置了一个叫message的key，对应value值hello World。在对面的wxml页面中，用view标签结合{{}}表达式的形式进行数据的渲染。

2）列表渲染 wx:for

{{item}}

// page.js

Page({

data: {

array: [1, 2, 3, 4, 5]

}

})

数据的初始化定义依然在data中进行，页面中用wx:for进行数据遍历，拿到每项item即为列表元素。这里的wx:for指令跟Vue的v-for指令类似

3）条件渲染 wx:if

WEBVIEW

APP

MINA

// page.js

Page({

data: {

view: 'MINA'

}

})

如上：通过wx: 前缀结合js中相似的条件分支语句实现条件判断

4）模板 template

微信提供了template标签使用于定义一个页面的部分组件模板，从而实现代码复使用。通过name属性来设置template名字，在template内写wxml代码，从而实现模板的定义。

{{index}}: {{msg}}

Time: {{time}}

通过is属性来引使用对应name的模板，数据的传入则用data属性，数据写法相似于react的属性延展式写法。

注意：属性都是要加“双引号”的，即便是表达式，数据如下：

Page({

data: {

item: {

index: 0,

msg: 'this is a template',

time: '2016-09-15'

}

}

})

5、事件机制

什么是事件？

1）事件是视图层到逻辑层的通讯方式。

2）事件能将使用户的行为反馈到逻辑层进行解决。

3）事件能绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件解决函数。

4）事件对象能携带额外信息，如 id, dataset, touches。

事件绑定：

在wxml的标签中进行事件绑定主要有两种方式：bind+事件名 或者者 touch+事件名

1）bind

bind+事件名能绑定一个事件解决函数，函数传入参数即为事件对象

示例： 点击输出

如上，通过bindtap，绑定一个触摸点击事件，tap为小程序封装的一个事件名。在Page函数的参数中，定义对应的事件响应函数，id，dataset，touches是事件对象携带的信息。

Page({

showMe: function(event) {

console.log(event)

}

})

事件对象event是小程序包装过的对象，其中常使用的是currentTarget属性：dataset中存放了在标签中通过data-自定的属性值 key即为data-中*定义的内容，value即为对应的值，touches:中存放了事件触发的具体信息

2）catch

catch+事件名 ：是绑定事件的另一种方法

触摸事件

Page({

handleTap1:function(e){

console.log(e)

}

})

3）catch和bind的区别

二者都使用于绑定事件，但bind不可以阻止事件冒泡，而catch方法能阻止事件冒泡

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

冒泡事件：touchstart,touchmove,touchcancel,touchend,tap,longtap

4）事件对象

如上2：打印出的事件对象具备多个属性

type:事件类型，timeStamp：事件时间戳，target：事件源 currentTarget:事件绑定的组件

6、样式表wxss

6.1 引入模板：小程序提供了两个引入外部模板的方法：import和include，用外部模板能实现大部分共同页面的代码利使用，在一个app中，头部和脚部基本不会 变动太大，这时即可以通过模板的方式引入，实现多个页面的复使用。

1）import

示例：

{{text}}

引入：

注意：import有作使用域，即import引入的模板只在当前页面有效，即import不会向下查找另外的模板

2）include

include标签能看作是对 “html”的一个拷贝，即将外部的wxml片段拷贝进文档中

示例：

外部wxml片段

header

footer

引入：

body

总结：import是引入模板片段，且有作使用域限制，不可以进行模板嵌套。include是引入wxml片段，相当于代码拷贝。

6.2 WXSS 微信样式表

小程序中，页面样式的渲染通过wxss文件实现，.wxss能看成是css，由于它们都在实现相同的功可以。实质上wxss也是在css的基础之上进行了扩充和修改得到的。wxss在css上的扩展特性：

1）尺寸单位：rpx

rpx：是一个相对像素单位，能根据屏幕宽度进行自适应。

针对手机端的开发，设计稿一般都是以iphone6为标准的。而iphone使用的是视网膜屏，即我们css中设定的1px，在iphone上实际是由2px*2px的像素点组成的。

以iphone6为准，屏幕宽度375px，共有750个物理像素，则750rpx=350px,即1rpx=0.5px

2）样式导入 @import

跟在css中的外部样式表的导入相似：@import “common.wxss”;

7、组件

什么是组件？

1）组件是视图层的基本组成单元。

2）组件自带少量功可以与微信风格的样式。

3）一个组件通常包括开始标签和结束标签，属性使用来修饰这个组件，内容在两个标签之内。

注意：所有组件与属性都是小写，以连字符-连接

组件的属性：

所有组件都有如下的属性：id,class,style,hidden(组件能否显示)，data-（自己设置属性），bind/catch*（事件绑定）。

小程序中，基础组件分为了七大类：视图容器、基础内容、表单组件、导航、多媒体、地图、画布、客服会话。

7.1 视图容器 view

view组件是很常使用的一个标签

7.2 button组件

button组件在微信官方API中属性表单组件的一部分。通过小程序提供的样式属性即可以实现基本的按钮样式。

点击我

7.3 icon 列表

小程序中封装了少量常使用的图标icon。有三个属性能对icon样式进行设置：

> type:icon类型，有效值有success, success_no_circle, info, warn, waiting, cancel, download, search, clear

> size：单位px

> color:与css的color值一致

7.4 image组件

在小程序中，能通过image组件的mode属性控制图片的显示。mode共有13种模式，其中有4种缩放模式，9种裁剪模式

1）、缩放模式（当图片宽高与设定的image宽高不一致时）

scaleToFill:不保持纵横比缩放图片，使图片拉伸至填满image元素

aspectFit:保持纵横比缩放，使长边完全填满图片

aspectFill：保持纵横比缩放，使短边完全显示出来

widthFix:宽度不变，高度自动变化，保持原图宽高比不变

2)、裁剪模式

当图片超出image设定的宽高时所做的解决

top:不缩放图片，只显示图片的顶部区域

bottom:不缩放图片，只显示图片的底部区域

center:不缩放图片，只显示图片的中间区域

left 不缩放图片，只显示图片的左边区域

right 不缩放图片，只显示图片的右边区域

8、数据绑定

在微信小程序中提供了相似于模板引擎的方法来实现数据的绑定。从而动态控制页面显示内容。

注意：这是单向数据绑定，即只可以在js里来控制wxml里的数据，而不可以通过视图层的数据变化来直接改变model层数据的变化。

1）数据绑定

在小程序中，通过{{}}将js中初始的数据绑定到视图中

1.1）简单绑定：

{{msg}}

Page({

data:{

msg:'hello world'

}

})

如上：在js中通过data属性进行数据的初始化，在wxml中通过{{}}表达式将数据绑定到视图

注意：

1、数据值作为组件（标签）的属性进行绑定时，要写在“双引号”之内

2、针对布尔值true,false要使用表达式来写，例如checkbox的checked属性，不可以直接写checked=”false”,这样计算出来的结果是字符串，转换来布尔值还是true，因而用checked={{false}}来设置checkbox的能否选中属性

1.2）{{}}内的运算：

1.2.1）在{{}}内能进行值的运算，包括算数运算，三元运算，字符串的运算，以即逻辑判断

1.2.2）{{}}内能对数据进行组合，例如下面代码：

A、数组与属性的组合

{{item}}

Page({

data: {

zero: 0

}

})

B、对象组合

Page({

data: {

a: 1,

b: 2

}

})

最终组合成的对象是 {for: 1, bar: 2}

2）条件渲染 wx:if

通过wf:if判断一个表达式的方式来控制标签的显示与否，wf:if增加在标签上，传入一个判断表达式，实现条件判断

例：如下简单示例,前两条都为false所以走else这条，最终页面只会显示3

5}}”> 1

2}}”> 2

3

进阶：由于 wx:if 是标签内的。但项目中经常需要判断的不是一个标签的显示与否，而是一块儿区域，这里能通过标签将多个组件包装起来，在block标签中用wx:if来控制元素的显示。

注意：并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

例：

view1

view2

3）列表渲染 wx:for

在组件上使用wx:for用数组中各项的数据重复渲染该组件。

3.1)默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item

{{index}} : {{item}}

3.2)wx:for-item使用于指定数组当前元素的变量名，wx:for-index使用于指定数组当前下标的变量名：

3.3)wx:for能进行嵌套用

例：九九乘法表

<view wx:if="{{i

{{i}} * {{j}} = {{i * j}}

进阶：用标签包装多节点的结构

注意：在用wx:for遍历数组时，会报一个需指定wx:key的警告，此警告的作使用指当使用户所遍历的数据是会动态改变的或者者有新项目增加到列表中时，需要有一个key来与之前的数据做参考比照。

{{item}}

Page({

data:{

arrs:[1,2,3,4,5,6]

}

})

如上是一个简单的数据遍历示例，wx:key的值能有两种形式：

A）就如上面一样使用this，指带当前for循环中的item本身（即可使用item本身作为遍历的标识）

B）字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或者数字，且不可以动态改变。

4）模板template

定义模板：

姓名：{{item.name}} 年龄：{{item.age}}

Page({

data:{

user:[

{ name:”小强”, age:18 },

{ name:”小明”, age:18 },

{ name:”小红”, age:18 },

{ name:”小花”, age:18 }

]

}

})

用模板：

补充：运算符{{…object}}能将object开展传入到视图中进行渲染。