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

最新推荐文章于 2024-06-17 08:25:12 发布

upward337

最新推荐文章于 2024-06-17 08:25:12 发布

阅读量693

点赞数 3

分类专栏：微信小程序文章标签： JavaScript 微信小程序模板前端微信小程序视图与渲染组件化开发

希望对您有所帮助；知识共享，欢迎转载，转载时：请附上原文链接！

本文链接：https://blog.csdn.net/weixin_44949135/article/details/107181721

版权

微信小程序专栏收录该内容

7 篇文章 7 订阅

订阅专栏

学习地址：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微信小程序从基础到实战课程概要

3.3、循环标签wx:for="{{}}"

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可滚动视图区域

upward337

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
微信小程序01【目录结构详解、视图与渲染、事件、input、scroll-view】

P1 1.1微信小程序从基础到实战课程概要P2 2.1微信小程序简介P3 2.2.1微信小程序开发准备1、微信开发账号2、微信开发者工具P4 2.2.2微信小程序开发工具的使用P5 2.2.3目录结构详解P6 2.3.1视图与渲染1、组件的基本使用2、数据绑定3、渲染标签4、模板的使用事件
复制链接

扫一扫