入門微信小程序開發(基礎開發篇)

這是我參與新手入門的第2篇文章

中止奮鬥，生命也就中止了。——卡萊爾
記得先點贊，在查看哦

寄語

你是否有過下載、安裝完成微信開發者工具後，發現自動建立了不少文件？而後一臉懵逼，想下手又不知道從哪裏改起？只看見一堆不懂的文件夾或文件名後綴，至於怎麼控制，怎麼編寫，無從下手？沒事這篇會帶你手把手教你敲代碼。若是還沒了解或者安裝微信開發者工具 請查看這篇如何入門微信小程序開發（瞭解工具篇）

快速瞭解文件的做用

要想快速入手開發編程，首先咱們要先知道每一個文件有什麼用，如何寫才能修改控制頁面等(如下都是我的經驗描述，如想看官方描述，請點我--小程序文檔
開發工具向你扔來一張圖片

• 1. app.js
  • 用於小程序啓動時會觸發它固有的生命週期，經常使用自動登陸或全局初始化函數就是放在onLaunch生命週期內，而globalData是存放全局數據，單個頁面js讀取globalData時寫法getApp().globalData
    

App({
  onLaunch() {
    // 展現本地存儲能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登陸
    wx.login({
      success: res => {
        // 發送 res.code 到後臺換取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})
複製代碼

• 2. app.json
  • 主要用於全局配置，例如全局標題、導航條顏色、底部導航欄tabbar，咱們建立文件若是本身建立是否是很麻煩？由於小程序一個頁面有四個文件，可是在這裏能夠輸入想要建立頁面文件名稱便可生成頁面須要的所有內容，以下圖所示。具體其餘配置，請移步到微信文檔全局配置

• 3. pages
  • pages文件夾下每一個一個文件都是一個單獨的頁面，平時的業務邏輯或咱們須要控制頁面內容都在這裏控制和編碼輸出效果
  • 每一個頁面組成有四個文件：
    • .wxml: 這是一個像H5頁面標籤存放地方，只不過標籤必需要按照微信提供的寫，例如view、image等，具體更多文檔標籤說明
    • .wxss: 這是一個像H5頁面css存放的地方，支持大部分css的全部寫法，我的認爲惟一不一樣的是它的單位是rpx，這種單位可以適配不一樣手機屏幕，不須要前端同窗本身作rem或者媒體查詢等去作適配，很是方便，具體更多wxss文檔說明
    • .js: 這個文件和正常H5文件同樣，用於寫業務邏輯和一些交互邏輯函數等，支持ES6語法，使用仍是很方便的，具體更多支持js文檔說明
    • .json：這是一個當前頁面配置文件，例如能夠配置標題，下拉刷新，到底觸發等，實用功能配置，具體更多配置文檔說明

看完以上介紹，您大概知道每一個文件的做用是什麼了，接下來咱們將要開始代碼旅行了~

動手敲代碼

先上效果圖以下圖，如實說就是官方的demo，不要灰心我會詳細教你代碼是怎麼實現的

• 1.咱們先來看看頭部標題如何配置
  => 打開pages/index/index.json文件,navigationBarTitleText字段便是標題配置，usingComponents字段是引入組件使用的，代碼以下

{
  "navigationBarTitleText": "個人第一個demo",
  "usingComponents": {}
} 
複製代碼

• 2.控制頁面顯示內容，例如圖片和文字 => 打開pages/index/index.wxml文件, 其中{{userInfo.nickName}}是一種語法，{{}}是固定語法（固然語法還有不少例如條件語法wx:if="{{}}"等），userInfo.nickName內容來自index.js裏面,而class是類名，來自index.wxss文件，模仿一下便可獲得你的第一個代碼顯示，若是想查看更多語法，點我，代碼以下

index.wxml部份內容

<view class="container">
  <view class="userinfo">
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
複製代碼

index.wxss部份內容

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}
.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.usermotto {
  margin-top: 200px;
}
複製代碼

index.js部份內容

data: {
    motto: 'Hello World',
    userInfo: {
          avatarUrl: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'
        },
}
複製代碼

=> 若是想跳轉第二個頁面，在index.wxml文件裏面，增長綁定事件bindtap="bindViewTap",其中bindtap是小程序固有語法表示點擊事件綁定更多綁定事件用法點我，bindViewTap是自定義函數名稱，而後在.js文件裏面寫該函數名稱便可，跳轉須要調用微信提供的apiwx.navigateTo,url則是你第二個頁面的文件路徑，代碼以下，更多api文檔點即查看

bindViewTap() {
   wx.navigateTo({
     url: '../logs/logs'
   })
 }
複製代碼

總結

恭喜您當你看完這些，你已經大概知道怎麼使用開發工具，怎麼編程寫代碼，已經能夠入手成爲小程序小白了， 若是你以爲很懵逼也很正常，俗話說：熟能生巧，剩下須要你用大量的時間去操做和寫，想成爲高手必需要動手去寫，看永遠都解決不了你成爲高手的夢想，加油~
下一篇標題待定,會寫一些經常使用的組件或api等

俗話說：爲人點贊，手有餘香。麻煩動動小手手，給個贊在走~