简介:此笔记用来记录学习小程序开发的心得体会总结
一、小程序的视图与渲染
1.小程序组件的使用:
打开微信小程序的官方开发文档,网址是:
https://developers.weixin.qq.com/miniprogram/dev/component/
点击组件,就可学习微信提供的各种组件的使用方法
2.数据绑定:
在页面的js文件中定义,如下:
data:{
text : "这里是内容",
btnText : "这是按钮的内容",
show : false,
news : ['aaa','bbb','ccc','ddd']
},
然后在页面的wxml文件中使用,如下:
<button type="default" hover-class="other-button-hover"> default </button>
<button type="primary" bindtap="btnClick"> {{btnText}} </button>
动态修改页面内容,需要在页面的js文件中设置按钮的点击事件,如下:
btnClick : function (){
console.log("按钮被点击了") //点击按钮后在调试台中打印
var isShow = this.data.show; //将show的值赋给isShow
var newsdata = this.data.news; //将news的值赋给newsdata
newsdata.shift() //删除数组中的第一个元素
this.setData({text:"这是一个新的内容...",show:!isShow,news:newsdata}) //每次点击按钮都会将show的值取反和删除new数组的第一个元素
}
3.渲染标签:
微信小程序给我们提供了两种渲染标签:条件标签和循环标签
条件标签在页面的wxml文件中定义,如下:
<view wx:if="{{show}}" >{{text}} 1 </view> //当show=true时显示text 1的内容,false显示text2的内容
<view wx:else >{{text}} 2 </view>
循环标签在页面的wxml文件中定义,如下:
<view wx:for="{{news}}" wx:for-item="itemx" wx:for-index="ix"> //循环news数组,将数组的元素赋给itemx ,将数组的索引赋给ix
{{ix}} - {{itemx}} //依次显示itemx和ix的值
</view>
4.模板导入:
我们可以将多个页面都有的内容独立出来做成一个模板,在设计页面时直接导入该模板,方便快捷
新建一个wxml文件作为模板,内容随意。
然后在页面中添加该模板,如下:
<include src="../templates/header" />
或者
<import src="../templates/footer" />
<template is="footer2" data="{{text:'导入设置的内容...'}}" /> //选用template名字为footer2的内容
二、小程序事件
1.什么是事件?
事件是一种用户行为,也是一种通讯方式。
2.事件的类别
点击事件:tap
长按事件:longtap
触摸事件:touchstart、touchend、touchmove、touchcanel
touchend事件和touchcanel事件的区别是:touchend是用户手指离开触摸屏,表示触摸结束。
touchcanel是当用户手指没有离开触摸屏,但当前界面被其他界面覆盖了,比如通话界面,表示触摸取消。
其他事件:submit、input ......
3.事件的冒泡
冒泡事件是指当我们点击了子view的时候,会同时触发它的父view事件
冒泡事件有点击事件、长按事件和触摸事件,其他都是非冒泡事件
4.事件的绑定
事件的绑定有bind绑定和catch绑定,一般都使用bind绑定
catch绑定的作用是将事件变为非冒泡事件
5.事件的对象
类型type
时间戳timeStamp
事件源组件target
当前组件currentTarget
触摸点数touches
三、小程序的配置详解
学习的时候需要打开微信公众平台的开发文档
网址:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
1.app的页面配置
打开项目目录下的app.json文件
在pages中设置需要显示的页面路径
默认放在最上面的页面是首页
2.app的窗口配置
打开项目目录下的app.json文件
在window中设置小程序的状态栏、导航条、标题、窗口背景色
常用的几种属性如下:
"backgroundTextStyle":"light", // 下拉 loading 的样式,仅支持 dark / light
"navigationBarBackgroundColor": "#fff", // 导航栏背景颜色
"navigationBarTitleText": "WeChat", // 导航栏标题文字内容
"navigationBarTextStyle":"black" // 导航栏标题颜色,仅支持 black / white
3.app的tabBar配置
当小程序有多个页面需要切换显示时,可以配置tabBar底部菜单栏来实现
tabBar也是在app.json中设置,它的使用方法如下:
"tabBar": {
"list": [{ //只能配置最少2个、最多5个 tab。tab 按数组的顺序排序,每个项都是一个页面
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
其中tabBar的属性有:
color |
HexColor |
是 |
tab 上的文字默认颜色 |
|
selectedColor |
HexColor |
是 |
tab 上的文字选中时的颜色 |
|
backgroundColor |
HexColor |
是 |
tab 的背景色 |
|
borderStyle |
String |
否 |
black |
tabbar上边框的颜色, 仅支持 black / white |
list |
Array |
是 |
tab 的列表,详见 list 属性说明,最少2个、最多5个 tab |
|
position |
String |
否 |
bottom |
tabBar的位置,仅支持 bottom / top |
其中list的属性有:
pagePath:页面路径,必须在 pages 中先定义
text:tab 上按钮文字
iconPath:图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。当 postion 为 top 时,不显示 icon。
selectIconPath:选中时的图片路径
4.网络超时配置及debug开启配置
这个功能主要用于调试,使用方法如下:
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
5.页面配置
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。
页面的配置只能设置 app.json 中部分 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。