微信小程序開發(fā)入門基礎(chǔ)

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序開發(fā)入門基礎(chǔ)，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

1、自定義標(biāo)題欄

現(xiàn)在UI要求越來(lái)越高，高頻出現(xiàn)自定義標(biāo)題欄的情況

"navigationStyle": "custom"復(fù)制代碼

2、獲取用戶信息

用戶授權(quán)是每個(gè)小程序中都會(huì)用到的，可以根據(jù)自己的項(xiàng)目流程編寫自己的邏輯。 用戶授權(quán)

<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授權(quán)登錄</button>復(fù)制代碼

bindGetUserInfo (e) {    console.log(e.detail.userInfo) // 獲取到用戶信息}復(fù)制代碼

已授權(quán)的情況下調(diào)用「wx.getUserInfo」，「wx.getSetting」進(jìn)行判斷該用戶是否授權(quán)

wx.getSetting({  success (res){    if (res.authSetting['scope.userInfo']) {      // 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱      wx.getUserInfo({        success: function(res) {          console.log(res.userInfo)        }      })    } else {        // 未授權(quán)    }  }})復(fù)制代碼

3、input 設(shè)置placeholder樣式

<input placeholder="請(qǐng)輸入手機(jī)號(hào)碼" placeholder-class="placeholderinput"></input>復(fù)制代碼

.placeholderinput {  color: #CCCCCF;  font-size: 36rpx;}復(fù)制代碼

4、路由

路由跳轉(zhuǎn)用到的比較多，每次跳轉(zhuǎn)的時(shí)候總是不能區(qū)分用哪一個(gè)方式進(jìn)行跳轉(zhuǎn)，記下來(lái)，加深一下印象。
跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面

wx.switchTab({    url: '../../index/index'})復(fù)制代碼

跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，但是不允許跳轉(zhuǎn)到 tabbar 頁(yè)面，并關(guān)閉當(dāng)前頁(yè)面

wx.redirectTo({    url: '../../index/index'})復(fù)制代碼

保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不能跳到 tabbar 頁(yè)面。

wx.navigateTo({    url: '../../index/index'})復(fù)制代碼

5、image組件常用mode合法值梳理

為什么詳細(xì)講解image，每次后臺(tái)上傳的圖片和我們前端界面的尺寸不一樣，我們前端就要進(jìn)行處理了，還有就是測(cè)試?yán)鲜腔靥岢鲆恍﹫D片變形上的問(wèn)題，為了不讓他們提出這些問(wèn)題，我們?cè)敿?xì)分析一下，如果有不正確歡迎交流指正。 在固定寬高的情況下：

 <image src="/images/pic.jpg" class="pic" mode="aspectFill"></image>復(fù)制代碼

.pic {  width: 600rpx;  height: 500rpx;  border: 1rpx solid #ccc;}復(fù)制代碼

設(shè)置以下屬性圖片會(huì)發(fā)生什么變化

• scaleToFill  圖片的寬高完全拉伸至填滿 image 元素，會(huì)改變圖片的寬高比，圖片變形

  

• aspectFit 圖片完整的展示出來(lái)，圖片的寬高比不變。

  

• aspectFill 圖片的寬高比不變，為完整的展示，會(huì)發(fā)生裁切  
  

  

常用的「aspectFit」  「aspectFill」這兩個(gè)

6、設(shè)置input的「confirm-type」 的合法值

設(shè)置鍵盤右下角按鈕的文字，type="text"時(shí)生效

• send 右下角按鈕為“發(fā)送”
• search 右下角按鈕為“搜索”
• next 右下角按鈕為“下一個(gè)”
• go 右下角按鈕為“前往”
• done 右下角按鈕為“完成”

為了實(shí)現(xiàn)安卓ios的統(tǒng)一confirm-type的設(shè)置也是很有必要，默認(rèn)值是 done，安卓默認(rèn)是回車，ios默認(rèn)是完成，所以設(shè)置同一只前四個(gè)是可以統(tǒng)一的。

關(guān)于“微信小程序開發(fā)入門基礎(chǔ)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。