微信小程序学习(二)

阅读数: 次 2021-07-07

本人学习视频为黑马程序员，视频连接为：B 站黑马程序员

代码编辑器的技巧

如果你使用了 vs code，那么你可以下载这个插件
在这里插入图片描述

在微信小程序开发工具中的代码是一样的，两个有连接
在这里插入图片描述

数据绑定

在这里插入图片描述

运算

在这里插入图片描述

聊表渲染

首先在页面.js 文件中添加数组
在这里插入图片描述
==列表循环注意事项==

对象循环

在这里插入图片描述

block 的使用

渲染⼀个包含多节点的结构块 block 最终不会变成真正的 dom 元素
在这里插入图片描述

条件渲染

在这里插入图片描述
==注意不要 hidden 不要和 display 一起连用，否则 display 会覆盖掉 hidden==

事件绑定

这个需求为在输入框输入的数字能够在页面上显示并随输入框改动，并且含有加减两个按钮并能成功的+1 和-1
在这里插入图片描述

样式 WXSS

WXSS(WeiXin Style Sheets)时一套样式语言，用于描述 WXML 的组件样式。与 CSS 相比，WXSS 的特性有： 1.响应式长度单位 rpx 2.自动导入样式

尺寸单位

rpx（responsive pixel）:可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。
在这里插入图片描述

项目需求

需要将下图 750px 转化成 375px 格式保证里面的元素也是随之等比例变化
在这里插入图片描述

本文作者： 未入流的小邹
发布时间： 2021-07-07
最后更新： 2022-06-28
本文标题： 微信小程序学习(二)
本文链接： https://zihong135.github.io/2021/07/07/微信小程序学习(二）/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！

知识共享许可协议

缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是yilia根目录）执行以下命令：
npm i hexo-generator-json-content --save

3、在根目录_config.yml里添加配置：

  jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家