- 資料綁定
- 事件操作
- 事件綁定
- 冒泡事件
- 非冒泡事件
- 互斥事件
- 事件對象
- 事件綁定
- 内部頁面跳轉
- 消息提示框
- 模态對話框
- 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屬性完全一緻。