1.

简介：此笔记用来记录学习小程序开发的心得体会总结

2.

一、小程序的视图与渲染

3.

1.小程序组件的使用：

4.

打开微信小程序的官方开发文档，网址是：

5.

https://developers.weixin.qq.com/miniprogram/dev/component/

6.

点击组件，就可学习微信提供的各种组件的使用方法

7.

2.数据绑定：

8.

在页面的js文件中定义，如下：

9.

data:{

10.

text:"这里是内容",

11.

btnText:"这是按钮的内容",

12.

show:false,

13.

news:['aaa','bbb','ccc','ddd']

14.

},

15.

然后在页面的wxml文件中使用，如下：

16.

buttontype"default"hover-class"other-button-hover"default/button

17.

buttontype"primary"bindtap"btnClick"{{btnText}}/button

18.

动态修改页面内容，需要在页面的js文件中设置按钮的点击事件，如下：

19.

btnClick:function(){

20.

console.log("按钮被点击了")//点击按钮后在调试台中打印

21.

varisShowthis.data.show;//将show的值赋给isShow

22.

varnewsdatathis.data.news;//将news的值赋给newsdata

23.

newsdata.shift()//删除数组中的第一个元素

24.

this.setData({text:"这是一个新的内容...",show:!isShow,news:newsdata})//每次点击按钮都会将show的值取反和删除new数组的第一个元素

25.

}

26.

3.渲染标签：

27.

微信小程序给我们提供了两种渲染标签：条件标签和循环标签

28.

条件标签在页面的wxml文件中定义，如下：

29.

viewwx:if"{{show}}"{{text}}1/view//当showtrue时显示text1的内容，false显示text2的内容

30.

viewwx:else{{text}}2/view

31.

循环标签在页面的wxml文件中定义，如下：

32.

viewwx:for"{{news}}"wx:for-item"itemx"wx:for-index"ix"//循环news数组，将数组的元素赋给itemx，将数组的索引赋给ix

33.

{{ix}}-{{itemx}}//依次显示itemx和ix的值

34.

/view

35.

4.模板导入：

36.

我们可以将多个页面都有的内容独立出来做成一个模板，在设计页面时直接导入该模板，方便快捷

37.

新建一个wxml文件作为模板，内容随意。

38.

然后在页面中添加该模板，如下：

39.

includesrc"../templates/header"/

40.

或者

41.

importsrc"../templates/footer"/

42.

templateis"footer2"data"{{text:'导入设置的内容...'}}"///选用template名字为footer2的内容

43.

二、小程序事件

44.

1.什么是事件？

45.

事件是一种用户行为，也是一种通讯方式。

46.

2.事件的类别

47.

点击事件：tap

48.

长按事件：longtap

49.

触摸事件：touchstart、touchend、touchmove、touchcanel

50.

touchend事件和touchcanel事件的区别是：touchend是用户手指离开触摸屏，表示触摸结束。

51.

touchcanel是当用户手指没有离开触摸屏，但当前界面被其他界面覆盖了，比如通话界面，表示触摸取消。

52.

其他事件：submit、input......

53.

3.事件的冒泡

54.

冒泡事件是指当我们点击了子view的时候，会同时触发它的父view事件

55.

冒泡事件有点击事件、长按事件和触摸事件，其他都是非冒泡事件

56.

4.事件的绑定

57.

事件的绑定有bind绑定和catch绑定，一般都使用bind绑定

58.

catch绑定的作用是将事件变为非冒泡事件

59.

5.事件的对象

60.

类型type

61.

时间戳timeStamp

62.

事件源组件target

63.

当前组件currentTarget

64.

触摸点数touches

65.

三、小程序的配置详解

66.

学习的时候需要打开微信公众平台的开发文档

67.

网址：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

68.

1.app的页面配置

69.

打开项目目录下的app.json文件

70.

在pages中设置需要显示的页面路径

71.

默认放在最上面的页面是首页

72.

2.app的窗口配置

73.

打开项目目录下的app.json文件

74.

在window中设置小程序的状态栏、导航条、标题、窗口背景色

75.

常用的几种属性如下：

76.

"backgroundTextStyle":"light",//下拉loading的样式，仅支持dark/light

77.

"navigationBarBackgroundColor":"#fff",//导航栏背景颜色

78.

"navigationBarTitleText":"WeChat",//导航栏标题文字内容

79.

"navigationBarTextStyle":"black"//导航栏标题颜色，仅支持black/white

80.

3.app的tabBar配置

81.

当小程序有多个页面需要切换显示时，可以配置tabBar底部菜单栏来实现

82.

tabBar也是在app.json中设置，它的使用方法如下：

83.

"tabBar":{

84.

"list":[{//只能配置最少2个、最多5个tab。tab按数组的顺序排序，每个项都是一个页面

85.

"pagePath":"pages/index/index",

86.

"text":"首页"

87.

},{

88.

"pagePath":"pages/logs/logs",

89.

"text":"日志"

90.

}]

91.

},

92.

其中tabBar的属性有：

93.

color

94.

HexColor

95.

是

96.

tab上的文字默认颜色

97.

selectedColor

98.

HexColor

99.

是

100.

tab上的文字选中时的颜色

101.

backgroundColor

102.

HexColor

103.

是

104.

tab的背景色

105.

borderStyle

106.

String

107.

否

108.

black

109.

tabbar上边框的颜色，仅支持black/white

110.

list

111.

Array

112.

是

113.

tab的列表，详见list属性说明，最少2个、最多5个tab

114.

position

115.

String

116.

否

117.

bottom

118.

tabBar的位置，仅支持bottom/top

119.

其中list的属性有：

120.

pagePath:页面路径，必须在pages中先定义

121.

text:tab上按钮文字

122.

iconPath:图片路径，icon大小限制为40kb，建议尺寸为81px*81px，不支持网络图片。当postion为top时，不显示icon。

123.

selectIconPath:选中时的图片路径

124.

4.网络超时配置及debug开启配置

125.

这个功能主要用于调试，使用方法如下：

126.

"networkTimeout":{

127.

"request":10000,

128.

"downloadFile":10000

129.

},

130.

"debug":true

131.

5.页面配置

132.

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。

133.

页面的配置只能设置app.json中部分window配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项。