• 当前标签:Vue

程序开发 Vue History模式下微信支付授权目录的填写,处理URL未注册

调起微信sdk支付时弹出url未注册问题, 微信开发者平台配置url: 访问url:http://www.baidu.com/pay/ment 支付授权目录:http://www.baidu.com/pay/ 访问url:http://www.baidu.com/pay 支付授权目录:http://www.baidu.com/ 访问url:http://www.baidu.com/pay/ment?id=123 支付授权目录:http://www.baidu.com/pay/ 文章来自:vue history模式下的微信支付,及微信支付授权目录的填写,处理URL未注册

2020-01-13 22:50:05 89 0 0
阅读详情

程序开发 封装vue微信公众号分享方法,兼容iOS

上篇文章说到 vue的jssdk授权方案 ,这篇中使用的上篇的方法授权。 分享个公众号分享引到图片 这里设置一个公共方法: /** * 分享 * @param {Object} data 分享内容 title 分享标题 thumb分享图片 content 分享描述 * @param {String} fullPath 分享路径 通过 this.$route.fullPath 获取传入 */ export function share(data, fullPath) { // 设置自定义分享 ready(["updateTimelineShareData", "updateAppMessageShareData"]).then(_ => { wx.updateTimelineShareData({ title: data.title, // 分享标题 link: window.location.protocol + '//' + window.location.host + fullPath, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: data.thumb, // 分享图标 success: function () { // 设置成功 } }); wx.updateAppMessageShareData({ title: data.title, // 分享标题 desc: data.content, // 分享描述 link: window.location.protocol + '//' + window.location.host + fullPath, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: data.thumb, // 分享图标 success: function () { // 设置成功 } }); }); } 使用     share({title: '分享标题', content: '分享描述', thumb: '分享图片'}, this.$route.fullPath)

2019-12-16 23:56:56 149 0 0
阅读详情

程序开发 解决vue的history模式微信jssdk授权认证在ios上失败问题

本篇方案适用于vue 的 history模式,hash模式不适用! 使用spa模式的vue的 history 路由模式,在ios上加载微信jssdk授权认证出现失败问题。由于ios只记录第一次进来的url,在其他页面调用config授权不能使用window.location.href 做为认证url。 需要做的是如果在ios下,记录第一次进来时的url,调用config时用储存好的url调用 首先在 router 中添加 afterEach import { config } from './utils/wx'; router.afterEach((to, from) => { // 伸手党福利 // window.__wxjs_is_wkwebview // true 时 为 IOS 设备 // false时 为 安卓 设备 安卓默认使用to.fullPath let url = to.fullPath if (window.__wxjs_is_wkwebview) { // IOS // 第一次进来记录url window.entryUrl 自定义window对象 if (window.entryUrl == '' || window.entryUrl == undefined) { window.entryUrl = to.fullPath // 将后面的参数去除 url = to.fullPath }else { // 后续进来直接使用第一次保存的url url = window.entryUrl } } config(url) // 封装的微信config方法 传入url }) // ./utils/wx.js import { config as configWeChat } from '@/api/WeChat' // 后端接口 import { getToken } from './auth' import { Toast } from 'vant' /** * 通过config接口注入权限验证配置 接受url */ export function config(url) { return new Promise(async (res, rej) => { // 接口请求获取config签名数据 const { data } = await configWeChat({ token: getToken(), url: window.location.protocol + '//' + window.location.host + url // 获取协议 + '//' + 网站域名 + 传入域名 拼接成完整url }) wx.config({ debug: false, appId: data.appId, // 必填,公众号的唯一标识 timestamp: data.timestamp,

2019-12-14 23:31:08 188 0 0
阅读详情

程序开发 在ts中axios返回not exist on type 'AxiosResponse'

vue的axios请求返回值调取时报下面这错误 Property 'content' does not exist on type 'AxiosResponse<any>'.Vetur(2339) 解决方法是新增一个 axios.d.ts 文件,内容如下 import * as axios from 'axios' declare module 'axios' { interface AxiosInstance { (config: AxiosRequestConfig): Promise<any> } } 就可以解决了 方案来自 https://github.com/axios/axios/issues/1510#issuecomment-529284409

2019-12-12 15:33:05 670 0 0
阅读详情

程序开发 Nuxt.js使用pm2服务端渲染应用部署nginx绑定域名

首先根据官方文档打包: nuxt build // 或者 npm run build 然后把 .nuxt, static, package.json, nuxt.config.js 这4个文件夹和文件上传至服务器 然后cd 到服务器的文件存放路径中,执行: npm i -production 配置nginx: upstream wwwserver { server 127.0.0.1:3000; #本地运行的端口 keepalive 2000; } server { listen 80; server_name www.domain.com; #外网访问的域名 client_max_body_size 1024M; location / { proxy_pass http://wwwserver/; proxy_set_header Host $host:$server_port; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } access_log /server/log/www.domain.com/access.log; error_log /server/log/www.domain.com/error.log; } 安装pm2 : npm i pm2 -g 执行启动pm2:pm2 start npm --name "你的项目名" -- run start pm2常用命令: 启动进程: pm2 start app.js pm2 start app.py pm2 start npm -- start pm2 start [app-name] pm2 start all 进程列表: pm2 list 重启进程: pm2 restart [app-name] pm2 restart all 停止进程: pm2 stop [app-name] pm2 stop all 进程日志: pm2 logs pm2 logs [app-name] 服务器上如何开机自动启动: 在服务器端,在项目都通过pm2启动成功之后,(可以通过命令pm2 ls进行查看)我们希望直接通过服务器重启之后能自动启动,可以通过pm2 save命令将当前的启动项保存起来,下次重启系统就可以自动启动了。 文章部分来自:向宗亮的小站

2019-06-28 09:05:40 976 0 0
阅读详情

程序开发 js获取USB扫码枪数据

前言 找了很多相关的教程不太好用,汲取各家之长总结精简了一下 原理 扫码枪扫描到的条形码每一位会触发一次onkeydown事件 比如扫描条码位‘1234567890’的条形码,会连续执行10次onkeydown事件 条码扫描到最后一位,会直接触发Enter 代码 支持vue data() { return { nextCode: '', lastTime: '', code: '' } }, created() { // 添加键盘监听事件 document.addEventListener('keydown', this.getBarCode) }, // 销毁页面时销毁监听 destroyed() { document.removeEventListener('keydown', this.getBarCode) }, methods: { // 通过扫码枪获取条形码 getBarCode(e) { let nextCode let nextTime = '' const lastTime = this.lastTime let code = this.code if (window.event) { // IE nextCode = e.keyCode } else if (e.which) { // Netscape/Firefox/Opera nextCode = e.which } nextTime = new Date().getTime() // 字母上方 数字键0-9 对应键码值 48-57; 数字键盘 数字键0-9 对应键码值 96-105 if ( (nextCode >= 48 && nextCode <= 57) || (nextCode >= 96 && nextCode <= 105) ) { const codes = { '48': 48, '49': 49, '50': 50, '51': 51, '52': 52, '53': 53, '54': 54, '55': 55, '56': 56, '57': 57, '96': 48, '97': 49, '98': 50, '99': 51, '100': 52, '101': 53, '102': 54, '103': 55, '104': 56, '105': 57 } nextCode = codes[nextCode] nextTime = new Date().getTime() } // 第二次输入延迟两秒,删除之前的数据重新计算

2019-05-23 17:32:21 556 0 0
阅读详情

程序开发 vue qrcode 生成二维码并下载png图片

基于 qrcode 二维码生成插件, 先下载npm i --save qrcode 引用页: <rqcode :dialog="dialog" :uuid="uuid" :imei="imei" @dialogChange="dialog = false"/> import rqcode from "./componenrts/RQcode"; export default { components: { rqcode }, data() { return { dialog: false, imei: "", uuid: "", }; }, methods:{ // 生成二维码事件 getRQcode(){ this.uuid = id; this.imei = imei; // 以上为参数 ,可以自定义添加或者组合 this.dialog = true; }, } }; 生成二维码组件: <template> <el-dialog title="设备二维码" :visible="dialogVisible" width="30%" close-on-press-escape close-on-click-modal show-close > <div style="text-align: center;"> <canvas ref="myCanvas" id="msg"></canvas> <p>uuid: {{ uuid }}</p> </div> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false; $emit('dialogChange', false)">关 闭</el-button> <el-button type="primary" @click="downRQcode">下 载</el-button> </span> </el-dialog> </template> <script> import QRCode from "qrcode"; export default { props: { uuid: { default: "" }, imei: { default: "" }, dialog: { default: false } }, data() { return { dialogVisible: false }; }, watch: { dialog(e) { this.dialogVisible = e; this.useqrcode(this.uuid) } }, methods: { // 生成二维码 useqrcode(val) { const that = this; setTimeout(() => { var canvas = document.getElementById("msg"); QRCode.toCanvas(canvas, val, function(error) {

2019-04-02 16:51:51 449 0 0
阅读详情

程序开发 vue 中对城市列表根据首字母进行排序

vue中根据城市的首字母a-z进行排序 先安装 js-pinyin 依赖: npm i --save js-pinyin 然后在组件中引入: import pyjs from 'js-pinyin' export default { async mounted() { let city = [ { name: '北京' }, { name: '上海' }, { name: '广州' }, { name: '武汉' }, { name: '浙江' }, { name: '海口' } ] // 城市列表 let blocks = [] // 新列表 let p, c let d = {} city.forEach(item => { p = pyjs.getFullChars(item.name).toLocaleLowerCase().slice(0, 1) c = p.charCodeAt(0) // charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。 if (c > 97 && c < 123) { // 小写的 a-z if (!d[p]) { d[p] = [] } d[p].push(item.name) } }) for(let [k, v] of Object.entries(d)) { blocks.push({ title: k.toUpperCase(), city: v }) } blocks.sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0)) console.log(blocks) // 得出结果 } }

2018-12-14 11:11:34 612 0 0
阅读详情
  • 1
  • 2
  • 3
  • 4
前往