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

筆記01：https://blog.csdn.net/weixin_44949135/article/details/107181721【目錄結(jié)構(gòu)詳解、事件、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微信小程序從基礎到實戰(zhàn)課程概要

P2 2.1微信小程序簡介

P3 2.2.1微信小程序開發(fā)準備

1、微信開發(fā)賬號

2、微信開發(fā)者工具

P4 2.2.2微信小程序開發(fā)工具的使用

P5 2.2.3目錄結(jié)構(gòu)詳解

1、app.js

2、app.js更改后

3、index.js

4、index.js更改后

5、超簡單項目結(jié)構(gòu)

P6 2.3.1視圖與渲染

1、組件的基本使用

2、數(shù)據(jù)綁定

3、渲染標簽

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

3.2、wx:else

3.3、循環(huán)標簽wx:for="{{}}"

3.4、動態(tài)刪除數(shù)據(jù)

4、模板的使用

4.1、引入組件

4.2、組件綁定數(shù)據(jù)

P7 2.3.2微信小程序事件

1、什么是事件？

2、事件的類別

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

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

5、事件的對象

P8 2.4綜合案例 - 快遞查詢

---

P1 1.1微信小程序從基礎到實戰(zhàn)課程概要

P2 2.1微信小程序簡介

• 什么是微信小程序?
• 微信小程序可以做什么?
• 什么互聯(lián)網(wǎng)產(chǎn)品合適使用微信小程序?
• 微信小程序會帶來哪些變革?

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

開發(fā)文檔

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微信小程序開發(fā)準備

1、微信開發(fā)賬號

https://mp.weixin.qq.com

2、微信開發(fā)者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

P4 2.2.2微信小程序開發(fā)工具的使用

• 基本使用
• 代碼編輯
• 項目調(diào)試
• 項目導入
• 其他

P5 2.2.3目錄結(jié)構(gòu)詳解

• 項目配置
• 項目入口
• 項目頁面

頁面配置：page數(shù)組 存放 每個頁面（包含 頁面路徑）。

js、wxml文件 是 必須的。

.json文件：頁面的配置文件。

.wxss文件：頁面的樣式文件。

logs.json、logs.wxss 覆蓋 app.json、app.wxss文件。

app.js? ? 調(diào)用方法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 => {// 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId}})// 獲取用戶信息wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {// 已經(jīng)授權，可以直接調(diào)用 getUserInfo 獲取頭像昵稱，不會彈框wx.getUserInfo({success: res => {// 可以將 res 發(fā)送給后臺解碼出 unionIdthis.globalData.userInfo = res.userInfo// 由于 getUserInfo 是網(wǎng)絡請求，可能會在 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')},//事件處理函數(shù)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 是網(wǎng)絡請求，可能會在 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更改后

每個頁面，會調(diào)用 Page()方法

.js文件：定義項目啟動入口，調(diào)用Page()方法，Page()方法中傳入頁面的配置信息。

.json文件：定義頁面的配置。?

5、超簡單項目結(jié)構(gòu)

?

P6 2.3.1視圖與渲染

• 組件的基本使用
• 數(shù)據(jù)綁定
• 渲染標簽
• 模板的使用

開發(fā)文檔

https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html

1、組件的基本使用

2、數(shù)據(jù)綁定

3、渲染標簽

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

3.2、wx:else

3.3、循環(huán)標簽wx:for="{{}}"

3.4、動態(tài)刪除數(shù)據(jù)

?

4、模板的使用

多個頁面，使用同一個組件 --> 組件化開發(fā)！！！

4.1、引入組件

4.2、組件綁定數(shù)據(jù)

is指定導入哪一部分的數(shù)據(jù)。

P7 2.3.2微信小程序事件

• 什么是事件？【一種用戶行為、一種通訊方式】
• 事件類別【點擊事件、長按事件、觸摸事件...】
• 事件冒泡【冒泡事件、非冒泡事件】
• 事件綁定【bind綁定、catch綁定】
• 事件對象詳解

1、什么是事件？

一種用戶行為：用戶長按某一張圖片、用戶拖動組件...

一種通訊方式：觸摸屏幕、點擊按鈕...【UI-->發(fā)送給邏輯代碼】

2、事件的類別

• 點擊事件 tap
• 長按事件 longtap
• 觸摸事件 touchstart touchend touchmove touchcancel【開始觸摸、結(jié)束觸摸、移動觸摸、取消觸摸】
• 其他 submit input ...

touchend、touchcancel區(qū)別：用戶觸摸的過程中，來電話，手機被頁面所覆蓋，touchend事件被打斷，這時觸發(fā)touchcancel事件。

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

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

點擊 view3

點擊 view2

5、事件的對象

• 類型 type
• 時間戳 timeStamp
• 事件源組件 target
• 當前組件 currentTarget
• 觸摸點數(shù) touches

currentTarget：點擊的view。

target：目標view

添加數(shù)據(jù) --> 獲取控件相應的屬性。

P8 2.4綜合案例 - 快遞查詢

• 產(chǎn)品需求
• 準備
• 編碼實戰(zhàn)

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)} })

需要替換數(shù)據(jù)?！総est.php、content-type、application/json】

3、獲取input輸入框內(nèi)容

3.1、保存input中的內(nèi)容

?

Object：this

4、scroll-view可滾動視圖區(qū)域

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。