微信小程序个人技术总结

这个作业属于哪个课程	<福州大学2021春软件工程实践S班>
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	相关技术博客
参考文献	无

目录

• 技术概述
• 技术详述
  • flex布局
  • 微信小程序的数据绑定
    • 数据流向
      • 单向数据绑定
        • data，setData
        • js当中函数
      • Mustache语法解析
  • 渲染
    • 条件渲染
    • 列表渲染
  • 事件
    • 用bind绑定事件执行回调
    • bind与catch的区别
  • 路由
    • js模块导入导出
  • 自定义组件
    • 组件属性
  • 外部样式类
    • 提高样式优先级
    • 组件独立性
    • 自定义事件
  • 数据传递
    • app.js
      • 生命周期
      • 保存全局变量
    • 小程序缓存
      • 异步获取时
    • 组件获取值
  • tabBar
    • 跳到带有tabBar选项卡的页面
  • this指针
• 问题，解决方案
• 总结

技术概述

微信小程序是类似于Vue的较于Vue的更简单的开发前端代码。新版微信小程序，增加了数据响应，模板语法，也就使得开发变得更加便捷，更加类似Vue，但上手更简单，更好理解。学习这些技术可以更好的开发。当涉及到页面布局，页面响应，页面渲染，页面响应时间，页面引用组件，页面跳转时，这些技术就必不可少

技术详述

flex布局

容器组件

//flex布局
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
   //align-items: baseline;//按照容器基线对齐
  justify-content: center;
   //justify-content: space-between 两端
   //justify-content: space-around 等距
   //flex-wrap : wrap 超过就换行
}

align-items:center

交叉轴居中

justify-content: center;

主轴居中

主轴：row排列，x轴就是主轴

​ column排列，y就是主轴

交叉轴：另外一条轴

微信小程序的数据绑定

数据流向

• 单向数据绑定
  • JS从服务器获取数据
  • JS通过setData将数据绑定到视图
• 简易双向数据绑定，实现数据同步（类似Vue）

单向数据绑定

• js文件
  • onload
    • 页面加载时执行的代码
  • data
    • data下定义的变量，可以在wxml上用

data，setData

js文件当中

data{
    a:"123"
}
onLoad{
    this.setData({
        b:"2021"
    })
}

应用

<text>{{a+b}}</text>

数据优先

原生js DOM优先

js当中函数

onReachBottom 触底时

onPullDownRefrash 下拉刷新时

Mustache语法解析

{{}}

多层json就直接什么.什么

也可以加表达式

渲染

条件渲染

<wx:if={{flag}}>
<wx:else>

列表渲染

content内容多时，用数组[{},{}]显示

此时 this.setData({ posts:content })

wx:for 放在要循环的内容外

用包裹

同时内部的数据取时

用item.content