第四天面试

一.微信小程序修改array里面的值再赋值给setData页面没有变化

change:function(e){
	var index=e.currentTarget.dataset.index;
	var data=this.data.data;
	var age='data['+index+'].age';
	this.setData({
		[age]:18
	})
}

二.简述position的可能值,并描述对其理解

1、absolute
绝对定位,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

2、fixed
绝对定位,相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
3、relative
相对定位,相对于其正常位置进行定位
4static
默认值,没有定位,元素出现在正常的流中。
忽略 top, bottom, left, right 或者 z-index 声明。
5、inherit
规定应该从父元素继承 position 属性的值。

ps:
z-index
仅能在定位元素上奏效(例如 position:absolute;1、auto
默认。堆叠顺序与父元素相等。
2、number
设置元素的堆叠顺序。
值越大,优先级越高,层级越网上。
可拥有负的 z-index 属性值。
3、inherit
规定应该从父元素继承 z-index 属性的值。

三.简述flex布局思路,书写常用属性,并以中文解释含义

Flex布局是一种弹性布局。布局样式比较灵活,大多数情况下可以替代float,而且不会脱离文档里流。

Flex中定义了两个轴线,一个主轴一个副轴,这个概念你可以想想屏幕坐标系(X轴向右,Y轴向下),Flex的轴线角色可以调换而且方向也可以变。

属性:

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

1。flex-direction :这个属性决定了Flex主轴的方向。

取值:

row (向右)| row-reverse(向左) | column(向下) | column-reverse(向上)。

2。flex-wrap : 这个属性决定了Flex的子元素在排满了一行或一列( if flex-direction is column or column-reverse )后,第二行的显示方式。

取值:

nowrap (不换行) | wrap (换行,第二行出现在第一行下方) | wrap-reverse (换行,第二行出现在第一行上方) ;

3。justify-content::这个属性决定了Flex子元素的排列方式,(现在假设主轴方向自左向右(flex-direction:row))

flex-start (自左向右排列) | flex-end (自右向左排列) | center (居中,类似text-align:center) | space-between (两端对齐,第一个元素的左边和最后一个元素的右边不会留出空白) | space-around(均匀分布,第一个元素的左边和最后一个元素的右边会留出空白)

在这里插入图片描述
4。align-items:项目在副轴上的排列方式。(现在假设副轴方向自上而下)

取值:

flex-start (子元素对齐父元素上边框) | flex-end(子元素对齐父元素下边框) | center(垂直居中,这个常用) | baseline(子元素的文本的第一行高度位置对齐) | stretch (子元素高度会和父元素一样高) ;
四、Vue|微信小程序,动态渲染dom的点击事件如何传参

微信:
首先 bindtap 绑定点击事件,

在标签中利用 data-xxx  来定义你要传入的参数,,

然后事件中传入 event 用 event.currentTarget.dataset.xxx 来取你传入的值

vue:@click='jump(item.url)'

五、简单举例url跳转传参,跳转方法
vue

this.$router.push({
    name: '工单列表',
    params: {p_camera_dev_name: 'xxx'}
});
// 1.获取p_camera_dev_name
thiz.$route.params.p_camera_dev_name;

this.$router.push({path: '/detail', query: {iid}})
// 1.获取iid
const iid = this.$route.query.iid

this.$router.push({name: 'dispatch', params: {paicheNo: obj.paicheNo}})
取数据:this.$route.params.paicheNo

小程序

wx.navigateTo({
         url: '/page/vipOrder/vipOrder?data=' + [a, b],
})
onLoad: function (options) {
	//此时A页面传递的参数由options接收,A页面传递参数时的参数名叫data,所以B页面想拿到A页面传递的参数使用对象方式取
	let data = options.data;
    console.log(data);//得到的结果是  1,2  是一个字符串
}

六、Vue|微信小程序中,如何渲染数据(包含数组)到视图?如何双向绑定数据?

小程序
this.setData({value})
首先使用Mustache绑定value在dom添加bindinput事件监听input发生的变化通过e.detail.value获取值用
this.setData({value})改变data里面的数据。

vue
this.value
首先:value="value"绑定值,再在元素上面添加:input监听事件监听input发生的变化再用e.target.value
获取value在通过this.value赋值

七、书写你所了解的微信小程序原生API,并以中文解释其义,列举其常用参数

页面跳转

//跳转到新页面
<navigator url="../subindex/aaa?title=我是index">跳转到新页面</navigator> 
// 关闭当前页面,跳转到应用内的某个页面。 
<button bindtap='go'>跳转</button>
 go(){
    wx.redirectTo({
      url: '../subindex/aaa?title=我是index'
    })
  }
//接收传到的参数
onLoad: function (options) {
    console.log(options)
    this.setData({
      text: options.title
    })
  }
获取地理位置

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    const latitude = res.latitude // 纬度
    const longitude = res.longitude // 经度
  }
})
调用扫一扫

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})
获取用户信息

wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
 调用接口(data选填,每个微信小程序需要事先设置一个通讯域名,小程序只可以跟指定的域名与进行网络通信,域名只支持https和wss协议,不能使用ip地址和localhost。)

wx.request({
      url: 'test.php', // 仅为示例,并非真实的接口地址
      data: {
        x: '',
        y: ''
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        console.log(res.data)
      }
    })
网页容器(只能用域名下的网页,默认铺满整个页面,url不要有中文,ios可能会识别不出)

<web-view src="https://mp.weixin.qq.com/"></web-view>
调用相机拍照

<view>
      <camera
        device-position="back"
        flash="off"
        binderror="error"
        style="width: 100%; height: 300px;"
      ></camera>
      <button type="primary" bindtap="takePhoto">拍照</button>
      <view>预览</view>
      <image mode="widthFix" src="{{src}}"></image>
    </view>
 
onLoad() {
    this.ctx = wx.createCameraContext()
}
 
 
takePhoto() {
    this.ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  }
条件渲染(for循环)

<view wx:for="{{array}}">
   {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})
 

八、按需列举微信小程序或vue常用生命周期,并以中文解释其义
小程序:

生命周期函数
onLoad: 页面加载

一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数。
onShow: 页面显示

每次打开页面都会调用一次。
onReady: 页面初次渲染完成

一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
onHide: 页面隐藏

当navigateTo或底部tab切换时调用。
onUnload: 页面卸载

当redirectTo或navigateBack的时候调用。

vue

beforeCreate

​ 1. 组件创建前触发,任务是为了组件的生命周期 和 组件中的事件做准备

​ 2. 数据没有获得,真实dom也没有渲染出来

​ 3. 可以进行数据请求,提供了一次数据修改的机会

​ 4. 执行一次

​

​ created

​ 1. 组件创建结束,任务是数据注入和反应

​ 2. 数据得到了(如果修改了数据,这里得到的也是旧数据),真实dom没有渲染出来

​ 3. 可以进行数据请求,提供了一次数据修改的机会

​ 4. 执行了一次

​ beforeMount

​ 1. 组件挂载前

​ 2. 任务: 判断el 和 template

​ 如果el没有,那么我们需要手动挂载new Vue().$mount(’#app’),如果有,那么判断template

​ 如果template有,那么进行render函数,将template即jsx转成vdom

​ 如果template没有,那么通过 outerHTML 手动书写模板

​ 3. 数据可以获得(旧数据),但是真实dom还没有渲染

​ 4. 可以进行数据请求,也提供了一次数据修改的机会

​ 5. 执行一次

​ mounted

​ 1. 组件挂载结束,任务是将vdom渲染成真实dom,然后挂载到页面

​ 2. 数据获得了(旧数据),真实dom也获得了

​ 3. 可以进行数据请求,也可以修改数据

​ 4. 执行了一次

​ 5. 可以进行真实dom的操作了( 可以进行第三方库静态数据的实例化了 )

​ 综上总结:

​ 1. 数据请求一般写在created里面(因为这里第一次得到数据)

​ 2. 第三方库实例化我们一般会往mounted中写(静态的数据)

​ -------------------------- 2运行中------------------------------

​ 触发条件:数据更新

​ beforeUpdate

​ 1. 更新前

​ 2. 任务是重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象

​ 3. 这个钩子函数更多的是内部进行一些操作,我们就不再多干预了

​ 4. 可以触发多次

​ updated

​ 1. 更新结束,任务是将patch对象渲染成真实dom

​ 2. 真实dom得到了,数据也得到了( 更新后的新数据)

​ 3. 动态数据获取( 第三方库实例化 )

​ -------------------------- 3销毁------------------------------

Vue的销毁有两种形式

​ 1. 通过开关的形式

​ 2. 通过调用 $destroy 方法(这种还需要手动销毁dom外壳)

​ -------------------- vue生命周期的销毁阶段 -------------------

​ 触发条件: 当组件销毁时:

​ beforeDestroy

​ destroyed

​ 这两个钩子功能一致的,这两个钩子没有太大的区别

​ 作用:

​ 用来做善后的,比如计时器的关闭、第三方实例的删除

九、简述你对发送请求获取返回值的思路理解
不会,有知道的请帮我补充下谢谢

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页