- 数据绑定
- 事件操作
- 事件绑定
- 冒泡事件
- 非冒泡事件
- 互斥事件
- 事件对象
- 事件绑定
- 内部页面跳转
- 消息提示框
- 模态对话框
- loading提示框
- 操作菜单
- 基本api接口
- 获取用户信息
- 获取用户位置信息（用户点选地图）
- 获取图片
- Flex布局
- 基本概念
- 容器的属性
- 项目的属性
数据绑定
在小程序中支持简易的数据绑定操作，数据绑定分两种：单向数据绑定和双向数据绑定。
在输入框中如果通过value来操作数据，则视为单向数据绑定。如果通过model:value来操作数据，则视为双向数据绑定。
html用的
<input value="{{message}}" />
<text>{{message}}</text>
<input model:value="{{message}}" />
js代码：
Page({
/**
* 页面的初始数据
*/
data: {
message: "目标数据"
},
});
默认情况下，微信开发者工具集成的MINA工具包可能是旧版的，所以会存在双向数据绑定无效，此时可以通过提升基础库的版本来解决这个BUG。
js用的
数据保存**
this.setData({ message: "荏苒资讯"});
this.data.message;
事件操作
在微信小程序中，也是支持事件操作。
在小程序中用户都是通过手指触摸屏幕而不是鼠标操作屏幕，所以普遍操作的都是touch触摸事件，而不是点击事件，更不存在鼠标悬放等操作。
事件绑定
小程序中一共提供了3个属性可以让开发者在页面标签中进行自定义的事件绑定操作，分别是：冒泡事件绑定（bind事件），非冒泡事件绑定（catch事件）以及互斥事件绑定（mut-bind:事件）。
- bindtap ----------冒泡事件
- catchtap ----------非冒泡时间，并且他会阻止往下冒泡
- mut-bind:tap---------互斥事件
冒泡事件绑定
顾名思义，通过bind绑定的事件会向父元素进行冒泡传递。
例如：绑定一个点击事件tap，则属性写法为：bindtap
<view class="father" bindtap="showwin" data-title="父元素">
我是父元素，点我呀~
<view class="son" bindtap="showwin" data-title="子元素">我是子元素，点我呀~</view>
</view>
触发子元素和父元素
js代码：
Page({
showwin(event){
console.log(event); // 事件对象
console.log(event.currentTarget); // 获取触发事件的元素对象
console.log(event.currentTarget.dataset.title); // 获取触发事件的元素对象的标签属性
}
})
css，代码：
.father{
width: 250px;
height: 250px;
background-color: yellow;
position: relative;
}
.son{
width: 150px;
height: 150px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: red;
}
.grantson{
width: 60px;
height: 60px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: blue;
font-size: 12px;
color: white;
}
非冒泡事件绑定
与上面bindtap不同，通过catchtap绑定的事件，不会像父元素进行冒泡传递，同时，catchtap也可以阻止来自bindtap事件的冒泡效果。
<view class="father" bindtap="showwin" data-title="父元素">
我是父元素，点我呀~
<view class="son" catchtap="showwin" data-title="子元素">
我是子元素，点我呀~
<view class="grantson" bindtap="showwin" data-title="孙元素">
我是孙元素，点我呀~
</view>
</view>
</view>
点击孙元素，会触发孙元素和子元素
父元素不会触发，因为他被子元素的catchtap阻止了。
互斥事件绑定
一个
mut-bind
触发后，如果事件冒泡到其他节点上，其他节点上的
mut-bind
绑定函数不会被触发，但
bind
绑定函数和
catch
绑定函数依旧会被触发。
换而言之，所有
mut-bind
是“互斥”的，只会有其中一个绑定函数被触发。同时，它完全不影响
bind
和
catch
的绑定效果。
<view class="father" bindtap="showwin" data-title="父元素">
我是父元素，点我呀~
<view class="son" mut-bind:tap="showwin" data-title="子元素">
我是子元素，点我呀~
<view class="grantson" mut-bind:tap="showwin" data-title="孙元素">
我是孙元素，点我呀~
</view>
</view>
</view>
互斥指的是mut-bind:事件之间互斥，和catch和bind都不互斥，而且也不会阻止他们冒泡。
点击孙元素，会触发孙元素和父元素。
事件对象
在自定义组件中，currentTarget是无效的，只能使用target属性来获取触发事件的标签。
内部页面跳转
标签跳转<navigator open-type="switchTab" url="/pages/home/home?id=666">
跳转到新页面[当前小程序内部，tab菜单]
</navigator>
<navigator open-type="redirect" url="/pages/event/event?id=666">
跳转到新页面[当前小程序内部，非tab菜单]
</navigator>
// 跳转到当前小程序内部，非tab菜单
wx.navigateTo({
url: '/pages/event/event?id=666',
});
// 跳转到当前小程序内部其他tab菜单
wx.switchTab({
url: '/pages/home/home',
})
跳转到的页面如果想要接受get参数，可以在onLoad方法中接受。
event.js
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options); // json对象格式.
}
})
消息提示框
显示消息提示框
wx.showToast({
title: '登录成功',
icon: 'success',
duration: 2000
})
隐藏消息提示框
// 也可以使用定时器主动关闭消息提示窗口
setTimeout(()=>{
wx.hideToast();
},3000);
在小程序中，也提供了定时器的全局函数，分别是定时多次(setInterval)和定时一次(setTimeout)，他们的使用和之前在javascript是一模一样，2个参数：
参数1：匿名函数，如果希望在匿名函数内部，this指向不发生改变，建议使用
箭头函数。
参数2：时间间隔。单位: ms。
定时器也可以取消，小程序中分别提供了clearInterval和clearTimeout，参数同样还是定时器的返回值。
演示：
模态对话框
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
loading提示框
和wx.showLoading
同时只能显示一个wx.showToast
显示提示框
wx.showLoading({
title: '加载中',
});
隐藏提示框
wx.hideLoading();
操作菜单
wx.showActionSheet({
itemList: ['A', 'B', 'C'],
success (res) {
console.log(res.tapIndex);
},
fail (res) {
console.log(res.errMsg);
}
});
基本API接口
获取用户信息
方式一wxml
<button open-type="getUserInfo" bindgetuserinfo="xxxx">授权登录</button>
js
xxxx:function(){
wx.getUserInfo({
success: function (res) {
// 调用成功后触发
console.log('success', res);
},
fail: function (res) {
// 调用失败后触发
console.log('fail', res)
}
})
}
wxml
<!--pages/login/login.wxml-->
<view>当前用户名：{{name}}</view>
<view>
当前头像：<image src="{{path}}" style="height:200rpx;width:200rpx;"></image>
</view>
<button open-type="getUserInfo" bindgetuserinfo="fetchInfo">获取信息button</button>
js
// pages/login/login.js
Page({
/**
* 页面的初始数据
*/
data: {
name:"",
path: "/static/default.png"
},
fetchInfo:function(){
var self = this;
wx.getUserInfo({
success:function(res){
console.log(res);
self.setData({
name:res.userInfo.nickName,
path:res.userInfo.avatarUrl
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
注意事项：
-
- 想要获取用户信息，必须经过用户授权（button）。
- 已授权，直接可以提取信息
- 不授权，则需要通过调用手动授权 wx.openSetting
// 打开配置，手动授权。 // wx.openSetting({})
wxml
<view bindtap="getUserName">获取当前用户名</view>
js
getUserName(){
console.log("获取用户信息");
// 手动申请授权
wx.authorize({
scope: 'scope.userInfo', // 指定申请的授权类型
success () {
// 获取用户信息
wx.getUserInfo({
success: function (res) {
// 调用成功后触发
console.log('success',res);
},
fail:function(res){
// 调用失败后触发
console.log('fail', res);
}
});
}
});
// 列出当前用户已经授权的权限列表
wx.openSetting({
success (res) {
console.log(res.authSetting);
},
fail(res){
console.log(res)
}
});
},
https://www.jb51.net/article/150862.htm
获取用户位置信息[让用户点选地图选择位置]
wxml
<view bindtap="getLocalPath">{{localPath}}</view>
js
data: {
localPath:"请选择位置",
},
getLocalPath:function(){
var that = this;
wx.chooseLocation({
success: function(res) {
that.setData({localPath:res.address});
},
})
},
获取图片
wxml
<!--pages/publish/publish.wxml-->
<view bindtap="uploadImage">请上传图片</view>
<view class="container">
<image wx:for="{{imageList}}" src="{{item}}"></image>
</view>
js
data: {
imageList: ["/static/hg.jpg", "/static/hg.jpg"]
},
uploadImage:function(){
var that = this;
wx.chooseImage({
count:9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success:function(res){
// 设置imageList，页面上图片自动修改。
// that.setData({
// imageList: res.tempFilePaths
// });
// 默认图片 + 选择的图片；
that.setData({
imageList: that.data.imageList.concat(res.tempFilePaths)
});
}
});
},
注意：图片目前只是通过本地的临时路径展示而已，并没有上传到服务器。
Flex 布局
以下内容阮一峰博客来自：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
display 设置元素的显示模式：
none;
block;
inline;
inline-block;
HTML标签元素按照不同的显示模式可以分成4种：
隐藏元素
隐藏起来的元素，页面不会显示
head,title,input[type="hidden"]
块级元素
自带换行，默认宽度占据父级元素100%，可以设置宽高，也可以设置完整的内边距，外边距
p,h1~h6,div...
行级元素
不自带换行，不可以设置元素的宽高，自身大小随内部内容多少而变化，也不可以设置外边距，只有内边距
a,b,i,.....
行内块级元素
不自带换行，可以设置元素的宽高，默认宽高度随内部内容多少而变化，可以设置完整的内边距和外边距
img,input,....
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{
display: flex;
}
行内元素也可以使用 Flex 布局。
.box{
display: inline-flex;
}
Webkit 内核的浏览器，必须加上
-webkit
前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，设为 Flex 布局以后，子元素的
float
、
clear
和
vertical-align
属性将失效。
基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做
main start
，结束位置叫做
main end
；交叉轴的开始位置叫做
cross start
，结束位置叫做
cross end
。
项目默认沿主轴排列。单个项目占据的主轴空间叫做
main size
，占据的交叉轴空间叫做
cross size
。
容器的属性
以下6个属性设置在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1 flex-direction属性
flex-direction
属性决定主轴的方向（即项目的排列方向）。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
它可能有4个值。
-
row
-
row-reverse
-
column
-
column-reverse
3.2 flex-wrap属性
默认情况下，项目都排在一条线（又称"轴线"）上。
flex-wrap
属性定义，如果一条轴线排不下，如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
它可能取三个值。
（1）
nowrap
（默认）：不换行。
（2）
wrap
：换行，第一行在上方。
（3）
wrap-reverse
：换行，第一行在下方。
3.3 flex-flow
flex-flow
属性是
flex-direction
属性和
flex-wrap
属性的简写形式，默认值为
row nowrap
。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
3.4 justify-content属性
justify-content
属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
-
flex-start
-
flex-end
-
center
-
space-between
-
space-around
3.5 align-items属性
align-items
属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
-
flex-start
-
flex-end
-
center
-
baseline
-
stretch
3.6 align-content属性
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
该属性可能取6个值。
-
flex-start
-
flex-end
-
center
-
space-between
-
space-around
-
stretch
项目的属性
以下6个属性设置在项目上。
-
order
-
flex-grow
-
flex-shrink
-
flex-basis
-
flex
-
align-self
4.1 order属性
order
属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
order: <integer>;
}
4.2 flex-grow属性
flex-grow
属性定义项目的放大比例，默认为
，即如果存在剩余空间，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有项目的
flex-grow
属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的
flex-grow
属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
4.3 flex-shrink属性
flex-shrink
属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的
flex-shrink
属性都为1，当空间不足时，都将等比例缩小。如果一个项目的
flex-shrink
属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
4.4 flex-basis属性
flex-basis
属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为
auto
，即项目的本来大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以设为跟
width
或
height
属性一样的值（比如350px），则项目将占据固定空间。
4.5 flex属性
flex
属性是
flex-grow
,
flex-shrink
和
flex-basis
的简写，默认值为
0 1 auto
。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值：
auto
(
1 1 auto
) 和 none (
0 0 auto
)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
4.6 align-self属性
align-self
属性允许单个项目有与其他项目不一样的对齐方式，可覆盖
align-items
属性。默认值为
auto
，表示继承父元素的
align-items
属性，如果没有父元素，则等同于
stretch
。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。