微信小程序：基礎知識
1、註冊微信小程序：
極簡の示例：
wxml:
<view><text catchtap="click" class="window">Hello</text></view>
js:
Page({
click:function(){
console.log("点击了文字");
}
})
2、程序JS
App()用來註冊一個小程序，接受一個object對象。
App({
onLaunch: function () { //小程序初始化時觸發
console.log('App Launch')
},
onShow: function () { //小程序顯示時觸發
console.log('App Show')
},
onHide: function () { //小程序進入後臺後觸發
console.log('App Hide')
}
})
Page()用來註冊一個頁面，接受一個object對象。
Page({
data:{ //頁面初始數據
// text:"这是一个页面"
},
onLoad:function(options){}, //頁面初始化時觸發，options為跳轉頁帶來的參數
onReady:function(){}, //頁面渲染完成時觸發
onShow:function(){}, //頁面顯示時觸發
onHide:function(){}, //頁面進入後臺運行時觸發
onUnload:function(){}, //頁面卸載時觸發
onPullDownRefresh:function(){} //用戶下拉時觸發
})
頁面加載順序：onLoad、onShow、onReady、onHide/onUnload、onShow
tabBar的頁面切換是在onHide和onShow之間切換
3、配置
App配置(app.json)：
{
"pages":[ //設置頁面路徑，字符串數組類型
"pages/index/index", //如果不設置index為首頁，tabBar會無效
"pages/test/test"
],
"window": { //默認頁面窗口表示
"navigationBarBackgroundColor":"#000" //导航栏背景颜色，如"#000000"
"navigationBarTextStyle":"white" //导航栏标题颜色，仅支持 black/white
"navigationBarTitleText":"首頁" //导航栏标题文字内容
"backgroundColor":"#fff" //窗口的背景色
"backgroundTextStyle":"dark" //下拉背景的样式，仅支持 dark/light
"enablePullDownRefresh":false //是否开启下拉刷新，详见页面相关事件处理函数。
"onReachBottomDistance":50 //页面上拉触底事件触发时距页面底部距离(px)
},
"tabBar": { //底部tab表現
"color":"#fff" //必填，tab 上的文字默认颜色
"selectedColor":"#fff" //必填，tab 上的文字选中时的颜色
"backgroundColor":"#fff" //必填，tab 的背景色
"position":"bottom" //位置，值為bottom或top
"borderStyle":"black" //上邊框的顏色，值為black或white
"list": [{ //tab列表，數組型，最少2個，最多5個
"pagePath": "pages/index/index", //頁面路徑，必須在pages中先定義
"text": "首页", //tab按鈕上的文字
"iconPath":"images/1.png" //圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px，當 postion 為 top 時，此參數無效
"selectedIconPath":"images/2.png" //選中時圖片路徑
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
"networkTimeout": { //設置網絡超時時間
"request": 10000, //wx.request的超时时间，单位毫秒，默认为：60000
"connectSocket": 10000, //wx.connectSocket的超时时间，默认为：60000
"uploadFile": 10000, //wx.uploadFile的超时时间，默认为：60000
"downloadFile": 10000 //wx.downloadFile的超时时间，默认为：60000
},
"debug": true //是否開啟debug
}
page.json配置：
"navigationBarBackgroundColor":"#000", //导航栏背景颜色，如"#000000"
"navigationBarTextStyle":"white", //导航栏标题颜色，仅支持 black/white
"navigationBarTitleText":"第二頁", //导航栏标题文字内容
"backgroundColor":"#fff", //窗口的背景色
"backgroundTextStyle":"dark", //下拉背景样式，仅支持 dark/light
"enablePullDownRefresh":"false", //是否开启下拉刷新，详见页面相关事件处理函数。
"disableScroll":"false", //设置为 true 则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项
"onReachBottomDistance":50 //页面上拉触底事件触发时距页面底部距离(px)
4、事件
點擊：tap
長按：longtap //超過350ms
觸摸：touchstart、touchend、touchmove、touchcancel
其他（非冒泡，其他為冒泡事件）：submit、input
綁定：
bind：冒泡綁定，父層事件會被觸發
catch：非冒泡綁定
用法：<view catchtap="click">{{t}}</view>
event值(事件的對象)：
type：類型
target：事件源組件(發起對象)
currentTarget：當前組件(當前對象)
timeStamp：時間戳
touches：觸摸點數
對象(target和currentTarget)下值：
dataset(Object類型)、id(對應ID)、offsetLeft、offsetTop
dataset下值：<e.currentTarget.dataset.id>
id(對應data-id)、title(對應data-title)
<view data-title="China" data-id="Qi" id="show">
5、WXML語句：
if語句：wx:if="" 用法：<view wx:if="{{flag}}">{{text}}</view>
else語句：wx:else 用法：<view wx:else>{{txt}}</view>
for 語句：wx:for="{{array}}"
用法：
<view wx:for="{{array}}">{{index}}-{{item}}</view> //index和item為默認名
<view wx:for="{{array}}" wx:for-item:"nitem" wx:for-index:"ix">{{ix}}-{{nitem}}</view> //自定義item名
6、加載公用組件：
法一：<include src="../templates/header" /> 為兄弟目錄templates下的header.wxml文件
header.wxml內容:
<view>{{text}}</view>
法二： <import src="../templates/footer" />
<template is="footer1" data="{{text:‘中華’}}"/>
footer.wxml內容：
<template name="footer1">{{text}}</template>
<template name="footer2">{{text}}</template>
7、頁面數據傳遞
跳到指定頁面：
wx.navigateTo({ //頁面只是被隱藏，觸發的是onHide()
url:"../logs/logs"
})
wx.redirectTo({ //頁面被卸載，按返回沒用，觸發的是onUnload()
url:"../logs/logs"
})
跳轉傳值：
帶值跳轉：
法一：
<view catchtap="ng"><text>文章</text></view>
ng:function(){
wx.navigateTo({
url:"../logs/logs?id=1&title=標題" //將id參數傳過去
})
}
法二：
<navigator url="../logs/logs?id=1" redirect> //redirect會卸載頁面
<view>
<text>文章</text>
</view>
</navigator>
頁面取值：
onLoad:function(options){
this.setData({aId:options.id}) //獲取id的值
}
解決navigator標籤和tabBar使用同一頁面不能跳轉問題：
<navigator url="../logs/logs?id=1" open-type="switchTab">
<view>内容</view>
</navigator>
8、動態取賦值：
定義：
app.js中：
App({
appData:{
userinfo:null
}
})
文件js中：
Page({
data:{
username:null,
userword:null
}
})
取值：
a:function(event){
this.setData({username:event.detail.value}); //inputの鍵入值
}
賦值：
app.appData.userinfo={username:this.data.username};
外取值：
this.setData({username:app.appData.userinfo.username});
9、WXSS佈局
flex佈局：display:flex;
flex-direction:row; //元素的排列方向，row(橫排，默認)或者column(豎排)
flex-wrap:wrap; //元素如何換行（排列不下時），wrap(換行)、nowrap(不換行)、wrap-reverse(反轉)
flex-flow:row wrap; //為上二者的合寫
justify-content:center; //元素在主軸上的對齊方式，flex-start、center、flex-end、space-around(每個元素所佔1/N空間，在空間內居中)、space-between(兩端到邊，元素距離相等)
align-items:center //元素在交叉軸上的對齊方式，flex-start、center、flex-end、baseline(基於基線)、stretch(沒有高度/寬度限制下，會佔滿空間)
flex-grow:1; //空間多餘時，元素的放大比例/佔比
flex-shrink:0; //空間不足時，元素的縮小比例/佔比，默認為1，0則不縮放
flex-basis:200px; //元素在主軸上佔據的空間（rpx不可以）
flex:2 1 50px; //上三者の合寫
order:2; //元素的排列順序
align-self:flex-end; //單個元素自身在主軸上的對齊方式
相對佈局/絕對佈局：
相對定位：相對於自身進行定位，參照物是自身。
如：.h{position:relative;top:100rpx;width:200rpx;}
絕對定位：相對於父元素進行定位，參照物是父元素。
如：.h{position:position;top:100rpx;width:200rpx;}
10、視圖容器
scroll-view:
<scroll-view //可滚动视图区域。
scroll-x //允许横向滚动，不加此句不能橫向滾動
scroll-y //允许纵向滚动
upper-threshold="40" //默認為50，距顶部/左边多远时（px），触发 scrolltoupper 事件
lower-threshold="32" //默認為50，距底部/右边多远时（px），触发 scrolltolower 事件
scroll-top="23" //设置竖向滚动条位置
scroll-left="78" //设置横向滚动条位置
scroll-into-view="ced" //值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素。最頂端/最左端和元素的最頂端/最左端對齊。
scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡
enable-back-to-top Boolean false iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupper="bst" //滚动到顶部/左边，会触发 scrolltoupper 事件bst(為函數)
bindscrolltolower="bst" //滚动到底部/右边，会触发 scrolltolower 事件
bindscroll="bst" //滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
>內容</scroll-view>
swiper:
<swiper
indicator-dots //是否显示面板指示点/輪播點
indicator-color="rgba(0, 0, 0, .3)" //指示点颜色
indicator-active-color="#000" //当前选中的指示点颜色 1.1.0
autoplay //是否自动切换，也可用autoplay="true"
current=0 //設置当前所在页面的 index
interval="3000" //默認為5000，自动切换时间间隔
duration="3000" //默認為500，滑动动画时长
circular //是否采用衔接滑动
vertical //滑动方向是否为纵向
bindchange="bc" //current 改变时会触发 change 事件，event.detail = {current: current, source: source}
>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
11、基礎組件
icon:
<icon
type="success" //icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size="30" //默認為23，icon的大小，单位px
color="red" //icon的颜色，同css的color
/>
text:
<text
selectable //文本是否可选
space="ensp" //显示连续空格，ensp(中文字符空格一半大小)、emsp(中文字符空格大小)、nbsp(根据字体设置的空格大小)
decode //是否解码
>內容</text>
progress:
<progress
percent="20.8" //Float型，百分比0~100
show-info //是否在进度条右侧显示百分比
stroke-width="5" //默認為6，进度条线的宽度，单位px
color="#fff" //默認為#09BB07，进度条颜色 （请使用 activeColor）
activeColor="#fff" //已选择的进度条的颜色
backgroundColor="#000" //未选择的进度条的颜色
active //是否顯示进度条从左往右的动画
/>
12、表單組件
checkbox-group和CheckBox：
<checkbox-group bindchange="checkboxChange"> //选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}
<label class="checkbox" wx:for="{{items}}">
<checkbox
value="{{item.name}}" //选中时触发<checkbox-group/>的 change 事件，并携带 <checkbox/> 的 value
checked="{{item.checked}}" //布爾值，当前是否选中，可用来设置默认选中
disabled //是否禁用
color=“#fff" //checkbox的颜色，同css的color
/>{{item.value}}
</label>
</checkbox-group>
form：
<form
report-submit //是否返回 formId 用于发送模板消息
bindsubmit="formSubmit" //携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
bindreset="formReset" //表单重置时会触发 reset 事件
>表單控件</form>
13、其他
動態刪除數組值：nwarr.shift();
<view></view>相當於<div></div>
const app = getApp();
// var flag = true;
var toggleClass= 'aClass';
Page({
data:{
hello:"Welcome To MyApp",
flag:true,
toggleClass:'aClass'
},
tmove:function(){
if(this.flag){
toggleClass="aClass";
this.flag = !this.flag;
}else{
toggleClass="bClass";
this.flag = !this.flag;
}
this.setData({
toggleClass
})
}
})const app = getApp(); //獲取app.js中的參數/變量
var app=getApp();
動態跟新數據：
this.setData({ //動態更新數據
toggleClass, //使用this.toggleClass沒用
//toggleClass:"bClass", 也可這麼用
toggle:app.data.toggle //使用app.js中定義的參數/變量
})
初始化變量：
法一：var t= 'aClass';
法二：
Page({
z:function(){
var t=this.t;
}
})
其他組件和API請查看微信小程序文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/
示例：
const app = getApp();
// var flag = true;
var toggleClass= 'aClass';
Page({
data:{
hello:"Welcome To MyApp",
flag:true,
toggleClass:'aClass'
},
tmove:function(){
if(this.flag){
toggleClass="aClass";
this.flag = !this.flag;
}else{
toggleClass="bClass";
this.flag = !this.flag;
}
this.setData({
toggleClass
})
}
})const app = getApp(); //獲取app.js中的參數/變量
// var flag = true;
var toggleClass= 'aClass';
Page({
data:{
hello:"Welcome To MyApp",
flag:true,
toggleClass:'aClass' //必须先声明一下，不然初始化没值
},
tmove:function(){
//var toggleClass= this.toggleClass; 等同初始定義
if(this.flag){
toggleClass="aClass"; //這個toggleClass是外部定義的變量
this.flag = !this.flag; //data中的得加上this.
}else{
toggleClass="bClass";
this.flag = !this.flag;
}
this.setData({ //動態更新數據
toggleClass, //使用this.toggleClass沒用
//toggleClass:"bClass", 也可這麼用
toggle:app.data.toggle //使用app.js中定義的參數/變量
})
}
})
