學習地址：https://www.bilibili.com/video/BV1sx411z77P

筆記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）】

【p01-p12工程文件】【鏈接：https://pan.baidu.com/s/1TONiLPIOX59nh1EqwfjQLA? ?提取碼：zjxs】

目? ?錄

P1 1.1微信小程序從基礎到實戰課程概要

P2 2.1微信小程序簡介

P3 2.2.1微信小程序開發準備

1、微信開發賬號

2、微信開發者工具

P4 2.2.2微信小程序開發工具的使用

P5 2.2.3目錄結構詳解

1、app.js

2、app.js更改后

3、index.js

4、index.js更改后

5、超簡單項目結構

P6 2.3.1視圖與渲染

1、組件的基本使用

2、數據綁定

3、渲染標簽

3.1、wx:if="{{true}}"

3.2、wx:else

3.3、循環標簽wx:for="{{}}"

3.4、動態刪除數據

4、模板的使用

4.1、引入組件

4.2、組件綁定數據

P7 2.3.2微信小程序事件

1、什么是事件？

2、事件的類別

3、事件冒泡【冒泡事件、非冒泡事件】

4、事件綁定【bind綁定、catch綁定】

5、事件的對象

P8 2.4綜合案例 - 快遞查詢

---

P1 1.1微信小程序從基礎到實戰課程概要

P2 2.1微信小程序簡介

• 什么是微信小程序?
• 微信小程序可以做什么?
• 什么互聯網產品合適使用微信小程序?
• 微信小程序會帶來哪些變革?

API（應用程序編程接口）是一些預先定義的函數，目的是提供應用程序與開發人員基于某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，或理解內部工作機制的細節。?

開發文檔

https://mp.weixin.qq.com/wiki

https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html

API

https://developers.weixin.qq.com/miniprogram/dev/api/

? ?上傳、下載文件

WebSocket? ? 連接服務器

P3 2.2.1微信小程序開發準備

1、微信開發賬號

https://mp.weixin.qq.com

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 發送給后臺解碼出 unionIdthis.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.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},getUserInfo: function(e) {console.log(e)app.globalData.userInfo = e.detail.userInfothis.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

apistore.baidu.com

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

4、scroll-view可滾動視圖區域

總結

以上是生活随笔為你收集整理的微信小程序01【目录结构详解、视图与渲染、事件、input、scroll-view】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。