微信小程序01【目录结构详解、视图与渲染、事件、input、scroll-view】微信小程序

学习地址：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

【微信小程序01【目录结构详解、视图与渲染、事件、input、scroll-view】】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 发送给后台解码出 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

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】

文章图片