小程序
特点
做简单的、用完即走的应用
适合低频的应用
适合性能要求不高的应用
学习
JavaScript+CSS
ES6
一个界面的文件
.html/.htm | 标记语言,页面骨架作用 |
---|---|
.css | 样式表,在html中使用class来包含某一个样式表 |
.js | 函数,逻辑操作 |
.json | 配置文件,配置页面(最外层的为全局配置文件) |
1.对应关系:
.js->.js
.json->.json
.html/.htm->.wxml
.css->.wxss
2.小程序的页面配置遵循“就近”原则,例如:
当某个page中的.wxss与app.wxss的配置文件不同时,遵循.wxss中的配置文件
3.项目配置文件
project.config.json
.json
全局配置—app.json
app.json是全剧配置文件。
放置配置文件,例如:
{
"pages": [
"pages/welcome/welcome"
]
}
这里注意,最后一个welcome表示的是4个文件,小程序在编译时会自动寻找这四个文件。
添加window:
{
"pages": [
"pages/welcome/welcome"
],
"window": {
"navigationBarBackgroundColor":
"#b3d4db"
}
}
navigationBarBackgroundColor是window 的子属性,代表的是导航栏的颜色。
如果使用小程序添加page功能进行添加,会自动生成4个关于这个页面的文件,并在app.json中自动加入新建页面。
页面的配置文件
页面的配置只能设置app.json
中部分window
配置项的内容,页面中的配置项会覆盖app.json
的window
中相同的配置项。
属性 | 类型 | 默认值 | 描述 | 最低版本 |
---|---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色,如 #000000 | |
navigationBarTextStyle | string | white | 导航栏标题颜色,仅支持 black / white | |
navigationBarTitleText | string | 导航栏标题文字内容 |
rpx与移动设备分辨率
在不同的机型上会有不同的响应,使得在不同机型上的视觉效果更好。
pt | 逻辑分辨率,屏幕尺寸对应的分辨率,比如320*480,就是宽320,长480 |
---|---|
px | 物理分辨率,像素点对应的分辨率,比如640*960,就是宽640个像素点,长960个像素点 |
ppi | 每英寸包含的像素点 |
rpx | 使用rpx,小程序会在不同分辨率下自适应 |
微信小程序width虽然用的是px,但指的是pt,逻辑分辨率
在iPhone6下,1px = 1rpx = 0.5pt,不是所有单位都适合使用rpx,文字就不适合使用rpx。
Swiper组件
滑块视图容器
决定轮播图标签style的是标签,中的图片会自动充满整个。
也是一个容器,它的内部也可以放置button等。
<view>
<swiper style="width:100%;height:500rpx">
<swiper-item><image src="/images/wx.png" ></image></swiper-item>
<swiper-item>Content</swiper-item>
<swiper-item>Content</swiper-item>
</swiper>
</view>
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
indicator-dots | boolean | false | 否 | 是否显示面板指示点 | 1.0.0 |
indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示点颜色 | 1.1.0 |
vertical | boolean | false | 否 | 滑动方向是否为纵向 | 1.0.0 |
autoplay | boolean | false | 否 | 是否自动切换 | 1.0.0 |
interval | number | 5000 | 否 | 滑动动画时长 | 1.0.0 |
.wxss文件
“.”的作用
前面如果加“.”,如:
.user-avatar{
width: 200rpx;
height: 200rpx;
margin-top: 160rpx;
}
代表是自定义的样式名称。
而如果没有这个“.”,如:
swiper image {
width:100%;
height:500rpx;
}
则代表是wxml中的元素,对组件进行设置。
flex布局
弹性盒子模型
.container{
display: flex;
flex-direction: column;/*列排布*/
align-items: center;/*居中*/
}
通过flex布局,可以使得使用该class的所有元素一起按某种排布。
注意container的大小只到组件边缘的位置
Margin
.post-author-date{
/* margin-top:10rpx;
margin-bottom:20rpx;
margin-left:10rpx; */
margin:10rpx 0 20rpx 10 rpx;
/*顺序是上右下左*/
}
margin默认的顺序是上右下左。
Height
line-height是指行高
height是指整个框架的高度
font-weight指的是字的宽度(加粗)
Image
一个自定义样式布局,如果在它的名字后加Image
,那么将会设置该自定义样式所控制的wxml标签中的image图像。例如,
.circle-img{
float:right;
margin-right: 40rpx;
vertical-align: middle;
}
.circle-img Image{
width:90rpx;
height:90rpx;
}
绝对路径和相对路径
绝对路径从根目录开始。
相对路径从该文件当前所在文件夹开始,用../
返回上一级目录。
绝对路径和相对路径在一些情况下不能相互互换。
生命周期函数
在一个小程序整个运行过程中执行的函数。
小程序中一般把从服务器取数据的代码放在onLoad()
函数中,在小程序启动时运行。
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('onload');
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log('onready');
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log('onshow');
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log('onhide');
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
console.log('onunload');
}
})
数据绑定传递数据
page(...)
是什么
.js
文件中的Page({...})
是一个对象,用它来注册一个页面。
数据绑定
只有在Page()
中data
下的变量才可以进行数据绑定。
在wxml中使用{{}}
是数据绑定的基本语法,另外,{{}}
也可以进行一些基本的运算。
与传统网页编程DOM优先的思想相比,小程序提倡数据优先的思想。
将函数中的变量传递给Page
对象中的data
在Page
的函数中使用this.setData()
将变量传递到data
中进行数据绑定,例如
onLoad: function (options) {
var post_content1 = {
date: 'Nov 18 2019',
title: '正是虾肥蟹壮时',
post_img: '/images/post/crab.png',
content: '菊黄蟹正肥,品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事;用林妹妹的话讲是“螯封嫩玉双双满,',
view_num: '112',
collect_num: '96',
author_img: '/images/avatar/1.png'
}
this.setData(post_content1)
console.log('onload')
},
注意this.setData()
只能只能传递对象,而不能传递数组。如果要传递数组,则需要传递先把数组赋值给一个对象或者将数组看作对象,例如:
var posts_content = [1,2]
this.setData({posts_key:posts_content})
/*posts_key是一个对象,它的内容是posts_content*/
this.setData({posts_content})
/*{posts_content是一个对象}*/
嵌套时进行数据绑定
例如:
onLoad: function (options) {
var post_content1 = {
date: 'Nov 18 2019',
title: '正是虾肥蟹壮时',
img:{
post_img: '/images/post/crab.png',
author_img: '/images/avatar/1.png'
},
content: '菊黄蟹正肥,品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事;用林妹妹的话讲是“螯封嫩玉双双满,',
view_num: '112',
collect_num: '96',
}
this.setData(post_content1)
console.log('onload')
},
此时,如果在.wxml
文件中访问post_img
,则需要这样:"{{img.post_img}}"
,用.
来确定归属问题。
wxml的布尔值赋值
如果在.wxml
的标签中直接赋值字符串'false'
,那么由于字符串不为空,所以JavaScript解释器判定为true
,而如果要给某个值赋布尔false,则应该{{false}}
,例如:
<swiper vertical='{{false}}' indicator-dots="{{true}}" autoplay="{{true}}" interval="5500"></swiper>
渲染
wx:if
条件渲染
wx:for
列表渲染
在组件上使用 wx:for
控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index
,数组当前项的变量名默认为 item
。例如,
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
使用 wx:for-item
可以指定数组当前元素的变量名,
使用 wx:for-index
可以指定数组当前下标的变量名:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容,switch 的选中状态),需要使用 wx:key
来指定列表中项目的唯一的标识符。
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
捕捉与回调
处理用户交互的一般逻辑
1.产生事件
2.捕捉事件
3.回调函数
4.处理事件
在组件中绑定一个事件处理函数
<view class="moto-container" bind:tap="onTap">
<text class="moto">开启小程序之旅</text>
</view>
<!-- 这里的bind:tap是事件的名字,可以从开发者文档中查找,"onTap"是事件的处理函数,在.js文件中定义 -->
/*onTap函数在.js文件中的定义*/
Page({
onTap:function(){
console.log('onTap')
}
})
页面跳转函数
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
url | string | 是 | 需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 ‘path?key=value&key2=value2’ | |
events | Object | 否 | 页面间通信接口,用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。 | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
wx.navigateTo({
url: '/pages/posts/posts',
})
/*注意navigateTo()函数的参数是对象,因此要把字符串定义为对象*/
/*navigateTo()执行onHide(),之前的界面被隐藏*/
wx.redirectTo({
url: '/pages/posts/posts',
})
/*此时不出现左上角的返回按键*/
/*redirectTo()执行onUnload(),之前的界面被销毁*/
冒泡和非冒泡
冒泡就是点击子元素,父元素也会监听到,两者都作出反应。
如果要阻止冒泡,使用catch
,阻止事件继续向上冒泡。
<view class="moto-container" bind:tap="onContainerTap">
<text class="moto" catch:tap="onSubTap">开启小程序之旅</text>
</view>
Template模版
小程序中.js
文件即脚本文件是不支持模版的
wxml模版
构建模版的时候,只需要两个文件:
文件夹
|
|———— *-template.wxml |———— *-template.wxss
例如,模版的.wxml
文件为:
<template name = "postItem">
<text class="post-content">{{item.content}}</text>
</template>
在使用temlpate的文件中,添加类似的如下代码:
<import src="post-item/post-item-template.wxml" />
<block wx:for="{{posts_key}}" wx:key="unique">
<template is = "postItem" data="{{...item}}" />
</block>
注意斜线的位置!!!
...
相当于展开wx:for
中的item
对象,这样,template模版就不需要添加item.
了。
事件响应
如果上面的一段代码里,需要添加事件响应,那么可以在<template is = "postItem" data="{{...item}}" />
外,用<view></view>
将它扩起来,在<view>
标签上添加事件响应,而不是在<template is = "postItem" data="{{...item}}" />
上添加响应。例如:
<block wx:for="{{posts_key}}" wx:key="unique">
<view catchtap="onPostTap">
<template is = "postItem" data="{{...item}}" />
</view>
</block>
wxss模版
调用时
@import "相对路径"
自定义组件
模块化组件,使得小程序可以实现模块化。