4.29 lak

上午：

项目如何表达

项目表达的STAR原则：

 例如：搜索功能模块为例：

S:situation 项目的背景

   为什么要有你这个项目？

T:Task  任务,即你所负责的功能模块

Action: 执行，操作

  如何实现的功能（包括用到的技术栈，代码实现思路，遇到过哪些坑，如何解决的？）

Result:结果，项目及时上线，提高用户粘性和转化率，收获了哪些



除了问你讲项目之外（面试时），面试这还会问你，你的项目的优势在哪？

 SWOT：主要用于用竞品（竞争产品）分析的工具（产品经理（简称：产品）主要思考的问题）

 快鲜买鱼（卖海鲜）


 S:优势

 W:劣势

 O:机遇

 T:挑战

面试题如何表达

技术点的表达：

   面试官问，说一下你们公司前，后端是如何交互的？

   

目前面试存在的问题：

   1.面试时：听不懂面试官在说什么？

        分析：主要是数据交互，用的就是ajax

   2.即使听懂面试官说什么，又不会如何表达清晰？

      注意：回答时千万别挤牙膏！！！


     技术点的表达：  以ajax为例，闭包，vue组件传值

      1.是什么？

        ajax是异步请求，局部刷新，可提供用户体验技术
         
      2.适用场景

            只要前后端交互的场合都会用到：搜索，登录，注册，结算。。。。。

      3.实现方式

         闭包：

            var fn=(function(i) {

              return  function() {

                    return i;
                }

            })(i)

            fn=null

          JS原生实现：XMLHttpRequest
          jQuery实现:$.ajax
          axios实现:
          小程序的实现:wx.request()

      4.遇到的问题及解决方案

           接口封装api

            遇到跨域问题，遇到数据缓存问题

        (index):1 Access to fetch at 'https://api.douban.com/v2/movie/in_theaters?apikey=0b2bdeda43b5688921839c8ecb20399b' from origin 'https://www.baidu.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

      5.还有没有更好的可替代的解决方案？

          JS原生实现可通过fetch来实现

          let {  }块级作用域

 

今天上午自习的时候复习了昨天讲的组件通信，然后呢在项目里写了一下：

组件：

<button bindtap="click" > 点击 </button>

  data: {

    type:"来自click的消息"

  },

methods: {

    click(){

      console.log("点击")

      this.triggerEvent("click",{ type:this.data.type })

    },

  }

页面：

<Dialog title="{{title}}" content="页面内容" bindclick="getClick" >

 getClick(e){

    console.log(e.detail.type)

  },

然后又写了slot，分为单slot和多slot，但是使用多slot 必须在组件中开启多slot

Component({
    options:{
      multipleSlots: true
    }
   })
然后又把第三方组件熟练一下，看了看文档
用了weui，有赞和vant等

下午：

小程序的上拉加载：实现方式有2种

（1）通过页面生命周期中的onReachBottomp实现上拉触底加载

（2）scroll-view也可实现上拉加载，通过bindscrolltolower触发

      <scroll-view scroll-y="true" style="height:1200rpx;"  bindscrolltolower="lower">
              
      <view class="movie_item" 
          wx:for="{{ list }}" wx:key="item.id">
            <image src="{{ item.images.small }}" />
            <text>{{ item.title }}</text>
          </view>

      </scroll-view>
      </view>

那如何获取小程序高度和宽度呢

wx.getSystemInfo()

参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html