年前的时候做了一个电商的小程序,年后过来又开始写公司官网的静态界面,以及根据新需求修改电商后台的接口。
但是公司要把小程序转为H5,放到微信公众号当中。本来是直接用weweb转成H5,但是各种原因(filter,样式..等等问题)
公司决定使用Vue重新开发,于是便交给我了。
相比较自己毕业设计使用的AngularJS4,我觉得Vue的开发比较容易上手了。但是实现小程序上的界面功能就比较难受了,需要自己去写或者导入插件。
关于安转跟语法 去官网https://cn.vuejs.org/
这里记录一下自己所遇到问题:
1.eslint检查,刚开始看到红线在代码下面看着快纠结死了:
vue-cli有eslint检查,webstrom编译报错,Eslint代码规范在eslintrc.js中修改,或者config/idnex.js ->dev-> useEslintrc:false
2.for循环:
v-for循环应该配置key(key是在组件循环的时候必须的一个参数,用来唯一标识这个组件)
对于for循环下标(item,index)in List
3.数组的问题:
由于 JavaScript 的限制Vue 不能检测以下变动的数组(网上看到的解释:Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是,对于数组元素的赋值,却没有办法直接监听):
利用索引直接设置一个项(this.$set(List, index, newValue))
修改数组的长度
4.自己在首页触底开始刷新下一页商品的功能,发现在别的页面触底也会触发该页面的触底函数
利用页面生命周期结束时会使用destroy方法销毁滚动事件。window.removeEventListener('scroll', this.scrollBottom);//页面滚动事件移除
5.点击跳转页面
第二种不会将参数携带在url中:1.this.$router.push({path:'/productDetail/'+item}) 2.this.$router.push({name:'productDetail',params:{productDetail:item}})
返回上一级:this.$router.go(-1)
接受参数: let routerParams = this.$route.params
动态路由的变化 需要用watch进行监控,不然url虽然改变,但是生命周期不会重新来一次
watch: {
'$route'(to, from) {
// 对路由变化作出响应...
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
}
},
6.localStorage 不能缓存对象
当自己使用第二种方法进行页面跳转时,刷新界面会报错,因为没有参数,所以将参数保存到localStorage
7.省市区三级联动的实现:(npm i mint-ui --save)
这里自己去将
import 'mint-ui/lib/style.css';
中的css拷贝出来了,方便自己去修改模板的样式(不要直接在上面修改,不然其他人使用代码的时候,npm install 就会没有了)
<template>
<div>
<div class="padding10 back-white" style="color: rgb(74,74,74)">
<div class="row space-between black-line items-center padding5550" style="height: 35px;">
<div>收货人姓名</div>
<input v-model="name"/>
</div>
<div class="row space-between black-line items-center padding5550" style="height: 35px;">
<div>联系电话</div>
<input v-model="tel"/>
</div>
<div class="row space-between black-line items-center padding5550" style="height: 35px;">
<div>所在地区</div>
<div @click="showCity()" class="fonts12">{{choose}}</div>
</div>
<div class="row space-between black-line items-center padding5550" style="height: 35px;">
<div>详细地址</div>
<input v-model="address"/>
</div>
<div class="row space-between items-center padding5550" style="height: 35px;">
<div>身份证号码</div>
<input v-model="card"/>
</div>
</div>
<div class="back-white padding10" style="margin-top: 5px">
<div class="row space-between items-center padding5550" style="height: 35px;">
<div>设为默认地址</div>
<el-switch
v-model="value"
active-color="#df0c84"
inactive-color="#f5f5f5">
</el-switch>
</div>
</div>
<div class="commodity_screen" v-if="show" @click="show = !show"></div>
<transition name="slide-fade">
<mt-picker v-show="show" :slots="slots" valueKey="region_name" @change="onValuesChange" :showToolbar="true">
<div class="row space-between items-center" style="height:100%">
<div class="picker-item" @click="showCity()">
取消
</div>
<div class="picker-item">
</div>
<div class="picker-item" style="color: #df0c84" @click="sureAddress()">
确定
</div>
</div>
</mt-picker>
</transition>
<!-- 底部 -->
<div style='height:50px;width:100%'>
</div>
<!-- 新增地址 -->
<div class='xdp-fix' style='height:50px'>
<div style='width:100%;font-size:19px;font-weight:600;color: #ffffff' data-id=''
class="btn btn-block bgcolor just-center items-center" @click="submit()">
保 存
</div>
</div>
</div>
</template>
<script>
// import MtPicker from "../../../node_modules/mint-ui/packages/picker/src/picker.vue";
import myaddress from '../../../static/json/provinces.json'
import {newAddress} from '../../http/httpClient'
import {message} from '../../remind/alert'
export default {
// components: {MtPicker},
data() {
return {
name: "",
tel: "",
address: "",
card: "",
choose: "请选择",
show: false,
value: true,
province: "",
city: "",
district: "",
provincename: "",
cityname: "",
districtname: "",
addressDetail: null,
front: "",
contrary: "",
slots: [
{
flex: 1,
values: myaddress[0],
className: 'slot1',
textAlign: 'right',
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: '',
className: 'slot3',
textAlign: 'left'
},
{
divider: true,
content: '-',
className: 'slot4'
},
{
flex: 1,
values: '',
className: 'slot5',
textAlign: 'left'
},
]
}
},
created() {
var tempCity = [], tempCounty = [];
for (var i = 0; i < myaddress[1].length; i++) {
if ("130000" == myaddress[1][i].parent_code) {
tempCity.push(myaddress[1][i])
}
}
for (var i = 0; i < myaddress[2].length; i++) {
if ("130100" == myaddress[2][i].parent_code) {
tempCounty.push(myaddress[2][i])
}
}
this.slots[2].values = tempCity;
this.slots[4].values = tempCounty;
let routerParams = this.$route.params
console.log(routerParams)
if (routerParams.addressDetail != null) {
this.addressDetail = routerParams.addressDetail
this.address = routerParams.addressDetail.address
this.choose = routerParams.addressDetail.province + routerParams.addressDetail.city + routerParams.addressDetail.district
this.tel = routerParams.addressDetail.phone
this.card = routerParams.addressDetail.idNo
this.name = routerParams.addressDetail.realName
this.value = routerParams.addressDetail.isDefaultAddress == 1 ? true : false
} else {
console.log(this.addressDetail)
}
},
mounted() {
this.$nextTick(() => { //vue里面全部加载好了再执行的函数 (类似于setTimeout)
// this.myAddressSlots[0].defaultIndex = 0
})
},
methods: {
submit() {
var that = this
var data = null;
if (that.addressDetail == null) {
data = {
"address": this.address,
"city": this.city,
"district": this.district,
"idNo": this.card,
"isDefaultAddress": this.value == true ? 1 : 0,
"phone": this.tel,
"province": this.province,
"realName": this.name,
"othersideCardidImage": this.front,
"positiveCardidImage": this.contrary,
}
} else {
data = {
"address": this.address,
"city": this.city,
"idx": this.addressDetail.idx,
"memberIdx": this.addressDetail.memberIdx,
"district": this.district,
"idNo": this.card,
"isDefaultAddress": this.value == true ? 1 : 0,
"phone": this.tel,
"province": this.province,
"realName": this.name,
"othersideCardidImage": this.front,
"positiveCardidImage": this.contrary,
"version": this.addressDetail.version
}
}
newAddress(data).then((res) => {
console.log(res)
if (res.status == "200") {
that.$router.go(-1)
if (that.addressDetail == null) {
message("添加成功", "success", that)
} else {
message("修改成功", "success", that)
}
}
})
},
sureAddress() {
console.log(this.province + this.city + this.district)
this.choose = this.provincename + this.cityname + this.districtname
this.showCity()
},
showCity() {
this.show = !this.show;
},
onValuesChange(picker, values) {
console.log(values[0])
var tempCity = [], tempCounty = [];
for (var i = 0; i < myaddress[1].length; i++) {
if (values[0].region_code == myaddress[1][i].parent_code) {
tempCity.push(myaddress[1][i])
}
}
if (values[1] != null) {
for (var i = 0; i < myaddress[2].length; i++) {
if (values[1].region_code == myaddress[2][i].parent_code) {
tempCounty.push(myaddress[2][i])
}
}
}
picker.setSlotValues(1, tempCity)
picker.setSlotValues(2, tempCounty)
this.province = values[0].region_code;
this.city = values[1].region_code;
this.district = values[2].region_code;
this.provincename = values[0].region_name;
this.cityname = values[1].region_name;
this.districtname = values[2].region_name;
}
},
}
</script>
<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .5s ease;
}
.slide-fade-leave-active {
transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */
{
transform: translateY(10px);
opacity: 0;
}
input {
border: 0px;
outline: none;
text-align: right;
}
.padding5550 {
padding: 5px 5px 5px 0px;
}
.xdp-fix {
display: flex;
position: fixed;
bottom: 0;
width: 100%;
font-size: 17px;
box-shadow: #ccc 10px 10px 10px 10px;
height: 50px;
}
</style>
更多文章请关注公众号:每天学Java。想获得更多最新面试提醒请进入小程序:每天学Java
公众号二维码: 小程序二维码: