简述JS控制台的使用,微信小程序将字符串生成二维码图片的操作方法

第一步: 路由 多添加一个自定义字段 requireAuth

1.快捷键F12可直接进入控制台(或者单机右键->检查)用于bug调试

最近接到这样一个需求,需要在小程序里将十几位随机字符串转换为二维码的形式展示。公众号中(另一终端)调用JSSDK扫一扫功能,去扫描小程序生成的二维码。得到字符串,然后进行接下来的逻辑处理。

 path: '/repository',
    name: 'repository',
    meta: {
      requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的
    },
    component: Repository

2.控制台如图:

下面记录的是小程序中生成二维码图片这一操作,用的是原文作者改版后的生成二维码工具weapp-qrcode.js(demo的众多文件中只需将util下的这个文件拷贝到自己项目中),可在原文地址里clone
demo。

第二步:

图片 1

截图(copy原文)

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if (store.state.token) { // 通过vuex state获取当前的token是否存在
      next();
    }
    else {
      next({
        path: '/login',
        query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
      })
    }
  }
  else {
    next();
  }

Elements:表示所有的js元素

图片 2

登录拦截到这里就结束了吗?并没有。

Console:常用的有如下几个功能:

使用

这种方式只是简单的前端路由控制,并不能真正阻止用户访问需要登录权限的路由。(可手动在浏览器地址栏输入没有权限的路由)

        
①console.log:在控制台输出,优点是不会转换数据类型,输出什么格式的数据都可。如:console.log({name:’xiaode’});

1、页面wxml中放置绘制二维码的canvas

还有一种情况便是:当前token失效了,但是token依然保存在本地。

         ②console.dir:比log输出的更加详细一些

加入点击改变二维码图片的按钮

这时候你去访问需要登录权限的路由时,实际上应该让用户重新登录。

         ③console.table:把JSON数据展示成为一个表格

<canvas class='canvas' canvas-id='canvas'></canvas>
<button bindtap='tapHandler' data-code='123abc456efg000'>转为二维码</button>  <!-- data-code为生成二维码所依据的字符串,这里将其写死了,实际应改为{{变量名}} -->
<button bindtap='tapHandler' data-code='555444333222111'>转为二维码</button>

这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。

         ④document.write(‘ …..’);//这个现在基本上不用了

2、页面js中引入

第三步:  拦截器 (要想统一处理所有http请求和响应,就得用上 axios
的拦截器。)

Source:在这里面可以看所有JS的源代码

onload中初始化二维码 

发表评论

电子邮件地址不会被公开。 必填项已用*标注