• 当前频道:程序开发

程序开发 Vue.js中provide/inject实现响应式数据更新方案

provide() { return { tb: () => this.data }; }, inject: ["tb"], computed: { list() { return this.tb(); } }, watch: { list: { deep: true, handler(e) { console.log("watch", e); } } }, 方案来自:Vue.js中provide/inject实现响应式数据更新

2020-06-18 17:14:10 62 0 0
阅读详情

程序开发 vue项目在IE11中显示 Access-Control-Allow-Headers 列表中不存在请求标头 authorization

IE提示: Access-Control-Allow-Headers 列表中不存在请求标头 authorization。 但在Chrome中是正常的,看ie到network也是有的 感谢 然后去远足 提供的解决方案: 标头其实是大小写敏感的,让后端在返回值里再加个 Authorization,已有的小写的也别删。 然后就是注意 Access-Control-Allow-Headers 里面的值中不能有空格,可以在Access-Control-Allow-Headers的值那里右键复制值,然后在其他地方粘贴看看是否有空格

2020-04-28 10:32:49 458 0 1
阅读详情

程序开发 一段css让全站变灰

为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼,国务院发布公告,决定2020年4月4日举行全国性哀悼活动。在此期间,全国和驻外使馆下半旗致哀,全国停止公共娱乐活动,4月4日10点开始,全国人民默哀3分钟,汽车、火车、舰船鸣笛,防空警报鸣响。 想到以往默哀日访问网站时发现整站会变成全灰,即想到如果立即开始开发、设计图修改等工作也会消耗大量的时间与精力,那会不会有css可以直接处理所有的元素将他们变灰,随即想到了css3的filter(滤镜),并也证实了这一想法的可行性。 解决方案1 html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); } 解决方案2 非全站变灰我们可以将需要使用filter的元素单独加上 <html> <body> <div class="gray-filter"></div> </body> </html> <style> .fixed { position: fixed; top: 100px; left: 100px; height: 100px; width: 100px; background-color: #f00; } .gray-filter { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1); } </style> 兼容IE的办法 很多小伙伴评论说IE低版本不支持该怎么办于是我Google搜索了一下是有实现办法的 实现办法是引入grayscale.js,Demo下载 grayscale.js Demo 简单查看了该js的源码后发现会将color、background-color、borderColor等属性提取出来后替换成灰色,background-image和图片会使用canvas绘制处理成灰色再替换成处理后的图片源 demo内functions.js则是对判断浏览器userAgent来识别浏览器类型与版本,做出对应的处理 参考资料与demo来源 小程序下的问题 微信小程序我尝试加在page上但是fixed还是失效了,只能使用第二种方法去加样式,大家如果有解决方案可以评论提出来大家一起讨论一下~ 作者:tiutiu链接:https://juejin.im/post/5e86e221e51d4546ce27b99c来源:掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

2020-04-04 14:59:40 109 0 1
阅读详情

程序开发 Python的switch替换方案、列表推导式、字典推导式

switch替换方案 day = 8 def get_sunday(): return 'Sunday' def get_monday(): return 'Monday' def get_tuesday(): return 'Tuesday' def get_default(): return 'Unkown' switcher = { 0: get_sunday, 1: get_monday, 2: get_tuesday } day_name = switcher.get(day, get_default)() print(day_name) 列表推导式 # 列表推导式 # 集合推导式 # set 也可以被推导 # dict a = [1,2,3,4,5,6,7,8] aa = {1,2,3,4,5,6,7,8} aaa = (1,2,3,4,5,6,7,8) b = [i**2 for i in a] c = [i**2 for i in a if i >= 5] print(b) print(c) bb = {i**2 for i in aa} bbb = [i**2 for i in aaa] print(bb) print(bbb) 字典推导式 students = { '张三': 18, '李四': 22, '王五': 16 } b = [key for key,value in students.items()] bb = {value:key for key,value in students.items()} print(b) # ['张三', '李四', '王五'] print(bb) # {18: '张三', 22: '李四', 16: '王五'} # 不推荐元组 c = (key for key,value in students.items()) for x in c: print(x)

2020-02-19 23:37:28 130 0 1
阅读详情

程序开发 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 235 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 302 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 419 0 0
阅读详情
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 27
前往