學習地址：https://www.bilibili.com/video/BV1sx411z77P?p=10
筆記01：https://blog.csdn.net/weixin_44949135/article/details/107181721【目錄結構詳解、事件、input、scroll-view】
筆記02：https://blog.csdn.net/weixin_44949135/article/details/107191256【配置詳解（頁面、窗口、tabBar、debug）】
目 錄
P1 1.1微信小程序從基礎到實戰課程概要
P2 2.1微信小程序簡介
- 什麼是微信小程序?
- 微信小程序可以做什麼?
- 什麼互聯網產品合適使用微信小程序?
- 微信小程序會帶來哪些變革?
API（應用程序編程接口）是一些預先定義的函數，目的是提供應用程序與開發人員基於某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，或理解內部工作機制的細節。
開發文檔
https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html
API
上傳、下載文件
上傳、下載文件WebSocket 連接服務器
P3 2.2.1微信小程序開發準備
1、微信開發賬號
2、微信開發者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
P4 2.2.2微信小程序開發工具的使用
- 基本使用
- 代碼編輯
- 項目調試
- 項目導入
- 其他
P5 2.2.3目錄結構詳解
- 項目配置
- 項目入口
- 項目頁面
頁面配置：page數組 存放 每個頁面（包含 頁面路徑）。
js、wxml文件 是 必須的。
.json文件：頁面的配置文件。
.wxss文件：頁面的樣式文件。
logs.json、logs.wxss 覆蓋 app.json、app.wxss文件。
app.js 調用方法App()
1、app.js
//app.js
App({
onLaunch: function () {
// 展示本地存儲能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
console.log("111")
// 登錄
wx.login({
success: res => {
// 發送 res.code 到後臺換取 openId, sessionKey, unionId
}
})
// 獲取用戶信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已經授權，可以直接調用 getUserInfo 獲取頭像暱稱，不會彈框
wx.getUserInfo({
success: res => {
// 可以將 res 發送給後臺解碼出 unionId
this.globalData.userInfo = res.userInfo
// 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之後才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
2、app.js更改後
3、index.js
//index.js
//獲取應用實例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件處理函數
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
})
}
})
4、index.js更改後
每個頁面，會調用 Page()方法
.js文件：定義項目啓動入口，調用Page()方法，Page()方法中傳入頁面的配置信息。
.json文件：定義頁面的配置。
5、超簡單項目結構
P6 2.3.1視圖與渲染
- 組件的基本使用
- 數據綁定
- 渲染標籤
- 模板的使用
開發文檔
https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
1、組件的基本使用
2、數據綁定
3、渲染標籤
3.1、wx:if="{{true}}"
3.2、wx:else
3.3、循環標籤wx:for="{{}}"
3.4、動態刪除數據
4、模板的使用
多個頁面，使用同一個組件 --> 組件化開發！！！
4.1、引入組件
4.2、組件綁定數據
is指定導入哪一部分的數據。
P7 2.3.2微信小程序事件
- 什麼是事件？【一種用戶行爲、一種通訊方式】
- 事件類別【點擊事件、長按事件、觸摸事件...】
- 事件冒泡【冒泡事件、非冒泡事件】
- 事件綁定【bind綁定、catch綁定】
- 事件對象詳解
1、什麼是事件？
一種用戶行爲：用戶長按某一張圖片、用戶拖動組件...
一種通訊方式：觸摸屏幕、點擊按鈕...【UI-->發送給邏輯代碼】
2、事件的類別
- 點擊事件 tap
- 長按事件 longtap
- 觸摸事件 touchstart touchend touchmove touchcancel【開始觸摸、結束觸摸、移動觸摸、取消觸摸】
- 其他 submit input ...
touchend、touchcancel區別：用戶觸摸的過程中，來電話，手機被頁面所覆蓋，touchend事件被打斷，這時觸發touchcancel事件。
3、事件冒泡【冒泡事件、非冒泡事件】
4、事件綁定【bind綁定、catch綁定】
點擊 view3
點擊 view2
5、事件的對象
- 類型 type
- 時間戳 timeStamp
- 事件源組件 target
- 當前組件 currentTarget
- 觸摸點數 touches
currentTarget：點擊的view。
target：目標view
添加數據 --> 獲取控件相應的屬性。
P8 2.4綜合案例 - 快遞查詢
- 產品需求
- 準備
- 編碼實戰
1、快遞API
2、input官方文檔
https://developers.weixin.qq.com/miniprogram/dev/component/input.html
wx.request({ url: 'test.php', //僅爲示例，並非真實的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默認值 }, success (res) { console.log(res.data) } })需要替換數據。【test.php、content-type、application/json】
3、獲取input輸入框內容
3.1、保存input中的內容
Object：this
