前言

实习一周，学到很多东西，技术上的，心态方面的，还有时间管理方面等等。我想，我会很怀念这一周的。

技术上总结

公司前端主要的技术栈是vue和mui，vue自己之前不熟悉，也是慢慢在学习之中（这对自己来讲，是一个锻炼的机会，也是一个很大的挑战）。mui之前也没有接触，所以还是很大的难度的。

mui手机端调试

ctrl+r快捷键为运行和停止，可以直接使用数据线连接手机进行调试，一开始自己的手机不行，后来又一次重启后发现可用了（这不得不说是一个坑，我的猜想可能是重启删除了一些不必要的文件）

webview实现页面之间的交互

先放代码
主页面：

var repertoryHtml = plus.webview.create("repertory_matter_gp.html", "repertoryId", {
    width: '100%',
    height: '100%',
    margin: "auto",
    scalable: false
}, {
    reqDetailId: reqDetailId,
    warehouseList: warehouseList
});

repertoryHtml.addEventListener("loaded", function () {
    repertoryHtml.show('fade-in', 300);
    repertoryHtml = null;
}, false);

解析：可以通过plus.webview.create创建一个新的页面，其中第一个参数是页面的路径，第二个参数是id，第三个参数是样式，第四个就是传给下个页面的参数。
第二段代码中，使用addEventListener监听loaded事件，实现它的一个过渡效果。
次页面：

//使用webview取得上一个页面中返回的值
var currentWebview = plus.webview.currentWebview();
console.log(currentWebview.reqDetailId);
var reqDetailId = currentWebview.reqDetailId;
var warehouseList = currentWebview.warehouseList;
console.log(warehouseList);

通过webview取得上个页面传过来的参数，这样的方法实现很巧妙。（实践证明，可以穿对象还有变量，还有数组）

//取得父页面
var parentWebview = plus.webview.currentWebview().opener(); // 获取父窗口webview
//通过mui.fire()方法可触发目标窗口的自定义事件
mui.fire(parentWebview, "finishSelect", {
    responseObj: responseObj
});
mui.back();

再次通过webview将参数传回去，注意这里取得父页面的方式：plus.webview.currentWebview().opener()

window.addEventListener('finishSelect', function (e) {　 //获取参数值
            var responseObj = e.detail.responseObj;
            console.log(JSON.stringify(responseObj));
        }

通过监听finishSelect这个事件，从而取得上个页面传回来的值。
关于webview，自己还是刚刚接触，觉得是页面传参数的一个不错的选择。

vue的小知识归纳总结

创建vue实例

var vm = new Vue({
  // 选项
})

每个 Vue 实例都会代理其 data 对象里所有的属性
这一点很重要，也就是可以通过vue实例取得视图中数据的重要的一步（我觉得vue这样设计就是为了更好的实现这个效果）

Vue.nextTick(callback)

先看例子(来源是官网)

{{message}}

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {//DOM操作结束后执行下面的逻辑
  vm.$el.textContent === 'new message' // true
})

个人的简单理解就是之前修改的视图上面的数据已经执行之后，再去执行nextTick里面的业务逻辑

vue——$set

this.$set(this.items[j], 'send', temp);
this.$set(this.items[j],'checked',true);

设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。
注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象.

个人理解：当data里面的对象新创建了一个属性的时候，应该确保将这个这个属性能够反映到视图上，所以要用到$set。

关于v-bind和v-model

v-bind的缩写就是：
v-model的一个主要用法在于表单控件上面的创建双向数据绑定，这个在项目总自己也猜到了大坑。

v-on

v-on的缩写是@
常用方法总结

//方法处理器

//dothis为一个方法 
//缩写

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性： v-on:click="handle('ok', $event)"

//内联语句

零散知识

跳转方法之一

window.location.href = "index.html"

怎样通过url传参数
success ：当请求成功时调用的函数。这个函数会得到一个参数：从服务器返回的数据。当请求成功时调用函数，即status==200。
complete ：当请求完成时调用的函数。这个函数会得到两个参数：XMLHttpRequest对象和一个描述请求成功的类型的字符串。当请求完成时调用函数，即status==404、403、302...。
stringify()用于从一个对象解析出字符串，parse用于从一个字符串中解析出json对象

complete

心态

遇到问题不可怕，不畏失败，将重心放到解决问题上
不懂的虚心请教他人

手机调试、webview跳转、vue基础

前言