错误记录(2)Error: error:0308010C:digital envelope routines::unsupported
分类: 前端
简介:报错原因:出现这个错误是因为 node.js版本问题解决方案:1、降级2、设置参数找到项目的package.json文件,把自己对应的命令,加上&&,写到启动项目的配置里面(构建写不写都可以),即可ps:win系统 "scripts": { "serve": "set NODE_OPTIONS= openssl legacy provider && vue cli service serve", "build": "set NODE_OPTIONS= openssl legacy provider && vue cli service build"
},
vue+elementui实现textarea换行存入数据,并返回前端修改
分类: 前端
简介:textarea标签回车符是/n,在html里识别回车是<br/>,在存入数据库之前要进行转换成<br/>,在取出展示在html页面时才能显示换行。 <textarea v model="content"></textarea>
//提交的时候转换
content:this.content.replace(new RegExp("\n", "gm"), "<br>")
//这样在页面中可以使用v html展示
//如果需要修改内容,就需要在传入修改页的时候将值再换回来
this.content = options.content.replace(/<br>/g,"\n")
vue实现emoji表情包的编解码
分类: 前端
简介:创建一个emoji.js工具类 //把utf16的emoji表情字符进行转码成八进制的字符
export function utf16toEntities(str) { var patt = /[\ud800 \udbff][\udc00 \udfff]/g; // 检测utf16字符正则 return str.replace(patt, function (char) { var H, L, code; if (char.length === 2) { H = char.charCodeAt(0); // 取出高位 L = char.charCodeAt(1); // 取出低位 code = (H 0xD800) * 0x400 + 0x10000 + L 0xDC00; // 转换算法 return "&#" + code + ";"; } else { return char; } });
} //将编码后的八进制的emoji表情重新解码成十六进制的表情字符
export function entitiesToUtf16(str) { return str.replace(/&#(\d+);/g, function (match, dec) { let H = Math.floor((dec 0x10000) / 0x400) + 0xD800; let L = Math.floor(dec 0x10000) % 0x400 + 0xDC00; return String.fromCharCode(H, L); });
}在需要编解码的地方进行调用 import {utf16toEntities,entitiesToUtf16} from '@/utils/emoji' var a = utf16toEntities("表情包") var b = entitiesToUtf16(a)
Uniapp腾讯地图api逆解析
分类: 前端
简介:一、获取长短坐标 1.首先要去微信公众平台更新隐私协议,不然无法通过uni.getLocation获取长短坐标,协议更新审核完再次进入小程序会弹出位置授权 2.在manifest.json中更新授权信息和接口"mp weixin": { "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" }, "scope.userFuzzyLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } }, "requiredPrivateInfos": ["chooseAddress","chooseLocation","getLocation"] }, 3.通过uni.getLocation获取坐标 3.1.首先通过uni.authorize判断是否授权,未授权需要再次授权 3.2.使用国测局坐标gcj02获取ip所在地getLocation() { //验证是否有授权 console.log("开始获取授权") const that = this uni.authorize({ scope: 'scope.userLocation', // 获取地理信息必填的参数,其它参数见文档 success(res) { that.getLocationFn() }, // 授权失败 fail(err) { uni.showModal({ title: '温馨提示', content: '此功能需要授权后使用!', confirmText: '前去授权', success: (res) => { if (res.confirm) { uni.openSetting({ success: (res) => { console.log(res); that.getLocationFn() } }) } else { console.log('取消'); return false; } } }) return false; } }) }, getLocationFn() { const that = this console.log("获取地址了") uni.getLocation({ type: 'gcj02', // <map> 组件默认为国测局坐标gcj02 altitude: true, success(res) { // console.log('返回的位置信息', res) that.latitude = res.latitude that.longitude = res.longitude console.log(that.latitude + "," + that.longitude) that.getAddress() }, fail(res) { console.log('失败原因', res) } }) },二、使用腾讯地图api坐标逆解析申请开发者密钥(key):申请密钥开通webserviceAPI服务:控制台 >应用管理 > 我的应用 >添加key > 勾选WebServiceAPI > 保存(小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2安全域名设置,在小程序管理后台 > 开发 > 开发管理 > 开发设置 > “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com三、完整代码示例注2:官方和网上搜到的案例里都说把sdk放在onload中,实际操作后发现放在onload里面会导致出现reverseGeocoder方法找不到,直接放在请求上方更好import QQMapWX from '@/common/qqmap wx jssdk.min.js'
let qqmapsdk;
export default { data() { return { latitude: 0, longitude: 0 }; }, onLoad() { // qqmapsdk = new QQMapWX({ // key: '你的KEY' // }); // this.getLocation() }, mounted() { this.getLocation() }, methods: { getLocation() { //验证是否有授权 console.log("开始获取授权") const that = this uni.authorize({ scope: 'scope.userLocation', // 获取地理信息必填的参数,其它参数见文档 success(res) { that.getLocationFn() }, // 授权失败 fail(err) { uni.showModal({ title: '温馨提示', content: '此功能需要授权后使用!', confirmText: '前去授权', success: (res) => { if (res.confirm) { uni.openSetting({ success: (res) => { console.log(res); that.getLocationFn() } }) } else { console.log('取消'); return false; } } }) return false; } }) }, getLocationFn() { const that = this console.log("获取地址了") uni.getLocation({ type: 'gcj02', // <map> 组件默认为国测局坐标gcj02 altitude: true, success(res) { // console.log('返回的位置信息', res) that.latitude = res.latitude that.longitude = res.longitude console.log(that.latitude + "," + that.longitude) that.getAddress() }, fail(res) { console.log('失败原因', res) } }) }, getAddress() { console.log("获取城市") qqmapsdk = new QQMapWX({ key: '你的KEY' }); qqmapsdk.reverseGeocoder({ //必须要有这个,获取方式为选择WebServiceAPI后签名校验 sig:'你的SDK', location: { latitude: this.latitude, longitude: this.longitude }, success(res) { console.log(res.result.address_component.city) }, fail: (error) => { console.error(error); } }) },
Uniapp腾讯地图api逆解析
分类: 前端
简介:一、获取长短坐标 1.首先要去微信公众平台更新隐私协议,不然无法通过uni.getLocation获取长短坐标,协议更新审核完再次进入小程序会弹出位置授权 2.在manifest.json中更新授权信息和接口"mp weixin": { "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" }, "scope.userFuzzyLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } }, "requiredPrivateInfos": ["chooseAddress","chooseLocation","getLocation"] }, 3.通过uni.getLocation获取坐标 3.1.首先通过uni.authorize判断是否授权,未授权需要再次授权 3.2.使用国测局坐标gcj02获取ip所在地getLocation() { //验证是否有授权 console.log("开始获取授权") const that = this uni.authorize({ scope: 'scope.userLocation', // 获取地理信息必填的参数,其它参数见文档 success(res) { that.getLocationFn() }, // 授权失败 fail(err) { uni.showModal({ title: '温馨提示', content: '此功能需要授权后使用!', confirmText: '前去授权', success: (res) => { if (res.confirm) { uni.openSetting({ success: (res) => { console.log(res); that.getLocationFn() } }) } else { console.log('取消'); return false; } } }) return false; } }) }, getLocationFn() { const that = this console.log("获取地址了") uni.getLocation({ type: 'gcj02', // <map> 组件默认为国测局坐标gcj02 altitude: true, success(res) { // console.log('返回的位置信息', res) that.latitude = res.latitude that.longitude = res.longitude console.log(that.latitude + "," + that.longitude) that.getAddress() }, fail(res) { console.log('失败原因', res) } }) },二、使用腾讯地图api坐标逆解析申请开发者密钥(key):申请密钥开通webserviceAPI服务:控制台 >应用管理 > 我的应用 >添加key > 勾选WebServiceAPI > 保存(小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2安全域名设置,在小程序管理后台 > 开发 > 开发管理 > 开发设置 > “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com三、完整代码示例注2:官方和网上搜到的案例里都说把sdk放在onload中,实际操作后发现放在onload里面会导致出现reverseGeocoder方法找不到,直接放在请求上方更好import QQMapWX from '@/common/qqmap wx jssdk.min.js'
let qqmapsdk;
export default { data() { return { latitude: 0, longitude: 0 }; }, onLoad() { // qqmapsdk = new QQMapWX({ // key: '你的KEY' // }); // this.getLocation() }, mounted() { this.getLocation() }, methods: { getLocation() { //验证是否有授权 console.log("开始获取授权") const that = this uni.authorize({ scope: 'scope.userLocation', // 获取地理信息必填的参数,其它参数见文档 success(res) { that.getLocationFn() }, // 授权失败 fail(err) { uni.showModal({ title: '温馨提示', content: '此功能需要授权后使用!', confirmText: '前去授权', success: (res) => { if (res.confirm) { uni.openSetting({ success: (res) => { console.log(res); that.getLocationFn() } }) } else { console.log('取消'); return false; } } }) return false; } }) }, getLocationFn() { const that = this console.log("获取地址了") uni.getLocation({ type: 'gcj02', // <map> 组件默认为国测局坐标gcj02 altitude: true, success(res) { // console.log('返回的位置信息', res) that.latitude = res.latitude that.longitude = res.longitude console.log(that.latitude + "," + that.longitude) that.getAddress() }, fail(res) { console.log('失败原因', res) } }) }, getAddress() { console.log("获取城市") qqmapsdk = new QQMapWX({ key: '你的KEY' }); qqmapsdk.reverseGeocoder({ //必须要有这个,获取方式为选择WebServiceAPI后签名校验 sig:'你的SDK', location: { latitude: this.latitude, longitude: this.longitude }, success(res) { console.log(res.result.address_component.city) }, fail: (error) => { console.error(error); } }) },