零基础微信落地页小程序实战项目
生活随笔
收集整理的這篇文章主要介紹了
零基础微信落地页小程序实战项目
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
微信小程序簡單易上手，只要有一些編程基礎，即可快速開發基本的項目。
本項目是常見的，商品廣告落地頁小程序。提供商品瀏覽，商品列表按鈕，購買，微信授權，手機號綁定，驗證碼校驗，用戶協議，消息通知，監聽者模式等基本功能。
定位學習人群是剛接觸微信小程序的，零基礎同學。
本人剛接觸微信小程序時，也是零基礎，HTML和CSS都是第一次接觸，經過兩個星期的學習，就掌握了基本的開發技巧，并獨立完成多個項目。所以即使沒有這方面經驗的同學也不要氣餒，只要學習幾個實戰項目之后，應付工作基本上都是綽綽有余的。
效果圖展示：
目錄
創建小程序
落地頁可適配長度界面
落地頁底部欄：
- 客服按鈕，購買按鈕
- 微信登錄授權
- 底部用戶協議，用戶協議同意定位
3 x 3 按鈕組件
- 組件使用
- flex-grow
- flex-shrink
- 組件傳遞數據
- CSS關鍵幀動畫
拼團成功組件
廣告輪播
- 水平廣告輪播
- 消息輪播
下浮層
Notification 監聽者模式
Toast 提示彈窗
總結
代碼下載
創建
創建一個小程序項目，如果只是學習，那只需要下載安裝 微信開發者工具。如果是商用的話，需要申請APPID，并根據自己需要開通相應的功能，例如支付接口，以及申請自己的資源CDN。
下面介紹如何創建一個小程序：
啟動工具之后，點擊“+” 創建小程序。
如果沒有申請 APPID，可以使用測試號，就是隨機生成的測試號，只是本地開發使用，不可以商用。
選擇 不使用云服務，點擊創建，選擇編程語言。然后點擊確定。
這樣就來到項目界面。
— NEXT —
落地頁可適配長度界面
本小節，我們來實現一下落地頁可適配長度的滾動界面。
需要創建 page，名稱就叫做 landingpage。
在app.json中，添加啟動頁，輸入名稱，按下回車，會自動在 pages/ 路徑下生成文件夾，并生成 landingpage.js，landingpage.json，landingpage.wxml，landingpage.wxss 四個文件。
我習慣先寫 .wxml 文件，然后在 .wxss 文件中隨時調試界面樣式，涉及到引用的組件，在 .json 文件中添加即可。界面邏輯寫在 .js 文件中。
分析界面結構：
- 整體結構為縱向垂直布局，可以先設置幾張圖片依次平鋪。
先設置 landingpage 整體樣式：
<view class='main-wrap'></view>
.main-wrap {position: relative;display: flex;flex-direction: column;background: #EEE; }使用 wx:for 設置一組圖片，wx:key可以寫成 *this
<block wx:for="{{bannerImgList}}" wx:for-index="index" wx:key="*this"><image class="banner" mode="widthFix" src="{{item}}" lazy-load="true" /> </block>圖片樣式為：
.banner {width: 100%;height: auto; }這里 bannerImgList 為本地一組圖片資源，在 data 中聲明：
bannerImgList: ['../../images/landingpage1.jpg','../../images/landingpage6.jpg','../../images/landingpage7.jpg','../../images/landingpage8.jpg', ]這樣，落地頁基本就有了一個簡單的界面，圖片從上到下鋪滿屏幕。
注意這里的圖片在實際項目中，需要使用CDN的下載地址，不然本地資源太多，影響小程序加載速度，而且上傳小程序也有尺寸限制。
Tips:
- 書寫 wxml 標簽快捷方式：
- 輸入 view . className 回車，會自動生成 <view class=“className”></view>
- 輸入 view # idName 回車，會自動生成 *<view id=“idName”></view>，其他標簽同理。
- 微信小程序，自定義組件不支持 id 選擇器，所以注意在組件中要使用類選擇器。
- 圖片加載方式設置為 lazy-load 表示需要顯示圖片時才顯示，這樣做能提高界面刷新效率。
— NEXT —
落地頁底部欄：
本小節，我們布局底部欄，包含用戶協議，和兩個按鈕。
分析界面布局
- 上下兩層結構，內部為水平布局。
先創建一個bottom容器：
<view class="bottom-box"></view>
再添加兩個按鈕和文字：
<view id="bottom-wrap" style="padding-bottom:{{safeAreaHeight}}rpx;"><view id="kefu" bindtap="tapKefu" hover-class="button-hover"><image id="kefu-icon" mode="widthFix" src="../../images/kefu.png"></image><text id="kefu-txt">咨詢</text></view><button class="button-normal" hover-class="button-hover" bindtap="getUserProfile">購 買</button> </view>Tips:
- bindtag ??按鈕點擊事件的回調函數名稱
- hover-class ??按鈕選中樣式
- getUserProfile ??是微信授權接口，固定寫法
- safeAreaHeight ??是為了適配
樣式如下:
#bottom-wrap {position: fixed;width: 100%;bottom: 0;z-index: 1;background: #fff;display: flex;flex-direction: row;/* padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom); */ }#kefu {position: relative;margin-top: 10rpx;margin-left: 30rpx;width: 200rpx;height: 100rpx;display: flex;flex-direction: row;border: 2rpx solid green;border-radius: 100rpx;background-color: #EEE;justify-content: space-evenly;align-items: center; }#kefu-icon {margin: 0;padding: 0;width: 70rpx;height: 70rpx; }#kefu-txt {margin: 0;padding: 0;font-size: 30rpx;line-height: 30rpx;color: green; }.button-normal {position: relative;padding: 0;margin: 10rpx;margin-right: 30rpx !important;width: 400rpx !important;height: 100rpx;display: flex;flex-direction: row;border-radius: 100rpx;background-color: #FF6400;align-items: center;justify-content: center;font-size: 40rpx;color: #fff; }.button-hover {opacity: 0.75; }Tips:
- constant(safe-area-inset-bottom) 和 env(safe-area-inset-bottom)
是適配 iPhoneX 底部 “Dock” 欄的方法。但是適配的高度偏高，這里還是使用自定義高度。 - position 是標簽需要經常使用的定位屬性，一般常用的是
- position: relative; 相對位置
- position: absolute; 絕對位置，常用于浮動在父級節點上，不會撐起父級容器。
- position: fixed; 固定位置，常用于固定在界面的下方或者上方，不會隨著窗體滾動而變化位置。
自定義適配高度，具體計算規則在如下代碼中：
const system = wx.getSystemInfoSync(); const windowHeight = Math.round(system.windowHeight); const safeArea = system.safeArea && system.safeArea.top > 20 ? system.safeArea : { top: 0 }; const safeAreaHeight = safeArea.top / 2;- 底部欄需要始終固定在屏幕最下方，所以使用 position: fixed
客服按鈕，購買按鈕
微信登錄授權
- getUserProfile 是微信官方提供的接口，用于喚起用戶微信授權。
可以獲得用戶的用戶名，微信昵稱，頭像地址等個人信息。
如果用戶不同意，那么不會獲得相應的數據。
并且該 API 無法主動調起，必須通過綁定點擊事件。
這里包含成功，失敗，還有完成(無論成功失敗都會走的)，三個處理函數。可以在這里實現業務邏輯。
底部用戶協議，用戶協議同意定位
一般界面都會設計諸如 “用戶協議”，”個人信息保護聲明“，“電信業務經營許可證”，之類的信息。
如下：
<!-- 備案信息 --> <view class="question-wrap"> <view class="record-wrap"><image class="choose-record"src="{{chooseRecord ? chooseRecordImg : unChooseRecordImg}}"catchtap="tapChoose" /><text>我同意</text><text class="record" catchtap="tapRecord">《個人信息授權及保護聲明》</text><text>和</text><text class="record" catchtap="tapRecord">《用戶協議》</text> </view> <text class="question-desc">XXXXXXXX公司 京ICP備123456789號</text> </view>其實就是幾個文字和URL組成的。
這里點擊授權信息，跳轉到一個內嵌的 webView 界面，顯示 H5 鏈接。我就暫時寫成 bai du 地址了，可以替換成真實業務地址。
const h5 = 'www.baidu.com'; const url = `../../pages/commonWebView/commonWebView? url=${encodeURIComponent(h5)}&share=false`; wx.navigateTo({ url });commonWebView頁面也很簡單，只需要實現對應的回調函數即可，詳細代碼實現，可下載代碼包，仔細查看，這里篇幅有限不再占用。
<web-view src="{{url}}" bindmessage="webViewObserverMessage" bindload="webViewLoadSuccess" binderror="webViewLoadError" />
— NEXT —
3 x 3 按鈕組件
在落地頁經常需要實現一個可以點擊的按鈕列表，為用戶提供直觀的可選產品。
組件使用
這里新建一個 <Fruits></Fruits> 水果按鈕列表組件。
分析界面結構：
- 縱向三層，整體居中。
- 第一層是標題 “請選擇水果”，外加兩個小手動畫。內部是水平布局。
- 第二層是 3 x 3 按鈕列表，里面有文字，有點擊事件，有按鈕樣式，整體居中布局。
- 第三層是一個居中布局的文字。
結構很簡單，開始動手寫 wxml
<view class="title-wrap"> <image class="finger" src="{{fingerImg}}"/> <text>請選擇要購買的水果</text> <image class="finger" src="{{fingerImg}}"/> </view><view class="fruits-list"> <view class="fruit" wx:for="{{fruitsList}}" wx:key="index" data-index="{{index}}" catchtap="tapFruit"><text>{{item}}</text><button class="fruit-btn" bindtap="getUserProfile" data-index="{{index}}"></button> </view> </view><view class="tips">{{'*購買成功記得五星好評哦'}}</view>樣式：
.title-wrap {margin: 40rpx auto;padding: 0;display: flex;flex-direction: row;justify-content: space-between;flex-grow: 1;flex-shrink: 1;font-size: 34rpx;color: #000;font-family: PingFangSC-Semibold,PingFang SC; }.finger {width: 44rpx;height: 50rpx; }.fruits-list {position: relative;margin: 0 50rpx;display: flex;flex-flow: row wrap; }.fruit {position: relative;margin: 0 8rpx 24rpx;width: 200rpx;background: #fff;border: 2rpx solid rgba(255, 107, 44, 1);border-radius: 10rpx;font-size: 28rpx;line-height: 72rpx;font-weight: 600;color: rgba(255, 98, 3, 1);text-align: center; }.fruit:nth-child(3n+1) {margin-left: 0; }.fruit:nth-child(3n) {margin-right: 0; }.fruit-btn {background: transparent;width: 100% !important;height: 100%;z-index: 1;position: absolute;top: 0;bottom: 0;left: 0;right: 0; }.tips {margin: 12rpx 30rpx 38rpx;font-size: 24rpx;font-weight: 300;color: #999999;line-height: 24rpx;letter-spacing: 1rpx;text-align: center; }Tips:
- 小手指是上下移動的，可以使用CSS關鍵幀動畫實現
- 按鈕列表中，需要綁定按鈕序號，使用 data-index 綁定循環中的序號。
- 節點自適應左右居中常用的方法就是設置 margin: 0 auto 。
這里面用到了 flex-grow 和 flex-shrink。著重簡單介紹一下，因為這兩個屬性經常會用到。
flex-grow
flex-grow 處理父元素在還有剩余空間時的分配規則，分為兩種情況。
即：所有元素的 flex-grow 值之和大于1，和小于1。
大于1時，例如：
父元素寬600，子元素A和B，寬分別為200，300。還剩余100。
此時A，B的 flex-grow 分別為2，3。則剩余100，分給A 2/5，分給B 3/5。
A，B寬度為：
小于1時，作為分母的總和會引入1來處理。例如：
上例中，A，B flex-grow 分別為 0.2，0.3。則分給A 0.2/1，分給B 0.3/1。
A，B寬度為：
還剩50沒有分配給任何子元素擴張。
另外，flex-grow 還會受到父元素的 max-width 影響。如果grow后的結果超出 max-width，max-width 會優先生效。
flex-shrink
和 flex-grow 處理父元素剩余空間相對應的，是 flex-shrink 處理父元素空間不足時，子元素的收縮規則。
同樣分為兩種情況，所有元素的 flex-shrink 值之和大于1，和小于1。
大于1時，例如：
父元素寬度為600，子元素寬度為400，300。超出100。
A，B flex-shrink 分別為 1，2。總權重為 400 + 300 * 2 = 1000
A，B實際寬度為：
小于1時，例如，
A，B flex-shrink 分別為 0.1，0.2。總權重為 400 * 0.1 + 300 * 0.2 = 100
子元素收縮總和為 100 * 0.3 / 1 = 30
A，B實際寬度為：
多出70沒有分配給任何子元素收縮。
同樣，也會受到min-width的限制。
組件傳遞數據
父組件向子組件傳遞數據
在組件的屬性列表中新增參數字段:
properties: {option: {type: Boolean,value: true} }這個屬性需要在使用組件的位置賦值，并作為參數傳遞下去：
<Fruits option="{{true}}"></Fruits>
子組件向父組件傳遞數據
在子組件內 trigger 一個事件，然后在子組件被引用的位置 bind 事件。并且在事件響應函數中，使用傳遞過來的數據。
-
Trigger: this.triggerEvent('eventName', { index }); 可以在后面夾帶參數。
-
Bind: <Fruits option="{{true}}" bindeventName="callBack"></Fruits>
-
CallBack:
callBack: function (e) {// 事件傳遞過來的參數const index = e.detail.index; }
CSS關鍵幀動畫
為了實現手指向下的小動畫，使用關鍵幀處理。
如果在 @keyframes 規則中指定了 CSS 樣式，動畫將在設定時間逐漸從當前樣式更改為新樣式。
- 左右手各使用一個動畫，因為如果使用同一個動畫，再Y軸翻轉一下也可以。但是會出現左右動畫不同時運動的問題。
- 0.9s 是持續時間，infinite 是無限循環。
keyframes :
@keyframes moveDownLeft {0% {transform: translateY(0rpx);}50% {transform: translateY(9rpx);}100% {transform: translateY(0rpx);} }@keyframes moveDownRight {0% {transform: translateY(0rpx) scale(-1, 1);}50% {transform: translateY(9rpx) scale(-1, 1);}100% {transform: translateY(0rpx) scale(-1, 1);} }左手動作設置了從開始到一半，再到結束時的Y軸位移。右手Y軸動作一致，只不過水平翻轉一下。
— NEXT —
拼團成功組件
在落地頁中加入拼團成功動畫。同樣也是使用組件實現。
動畫效果設計為，開始顯示兩個人已在團內，另有一個人的頭像在拼團成功時飛入第三個頭像框，表示拼團成功。同時文字由“即將成團”變成“拼團成功”。并且倒計時持續刷新。拼團成功會有一個標志章顯示出來，然后頭像和拼團文字整體向上滾動，最后刷新出下一組拼團頭像。
最右側是一個去拼團的點擊按鈕。
寫動畫的難點不是動作怎樣寫，而是整體的節奏感是否協調。
分析界面布局：
縱向布局分三層
- 第一層標題，里面水平結構，包含三個文字。
- 第二層頭像，文字，按鈕，另外還有一個飛動的圖片。這里頭像又可以做成組件。
- 第三層是一個拼團成功的圖片。
PinTuan組件
<view class="wrap"><view class="text-wrap"><text>還差</text><text class="persion-num">{{personNum}}人</text><text>成團，可直接參與</text></view><view class="pintuan-content"><PinTuanHead class="pin-tuan" headUrls="{{headUrls}}" animation="{{pinTuanAni}}" bindtransitionend="pinTuanAniEnd" isNeedLogin="{{isNeedLogin}}"></PinTuanHead><view class="join" animation="{{pinTuanAni}}" bindtransitionend="pinTuanAniEnd"><text class="join-text">{{joinText}}</text><text class="clock">還剩{{clockText}}</text></view><image animation="{{headAniData}}" bindtransitionend="headAniEnd" class="move-head" src="{{moveHead}}"></image><button class="goGroup" bindtap="getUserProfile">去參團</button></view><image wx:if="{{pinTuanSuccess}}" class="successed" src="{{successedImg}}" mode="widthFix"animation="{{successAni}}" bindtransitionend="successAniEnd" style="transform: scale(0.3) opacity(0)"></image><view class="bottom-border"></view> </view>animation動畫
使用animation動畫，可以實現復雜的動作流程。動畫的開始和結束都需要處理邏輯。
創建動畫后，需要導出一下，代碼實現如下：
先設置動畫屬性，再設計動畫運動軌跡，最后導出：
- timingFunction: 'ease' 設置緩動效果。
- ani.opacity(0).translateY(-30).step(); 先透明度為0，然后Y軸坐標。
- step() 表示一組動畫完成。可以在一組動畫中調用任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成后才會進行下一組動畫。
- bindtransitionend 是設置動畫結束時的回調函數。
代碼和樣式請下載資源包，對應 PinTuan 文件夾下，因篇幅有限，這里不列出詳細代碼
PinTuanHead組件
分析界面布局：
三個頭像，分為頭像背景圖，和真實頭像圖。并且需要動態控制頭像顯示。
代碼和樣式在資源包 PinTuanHead 文件夾
Tips:
- 樣式中使用 :nth-child 表示同類標簽的第幾個標簽。這類偽標簽可以節省 wxml 空間，減少 document 渲染的節點數量。
— NEXT —
廣告輪播
微信提供輪播圖組件，可以設置輪播間隔，提示點，循環等屬性。
水平廣告輪播
設置一組圖片水平方向循環輪播
消息輪播
左上角設置縱向消息輪播。
分析界面布局：
- 水平布局，左邊是用戶頭像，右邊是文字。
- 文字顯示分兩種情況，如果是帶拼團的，就隨機顯示“剛剛拼團成功”和“剛剛參團成功”文字。如果不帶拼團，就顯示“剛剛搶單成功”。
<view class="recent-payment-list-wrap"><swiper class="recent-payment-list" vertical="{{true}}" autoplay="{{true}}" interval="{{3000}}" circular="{{true}}"duration="{{500}}" capture-catch:touchmove='preventTouchMove'><block wx:for="{{recentPaymentUsers}}" wx:for-index="index" wx:key="index"><swiper-item><view class="recent-payment-cell"><view class="recent-payment-cell-content"><image class="recent-payment-avatar" src="{{item.avatar}}" mode="aspectFill" /><view class="recent-payment-name">{{item.name}}</view><view wx:if="{{showPinTuan}}"><view wx:if="{{item.pinTuanRandom}}" style="flex-shrink: 0;">剛剛拼團成功</view><view wx:else style="flex-shrink: 0;">剛剛參團成功</view></view><view wx:else style="flex-shrink: 0;">剛剛搶單成功</view></view><view style="flex-grow: 1;"></view></view></swiper-item></block></swiper></view>
代碼和樣式在資源包，landingpage 文件夾下
— NEXT—
下浮層
點擊水果按鈕，彈出注冊手機號下浮層。如果已經注冊手機號，彈出訂單詳情彈窗。
切換下浮層顯示通過 promptStatus 值為0或者1決定。
下浮層封裝為組件 FruitPrompt，自定義組件的顯隱，不能通過設置 hidden 實現。可以設置 wx:if 條件判斷顯示。
為了方便處理下浮層的顯示，設置一個浮層基類組件 Prompt，FruitPrompt 繼承自 Prompt
Prompt：
<view class='prompt {{slowDown?"hideOpacity":""}}' data-type="mask" catchtap='closeCallback' catchtouchmove='touchMove'><view class='container {{slowDown?"slowDown":""}}' catchtap='catchEvent'><view class='title'>{{title}}</view><image src='{{iconClose}}' class='icon' catchtap='closeCallback' data-type="button" /><slot></slot><view wx:if="{{showButton}}" class='btnContainer'><button class="menuBtn" bindtap="btnCallback">{{btnText}}</button></view></view> </view>注冊手機號，獲取驗證碼，驗證碼倒計時
分析界面布局
縱向布局：
- 手機號和驗證碼用到 input 標簽。
- 輸入手機號和驗證碼之后，“獲取驗證碼” 按鈕高亮，并可以點擊。
注冊手機號，需要實現驗證碼功能，點擊獲取驗證碼，校驗手機號輸入合法性。合法則申請驗證碼，并且進入 60s 倒計時。
驗證碼倒計時部分，利用 setInterval 封裝一個公共的倒計時函數，提供異步回調函數。
function initCountdown({isCheck: isCheck = false,name: name,timeTotal: timeTotal,timeInterval: timeInterval,checkCallback: checkCallback,timeChangedCallback: timeChangedCallback,endCallback: endCallback }) {if (typeof name !== 'string' || !name) {return;}const countdownInterval = countdownMap[name];if (countdownInterval) {clearInterval(countdownMap[name].interval);} else if (isCheck) {if (typeof checkCallback === 'function') {checkCallback();}return;} else {countdownMap[name] = {timeTotal: timeTotal,timeInterval: timeInterval};}if (typeof timeChangedCallback === 'function') {timeChangedCallback(countdownMap[name].timeTotal);}countdownMap[name].interval = setInterval(() => {if (countdownMap[name].timeTotal <= 0) {clearInterval(countdownMap[name].interval);delete countdownMap[name];if (typeof endCallback === 'function') {endCallback();}return;}countdownMap[name].timeTotal -= countdownMap[name].timeInterval;if (typeof timeChangedCallback === 'function') {timeChangedCallback(countdownMap[name].timeTotal);}}, countdownMap[name].timeInterval); }在點擊驗證碼按鈕時，觸發倒計時。
initCountdownManager(isCheck) {countdownManager.initCountdown({isCheck: isCheck,name: 'bindPhone.verifyCode',timeTotal: 60000,timeInterval: 1000,checkCallback: () => {this.data.countingdown = false;},timeChangedCallback: countdown => {this.setData({inputCodeButtonTitle: `重新發送（${parseInt(countdown / 1000)}s）`,inputCodeButtonStyle: 'color: #CCCCCC;'});},endCallback: () => {this.setData({inputCodeButtonTitle: '重新發送',inputCodeButtonStyle: 'color: #FF8134;'});this.data.countingdown = false;}}); }Tips:
- setData 函數用于將數據從邏輯層發送到視圖層(異步)，同時改變對應的 this.data 的值(同步)。
- 如果更新數據之后，沒有使用 setData 函數
例如: this.data.countingdown = false 則只是將數據寫入 this.data，不能刷新界面顯示。
訂單詳情
設計顯示售罄標記，先到先得標記。
分析界面布局：
縱向結構；
- 水果按鈕列表，3 x 3 列表。
- 按鈕右上角設置標簽。
- 訂單介紹，保質期時長。介紹按鈕右上角有標簽。
代碼和樣式請下載資源包，對應 FruitPrompt 文件夾下，因篇幅有限，這里不列出詳細代碼
Notification 監聽者模式
處理邏輯，經常需要用到監聽者模式。實際原理很簡單，只需一個數組，將需要監聽的對象和鉤子函數壓棧，然后在捕獲到鉤子時，在出棧。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9cV8cQRN-1633762407320)(soldout.png)]
// 發送通知 function postNotification(notificationName, data = {}) {for (let i = 0; i < observerList.length; i++) {const observer = observerList[i];if (notificationName === observer.name) {observer.selector(data);}} }
— NEXT —
Toast 提示彈窗
封裝各種提示彈窗。使用 wx.showToast 我們再封裝一層，可以提示各種自定義信息，也可以加自定義 icon。
// 文字提示框 function showTextToast(title, cb, seconds, mask = true) {showToast({title: title,icon: 'none',mask: mask,callback: cb,seconds: seconds}) }// 加載提示框 function showLoadingToast(title, cb, seconds) {showToast({title: title,icon: 'loading',mask: true,callback: cb,seconds: seconds}) }// 成功提示框 function showSuccessToast(title, cb, seconds) {showToast({title: title,icon: 'success',mask: true,callback: cb,seconds: seconds}) }// 錯誤提示框 function showErrorToast(title, cb, seconds) {showToast({title: title,image: 'XXXX',icon: 'none',mask: true,callback: cb,seconds: seconds}) }// 文字提示框 function showToast({title: title,icon: icon,image: image,mask: mask,callback: callback,seconds: seconds }) {if (!title) {if (callback) {callback()}return;}if (!seconds) {seconds = 1.7;}wx.showToast({title: title,icon: icon,image: image,mask: mask,duration: seconds * 1000});setTimeout(function () {if (callback) {callback()}}, seconds * 1000); }
總結
微信小程序開發，常用標簽和 style 樣式并不多，很容易掌握。
常用 wxml 標簽：
- view 當作節點使用
- image 圖片
- text 文字
- block 不占位標簽
- swiper 輪播
- scroll-view 滾動層
- web-view H5內嵌
- input 輸入框
- button 按鈕
常用 style 樣式
- position: relative, absolute, fixed 設定節點坐標
- margin, padding 設定節點邊距，margin是外邊距，padding是內邊距
- display 設定元素的顯示類型
- width, height 寬高
- top, bottom, left, right 設定 absolute 坐標后設定上，下，左，右，間距
- background 背景，可以設定顏色，背景圖片，背景尺寸
- z-index Z 軸優先級
- font 字體，可以設定字體庫，字體顏色，陰影，描邊，字體大小，字間距，行間距
- border 邊框，圓角，自定義邊角
- animation 動畫，可以設定逐幀動畫，也可以綁定動畫事件
常用技巧
居中：
- 左右居中：父節點需要設置 display:flex; 然后子節點設置 margin: 0 auto; 子節點可以水平左右居中。
- 節點內容居中：同樣，也需要父節點設置 display:flex; 然后父節點再設置 align-items: center; 可以實現內部元素水平和垂直都居中。
- 文字水平居中：設置父節點 text-align: center; 可以實現內部文字水平居中。
- 文字垂直居中：text 標簽 font-size 和 line-height 設置一致時，文字垂直居中。
- 依靠元素顯示類型居中：display: flex; justify-content: center; // 水平居中 vertical-align: middle; // 垂直居中
— NEXT —
代碼下載
鏈接: 百度云盤下載
密碼: 9ia8
云盤二維碼：
總結
以上是生活随笔為你收集整理的零基础微信落地页小程序实战项目的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 领券中心项目，我是如何用 Redis 做
- 下一篇： 太平洋保险集团A+H上市方案生变 年内先