Posts

vue jsonp 跨域调用腾讯地图 api报错

今天帮助前端小伙伴解决了一下 jsonp 调用腾讯地图 WebService API 报错 Unexpected token : 的问题，这里记录一下解决过程项目中使用 vue-jsonp 组件来解决跨域问题，使用流程如下安装 jsonp npm install vue-jsonp main.js 引入 jsonp 组件 import Vue from 'vue' import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp) 接口调用 const KEY =XXXXXXXXXXXXXX; //key 秘钥自己申请 let url = 'https://apis.map.qq.com/ws/geocoder/v1?&poi_options=address_format=short&get_poi=0'; let locationdata = lat+','+lng //纬度，经度 this.$jsonp(url,{ key:KEY, location:locationdata }) .then(json => { let address = json.result.address; console.log(address) //附近街道地址信息 }) .catch(err => { console.log(err) }) } 本来到了这里应该是完美无缺，开开心心的接受腾讯地图返回的信息就可以了，但是！！，出来了莫名其妙的问题，当请求接口是返回的确是 Unexpected token : 这样的错误。问题排查本着发现问题解决问题的程序员精神，开始了百度，谷歌的混合双打，依然没有找到问题的原因，只因为当时搜索的关键词为 Unexpected token : 虽然我本身不是做前端，但是我也清除这种错误一抓一大把，很难精准的把握到错误的具体位置，既然问题出现在了 jsonp 中那就了解一下 jsonp 的实现原理，和跨域原理，果然有重大发现下图中的一段话一句惊醒梦中人 ...

微信公众号 jssdk 报错

引入 wx-js-sdk import wx from 'weixin-js-sdk'; 设置微信 config 部分代码： this.$axios.get("后台获取 config 地址", {}).then((response) => { ... wx.config(configData); wx.ready(() => { this.getLocation(); }) ... }) 前端 console 中报错如下 getLocation:fail, the permission value is offline verifying 经过一番排查锁定为签名问题查询微信官方文档签名规则如下：签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。即signature=sha1(string1)。示例： noncestr=Wm3WZYTPz0wzccnW jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg timestamp=1414587457 url=http://mp.weixin.qq.com?params=value 由于后台项目使用 easywechat SDK， easywechat 默认会使用 $_SERVER['HTTP_HOST'] 和 $_SERVER['REQUEST_URI'] 作为 url 签名参数，这里也就是将接口地址作为签名的 url ，而我们项目是前后端分离，实际调用者确是前端项目所部署的 url 因而导致签名不正确。知晓问题解决就很好办了，后台签名的时候接受前端当前页面的 url 然后通过 $app->jssdk->setUrl($url); 来设置签名的 url，这样就解决了此问题。 ...

vue 多入口配置^[draft]

在 vue 开发中，有时候也有像后端一样需要多个入口，如 frontend , admin 我们不公用一个 app.vue , main.js, router 这个时候我们就需要 vue 多入口配置，从而达到应用隔离的效果

Ubuntu 终端oh my fish的agnoster主题乱码

执行以下命令来安装缺失的字体： wget https://raw.githubusercontent.com/powerline/powerline/develop/font/10-powerline-symbols.conf wget https://raw.githubusercontent.com/powerline/powerline/develop/font/PowerlineSymbols.otf sudo mkdir /usr/share/fonts/OTF sudo cp 10-powerline-symbols.conf /usr/share/fonts/OTF/ sudo mv 10-powerline-symbols.conf /etc/fonts/conf.d/ sudo mv PowerlineSymbols.otf /usr/share/fonts/OTF/ 然后重启终端,恢复正常

Oh My Fish 一个可以让你赏心悦目的 fish shell 框架

安装 fish shell 以 ubuntu 为例 sudo apt-add-repository ppa:fish-shell/release-3 sudo apt-get update sudo apt-get install fish 其他系统安装点击链接安装 oh my fish curl -L https://get.oh-my.fish | fish 运行上述命令，就尅安装 oh my fish 了，接下来来讲解一下 oh my fish 的基本使用方式操作说明 omf update [omf] [<package>...] 更新 oh my fish 包仓库以及所有安装过的包执行该命令未加任何参数的时候则更新自身和所有安装过的包仅仅更新 oh my fish omf update omf. 对于选择更新，你仍然可以在更新包的列表中加入 “omf” 来更新 oh my fish 自身 omf install [<name>|<url>] 安装一个或更多的包执行 omf install URL 可以直接通过 URL 安装包如何没传入参数，则冲 bundle 中安装缺少的包 omf repositories [list|add|remove] ...