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

最新推荐文章于 2021-03-17 05:05:15 发布

weixin_30929195

最新推荐文章于 2021-03-17 05:05:15 发布

阅读量349

点赞数

文章标签： json 移动开发后端

原文链接：http://www.cnblogs.com/DCL1314/p/9041379.html

版权

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

<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]*" />
```

转载于:https://www.cnblogs.com/DCL1314/p/9041379.html

weixin_30929195

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
项目中遇到的问题总结(第一个项目)

1.授权绑定微信公众号（微信网页授权）mounted:function() { var uid = tools.cookie.get('id') //cookie缓存微信id if(uid == undefined ){//判断是否登录 var _this = this; var data = tools.getHrefData(); ...
复制链接

扫一扫