2.18日志

1.V4业务框架培训

1.ProCode体系（重要：表单ProForm、表格ProTable）

基于 ant-design-vue 的 Form 和 Table 组件的二次封装

ant-design-vue 是React 、Vue开发者手中的神兵利器，提供了众多组件：<a-form><a-table>

<a-button><a-icon><a-row><a-col>,一行col总量是24

Surely Vue Table 是 Ant Design Vue 团队旗下的“高端”组件之一，该组件致力于解决大数据渲染、图表集成等复杂高频问题。 使用该组件可以流畅滚动 10 万行、10 万列的数据，你不必担心页面卡顿造成用户投诉，进而影响业务进展。，常用组件<s-table>

2.常用UI框架

vue框架常用的ui组件库：Element、iview、vue-mui、

(某些组件需付费)iview <Row><Col><Page><FormItem>

react框架常用的ui组件库:Ant-design、Material-UI、Semantic UI、React-Bootstrap、Blueprint

原生微信小程序开发常用的ui组件库：Vant Weapp

3.V4前端框架介绍

页面=布局+业务

4.小程序开发注意事项

vscode下载扩展插件

5.了解斑鸠云商项目开发资源

登录 酷陆科技 · 酷陆科技

蓝湖 UI设计

墨刀  原型设计

接口文档

斑鸠云商员工端小程序组件

6.抽离成为模板

---

  

 封装了一个titlediv组件

index.wxml

<view class="bow">
<block wx:for="{{titlelist}}" wx:key="index" >
        <view class="bow-item" bindtap="gotoSelf" hover-class="none" hover-stop-propagation="false" data-index="{{index}}">
            <view><image class="bow-image" src="{{item.img}}"/></view> 
            <view>{{item.title}}</view>
        </view>
</block>
</view>

 index.wxss

.bow-item{
    text-align: center;
    width: 160rpx;
    height: 170rpx;
    margin-bottom: 15px;
    /* background-color: #101d36; */
}
.bow-image{
    width: 110rpx; 
    height: 110rpx;
}
.bow{
    border: 1px solid red;
    padding-top: 20px;
    margin-top: 10px;
    margin: 0 10px;
    position: relative;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 80rpx;
    font-size: 26rpx;
}

 index.js

Component({
    /**
     * 组件的属性列表
     */
    properties: {
  
      titlelist:{
        type:Array,
        value:[]
      }
    },
  })
  

index.json

{
    "component": true,
    "usingComponents": {}
  }

7.封装一个组件 

什么是自定义组件？将页面的内的功能模块抽象成自定义组件，以便在不同的页面中重复使用，也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护

什么情况下需要自定义组件？1.多个页面中重复使用一个模块；2.页面代码复杂冗长

8.异步编程

如果发送一个网络请求是同步的，那么整个页面的加载需要等到发送请求完事后才能正常显示

如果发送一个网络请求是异步的，主线程和子线程互不干涉，子线程堵塞了，不会影响主线程。

主线程派出去的子线程执行任务完事之后，如何让主线程知道呢？-->回调函数