微信小程序网课笔记

扒出来之前的笔记，好多图片都丢失了，怕丢了就发在博客上
课程链接：https://study.163.com/course/courseMain.htm?courseId=1208961810

这堆文件都是干啥的

• 五个零散的文件是对项目整体的配置

  • project.config.json 用代码保存小程序设置中的东西
  • app.wxss 所有页面都要用到的css属性，就等于所有界面都导入了这个css文件
  • app.json 配置整个项目的信息，例如有哪几个界面、导航条颜色；
    最上面的页面最先显示，若有tabBar，则最上面的页面就是tabBar默认选中的界面
  • app.js 配置整个项目的逻辑处理
  • sitemap.json 配置小程序及其页面是否允许被微信索引，如果没有sitemap.json则默认为所有页面都允许被索引

• pages文件夹里面是页面

  • 有几个文件夹就是有几个界面

  • json文件是页面的配置信息，例如导航条颜色，页面的配置信息会覆盖掉全局的配置信息

    JSON代码格式要注意的：
    · 字符串都只能用双引号，不能用单引号
    · 数组最后一个属性后面不能加逗号
    · JSON文件中不能写注释
    

  • wxml文件相当于html文件，就是有几个地方有修改，比如div标签改成view标签

  • wxss文件相当于css文件，基本一模一样，但是可以导入其它的wxcc文件

• utils文件夹是工具类

开发起步

​ Pages文件夹新建目录，创建好项目后右击新建Page，会自动创建好页面的四个文件，并初始化四个文件，并在app.json中添加本页面

tabBar

见官方文档

debug模式

没啥用。。。

wxml数据绑定

• js中Page里面的data中写好的变量会放在wxml中进行渲染，意思就是wxml中能调用，
  单个变量、类、数组都可以
• 也可以像C语言那样在调用变量的时候进行简单的四则运算，例如{{ person.age + 10 }}

wxml条件渲染

• if elif else这一套之间不能插入其他的标签
• 如果是想条件成立的时候出现多个标签的内容
  • 可以在带条件语句的view标签中嵌套标签，但是这样会浪费一个view标签，而且可能会对界面的排版产生影响
  • 最好是用block标签，block标签专门做判断，在加载界面的时候不会被加载，性能更好，对排版不会产生影响

wxml列表渲染

wxml模板感觉会用的比较多，可以传参数，快捷传参三个点…的用法，用到的时候看视频吧

div高度和line-height相同产生垂直居中
src路径两个点..代表上一级
box-sizing

include

• 将目标文件*除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

事件参数传递，这一块又复杂又重要，跟着视频写吧。。。

事件冒泡的阻止

• 事件冒泡就是两个嵌套的标签，触发内部标签的事件，会传递到外部标签导致外部标签的事件也被触发
• 阻止就是把绑定事件的bind改成catch
• 会产生冒泡的事件在官方文档里面有列举

event对象

• type 事件类型，例如tap
• timeStamp 当前页面渲染完成到事件发生之间的时间戳
• target 导致事件被触发的组件的一些属性
• currentTarget 当前组件的一些属性
• 关于上面两个target，在事件冒泡中，若点击里面的组件导致里面和外面的组件绑定的事件都被触发，外面组件的event对象中，target就是里面的组件，因为是里面的组件被点击才导致的事件被触发，currentTarget是外面的组件，因为这是外面组件的event对象

wxss的rpx详解

• 除了边框的宽度，其他的宽度最好都用rpx不用px

flex布局

其他的参照官方文档吧