项目中遇到的问题总结(第一个项目)

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'}});

    1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航
    1. params -> 是要传送的参数,参数可以直接key:value形式传递
    1. query -> 是通过 url 来传递参数的同样是key:value形式传递

3.实时统计textarea输入字数并限制字数

html


分享我的故事


*可输入字数0/2000

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>













{{title}}







{{content.length}}/{{contentLength}}








4.输入手机号获取验证码

vue文件

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，所以它也还是一个数字

    / /加上这段代码

  • 上述代码pc端解决，但移动端还可以输入


其余知识点

  • 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

  • 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对象




  • 创建一个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

    选中

    test — 测试
    任何 Boolean 表达式。

    expression1
    test 为 true 时返回的表达式。 可能是逗点表达式。

    expression2
    test 为 false 时返回的表达式。 可能是逗点表达式。

``

结果： --------------------------- true


结果： --------------------------- false

  • 关于ios端与安卓端使用input 限制只能输入数字

posted @ 2018-05-15 15:56  不完美的完美  阅读(586)  评论(0)    收藏  举报