项目中遇到的问题总结(第一个项目)
1.授权绑定微信公众号（微信网页授权）
mounted:function() {
var uid = tools.cookie.get('id') //cookie缓存微信id
if(uid == undefined ){//判断是否登录
var _this = this;
var data = tools.getHrefData();
var code = data.code;
if(code){
_this.getWxInfo(code,function(wxInfo){
tools.ajax( //tools 封装的函数
server.wx_register, //上传微信号
{
data:{
'wx_code': wxInfo.openid,
sname: wxInfo.nickname,
sex: wxInfo.sex,
headimgurl: wxInfo.headimgurl
},
success:function(res){
if(res && res.retcode == 200){
tools.cookie.set('data',JSON.stringify(res.data))
var data=JSON.parse(tools.cookie.get('data'))
var userid= data.id;
tools.cookie.set('id',userid)
var id = tools.cookie.get('id')
}else{
_this.$vux.toast.show({
type: 'text',
text: res.msg
})
}
}
}
)
});
}
else {//微信网页授权
var weixinUrl = '';
weixinUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa0da85c9b3d8682d&redirect_uri=http://www.yiyisoft.net/ysxdwy/Public/www/index.html&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect';
window.location.href = weixinUrl;
}
}else{
return false;
}
},
methods: {
getWxInfo:function(code,fn){
var _this = this;
tools.ajax(server.wx_info,{ // server.wx_info 后端接口
data:{
code:code,
type: 'weixin',
isWeChat: true
},
success:function(res){
if(res.code == 1){
var wxInfo = JSON.parse(res.data);
fn&&fn(wxInfo);
}else{
_this.$vux.toast.show({//_this.$vux.toast.show vux里的toast
type: 'text',
text: res.msg
})
}
},
error:function(){
_this.$vux.toast.show({
type: 'text',
text: "微信授权失败"
})
}
})
}
}
2.路由跳转到指定页面的指定位置
-
A页面跳转到B页面指定位置
this.$router.push({path:"login",params:{name:'share-login'}});
-
- path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航
-
- params -> 是要传送的参数,参数可以直接key:value形式传递
-
- query -> 是通过 url 来传递参数的同样是key:value形式传递
3.实时统计textarea输入字数并限制字数
html
<div class="row">
<div class="ance-title">分享我的故事</div>
<textarea class="limit_2000 advice" placeholder="提示：请注意保护个人隐私" v-model.trim="article">
</textarea>
<span class="limit statistics">*可输入字数0/2000</span>
</div>
less
.row{
position: relative;
.ance-title{
width: 100%;
height: 35px;
background: yellow;
padding: 5px 5px 5px 20px;
box-sizing: border-box;
}
.advice {
width: 100%;
height: 300px;
overflow-y: scroll;
border: none;
padding: 10px 20px;
box-sizing: border-box;
font-size: 14px;
&::-webkit-scrollbar {
display: none;
}
}
@media( min-width: 320px) and(max-width:374px){
.advice {
height: 250px;
}
}
.limit {
position: absolute;
top: 5px;
right: 5px;
}
}
jquery
//以下代码为了兼容iOS、Android
var bind_name = 'input';
if(navigator.userAgent.indexOf("MSIE") != -1) {//（此处是为了兼容IE）navigator.userAgent.indexOf来判断浏览器类型
bind_name = 'propertychange';
}
if(navigator.userAgent.match(/androdid/i) == "android"){
bind_name = 'keyup';
};
//截取限制字符长度
//bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$(".limit_2000").bind(bind_name,function(){
var limitSub = $(this).val().substr(0,2000);
$(this).val(limitSub); //截取字符长度
$(this).next(".statistics").html('*可输入字数'+limitSub.length+'/2000');//获取实时输入字符长度并显示
if(limitSub.length == 2000) {
$(".limit").css("color","red"); //超出指定字符长度标红提示
}else {
$(".limit").css("color","#333");
}
});
原文链接 https://blog.csdn.net/huakaimandizss/article/details/79399868
vue与mui实现textarea实时输入字数（很简单）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../../css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="../../font/iconfont.css" />
<link rel="stylesheet" href="../../css/common.css" />
<style>
[v-cloak] {
display: none !important;
}
.text-box {
width: 100%;
margin-top: 20px;
}
.mui-input-group {
}
.form-textarea {
height: 200px;
font-size: 14px;
}
.form-word-num {
margin-bottom: 0;
padding: 0 10px 10px;
text-align: right;
}
</style>
</head>
<body>
<div id="textarea" v-cloak>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">{{title}}</h1>
</header>
<div class="mui-content">
<div class="text-box">
<form class="mui-input-group">
<textarea class="form-textarea" v-bind:maxlength="contentLength" v-bind:placeholder="placeholder" v-model.trim="content">
</textarea>
<p class="form-word-num">{{content.length}}/{{contentLength}}</p>
</form>
</div>
</div>
</div>
<script src="../../js/mui.min.js"></script>
<script src="../../js/vue.js"></script>
<script type="text/javascript">
mui.init()
(function(){
var textarea = new Vue({
el:'#textarea',
data: {
title: 'textarea',
content: '',
placeholder: '请输入内容',
contentLength: 500
},
mounted: function() {
},
methods: {
}
})
})()
</script>
</body>
</html>
4.输入手机号获取验证码
vue文件
<div class="login-list">
<div class="login">
<span class="fl"><img src="../assets/images/3.png" alt=""></span>
<input type="tel" maxlength="11" placeholder="请输入您的手机号码" v-model.trim="user_tel">
</div>
<div class="login">
<span class="fl"><img src="../assets/images/4.png" alt=""></span>
<input type="tel" maxlength="6" placeholder="请输入验证码" v-model.trim="verify_code">
<button v-show="sendCode" class="send" @click="getCode">验证码</button>
<button v-show="!sendCode" class="again" v-bind="{'disabled':disabled}">{{send_time}}秒后重发</button>
</div>
<div class="login">
<button class="btns btn-warning" @click="confirm">确认</button>
<button class="btns btn-gray">返回</button>
</div>
</div>
export default {
data: function() {
return {
user_tel: '',
verify_code: '',
disabled: false,
sendCode: true,//布尔值，通过v-show控制显示'获取按钮'还是'倒计时'
send_time: 0 //倒计时计时器
}
},
methods: {
// 获取验证码
getCode() {
var _this = this
var regphoto = 11&& /^((13|14|15|17|18)[0-9]{1}\d{8})$/;//手机号正则验证
if(_this.user_tel =="") {
_this.$vux.toast.show({
type: 'text',
text: '请输入手机号'
})
return;
}else if(!regphoto.test(_this.user_tel)) {
_this.$vux.toast.show({
type: 'text',
text: '输入正确的手机号'
})
return;
}else {
//60秒之后重发验证码
_this.sendCode = false;
_this.send_time = 60;
var timer = setInterval(()=>{
_this.disabled = true;
_this.send_time--;
if(_this.send_time<=0){
_this.sendCode = true;
_this.disabled = false;
clearInterval(timer);
}
},1000);
tools.ajax(
url地址(后端给的),
{
data:{
user_tel: _this.user_tel,
},
success:function(res){
if(res && res.retcode == 200){
console.log(res.data)
}else{
_this.$vux.toast.show({
type: 'text',
text: res.msg
})
}
},
error:function(err){
_this.$vux.toast.show({
type: 'text',
text: '请求失败'
})
}
}
)
}
}
},
// 确认登录
confirm() {
var _this = this
var regphoto = 11&& /^((13|14|15|17|18)[0-9]{1}\d{8})$/;//手机号正则验证
if (_this.user_tel == "") {
_this.$vux.toast.show({
type: 'text',
text: '请输入手机号'
})
return;
}else if(!regphoto.test(_this.user_tel)){
_this.$vux.toast.show({
type: 'text',
text: '手机号填写有误'
})
return;
}else if(_this.verify_code == ""){
_this.$vux.toast.show({
type: 'text',
text: '请输入验证码'
})
return;
}else{
var uid = tools.cookie.get('id')
var id = tools.cookie.get('wenid')
tools.ajax(
地址,
{
data:{
user_tel: _this.user_tel,
verify_code: _this.verify_code
},
success:function(res){
if(res && res.retcode == 200){
_this.toggle = !_this.toggle;
_this.$vux.toast.show({
type: 'success',
text: '提交成功'
})
setInterval(()=>{
window.location.href='成功之后跳转的地址'
},2000)
}else{
_this.$vux.toast.show({
type: 'text',
text: res.msg
})
}
},
error:function(err){
_this.$vux.toast.show({
type: 'text',
text: '请求失败'
})
}
}
)
}
}
}
5. html input的type设置为number后可以输入e
-
正常情况下e不是数字所以不能被输入，原因是e在数学上代表2.71828，所以它也还是一个数字
/ /加上这段代码 <input type='number' onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )' /> -
上述代码pc端解决，但移动端还可以输入
<!-- HTML 限制文本框只能输入数字 onkeyup+onafterpaste --> <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
其余知识点
-
JSON.stringify() 方法是将一个JavaScript值（对象或者数组）转换为一个JSON字符串。（从一个对象中解析字符串）
JSON.stringify({"a":"1","b":"2"}) 结果是："{"a":"1","b":"2"}" -
JSON.parse() 从一个字符串中解析JSON对象
var str = '{"a":"1","b":"2"}'; JSON.parse(str); 结果是：Object{a:"1",b:"2"} -
sessionStorage.setItem('key','value') 保存
-
sessionStorage.getItem('key','value') 获取
-
sessionStorage.remove('key') 移除
-
sessionStorage.clear() //clear清除所有的key/value
-
localStorage.setItem('key','value') 保存
-
localStorage.getItem('key','value') 获取
-
localStorage.remove('key') 移除
-
localStorage.clear //clear清除所有的key/value
-
vue的自带事件修饰符
-
prevent 阻止事件的默认行为
-
stop阻止事件的冒泡
-
once绑定只执行一次的事件
-
self 当且仅当事件是由自身触发事件回调函数
@click.prevent/stop/once/self=""
使用FormData对象提交表单及上传图片
-
取得form对象，作为参数传入到FormData对象
<form name="form1" id="form1"> <input type="text" name="name" value="fdipzone"> <input type="text" name="gender" value="male"> </form> -
创建一个FormData空对象，然后使用append方法添加key/value
var data = new FormData(); data.append('name','fdipzone'); data.append('gender','male'); -
提交上传图片时显示上传图片的进度
progress:function(e){ if(_this.image.length>0){ var speed = parseInt((e.loaded/e.total)*100)+'%'; _this.$vux.toast.show({ type: 'text', text: speed }) } } -
条件（三元）运算符(?😃
-
test ? expression1 : expression2
<span class="fr" v-if="data.is_select == 0 ? '未'：'已'">选中</span> test — 测试 任何 Boolean 表达式。 expression1 test 为 true 时返回的表达式。 可能是逗点表达式。 expression2 test 为 false 时返回的表达式。 可能是逗点表达式。
``
<script type="text/javascript">
var b=5;
(b == 5) ? a="true" : a="false";
document.write(" --------------------------- "+a);
</script>
结果： --------------------------- true
<script type="text/javascript">
var b=true;
(b == false) ? a="true" : a="false";
document.write(" --------------------------- "+a);
</script>
结果： --------------------------- false
-
关于ios端与安卓端使用input 限制只能输入数字
<input type="number" name="number" pattern="[0-9]*" />
