安科网

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

无极领域

无极领域

2018-05-15

关注 关注

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>
    *可输入字数0/2000
    
</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';
};
//截取限制字符长度
$(".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");
      }
});

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

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

vue文件

<div class="login-list">
    <div class="login">
        <img src="../assets/images/3.png" alt="">
        <input type="tel" maxlength="11" placeholder="请输入您的手机号码" v-model.trim="user_tel">
    </div>
    <div class="login">
        <img src="../assets/images/4.png" alt="">
        <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
        }
    },
    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.send_time--;
                    if(_this.send_time<=0){
                        _this.sendCode = true;
                         clearInterval(timer);
                            _this.disabled = false;
                        }
                },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: '请求失败'
                            })
                        }
                    }
                )
        }

    }
}

var cookie data var函数

无极领域

无极领域

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

在vue前端去除后端返回json数据中时间日期中间的T

在做项目的时候，遇到一个问题，明明在数据库中，DataTime类型的数据格式明明是正常的，怎么返回到前端后，就在日期和时间中多了一个T？没有办法，只有在前端里再给日期时间来次格式化。return year + "-" + month +

softwear 2020-08-21

Golang 变量申明的三种方式

一是使用 var 关键字，申明包级或函数级变量；二是使用短变量申明方式，只能申明函数级变量，且需指明变量值；在不用作用域申明的变量，会隐藏上一级作用域的同名变量。name0, name1, name2 := value0, value1, value2 /

ZGCdemo 2020-08-16

canvas动态画圆弧及requestAnimationFrame

canvas是HTML5出来的绘图API容器，对于图形的处理非常强大，下面使用canvas配合JavaScript来做一下动态画圆效果。可以用它来做圆形进度条来使用。arc()实现画圆通过设置的开始角度和结束角度来做限定，然后通过累加临时的角度变量实现动画

northwindx 2020-05-31

nginx里的rewrite跳转的实现

有业务需求要变更，需要使用新域名www.zhenguo.com代替，但是旧域名不能废除。需要跳转到新域名上，而且后面的参数保持不变。配置dns，分别配置www.peihua.com和www.zhenguo.com解析。作用场景：基于客户端IP访问跳转，例如

zrtlin 2020-11-09

原生JavaScript实现五子棋游戏

tips = "白棋胜利";

PeterLuoz 2020-11-09

PHP中isset、empty的用法与区别示例详解

在编写程序调用变量时，遇到未定义的变量时，会报错，这是就需要我们对变量先进行判断，再进行相关操作。如果已经使用 unset() 释放了一个变量之后，它将不再是 isset()。若使用 isset() 测试一个被设置成 NULL 的变量，将返回 FALSE。

xuebingnan 2020-11-05

一篇文章带你了解JavaScript 数组迭代方法

在数组中的每个元素上一次操作的方法，称为迭代方法。forEach()方法对数组的每个元素执行一次提供的函数。由于2个参数是可选的。同时新数组中的元素为原始数组元素调用函数处理后的值，并按照原始数组元素顺序依次处理元素。map() 不会对空数组进行检测。例1

wikiwater 2020-10-27

Linux安装软件时90%的人会遇到这个报错，如何解决？

提示 Could not get lock /var/lib/dpkg/lock 报错?这种时候大可不必惊慌，这些错误提示一般都是因为某些程序在系统后台进行着某些 apt 操作，因此锁定了 apt 数据库，所以暂时不能进行 apt 操作。那遇到这种情况，

heheeheh 2020-10-19

PHP isset()及empty()用法区别详解

isset函数是检测变量是否设置。如果已经使用unset()释放了一个变量之后，它将不再是isset()。若使用isset()测试一个被设置成NULL的变量，将返回FALSE。同时要注意的是一个NULL字节并不等同于PHP的NULL常数。若想检测常量是否已

Crazyshark 2020-09-15

正则表达式常用通配符

一共11位，其中第一位只能是1，第二位只能是3,5,7,8位

天高任鸟飞 2020-08-19

使用纯前端JavaScript实现Excel导入导出方法过程详解

公司最近要为某国企做一个**统计和管理系统，Excel导入导出根据导入的数据进行展示报表图表展示，而且还要求要有动画效果，扁平化风格Excel导出，并要提供客户端来管理Excel 文件...现在总算是完成了，于是将我的经验分析出来。在整个项目架构中，首先就

jczwilliam 2020-08-16

javascript解析json格式的数据方法详解

JSON 是一种简单的数据格式，比xml更轻巧。它是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。那么如何用JavaScript来解析json呢？var o={“key”:”v

littleFatty 2020-08-16

Python命名空间和作用域

emmm，这一块讲了2个内容，一个是命名空间，一个是作用域。A namespace is a mapping from names to objects.Most namespaces are currently implemented as Python

idning 2020-08-03

解决用H5 Canvas绘制的图片或文字在高清屏下模糊的问题

因此考虑用H5 Canvas加载图标png并把数值画上去，然后把canvas导出图片url并应用到点标记上。数字显然很模糊。因为我的电脑Win10系统设置了自定义缩放比大于devicePixelRatio但小于2. ctx.scale;//scale>

jinxiutong 2020-07-26

css变量_原生css 中变量的使用

前两天看到阮大神的一篇在css中使用变量的文章，整理了一下。这个重要的css新功能，所有主要浏览器已经都支持了。本文全面介绍如何使用它，你会发现原生css从此变得异常强大。上面代码中，body选择器里面声明了两个变量：--foo和--bar。它们与colo

lanzhusiyu 2020-07-19

表单校验及正则表达式

语法：var reg=/表达式/附加参数;

leap 2020-07-05

php 截取取最后一个字符【转】

$str = " www.wdphp.com ";$var = trim($str);$len = strlen($var)-1;echo $var[$len];$str = "www.wdphp.com";echo

Skyline 2020-07-04

TypeScript（05）： 变量声明

变量是一种使用方便的占位符，用于引用计算机内存地址。我们可以把变量看做存储数据的容器。除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。变量名不能以数字开头。变量使用前必须先声明，我们可以使用 var 来声明变量。它之所以不被称为类型转换

xiaofanguan 2020-06-25

CentOS 7 如何清空文件内容

方法1、在非编辑状态下使用快捷键gg跳至首行头部，再使用dG即可。方法2、cat /dev/null > /var/log/yum.log

Aveiox 2020-06-23

cad.net 与lisp函数ssnamex一样的,获取选择集的选择的方式

var tkids = new List<ObjectId>();};SelectionFilter filter = new SelectionFilter(filList);};if (ssPsr.Status != PromptStatu

dragonzht 2020-06-17
无极领域

无极领域

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号