目錄

1.小程序語法

1.1.認識幾個常用標簽

1.2.數據綁定

1.3.事件綁定

1.4.大小尺寸

1.5.樣式引入

1.6.長按內容復制、對內容進行解碼

1.7.選擇器

1.8.插入圖片

1.9.圖片輪播

1.10.導航組件

1.11.滑塊

1.12.富文本標簽

1.13.button按鈕

1.14.字體圖標

1.15.單選框

1.16.復選框

1.17.父子頁面傳值

1.18.設置tabBar

2.生命周期

---

1.小程序語法

1.1.認識幾個常用標簽

??1?text?相當于以前web中的?span標簽?行內元素??不會換行

??2?view?相當于以前web中的?div標簽?塊級元素??會換行

??3?checkbox?以前的復選框標簽?

1.2.數據綁定

wxml文件：

<!-- 1 字符串 --> <view> {{msg}} </view> <!-- 2 數字類型 --> <view>{{num}}</view> <!-- 3 bool類型 --> <view>性別: {{isGirl}} </view> <!-- 4 object類型 --> <view>{{person.age}}</view> <view>{{person.height}}</view> <view>{{person.weight}}</view> <view>{{person.name}}</view><!-- 5 在標簽的屬性中使用 --> <view data-num="{{num}}"> 自定義屬性</view><!-- 6 使用bool類型充當屬性 checked 1 字符串和 花括號之間一定不要存在空格 否則會導致識別失敗 以下寫法就是錯誤的示范<checkbox checked=" {{isChecked}}"> </checkbox>--> <view><checkbox checked="{{isChecked}}"> </checkbox> </view><!-- 7 運算 => 表達式1 可以在花括號中 加入 表達式 -- “語句”2 表達式指的是一些簡單 運算 數字運算 字符串 拼接 邏輯運算。。1 數字的加減。。2 字符串拼接3 三元表達式 3 語句1 復雜的代碼段1 if else2 switch3 do while 。。。。4 for 。。。--> <view>{{1+1}}</view><view>{{'1'+'1'}}</view><view>{{ 11%2===0 ? '偶數' : '奇數' }}</view><!-- 8 列表循環1 wx:for="{{數組或者對象}}" wx:for-item="循環項的名稱" wx:for-index="循環項的索引"2 wx:key="唯一的值" 用來提高列表渲染的性能1 wx:key 綁定一個普通的字符串的時候 那么這個字符串名稱 肯定是 循環數組 中的 對象的 唯一屬性2 wx:key ="*this" 就表示 你的數組 是一個普通的數組 *this 表示是 循環項 [1,2,3,44,5]["1","222","adfdf"]3 當出現 數組的嵌套循環的時候 尤其要注意 以下綁定的名稱 不要重名wx:for-item="item" wx:for-index="index"4 默認情況下 我們 不寫wx:for-item="item" wx:for-index="index"小程序也會把 循環項的名稱 和 索引的名稱 item 和 index 只有一層循環的話 （wx:for-item="item" wx:for-index="index"） 可以省略9 對象循環1 wx:for="{{對象}}" wx:for-item="對象的值" wx:for-index="對象的屬性"2 循環對象的時候 最好把 item和index的名稱都修改一下wx:for-item="value" wx:for-index="key"--> <view><view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">索引：{{index}} -- 值:{{item.name}}</view> </view><view><view>對象循環</view><view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="age">屬性:{{key}} -- 值:{{value}}</view> </view><!-- 10 block1 占位符的標簽 2 寫代碼的時候 可以看到這標簽存在3 頁面渲染 小程序會把它移除掉--><view><block wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id" class="my_list">索引：{{index}} -- 值:{{item.name}}</block> </view><!-- 11 條件渲染1 wx:if="{{true/false}}"1 if , else , if elsewx:ifwx:elifwx:else 2 hidden 1 在標簽上直接加入屬性 hidden 2 hidden="{{true}}"3 什么場景下用哪個1 當標簽不是頻繁的切換顯示 優先使用 wx:if直接把標簽從 頁面結構給移除掉 2 當標簽頻繁的切換顯示的時候 優先使用 hidden通過添加樣式的方式來切換顯示 hidden 屬性 不要和 樣式 display一起使用--><view><view>條件渲染</view><view wx:if="{{true}}">顯示</view><view wx:if="{{false}}">隱藏</view><view wx:if="{{flase}}">1</view><view wx:elif="{{flase}}">2 </view><view wx:else> 3 </view><view>---------------</view><view hidden>hidden1</view><view hidden="{{false}}">hidden2</view><view>-----000-------</view><view wx:if="{{false}}">wx:if</view><view hidden style="display: flex;">hidden</view> </view>

