view ：hover-class 按下去顏色改變 hover-stop-propagation：指定是否阻止本節(jié)點(diǎn)的祖先節(jié)點(diǎn)出現(xiàn)點(diǎn)擊態(tài)
<view hover-class="h-class" hover-stop-propagation="false">按我顏色變</view>
text
文本標(biāo)簽
只能嵌套 text
長安文字可以復(fù)制（只有他有著功能）
可以對空格 回車進(jìn)行編碼
- 1 selectable :長安復(fù)制
- 2 對文本內(nèi)容進(jìn)行解碼 decode
decode可以解析的有  (空格); <（小于符號） > & ' ? ?
<text selectable="{{true}}" decode="{{true}}">哈哈 123 <</text>
圖片 image小程序最多2m，最好把圖片放在網(wǎng)上 ,圖片默認(rèn)寬度 320 *240
-
mode 決定圖片內(nèi)容如何和圖片做適配，就好像安卓一樣
- scaleToFill 縮放模式仿野，不保持縱橫比縮放圖片裕照，使圖片的寬高完全拉伸至填滿 image 元素
aspectFit: 縮放模式，保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來庶橱。也就是說徙歼，可以完整地將圖片顯示出來。
小程序中的lazy-load 懶加載 ：就是出現(xiàn)在窗口的時候底洗，圖片開始來加載
lazy-load="false" 默認(rèn)的是false 這個用處在，大量圖的時候列表吧
<image class="" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4010395508,932047146&fm=26&gp=0.jpg" mode="scaleToFill" lazy-load="false" binderror="" bindload="" />
swiper 容器
image.png
- swiper-item 輪播項
- swiper : width 是100% height 是150px image的默認(rèn)：320*240
- swiper 如何適應(yīng)圖片的寬高
- autoplay:自動輪播 interval:時間默認(rèn)是5s circular：循環(huán)輪播 indicator-dots:指示器
<swiper autoplay="{{true}}" interval="1000" circular="{{true}}" indicator-dots="{{true}}" indicator-active-color="#ff4500" indicator-color="rgba(0, 0, 0, .3)">
<swiper-item class="" item-id="">
<image src="https://gw.alicdn.com/tfs/TB1xv_6vBv0gK0jSZKbXXbK2FXa-380-320.png" />
</swiper-item>
<swiper-item class="" item-id="">
<image class="" src="https://gw.alicdn.com/bao/upload/TB1n5XVvrj1gK0jSZFuXXcrHpXa.jpg_Q75.jpg" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="">
</image>
</swiper-item>
<swiper-item class="" item-id="">
<image class="" src="https://gw.alicdn.com/bao/upload/TB1ujCKvhD1gK0jSZFsXXbldVXa.jpg_Q75.jpg" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
</swiper-item>
</swiper>
導(dǎo)航組件 navigator (默認(rèn)換行，塊級元素),注意跳轉(zhuǎn)的方式
1聪铺、url 要跳轉(zhuǎn)的頁面 絕對和相對路徑
2、target 要跳轉(zhuǎn)到當(dāng)前小程序 還是其他的小程序 在哪個目標(biāo)上發(fā)生跳轉(zhuǎn)萄窜，默認(rèn)當(dāng)前小程序 默認(rèn)是self
3铃剔、open-type 跳轉(zhuǎn)的方式
navigate 保留當(dāng)前頁面，跳轉(zhuǎn)到引用內(nèi)的頁面查刻，但是不能跳轉(zhuǎn)tabbar 頁面
redirect 關(guān)閉當(dāng)前頁面键兜，跳轉(zhuǎn)到引用內(nèi)的某個頁面，但是不嫩跳轉(zhuǎn)到tabbar頁面穗泵，其實(shí)就是滅有返回按鈕了
switchTab 跳轉(zhuǎn)到tabbar頁面普气，關(guān)閉其他非tabbar的頁面
reLaunch 關(guān)閉所有頁面，打開引用內(nèi)的某個頁面
<navigator class="" target="" url="/pages/demo10/demo10" hover-class="navigator-hover" open-type="navigate">
輪播圖頁面1
</navigator>
<navigator class="" target="" url="/pages/demo10/demo10" hover-class="navigator-hover" open-type="navigate">
輪播圖頁面2
</navigator>
<navigator class="" target="" url="/pages/index/index" hover-class="navigator-hover" open-type="navigate">
跳轉(zhuǎn)到tabbar 頁面
</navigator>
<navigator class="" target="" url="/pages/index/index" hover-class="navigator-hover" open-type="switchTab">
switchTab 跳轉(zhuǎn)到tabbar頁面佃延，關(guān)閉其他的頁面
</navigator>
<navigator class="" target="" url="/pages/index/index" hover-class="navigator-hover" open-type="reLaunch">
reLaunch 關(guān)閉所有頁面现诀，打開引用內(nèi)的某個頁面
</navigator>
rick-text 富文本標(biāo)簽
nodes 屬性來實(shí)現(xiàn)
接受標(biāo)簽字符串
// 標(biāo)簽支付串 比較常用
html: '<div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0;"><div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 320px; height: 136.533px; padding-bottom: 8.53333px; background-color: rgb(255, 255, 255); overflow: hidden;"><img lazyload="true" placeholder="https://gw.alicdn.com/tfs/TB1vexLQXXXXXXlXpXXXXXXXXXX-1-1.png" autoremovescheme="true" autoreplacedomain="true" autoscaling="true" autowebp="true" ignoregif="true" autocompress="true" highquality="true" compresssuffix="Q75,Q50" defaultheight="750rem" autopixelratio="true" isonce="1" fallbacksource="[object Object]" src="http://gw.alicdn.com/tfs/TB15vHzbKuSBuNjy1XcXXcYjFXa-750-552.png_790x10000.jpg_.webp" style="display: flex; width: 320px; height: 235.947px; position: absolute; top: -132.267px; left: 0px;"><div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 320px; height: 136.533px; overflow: hidden;"><!-- empty --><div style="border: 0px solid black; position: relative; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; width: 707.84px; height: 136.533px; transform: translate3d(0px, 0px, 0px); transition: all 300ms ease 0ms;"><div style="border: 0px solid black; position: absolute; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; transform: scale(1); opacity: 1; left: 0px; top: 0px; width: 287.573px; height: 136.533px; margin-left: 5.97333px; transition: all 300ms ease 0ms;"><div sliderid="1" preventmoveevent="true" style="-webkit-box-orient: horizontal; flex-direction: row; position: relative; width: 287.573px; height: 136.533px;"><img placeholder="https://gw.alicdn.com/tfs/TB1vexLQXXXXXXlXpXXXXXXXXXX-1-1.png" autoremovescheme="true" autoreplacedomain="true" autoscaling="true" autowebp="true" ignoregif="true" autocompress="true" highquality="true" compresssuffix="Q75,Q50" defaultheight="750rem" lazyload="false" autopixelratio="true" isonce="1" fallbacksource="[object Object]" src="http://gw.alicdn.com/tfs/TB154_SlkOWBuNjSsppXXXPgpXa-674-320.png_580x10000.jpg_.webp" style="display: flex; width: 287.573px; height: 136.533px; position: absolute; left: 0px; top: 0px;"><div style="border: 0px solid black; position: absolute; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; left: 4.26667px; top: 0px; width: 279.04px; height: 128px; background-color: rgb(255, 255, 255); overflow: hidden; border-radius: 10.24px;"><!-- empty --><div resizemode="cover" source="[object Object]" placeholder="https://gw.alicdn.com/tfs/TB1vexLQXXXXXXlXpXXXXXXXXXX-1-1.png" autoremovescheme="true" autoreplacedomain="true" autoscaling="true" autowebp="true" ignoregif="true" autocompress="true" highquality="true" compresssuffix="Q75,Q50" defaultheight="750rem" lazyload="false" autopixelratio="true" isonce="1" style="border: 0px solid black; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; height: 128px; position: absolute; left: 0px; top: 0px; width: 279.04px; overflow: hidden; border-radius: 10.24px; background-image: url("undefined"); background-size: cover; background-repeat: no-repeat; background-position: center center;"></div><!-- empty --><div resizemode="cover" source="[object Object]" placeholder="https://gw.alicdn.com/tfs/TB1vexLQXXXXXXlXpXXXXXXXXXX-1-1.png" autoremovescheme="true" autoreplacedomain="true" autoscaling="true" autowebp="true" ignoregif="true" autocompress="true" highquality="true" compresssuffix="Q75,Q50" defaultheight="750rem" lazyload="false" autopixelratio="true" isonce="1" style="border: 0px solid black; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; height: 128px; position: absolute; left: 0px; top: 0px; width: 279.04px; background-image: url("//gw.alicdn.com/tfs/TB1wrqQvUH1gK0jSZSyXXXtlpXa-654-300.jpg_570x10000Q75.jpg_.webp"); background-size: cover; background-repeat: no-repeat; background-position: center center;"></div><div sliderid="1" preventmoveevent="true" style="position: absolute; left: 0px; top: 0px; width: 279.04px; height: 128px;" data-spm-anchor-id="a2141.7631544.0.i0"></div></div></div></div><div style="border: 0px solid black; position: absolute; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; transform: scale(1); opacity: 1; left: 289.28px; top: 0px; width: 287.573px; height: 136.533px; margin-left: 5.97333px; transition: all 300ms ease 0ms;"><div sliderid="1" preventmoveevent="true" style="-webkit-box-orient: horizontal; flex-direction: row; position: relative; width: 287.573px; height: 136.533px;"><img placeholder="https://gw.alicdn.com/tfs/TB1vexLQXXXXXXlXpXXXXXXXXXX-1-1.png" autoremovescheme="true" autoreplacedomain="true" autoscaling="true" autowebp="true" ignoregif="true" autocompress="true" highquality="true" compresssuffix="Q75,Q50" defaultheight="750rem" lazyload="false" autopixelratio="true" isonce="1" fallbacksource="[object Object]" src="http://gw.alicdn.com/tfs/TB154_SlkOWBuNjSsppXXXPgpXa-674-320.png_580x10000.jpg_.webp" style="display: flex; width: 287.573px; height: 136.533px; position: absolute; left: 0px; top: 0px;"><div style="border: 0px solid black; position: absolute; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; left: 4.26667px; top: 0px; width: 279.04px; height: 128px; background-color: rgb(255, 255, 255); overflow: hidden; border-radius: 10.24px;"><!-- empty --><div resizemode="cover" source="[object Object]" placeholder="https://gw.alicdn.com/tfs/TB1vexLQXXXXXXlXpXXXXXXXXXX-1-1.png" autoremovescheme="true" autoreplacedomain="true" autoscaling="true" autowebp="true" ignoregif="true" autocompress="true" highquality="true" compresssuffix="Q75,Q50" defaultheight="750rem" lazyload="false" autopixelratio="true" isonce="1" style="border: 0px solid black; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; height: 128px; position: absolute; left: 0px; top: 0px; width: 279.04px; overflow: hidden; border-radius: 10.24px; background-image: url("undefined"); background-size: cover; background-repeat: no-repeat; background-position: center center;"></div><!-- empty --><div resizemode="cover" source="[object Object]" placeholder="https://gw.alicdn.com/tfs/TB1vexLQXXXXXXlXpXXXXXXXXXX-1-1.png" autoremovescheme="true" autoreplacedomain="true" autoscaling="true" autowebp="true" ignoregif="true" autocompress="true" highquality="true" compresssuffix="Q75,Q50" defaultheight="750rem" lazyload="false" autopixelratio="true" isonce="1" style="border: 0px solid black; box-sizing: border-box; display: flex; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; height: 128px; position: absolute; left: 0px; top: 0px; width: 279.04px; background-image: url("//gw.alicdn.com/tfs/TB1vWpVvO_1gK0jSZFqXXcpaXXa-654-300.png_570x10000.jpg_.webp"); background-size: cover; background-repeat: no-repeat; background-position: center center;"></div><div sliderid="1" preventmoveevent="true" style="position: absolute; left: 0px; top: 0px; width: 279.04px; height: 128px;"></div></div></div></div><!-- empty --></div><!-- empty --></div></div></div>'
,
htmlContent: '<header class="sc-VigVT SQtZc"><div class="header-bd"><a class="placeholder"><span class="text iconfont icon-search">尋找寶貝店鋪</span></a></div></header>'
,
// 對象數(shù)組 不常用
htmlArr: [
{
// div 標(biāo)簽
name: "div",
// 標(biāo)簽上的屬性
attrs: {
class :"my_div",
style:"color:red;"
},
//子節(jié)點(diǎn) children
children:[
{
name:"p",
attrs:{},
children:[{
type:"text",
text:"hello"
}]
}
]
}
]
這個功能強(qiáng)大呀
<rich-text class="" nodes="{{html}}">
</rich-text>
<rich-text class="" nodes="{{htmlContent}}">
</rich-text>
<rich-text class="" nodes="{{htmlArr}}">
</rich-text>
button ：原有顏色
外觀屬性
size：大小 type :按鈕顏色 plain ：按鈕是否鏤空，背景色透明
loading ：名稱前是否帶 loading 圖標(biāo)
<button size="mini">xiao按鈕</button>
<button size="default">默認(rèn)按鈕</button>
<button size="default" type="default">默認(rèn)顏色按鈕</button>
<button size="default" type="primary">白色按鈕</button>
<button size="default" type="warn">紅色按鈕</button>
<button size="default" type="warn" plain="{{true}}"> plain ：按鈕是否鏤空履肃，背景色透明</button>
<button size="default" loading="{{true}}">默認(rèn)按鈕</button>
button 開放的能力
open-type:
contact 打開客戶對話赶盔，需要在后臺進(jìn)行配置才可以
share 轉(zhuǎn)發(fā)小程序到微信朋友中 ，不能分享朋友圈
getPhoneNumber 獲取當(dāng)前用戶的電話號碼 榆浓，企業(yè)賬號才有權(quán)限
1于未、綁定事件：bindgetphonenumber
2、事件回調(diào)中陡鹃，通過參數(shù)來獲取信息
3烘浦、信息已經(jīng)加密，需要搭建后臺服務(wù)器萍鲸，在后臺服務(wù)器中進(jìn)行解析
getUserInfo 獲取當(dāng)前的個人信息
1闷叉、獲取用戶信息，可以從bindgetuserinfo回調(diào)中獲取到用戶信息
2脊阴。直接獲取
launchApp 在小程序中直接打開app
1握侧、需要app中某個連接打開小程序蚯瞧，
2、在通過小程序打開這個app
openSetting 打開小程序內(nèi)置的授權(quán)頁面
1品擎、授權(quán)出現(xiàn)用戶曾經(jīng)點(diǎn)擊過得權(quán)限
feedback 打開小程序的意見反饋
1埋合、只能通過手機(jī)
<button open-type="contact">打開客服會話</button>
<button open-type="share">轉(zhuǎn)發(fā)小程序到微信朋友中</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">獲取當(dāng)前用戶的電話號碼</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo" >獲取當(dāng)前的個人信息</button>
<button open-type="launchApp">在小程序中直接打開app</button>
<button open-type="openSetting">打開小程序內(nèi)置的授權(quán)頁面</button>
<button open-type="feedback">打開小程序的意見反饋</button>
//獲取手機(jī)號
getPhoneNumber(e){
console.log(e)
},
// 獲取個人信息
getUserInfo(e){
console.log(e)
},
icon 小程序的字體圖標(biāo)
type="success|success_no_circle|info|warn|waiting|cancel|download|search|clear"
size 大小 color 顏色
radio 單選框
1、 radio和父元素 radio-group 一起使用
2萄传、value 選中的單項框的值
3甚颂、處理函數(shù)handelChange
4、顯示處理的值
<radio-group bindchange="handelChange">
<radio color="red" class="" value="male" >
男
</radio>
<radio class="" value="female" color="">
女
</radio>
<view class="" hover-class="none" hover-stop-propagation="false">
選中：{{gender}}
</view>
</radio-group>
ES6 新增了let命令秀菱，用來聲明變量振诬。它的用法類似于var，但是所聲明的變量衍菱，只在let命令所在的代碼塊內(nèi)有效赶么。
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
gender:""
},
handelChange(e){
console.log(e);
//ES6 新增了let命令，用來聲明變量脊串。它的用法類似于var禽绪，但是所聲明的變量，只在let命令所在的代碼塊內(nèi)有效洪规。
let gender=e.detail.value;
this.setData({
gender
})
},
checkbox
<view class="" hover-class="none" hover-stop-propagation="false">
<checkbox-group bindchange="handelItemChange">
<checkbox value="{{item.value}}" wx:for="{{lists}}" wx:key="id">
{{item.name}}
</checkbox>
</checkbox-group>
<view class="" hover-class="none" hover-stop-propagation="false">
選中的 : {{checkedList}}
</view>
</view>
let 聲明的變量只在 let 命令所在的代碼塊內(nèi)有效印屁。
const 聲明一個只讀的常量，一旦聲明斩例，常量的值就不能改變
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
lists:[
{
id:0,
name:"蘋果",
value:"apple"
},
{
id:1,
name:"菠蘿",
value:"grape"
},
{
id:2,
name:"香蕉",
value:"bananer"
}
],
checkedList:[]
},
handelItemChange(e){
console.log(e)
//let 聲明的變量只在 let 命令所在的代碼塊內(nèi)有效雄人。
// const 聲明一個只讀的常量，一旦聲明念赶，常量的值就不能改變
const checkedList=e.detail.value;
this.setData({
checkedList
})
},
