微信小程序開發入門基礎

這篇文章將為大家詳細講解有關微信小程序開發入門基礎，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

1、自定義標題欄

現在UI要求越來越高，高頻出現自定義標題欄的情況

"navigationStyle": "custom"復制代碼

2、獲取用戶信息

用戶授權是每個小程序中都會用到的，可以根據自己的項目流程編寫自己的邏輯。 用戶授權

<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授權登錄</button>復制代碼

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

已授權的情況下調用「wx.getUserInfo」，「wx.getSetting」進行判斷該用戶是否授權

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

3、input 設置placeholder樣式

<input placeholder="請輸入手機號碼" placeholder-class="placeholderinput"></input>復制代碼

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

4、路由

路由跳轉用到的比較多，每次跳轉的時候總是不能區分用哪一個方式進行跳轉，記下來，加深一下印象。
跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面

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

跳轉到應用內的某個頁面，但是不允許跳轉到 tabbar 頁面，并關閉當前頁面

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

保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。

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

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

為什么詳細講解image，每次后臺上傳的圖片和我們前端界面的尺寸不一樣，我們前端就要進行處理了，還有就是測試老是回提出一些圖片變形上的問題，為了不讓他們提出這些問題，我們詳細分析一下，如果有不正確歡迎交流指正。 在固定寬高的情況下：

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

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

設置以下屬性圖片會發生什么變化

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

  

• aspectFit 圖片完整的展示出來，圖片的寬高比不變。

  

• aspectFill 圖片的寬高比不變，為完整的展示，會發生裁切  
  

  

常用的「aspectFit」  「aspectFill」這兩個

6、設置input的「confirm-type」 的合法值

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

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

為了實現安卓ios的統一confirm-type的設置也是很有必要，默認值是 done，安卓默認是回車，ios默認是完成，所以設置同一只前四個是可以統一的。

關于“微信小程序開發入門基礎”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。