疫好办项目总结
一、VUE
1、v-for遍历只显示最后一个数据？
结果并不是只是遍历一个数据，而是css设置的position:absolute;top和left导致数据都重叠在一起被覆盖。
2、vue传参异步+v-if和v-show的区别
问题：有一个变量是需要先进行路由传值然后进行父子传值，但是出现的问题是路由传值还没过来的时候，父组件就向子组件传递了值，导致的异步问题。
- 用v-if控制在传参过来后再创建组件，不能用v-show，其主要原因是内部原理不同
- v-if:创建和销毁dom元素，初始化flag值为false,在路由跳转传值给父组件设置flag值为true，创建dom元素（即子组件），这样就解决了
- v-show的原理:控制css中的属性display,当v-show为false时display：none；当v-show为true时，display:block；
代码：主页——路由跳转———>进入登记页面（父页面）——父传值 props——>登记的子组件（子页面）（传id值）
主页：路由传值：跳转路径 ?属性=值
<template>
<view>
<button type="default" @click="enterRegister()">进入登记</button>
</view>
</template>
<script>
import { getAllUsers,indexMessage } from "../../api/index.js"
export default {
data() {
return {
id：1
}
},
methods: {
enterRegister(){
uni.navigateTo({
url:"../Register/EnterRegister/index?state=enter&id="+id,
});
}
},
}
}
</script>
<style>
</style>
进入登记（父组件）：在父组件里的子组件动态绑定数据 :属性=值
<template>
<view class="">
<register :titles="'访客进入登记'" v-if="flag" :user_id="id"/>
</view>
</template>
<script>
import register from "../register/register.vue"
export default {
components: {
register
},
data(){
return{
id:0,
flag:false
}
},
onLoad: function(option){
this.id=option.id;
this.flag=true
},
}
</script>
登记组件（子组件）：props接收父组件传来的值
<template>
<view class="">
</view>
</template>
<script>
export default {
props: {
user_id:{
type:Number
}
}
}
</script>
3、export default function 和 export function 的区别
// 第一组
export default function getDate() {}; // 输出
import getDate from 'getDate'; // 输入
// 第二组
export function getDate() {}; // 输出
import {getDate} from 'getDate'; // 输入
第一组是使用 export default 时，对应的 import 语句不需要使用大括号。
第二组是不使用 export default 时，对应的 import 语句需要使用大括号。
4、时间戳转成时间、时间转成时间戳、页面实时显示时间、时间格式过滤器
-
时间戳转成时间：
new Date(时间戳) -
时间转成时间戳：
Date.parse(时间) -
页面实时显示时间：
<template> <view class="content" v-if="hasLogin"> <p class="time">{{ time | FormatTime }}</p> </view> </template> <script> //getDate是一个公共方法,让时间戳变成指定形式的时间 import { getDate } from "../../../utils/date_format.js" export default{ data(){ return { time:"" } }, mounted(){ let _this=this; setInterval(function(){ _this.time=Date.parse(new Date());//time是一个时间戳 },1000) }, // 时间格式过滤器 filters: { // FormatTime调用getDate方法 FormatTime: function (val) { return getDate(val,"");//根据传参不同显示的时间类型也不同 }, }, } </script>date_format.js里面的方法用来格式化时间
export function getDate(datetime, startType) { var date = new Date(datetime); //时间戳为10位需*1000，时间戳为13位的话不需乘1000 var year = date.getFullYear(), month = ("0" + (date.getMonth() + 1)).slice(-2), sdate = ("0" + date.getDate()).slice(-2), hour = ("0" + date.getHours()).slice(-2), minute = ("0" + date.getMinutes()).slice(-2), second = ("0" + date.getSeconds()).slice(-2); let resStr = ""; if (startType === "") resStr = year + "-"+ month +"-"+ sdate +" "+ hour +":"+ minute +":" + second; if (startType === "year") resStr = year + "-" + month + "-" + sdate + " " + hour + ":" + minute + ":" + second; if (startType === "day") resStr = year + "-" + month + "-" + sdate; if (startType === "month") resStr = month + "-" + sdate; if (startType === "hour") resStr = hour + ":" + minute + ":" + second; return resStr; }
二、GIT
1、warning: LF will be replaced by CRLF in package-lock.json.
$ git config --global core.autocrlf true//有弊端，谨慎使用
2、在本地创建项目后再在本地项目内进行git clone导致的与远程仓库的连接错误
- 远程仓库建好后，在本地建好文件夹，然后进行git clone 远程仓库地址（http地址或者ssh地址）
- 之后再在本地进行开发
3、git pull origin develop出现error: The following untracked working tree files would be overwritten by merge:（错误:以下未跟踪的工作树文件将被合并覆盖: ）
- 按我的情况来看是因为本地的文件跟远程库里的文件名相同，解决办法很简单，先使用命令：git clean -f 删除本地已存在的同名文件，然后再次 git pull 。(一定要慎用这个命令！因为这个命令会把本地的文件删除掉！！)
- 如果还不可以，查看哪个文件出现重名现象，然后比较远程和本地的文件。如果本地的文件和远程的文件及文件内容都是一样的，那么删除本地的文件夹。
三、uni-app
1、路由与页面跳转（uni.navigateTo、uni.redirectTo、uni.reLaunch）
（1）uni.navigateTo
- 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
- uni.navigateTo堆栈原理，即是页面路由缓存页面（注意：页面跳转路径有层级限制，不能无限制跳转新页面）
- uni.navigateTo来回跳转最多缓存的页面数量是9个，超过这个数量只能重新刷新页面了，不然点击没反应
（2）uni.redirectTo
- uni.redirectTo销毁前一个页面
- 这个随便点击次数，但是当苹果手机或者安卓手机左划时，就会直接退出小程序，而不是返回上一级，这个要注意。
(3) uni.reLaunch
- uni.reLaunch 关闭所有页面，打开到应用内的某个页面。
（4）getCurrentPages()
- 用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
- 注意： getCurrentPages()仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。
（5）uni.navigateBack()
-
返回上一个页面
-
在返回上一个页面的时候修改上个页面的参数的方法：
let pages = getCurrentPages();//获取页面栈 let prevPage = pages[pages.length - 2]; //上一个页面 //prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面，-3是上上个页面以此类推。 prevPage.$vm.userId = id;//修改上一个页面的userId为此页面的id uni.navigateBack({ delta:1 })
2、openid是什么？怎么生成的
openid作为用户的唯一标识，可以在token中获取。
3、 出现Cannot read property ‘call’ of undefined，然后页面一片空白
4、获取token、创建小程序页面二维码、创建二维码
1、获取token：
-
在主页面中调用接口获取token
-
token存于本地的Storage
uni.setStorageSync('userToken', res.token); -
需要用就在storage获取
uni.getStorageSync('userToken') -
token大多数是用于用来作登录时候的身份验证
2、创建小程序页面二维码
微信开发平台–>工具–>生成小程序码
3、使用tki-qrcode组件创建二维码
首先，终端下载tki-qrcode
npm install tki-qrcode
导入组件
//导入tki-ercode
import tkiQrcode from "tki-qrcode";
注册组件
//注册组件
components: {
'tki-qrcode':tkiQrcode
}
配置属性和方法
//二维码的各个属性
data() {
return {
val: '',//扫描二维码获取的值
size:520,//二维码的大小
background: '#ffffff',//背景颜色
foreground: '#008000'，//前景颜色
pdground: '#008000',//角标色
icon: '',//小图标
iconsize: 30,//小图标大小
lv: 3,//二维码容错级别
onval: true,//val值变化时自动重新生成二维码
unit: 'upx',//大小单位
loadMake: true,//组件加载完成后自动生成二维码
src: '',//
showLoading: true,//是否展示加载
loadingText: '页面加载中',//加载中的文字
}
}，
methods: {
//二维码方法
qrR() {
if(!this.val){
uni.showToast({
title: '二维码生成错误',
duration: 2000
});
}
},
}
整体代码：
<tki-qrcode ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground" :pdground="pdground" :lv="lv" :onval="onval" :loadMake="loadMake" :showLoading="showLoading" :loadingText="loadingText"
@result="qrR" />
<script>
//导入tki-ercode
import tkiQrcode from "tki-qrcode";
export default{
//注册组件
components: {
'tki-qrcode':tkiQrcode
}
//二维码的各个属性
data() {
return {
val: '',//扫描二维码获取的值
size:520,//二维码的大小
background: '#ffffff',//背景颜色
foreground: '#008000'，//前景颜色
pdground: '#008000',//角标色
icon: '',//小图标
iconsize: 30,//小图标大小
lv: 3,//二维码容错级别
onval: true,//val值变化时自动重新生成二维码
unit: 'upx',//大小单位
loadMake: true,//组件加载完成后自动生成二维码
src: '',//
showLoading: true,//是否展示加载
loadingText: '页面加载中',//加载中的文字
}
}，
methods: {
//二维码方法
qrR() {
if(!this.val){
uni.showToast({
title: '二维码生成错误',
duration: 2000
});
}
},
}
}
</script>
5、下拉刷新、上拉触底加载
1、uniapp方法
下拉刷新：
先在pages.json中需要下拉刷新页面添加"enablePullDownRefresh": true
例如：
{
"path" : "pages/index/index",
"style" :{
"navigationBarTitleText": "页面",
"enablePullDownRefresh": true
}
},
使用onPullRefresh，里面刷新得到新数据
//和生命周期同级
//下拉刷新
onPullRefresh(){
//调用得到数据的接口
}
//触底加载
onReachBottom(){
}
2、组件
上拉触底加载(使用uniapp组件z-paging)
（1）uniapp插件市场导入ZPagingMixin–>uni_modules中就出现了z-paging
（2）首先导入组件，添加混入
<script>
import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
mixins: [ZPagingMixin],
</script>
（3）在页面中使用z-paing组件包裹需要分页的内容，custom-refresher用来下拉刷新的，也可以用onPullRefresh
<template>
<z-paging ref="paging" v-model="records" use-page-scroll @query="queryList" loading-more-no-more-text="我也是有底线的！">
<custom-refresher slot="refresher" slot-scope=" {refresherStatus}" :status="refresherStatus"> </custom-refresher>
<view>需要下拉刷新上拉加载的内容</view>
</z-paging>
</template>
（4）完整代码：
<template>
<z-paging ref="paging" v-model="records" use-page-scroll @query="queryList" loading-more-no-more-text="我也是有底线的！">
<custom-refresher slot="refresher" slot-scope=" {refresherStatus}" :status="refresherStatus"> </custom-refresher>
<view>需要下拉刷新上拉加载的内容</view>
</z-paging>
</template>
<script>
import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
mixins: [ZPagingMixin],
methods:{
queryList(pageNo, pageSize) {
//params是需要传给接口的参数
const params = {
visitor_id:this.visitorId,
current:pageNo,
size:pageSize
}
//调用接口把需要的参数包括pageNo, pageSize传进去来获取数据data,把
AccessHistory(params).then(res => {
console.log(res, "res")
//把data转成数组
const data = res||[]
this.$refs.paging.complete(data);
// if(res != null && res != undefined){
// this.records = res;
// }
}).catch(err => {
this.$refs.paging.complete(false);
console.log("获取出入历史失败");
})
}
}
</script>
（5）z-paging属性解释
- v-model是需要分页的数据 ；
- use-page-scroll允许页面滚动；@query=“queryList” queryList是分页函数，里面传入当前页current和页面个数size
- loading-more-no-more-text 当没有数据的时候提示的消息；
6、错误码：80058,desc of scope.userLocation is empty
- 这个问题是项目内的manifest.json文件=>微信小程序配置=>位置接口=>填写申请权限
- 因为位置接口描述为空导致的异常 ，填上权限申请原因即可
7、upx、rpx、px单位的区别和换算
- rpx可以根据屏幕宽度自适应
- 1px=2rpx
- 1upx=1rpx upx是微信小程序里的，适用uni-app
8、TypeError: (0 , _index.AccessHistory) is not a function
提示某个方法不是方法的可能原因是该方法没有放在methods中（粗心大意）
四、javascript
1、JSON转String，用【 JSON.stringify() 】，string转成JSON,用【JSON.parse()】
五、CSS
1、禁止点击
关键的控制div、img是否可以点击的属性是**：pointer-events: none;**（禁止鼠标点击事件）
2、input禁止输入的方法
-
使用readonly规定输入字段为只读的
<input type="text" value="哈哈哈" readonly="readonly">- readonly 属性是一个布尔属性。
- readonly 属性规定输入字段是只读可复制的。
- 只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。
- readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。
-
disabled 被禁用的 input 元素可复制，不能接收焦点,设置后文字的颜色会变成灰色。无法与
<input type="hidden">一起使用。但是有一个弊端，点开了不选择一个选项就无法进行其他操作，适用于必选项。<input type="text" value="哈哈哈" disabled="disabled">
-
通过控制input的max length为0实现，设置maxLength,可以进行删除选择框里的默认值，但是输入的时候会输入不上去。这也不是一个好方法，万一用户不小心删除了选项中的字，那么提交上去的将不是选项中的某一个。
<input type="text" maxlength="0"> -
οnfοcus="this.blur();“onfocuse是聚焦的意思，当你把光标放在文本框上输入的时候，就是聚焦，但这里添加了"this.blur()”，blur的作用就是去除聚焦，也就是你不能把光标放在这个文本框上，换句话说就是你不能输入文本了 。
<input type="text" value="哈哈哈" οnfοcus="this.blur();">
1926
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
