WeChat小程式開發-初學者筆記（一）
WeChat小程式開發學習第一天：
完成學習目標：
1.安裝並瞭解Wechat小程式的基本環境，
2.可以利用已學知識的結合簡單實現helloWorld介面。
學習過程：
1.首先在微信平臺上進行相關註冊和下載小程式開發工具（此處不累述，具體教程可看mooc上教程資料：https://www.icourse163.org/course/HZIC-1205901813（浙江工商大學的“微信小程式開發從入門到實踐“）
2.下載好開發工具後，進入新增專案介面，其中APPID是在網頁登陸微信小程式時會提供給你的APPID，開發學習時也可以使用測試號，選擇不適用雲服務：
然後點選新建，進入開發介面
可以把開發介面分為四個區域，分別是檔案目錄，編譯程式碼區，預覽效果圖，上面的工具選項欄。
看第一個區域
其中pages檔案是存放頁面，這裡就有index和logs兩個預設頁面，index是預設首頁，logs是日誌檔案。與index並存的還有utils和app.js等檔案和資料夾。
這裡需要有web前端開發的學習基礎，整個app的控制檔案有app.js,app.json,app.wxss，其中app.js和app.wxss對應於web前端開發中的js檔案和css(樣式管理）檔案，json是控制元件管理檔案，具體運用的情況再加以介紹。
對應的每個頁面，除了以上三個字尾檔案還有.wxml檔案，相當於網頁中的html檔案。
進入index.wxml檔案：
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像暱稱 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
這裡把首頁分為兩大塊，userinfo這塊有一個按鈕和一個判斷語句，在wxml檔案中，用{{ }}兩個大括號包圍的是儲存在js檔案裡的變數，這裡實現瞭如果hasUserInfo變數是假並且canIUse變數是真則顯示”獲得頭像暱稱“的按鈕介面，不然則實現block的內容
以下是index.js檔案內容。
//index.js
//獲取應用例項
const app = getApp() Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')//判斷元件button...getUserInfo是否可用，返回boolean型別
},
//事件處理函式
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回
// 所以此處加入 callback 以防止這種情況
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在沒有 open-type=getUserInfo 版本的相容處理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
這裡提供了許多API，實現了當點選按鈕獲取使用者資訊時，則呼叫js指令碼檔案中的getUserInfo函式，並且把獲取的資訊賦值給變數userInfo，將hasUserInofo的值設為true，這樣判斷語句就會轉向執行else的內容，else的block中有兩個元件分別是image（圖片）和text（文字），呼叫對應變數值呈現相應資訊並且用mode="cover" 來覆蓋原來的按鈕。
成功授權介面圖：
下面的view檢視元件中顯示的是motto變數內容，將js檔案內motto變數賦值為“helloWorld”即可以實現。
下面來瞭解json檔案和tabBar的使用。
開啟app.json 在"windows"塊的後面輸入如下程式碼：
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "images/index1.png",
"selectedIconPath": "images/index.png"
},
{
"pagePath":"pages/logs/logs",
"text":"日誌",
"iconPath":"images/logs1.png",
"selectedIconPath":"images/logs.png"
}
]
},
tabBar類似導航欄的功能，使用list陣列來實現導航條目，規定list裡的項數在2到5個之間，pagePath為具體的地址路徑，必須是在app.json檔案的"pages"中定義過的路徑，test為文字內容，iconPath為未點選時的圖片地址，其中images資料夾是我們自己在相應目錄上建立的，圖片建議在阿里巴巴圖示網站中獲取（https://www.iconfont.cn ），selectedIconPath是選中圖示時顯示的圖片。
執行效果如下：
當然還有其他樣式效果的設定，具體都可參考微信小程式的官方檔案。
總結：
以上是我學習微信小程式開發的第一天筆記，希望我的筆記能夠在記錄我學習效果的過程中也能夠幫助大家，今天的內容比較簡單和基礎，不過還是建議開發者有一定的html，css，和javascript的基礎，因為我是近一年前學習的web前端相關知識，對相關專業知識的瞭解也有點模糊了，所以也是在學習的過程中重拾記憶和技術，當然希望更多朋友能夠指出我的問題，希望共同進步。
疑惑點和難點：
1.不知道目錄中的最後兩個json檔案的用處
2.utils是用來存放images等檔案的嗎？
3.對javascript的掌握明顯不足
4.對部落格園的使用也不太行啊