js文件：

Page({data: {msg: "hello mina",num: 10000,isGirl: false,person: {age: 48,height: 333,weight: 222,name: "張三"},isChecked:false,list:[{id:0,name:"大眾"},{id:1,name:"瑪莎拉蒂"},{id:2,name:"奔馳"}]} });

1.3.事件綁定

? ? 小程序中綁定事件，通過bind關鍵字來實現。如bindtap、bindinput、bindchange等，不同組件支持不同的事件，具體看組件的說明即可。

特別注意：

1.綁定事件時不能帶參數，不能帶括號，以下為錯誤寫法：<input bindinput="handleInput(100)" />

2.事件傳值，通過標簽自定義屬性的方式和value：<input bindinput="handleInput" data-item="100" />

3.事件觸發時獲取數據：

handleInput: function(e) { // {item:100} console.log(e.currentTarget.dataset) // 輸入框的值 console.log(e.detail.value); } <!-- 1 需要給input標簽綁定 input事件 綁定關鍵字 bindinput2 如何獲取 輸入框的值 通過事件源對象來獲取 e.detail.value 3 把輸入框的值 賦值到 data當中不能直接 1 this.data.num=e.detail.value 2 this.num=e.detail.value 正確的寫法this.setData({num:e.detail.value })4 需要加入一個點擊事件 1 bindtap2 無法在小程序當中的 事件中 直接傳參 3 通過自定義屬性的方式來傳遞參數4 事件源中獲取 自定義屬性--> <input type="text" bindinput="handleInput" /> <button bindtap="handletap" data-operation="{{1}}" >+</button> <button bindtap="handletap" data-operation="{{-1}}">-</button> <view> {{num}} </view> Page({data: {num: 0},// 輸入框的input事件的執行邏輯handleInput(e) {// console.log(e.detail.value );this.setData({num: e.detail.value})},// 加 減 按鈕的事件handletap(e) {// console.log(e);// 1 獲取自定義屬性 operationconst operation = e.currentTarget.dataset.operation;this.setData({num: this.data.num + operation})} })

1.4.大小尺寸

wxss：

/* 1 小程序中 不需要主動來引入樣式文件 2 需要把頁面中某些元素的單位 由 px 改成 rpx1 設計稿 750x750 px = 750 rpx 1 px = 1 rpx2 把屏幕寬度 改成 375px375 px = 750 rpx1 px = 2rpx1rpx = 0.5px 3 存在一個設計稿 寬度 414 或者 未知 page 1 設計稿 page 存在一個元素 寬度 100px2 拿以上的需求 去實現 不同寬度的頁面適配 page px = 750 rpx1 px = 750 rpx / page100 px = 750 rpx * 100 / page 假設 page = 375px 4 利用 一個屬性 calc屬性 css 和 wxss 都支持 一個屬性1 750 和 rpx 中間不要留空格2 運算符的兩邊也不要留空格*/view{/* width: 200rpx; */height: 200rpx;font-size: 40rpx;background-color: aqua;/* 以下代碼寫法是錯誤 *//* width:750 rpx * 100 / 375 ; */width:calc(750rpx * 100 / 375);}

wxml：

<view>rpx </view>

1.5.樣式引入

wxss：

/* 1 引入的 代碼 是通過 @import 來引入 2 路徑 只能寫相對路徑*/@import "../../styles/common.wxss";

1.6.長按內容復制、對內容進行解碼

wxml：

<!-- 1 長按文字復制 selectable2 對文本內容 進行 解碼--> <text selectable decode>text &nbsp; 123 &lt; </text>

1.7.選擇器

特別注意，小程序中*通配符無效！以下代碼是無效的！

*{margin:0}

目前支持的選擇器有：

1.8.插入圖片

其中mode有13種模式，4種是縮放模式，9種是裁剪模式：

wxml：

<!-- image 圖片標簽1 src 指定要加載的圖片的路徑圖片存在默認的寬度和高度 320 * 240 原圖大小是 200 * 1002 mode 決定 圖片內容 如何 和 圖片標簽 寬高 做適配1 scaleToFill 默認值 不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素 2 aspectFit 保持寬高比 確保圖片的長邊 顯示出來 頁面輪播圖 常用3 aspectFill 保持縱橫比縮放圖片，只保證圖片的 短 邊能完全顯示出來。 少用4 widthFix 以前web的圖片的 寬度指定了之后 高度 會自己按比例來調整 常用 5 bottom。。 類似以前的backgroud-position 3 小程序當中的圖片 直接就支持 懶加載 lazy-load1 lazy-load 會自己判斷 當 圖片 出現在 視口 上下 三屏的高度 之內的時候 自己開始加載圖片 --><image mode="bottom" lazy-load src="https://tva2.sinaimg.cn/large/007DFXDhgy1g51jlzfb4lj305k02s0sp.jpg" />

wxss：

image{box-sizing: border-box;border: 1px solid red;width: 300px;height: 200px; }

1.9.圖片輪播

默認寬度100%，高度150px。

wxml：

<!-- 1 輪播圖外層容器 swiper2 每一個輪播項 swiper-item3 swiper標簽 存在默認樣式1 width 100%2 height 150px image 存在默認寬度和高度 320 * 240 3 swiper 高度 無法實現由內容撐開 4 先找出來 原圖的寬度和高度 等比例 給swiper 定 寬度和高度原圖的寬度和高度 1125 * 352 pxswiper 寬度 / swiper 高度 = 原圖的寬度 / 原圖的高度swiper 高度 = swiper 寬度 * 原圖的高度 / 原圖的寬度height: 100vw * 352 / 11255 autoplay 自動輪播6 interval 修改輪播時間7 circular 銜接輪播8 indicator-dots 顯示 指示器 分頁器 索引器 9 indicator-color 指示器的未選擇的顏色 10 indicator-active-color 選中的時候的指示器的顏色 --> <swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094"><swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg" /> </swiper-item><swiper-item> <image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /> </swiper-item><swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/37/O1CN01syHZxs1C8zCFJj97b_!!37-0-lubanu.jpg" /> </swiper-item> </swiper>

wxss：

swiper {width: 100%;/* height: calc(100vw * 352 / 1125); */height: 31.28vw; } image {width: 100%; }

1.10.導航組件

open-type有效值：

<!-- 導航組件 navigator0 塊級元素 默認會換行 可以直接加寬度和高度 1 url 要跳轉的頁面路徑 絕對路徑 相對路徑2 target 要跳轉到當前的小程序 還是其他的小程序的頁面self 默認值 自己 小程序的頁面 miniProgram 其他的小程序的頁面3 open-type 跳轉的方式1 navigate 默認值 保留當前頁面，跳轉到應用內的某個頁面，但是不能跳到 tabbar 頁面2 redirect 關閉當前頁面，跳轉到應用內的某個頁面，但是不允許跳轉到 tabbar 頁面。3 switchTab 跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面4 reLaunch 關閉所有頁面，打開到應用內的某個頁面--><navigator url="/pages/demo10/demo10"> 輪播圖頁面 </navigator><navigator url="/pages/index/index"> 直接跳轉到 tabbar頁面 </navigator><navigator open-type="redirect" url="/pages/demo10/demo10"> 輪播圖頁面 redirect </navigator><navigator open-type="switchTab" url="/pages/index/index"> switchTab直接跳轉到 tabbar頁面 </navigator><navigator open-type="reLaunch" url="/pages/index/index"> reLaunch 可以隨便跳 </navigator>

1.11.滑塊

默認高度寬度都是100%。

1.12.富文本標簽

可以將字符串解析成對應標簽，類似于vue中v-html。

<!-- rich-text 富文本標簽1 nodes屬性來實現1 接收標簽字符串 2 接收對象數組 --><rich-text nodes="{{html}}"></rich-text>

1.13.button按鈕

<!-- button 標簽1 外觀的屬性1 size 控制按鈕的大小1 default 默認大小2 mini 小尺寸2 type 用來控制按鈕的顏色1 default 灰色2 primary 綠色3 warn 紅色3 plain 按鈕是否鏤空，背景色透明4 loading 文字前顯示正在等待圖標--><button>默認按鈕</button><button size="mini"> mini 默認按鈕</button><button type="primary"> primary 按鈕</button> <button type="warn"> warn 按鈕</button> <button type="warn" plain> plain 按鈕</button> <button type="primary" loading> loading 按鈕</button> <!-- button 開發能力open-type：1 contact 直接打開 客服對話功能 需要在微信小程序的后臺配置 只能夠通過真機調試來打開 2 share 轉發當前的小程序 到微信朋友中 不能把小程序 分享到 朋友圈 3 getPhoneNumber 獲取當前用戶的手機號碼信息 結合一個事件來使用 不是企業的小程序賬號 沒有權限來獲取用戶的手機號碼 1 綁定一個事件 bindgetphonenumber 2 在事件的回調函數中 通過參數來獲取信息 3 獲取到的信息 已經加密過了 需要用戶自己待見小程序的后臺服務器，在后臺服務器中進行解析 手機號碼，返回到小程序中 就可以看到信息了4 getUserInfo 獲取當前用戶的個人信息1 使用方法 類似 獲取用戶的手機號碼2 可以直接獲取 不存在加密的字段 5 launchApp 在小程序當中 直接打開 app1 需要現在 app中 通過app的某個鏈接 打開 小程序2 在小程序 中 再通過 這個功能 重新打開 app3 找到 京東的app 和 京東的小程序 6 openSetting 打開小程序內置的 授權頁面1 授權頁面中 只會出現 用戶曾經點擊過的 權限 7 feedback 打開 小程序內置的 意見反饋頁面 1 只能夠通過真機調試來打開 --> <button open-type="contact">contact</button> <button open-type="share">share</button> <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button> <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button> <button open-type="launchApp">launchApp</button> <button open-type="openSetting">openSetting</button> <button open-type="feedback">feedback</button>

1.14.字體圖標

<!-- 小程序中的字體圖標1 type 圖標的類型success|success_no_circle|info|warn|waiting|cancel|download|search|clear2 size 大小 3 color 圖標的顏色--> <icon type="cancel" size="60" color="#0094ff"> </icon>

1.15.單選框

<!-- radio 單選框1 radio標簽 必須要和 父元素 radio-group來使用2 value 選中的單選框的值 3 需要給 radio-group 綁定 change事件 4 需要在頁面中顯示 選中的值--><radio-group bindchange="handleChange"><radio color="red" value="male">男</radio><radio color="red" value="female" >女</radio></radio-group><view>您選中的是:{{gender}}</view>

1.16.復選框

<view><checkbox-group bindchange="handleItemChange"><checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox></checkbox-group><view>選中的水果:{{checkedList}}</view> </view>

1.17.父子頁面傳值

<!-- 1 父組件(頁面) 向子組件 傳遞數據 通過 標簽屬性的方式來傳遞1 在子組件上進行接收2 把這個數據當成是data中的數據直接用即可2 子向父傳遞數據 通過事件的方式傳遞1 在子組件的標簽上加入一個 自定義事件--> <Tabs tabs="{{tabs}}" binditemChange="handleItemChange" ><block wx:if="{{tabs[0].isActive}}">0 </block> <block wx:elif="{{tabs[1].isActive}}">1 </block> <block wx:elif="{{tabs[2].isActive}}">2 </block> <block wx:else>3</block></Tabs>

1.18.設置tabBar

在app.json中配置

{"pages": ["pages/index/index","pages/img/img","pages/mine/mine","pages/search/search","pages/logs/logs"],"window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#cccccc","navigationBarTitleText": "我的應用","navigationBarTextStyle": "black","enablePullDownRefresh": true,"backgroundColor": "#aaaaaa"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首頁","iconPath": "icon/_home.png","selectedIconPath": "icon/home.png"},{"pagePath": "pages/img/img","text": "圖片","iconPath": "icon/_img.png","selectedIconPath": "icon/img.png"},{"pagePath": "pages/mine/mine","text": "我的","iconPath": "icon/_my.png","selectedIconPath": "icon/my.png"},{"pagePath": "pages/search/search","text": "搜索","iconPath": "icon/_search.png","selectedIconPath": "icon/search.png"},{"pagePath": "pages/demo18/demo18","text": "demo18","iconPath": "icon/_search.png","selectedIconPath": "icon/search.png"}],"color":"#0094ff","selectedColor":"#ff9400","backgroundColor":"#ffffff"},"sitemapLocation": "sitemap.json" }

2.生命周期

Page({/*** 頁面的初始數據*/data: {},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {} })

?

總結

以上是生活随笔為你收集整理的微信小程序从入门到飞起（各个组件）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。