微信小程序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

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】

3、获取input输入框内容

3.1、保存input中的内容

 

Object：this

4、scroll-view可滚动视图区域