浅吟轻唱

浅吟轻唱 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织 dsx2016.com/ 编辑
编辑

是不是知道前方有人在等待的时候,人就会变得格外勇敢......

个人动态

浅吟轻唱 发布了文章 · 2020-02-13

SourceTree通过SSH密钥认证失败

原文链接:https://dsx2016.com/?p=969

微信公众号: 大师兄2016

SSH认证失败

在推送分支时,提示SSH密钥认证失败,点击是

点击重试

点击取消

最后效果图

解决方式

点击工具-选项

选择SSH客户端:OpenSSH即可,点击确定

Tips

前提是已经创建过github ssh密钥,如果没有,可以自己新建一个

查看原文

赞 0 收藏 0 评论 0

浅吟轻唱 发布了文章 · 2019-12-02

程序员的进阶之路

原文链接: https://dsx2016.com/?p=719

微信公众号: 大师兄2016

img

非器非术非道,仅聊聊一些方向.

分阶

很多事物都可以按进度和阶段来划分,如程序员的小白,初级,中级和高级.

但是这种层次之分也有内外之别.

公司招聘的中高级职位取决于业务的能力需求和薪水发放的高低,是市场的宏观定义.

个人的中高级之分在于自我的能力进阶,来源于技术但不仅仅限于技术,有多个维度综合衡量.

先有分阶,才有进阶.

学会分阶,找到自己当前的定位,了解自己的长处和不足,才有下一步.

高级

高级,优秀之类的词汇是一个很抽象的概念.

以可量化的事物来描述,一些描述高级程序员的答案:

  • 工作经验5年以上
  • 可以快速写出一些常见的算法
  • 能独立开发框架和库
  • 出版过技术图书
  • 带领团队完成项目

一次面试的流程不足以表现高级所在,一次协作的失误也不能表明才不配位.

共同

层级之分为纵,差异之别为横.

不论程序员的职位和技术栈如何,总有一些共同的地方.

就如前端开发和后端开发:

  • 在版本管理和协作上,GitSvn是必知必会,其他的不在考虑范围.
  • debug调试和面向搜索引擎,定位和排除问题也是技术能力之一.
  • 大到硬件,鼠标/键盘/电脑椅,小到细节,文档/注释/命名,还有周报和会议.

这些能力是基础.

即便是基础,可调节的空间仍然造成十分巨大的差异.

调试能力80分的人工作效率往往是60分人的几倍甚至十几倍.

其他的以此类推.

但是在纵向扩展上,一般到80分就要考虑适可而止,因为往后加1分,付出的时间精力和收获不一定成正比.

共通

只学习一门语言可以胜任常规业务的需求,多学一些语言,有助于扩展思维的边界.

但凡你了解过两门以上的语言,你就会发现,语言之间有很多共通的地方.

汉语和英语,pythonjava,不外如是.

注意,是通,不是同.

如编程语言,它们共通的地方:

  • 都有变量,函数,或者类
  • 都有数据类型,字符串,布尔型,数字等
  • 都有数据结构,堆栈,队列,数组,链表等
  • 都有设计模式和算法

甚至于一些常见的条件控制,循环语句,逻辑运算,模块等都是大同小异.

了解原理和思想后,几乎只剩下语法不同,或者语言独有特性的差异.

进阶

在进行纵横扩展分析后,进阶方向仍然比较模糊.

站在高处的人一眼就能全览低处的风景,但是低处望高处,通常是一叶障目,难易窥探全貌.

回到可量化的高级,什么是别人具备而你没有的.

以下是一些临时的整理:

  • 面向面试编程,在拥有业务能力的基础上,好好的表达自己,内要高级,外也要高职高薪,市场定义很重要.
  • 面向技术编程,语言的学习很抽象,也很简单,按部就班即可,从编程基础到设计模式再到数据结构和算法,主要核心在于了解和学会.
  • 面向业务编程,学会和会用是两个场景,业务远比学习要复杂的多,打通面试和学习两关,才能开始业务,如何学以致用是关键.
  • 面向效率编程,上三个是基础,现在才是进阶,快是企业的制胜之道,也是个人的工作之道,在90%的层面,如何更快是一个大方向.
  • 面向质量编程,效率和质量有时候互斥,有时候互联,这才是最考验技术能力的地方,一个代码片段既可以快又好,也可以慢又差.

没写过框架和库,没了解设计模式就不是高级开发了吗?

会数据结构和算法就一定是高级开发吗?

高级开发工程师频繁使用if else之类的就是才不配位吗?

凡是以点概面的,请慎而远之.

量化

生活中很难证明你的能力或者自我了解.

刷题不代表什么,刷的多了一样也全知全会.

面试不代表什么,面向面试编程的多了去.

工作不代表什么,完成任务又不是秀代码.

一些临时的整理:

  • 工作年限,时间越久,越是身经百战,时间长久本身就是一个筛选值,大公司履历和职位高低也是筛选值.
  • 开源项目,内部的代码不方便展示,但是开源的代码面向全世界,不论是自己开发,还是参与知名开源项目,高质量代码是基础,基于github的时间线,也是不同时期技能能力的佐证记录.
  • 知名博客和出版图书,出版社是一个筛选值,销量取决于读者,也是一个筛选值,博客的浏览量10万+,基于类似公众号的时间也是一个筛选值,书籍是知识体系系统,博客是技术成长路径.

能够量化和分析的,一定是基于分享和面向公众的,还有依赖于第三方作为筛选值.

  • 基于时间线,github和公众号的发布时间无法更改,每一步记录不同时间的变化,展示的是代码层面的细粒度.
  • 基于市场数据,工作年限,职位薪水,公司层级,产品量级,都是基于商场如战场的真实数据.
  • 基于平台,出版社,开源组织,技术大会,在线教育,新媒体等,知名品牌都有会自己的一套筛选机制.

外有一套,内有一道.

清楚的了解内外定位和进阶,平衡取舍之道,才是王道.

查看原文

赞 0 收藏 0 评论 0

浅吟轻唱 发布了文章 · 2019-11-26

vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前的位置

原文链接: https://dsx2016.com/?p=716

微信公众号: 大师兄2016

需求:

商品列表页面浏览,进入商品详情,点击返回仍然是之前浏览的位置

img

实现:

使用vuekeep-aliveinclude属性给组件做动态缓存,从详情页返回不变,从其他页面进入列表页则刷新

加需要缓存的列表页面定义一个数据集在vuex

state:{
    pageListArr:[]
}

列表页的nameproList,详情页的nameproDetail,只有PageListArr包含的字段才会被缓存,如pageListArr.push("proList")

<keep-alive :include="pageListArr">
   <router-view></router-view>
</keep-alive>

思路:

在页面初始化前,获取来源页面的name和要去加载页面的name.

img

在这里使用全局导航守卫

router.beforeEach((to, from, next) => {
  // 来源页面name -> from.name
  // 去往页面name -> to.name
  // 如果要跳转的页面为商品列表,且不是从商品详情返回或者跳转
  if(to.name===`proList`&&from.name!==`proDetail`){
      pageListArr.push(`proList`)
  }
  // 来源为商品页面返回列表页面
  if(to.name===`proList`&&from.name===`proDetail`){
      console.log(`不做处理`)
  }
})

当多个不同的列表页面需要设置缓存时,如分类商品列表,活动商品列表

需要先判断pageListArr是否已缓存某些页面,只有从商情详情返回已缓存的列表页才是无刷新,未缓存的列表页面仍然需要新缓存

img

查看原文

赞 1 收藏 1 评论 0

浅吟轻唱 发布了文章 · 2019-11-26

vue keep-alive include无效

原文链接: https://dsx2016.com/?p=713

微信公众号: 大师兄2016

检查版本

确定当前的vue版本的是2.1+

因为includeexcludevue2.1.0新增的两个属性.

package.json

"vue": "^2.5.2",

检查name

注意,不是router.js中的name,而是单个vue组件中的name属性.

建议将router.js中的namevue组件的name保持一致,不要混乱.

export default {
    name: "index"
}

多层嵌套

网上的答案几乎都是检查vue组件的name属性,但还是有一个巨坑.

那就是多级嵌套<router-view></router-view>,但凡有超过两个以上的router-view且是父子级关系,请都加上keep-alive,只加一个不会生效.

// app.vue
<keep-alive include="app,index">
   <router-view></router-view>
</keep-alive>

// other.vue
<keep-alive include="app,index">
   <router-view></router-view>
</keep-alive>
查看原文

赞 0 收藏 0 评论 1

浅吟轻唱 发布了文章 · 2019-11-24

浅谈code review

原文链接: https://dsx2016.com/?p=710

微信公众号: 大师兄2016

什么是Code Review

img

中文为代码审查,是指一种有意识和系统的召集其他程序员来检查彼此的代码是否有错误的地方.

通常进行Code Review会有以下效果:

  • 更好的代码质量,提高代码的可维护性,统一性,可理解性等.
  • 查找缺陷,发现性能问题,安全漏洞,可能的后门和恶意代码等.
  • 最佳实践,能够更好的完成任务和需求的有效方法.
  • 知识分享,review别人代码的同时,也是学习有益技术的方式之一.

要不要Code Review

img

Code Review是一把双刃剑,用的好就事半功倍,用的不好,反而对团队和项目有不利影响.

一些道理和技术虽好,但也要看看是什么场合和环境,因势利导,求同存异才是核心所在.

显然review和其他事物一样,也需要花费大量的时间,对于任务本就极其紧张的团队,在如何取舍上值得好好思考一番.

review也需要人与人之间的沟通和配合,同时也比较检验技术深度.

要知道,最难搞定的就是人.人都有惰性,也有自己的一套行为准则和规范,在这个层面强加进来,很容易产生抗拒心理.

最后,怎么说呢,试试又不吃亏,不要心存完美主义,小步快走,快速迭代,不正是软件开发的第一要义吗?

Code Review前置条件

img

Code Review本身是一件后置工作,有着查漏补缺的作用.

但是推行它也需要准备一些前置条件,能够让团队更快更好的去接受和实施.

  • 建立团队规范,不论是代码层面还是协作层面,如命名规则,语法检查,分支规范等.
  • 建立完善的文档,方便团队和新人查阅,在内容上大家可以共建和建议,不能某个人一言而决.
  • review流程制定,设定职责,设定周期,设定目标,从轻量级代码审查开始,同时建立积极的审查文化.

完成上述基本骨架后,就可以开始尝试review了.

这一时期通常是刀耕火种的时间段,极大概率迎来各种阻力,如果推行之后的效益低于之前的,可以在适当时间调整和放弃.

如何有效的Code Review

img

先不提细节,每个团队和技术架构都有各自的规范.

从通用的方法层面有以下几点可以进行有效的审查:

  • 一次查看少于400行代码
  • 一次检查不要超过30分钟
  • 使用清单(上述内容提到的团队规范文档,可以更细化为某个目标清单)

人的精力是有限的,了解自己的当前状态尤为重要.

一些常见的规范和审查元素:

  • 命名可读性,能自我阐述的最好,英文用词尽量准确(命名是所有程序员的头痛之一)
  • 注释,恰到好处的注释,重要的地方及时备注,不需要的地方要删除一定的注释信息,代码既是给机器运行的,也同时是交接给人看的.
  • git commit提交规范,不标注信息和不及时commit都是严重阻扰review的因素之一,除了常规的描述信息外,还可以按类型等备注:feat: 新特性/fix: 修改问题/refactor: 代码重构/docs: 文档修改/chore: 其他修改/test: 测试用例修改/style: 代码格式修改等等等

注意到没,上述的都是在信息层面做文章,这也是有效沟通的方式之一.

你的代码,你的注释,你的提交,不仅仅是业务,也同时包含了很多对外的信息,对团队是否友好可读,都潜移默化的表达了出来.

任何事物都可以分为初级/中级/高级,也可以理解为草稿/正文/优化/美化,等层层递进的关系和阶段.

从易到难,你还可以做以下审查(通用的居多):

  • 低级的错误,语法错误,多余变量,类型检查,全局污染,强耦合,代码格式化等,通常可以先用自动化插件检查,其次才是人工检查.
  • 最佳实践,避免过时的语法,避免过多的if else,避免参数过多,尝试用新特性,语法糖,更好的设计模式,数据结构等重构代码.
  • 重复代码,主要看有没有把公共的组件,函数,可复用的代码片段抽离出来,仅此一点,可省去后期大量时间和避免错误发生率.
  • 代码的健壮和优雅,是否可扩展,低耦合,逻辑是否健壮,有没有潜在的bug,保证数据和行为的统一性,如统一错误提示,统一缓存等

到此涵盖了review的一小部分,剩下的可以自行扩展,并非是固定的标准,每个团队的实现和目标都不一样.

Tips

一句老生常谈的话,大家都是成年人了,该做什么,怎么做,都要自己独立思考,积极行动.

团队的Code Review有没有推行没关系,有,固然可能更好,没有,也并不妨碍你的自我提升.

但凡有好的事物都应该主动去尝试,去坚持,克服外来因素影响,一个人,也同样可以review自己和同事代码.

尤其是自己的.

查看原文

赞 0 收藏 0 评论 0

浅吟轻唱 发布了文章 · 2019-11-17

ES6数组Array整理:比ES5更推荐的使用方法和技巧

原文链接: https://dsx2016.com/?p=692

微信公众号: 大师兄2016

ECMAScript

ECMA ScriptECMA-262标准化的脚本语言的名称。

尽管JavaScriptJScriptECMAScript兼容,但包含超出ECMA Script的功能。

以下表格按照四个模块分类:

  • ECMAScript 1st Edition (ECMA-262)对应初版和ES5之前的版本(仅本文)
  • ECMAScript 5.1 (ECMA-262)对应ES5
  • ECMAScript 2015 (6th Edition, ECMA-262)对应ES6
  • ECMAScript Laster对应ES7/ES8/ES9/ES10

篇幅所致,Array.prototype.map()简写为map(),以此类推.

ES 1stES5ES6ES Laster
Array.lengthArray.isArray()Array.from()includes()
unshift()indexOf()Array.of()
concat()lastIndexOf()findIndex()
join()every()find()
pop()some()fill()
push()forEach()copyWithin()
reverse()map()entries()
shift()filter()flat()
slice()reduce()flatMap()
sort()reduceRight()includes()
splice()keys()
toLocaleString()values()
toString()

删除数组的重复项

ES6的使用,有两种方式,都需要先使用创建Set数据结构来去除重复值

let fruits=[`banana`,`orange`,`apple`,`pear`,`grape`,`apple`];

第一种方式,使用Array.from()

let deduplicationFruits=Array.from(new Set(fruits))

第二种方式,使用...扩展运算符(推荐)

let deduplicationFruits=[...new Set(fruits)]

判断数组中是否有给定的值

ES5的使用Array.prototype.indexOf()

let arr=[1,2,NaN]
if (arr.indexOf(1) !== -1) {
  // ...
}
// 注意
[NaN].indexOf(NaN) // -1

ES6的使用Array.prototype.includes()(推荐)

let arr=[1,2,NaN]
arr.includes(1) // true
[NaN].includes(NaN) // true

检测是否为数组

ES5的使用Array.isArray()(推荐),其他方法就不描述了

const arr = [];
const obj = {};
Array.isArray(arr);//true
Array.isArray(obj);//false

浅拷贝和深拷贝

浅拷贝

ES6使用...扩展运算符

注意: 此方法是浅拷贝

let arr1=[1,2,3,{a:123}];
let arr2=[...arr1] 
arr2[0]=5 // arr1[1,2,3,{a:123}] arr2[5,2,3,{a:123}];
arr2[3].a=456 // arr1[1,2,3,{a:456}] arr2[5,2,3,{a:456}];

深拷贝

使用JSON序列化,JSON.parse(JSON.stringify(arr))这种方法比较简单,能够满足一般的场景.

此方法不兼容对象的复杂属性,如set,get,Function等,只兼容JSON格式支持的数据类型.

对于正则表达式类型、函数类型等无法进行深拷贝,并且会直接丢失对应的值

let arr1=[1,2,3,{a:123}]
let arr2=JSON.parse(JSON.stringify(arr1))
查看原文

赞 0 收藏 0 评论 0

浅吟轻唱 发布了文章 · 2019-11-16

程序员提升效率值得学习的思维方式:任务分解(WBS)

原文链接: https://dsx2016.com/?p=683

微信公众号: 大师兄2016

一定要记住,提升效率的方法不是锻炼自己所谓的意志力和倡导执行力,以长时间鏖战任务为目标获得胜利,而是将一个庞大的复杂的或者仅仅看起来不可战胜的事物合理的拆解为一个个小事物,然后分而治之.

工作项目

工作项目

程序员经常会遇到以下问题:

  • 项目开发前评审,领导或负责人要求估算出开发时间
  • 节前上线,按照指定时间完成任务,酌情添加人手和资源

无论哪一种形式,都不容易按计划完成任务.

造成这一现象的原因有很多外在因素:

  • 估算少了,加班加点也干不完,一开始时间就限制了你的任务,越紧凑越混乱.
  • 估算多了,不仅让项目经理不愉快,也一般也不会给你足够的时间.
  • 不熟悉的任务,难以估算,开发到一半,发现实现不了和推倒返工都是一个大坑.

老板关心的是一个项目从开发到交付需要多长周期,以结果为导向,不关心过程.

你需要给出一个结果,但并不意味你的思维模型也是一样,我们应当从业务上估算.

将抽象的概念具现化,将笼统的目标分解化,将冗杂的任务流程化,最终估算出项目周期.

任务分解

模块化

任务分解,也叫目标分解.

就是把一个大的任务拆分成一个个具体的,清晰的小任务,各自独立,又互相关联.

通过解决这些小任务,最终完成被分解的大任务.

事实证明,大多数任务都可以被分解为更小的任务,将复杂的拆分为简单的.

大任务容易给人带来沉重的心理负担,还没有开始,就产生畏惧和颓废心理.

编写一个完整的应用程序很困难,但是写一段代码就简单的多,然而现实中要交付的就是完整的应用程序.

WBS

wbs

Work breakdown structure为工作结构分解.

我们将手头的项目按照一定的原则分解,如将项目分解为任务,再给任务分配时间,最终分发到各个负责人身上.

WBS可以完成的事物

  • 将项目分解为已知任务,模块化,流程化
  • 给任务设定具体时间和指定责任人
  • 对项目的成本和进度实现跟踪记录
  • 对每个子任务和最终目标进行确认

WBS是制定进度计划、资源整合、风险控制、成本预算和人力分配不可或缺的一部分。

如何分解

出书

分解并不难,难的是当我们遇到大的任务时通常是立即怯战或开干,不会主动意识到先去拆分.

假如要写一本书,那么要做的不是每天嚷嚷着我要写一本书,而是先分析书的构成.

书籍可以理解为多少文字构成,描述了哪些内容和信息,可这些大而虚泛,没有多少实际指标参考.

书籍为书名,封面,目录,序言,章节等组成,要想写一本书,先得构思一个主题,其次想一个书名,再编排一个目录,然后开始写章节内容,最终完成封面和书籍制作,出书.

即使你自己没有意识到需要分解任务,也仍然会受限于行动的时间线发展,也就是想要完成A,必须先完成B,以此类推.

当你试图把大任务分解为小任务时,你得先明白它是由什么构成.

如开发一个应用程序,它的构成为用户模块,商品模块,支付模块,订单模块,消息模块等等等.

用户模块又由注册模块,登录模块,权限模块等组成,注册模块又可以分为手机号注册,邮箱注册,用户名注册等模块.

把一个大的单元拆分为相近的小单元,小单元继续分解为更小的单元,直到任务分解的足够小,足够简单,足够到我们一眼就能估算时间和开发难度等.

有什么用

任务分解

1.估算时间会更加精准

估算一个完成的应用程序,可能是三周,也可能是三个月.

这样的时间摆动太大,不确定性越大,意味着项目的延期率和失败率越高.

但是通过估算一个个小模块,如登录模块用时多长,支付模块用时多长,最终可以获得一个更为精确的时间值.

这个估算时间仍然不会准,但是摆动周期可以从周变为天,前后三天的摆幅还是可以接受的.

2.任务难度分析更加明确

项目开发总会遇到不熟悉的业务场景,面对陌生的需求难免忐忑不安.

通过任务分解,可以拆分出熟悉的部分和陌生的部分,陌生的部分可以查找资料和通过学习来针对性的解决.

只要明确问题,总能找到解决办法,即便找不到,也至少明确问题出在哪里,可以考虑换一个方案等.

3.大局观,全局观,流程化

普通人只会拥有自己的视角,很少从管理者视角和对方视角看待问题,更别说从全局视角看待问题.

如果要做任务分解,必须要先从全局看待问题.了解任项目的构成,了解每一个任务之间的关联.

要掌握足够的信息,掌握足够的资源,了解每个责任人的能力和职责,懂得协作和取舍.

4.数据化,可视化,具现化

完成这个项目的时间成本,资源成本,人力成本都可以通过分解获得精确的分配和追踪.

有助于及时跟踪项目的进度,完成度和完成质量,便于及时改进和优化,有良好的反馈.

查看原文

赞 1 收藏 1 评论 0

浅吟轻唱 发布了文章 · 2019-11-16

vue计算属性computed和侦听器watch的使用场景

原文链接: https://dsx2016.com/?p=679
微信公众号: 大师兄2016

特点和区别

vuecomputed选项主要用于同步对数据的处理,而watch选项主要用于事件的派发,可异步.

这两者都能达到同样的效果,但是基于它们各自的特点,使用场景会有一些区分.

computed拥有缓存属性,只有当依赖的数据发生变化时,关联的数据才会变化,适用于计算或者格式化数据的场景.

watch监听数据,有关联但是没有依赖,只要某个数据发生变化,就可以处理一些数据或者派发事件并同步/异步执行.

vue

计算属性

抽象的概念不容易理解,用多了高频的场景自然就熟悉了,计算属性表现为同步处理数据.

金融领域的分期付款,P2P年化收益,带有计算性质的,都可以优先考虑computed.

不需要关注点击事件或者其他数据,只要将计算规则写在属性里,就能实时获取对应的数据.

借款分期

电商领域的购物车统计,一个数据依赖于一个或者多个数据.

当购物车数量和产品变化时,自动计算出价格*数量的总和.

如果有优惠券或者折扣,自动减去优惠和计算折扣金额即可,同上实时计算.

只要购买数量,购买价格,优惠券,折扣券等任意一个发生变化,总价都会自动跟踪变化.

购物车

侦听器

watch侦听器能做到的计算属性computed也能做到,什么时候适合用侦听器呢?

主要适用于与事件和交互有关的场景,数据变化为条件,适用于一个数据同时触发多个事物.

如当借款额度大于可借额度时,弹出toast提示,并将当前借款额度调整到最大额度.

可以看到,数据的变化为触发弹框提示,有且仅在一定金额条件下才触发,而不是实时触发.

借款额度

抽象概念

弹框提示等事件交互的,适用于watch,数据计算和字符处理的适用于computed

computer

一个姓输入框,一个名输入框,实时展示全名.

<div id="name">  {{fullName}}  </div>

<script>
    export default {  
        name: 'test',  
        data: {  
            firstName: 'da',  
            lastName: 'shixiong',  
        },  
        computed: {  
            fullName: function () {  
                return this.firstName + ' ' + this.lastName  
            }  
        }  
    }
</script>

依赖数据

watch

一个金额输入框,监听金额数值大小,达到条件时给出温馨提示

<div id="Amount">  
    <input v-model="Amount" /> 
</div>

<script>
    export default {  
        name: 'test',  
        data: {  
            Amount: 100,  
        },  
        watch: {  
            Amount: function (newVal,oldVal) {  
                if(newVal>5000) {
                    alert("最大额度可借5000元")
                    this.Amount=5000
                }
            }  
        }  
    }
</script>

侦听器

查看原文

赞 2 收藏 1 评论 0

浅吟轻唱 发布了文章 · 2019-11-14

css实现单行和多行文本超出省略显示省略号…

单行文本

记得添加宽度width来限定范围

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

效果如图:

Snipaste_2019-11-13_21-12-29

多行文本

注意-webkit的兼容性,主要适配webkit内核浏览器和移动端

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

效果如图:

Snipaste_2019-11-13_21-15-14

数字和英文

单行和多行文本很容易实现超出省略号,但是也要留心中英文和数字.

上述两种中文情况下没有问题,但是遇上超长数字和英文就会失效.

数字如图:

Snipaste_2019-11-13_21-15-58

英文如图:

Snipaste_2019-11-13_21-17-11

解决方式:

word-wrap: break-word;

数字效果:

Snipaste_2019-11-13_21-17-11

英文效果:

Snipaste_2019-11-13_21-17-45

单词长短

正常的场景不会出现上述英文,而是英语长句标题.

单词会因为太长而自动换行到下一行,即使上部分留白很大一部分

效果如图:

Snipaste_2019-11-13_21-28-09

只有一个单词撑满一整行的时候才会按字母断句,显然这种情况不多.

效果如图:

Snipaste_2019-11-13_21-34-28

查看原文

赞 2 收藏 2 评论 0

浅吟轻唱 发布了文章 · 2019-11-12

微信公众号H5之微信分享常见错误和问题

url转码

官方文档描述: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)😕/'部分,以及'?'后面的GET参数部分,但不包括'#'hash后面的部分

即获取url完成地址的方法为

let url = window.location.href.split('#')[0];

如果链接带有中文字符或者特殊符号,前端需要使用encodeURIComponent编码,同时后端需要配合解码

let url = encodeURIComponent(window.location.href.split('#')[0]);

config注入

官网文档描述: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#4

同一个url仅需调用一次,对于变化urlSPAweb app可在每次url变化时进行调用,

注意,每次使用jssdk方法前都要先注入配置信息,并且,每使用一次,就要注入config一次.

vue里,可以写在每次路由变化时

router.beforeEach((to, from, next) => {
    // 获取权限验证配置(签名) 后端返回 getConfig,  注意返回字段的大小写!
    let res
    // 注入配置信息
    wx.config({
      debug: false, // 调试开关
      appId: res.appId, // 必填,公众号的唯一标识
      timestamp:res.timestamp , // 必填,生成签名的时间戳
      nonceStr: res.nonceStr, // 必填,生成签名的随机串
      signature: res.signature,// 必填,签名
      jsApiList: ["updateAppMessageShareData","updateTimelineShareData"] // 必填,需要使用的JS接口列表
    });
    wx.ready(() => {
      // doSoming
    });
})

安全域名

一定要再三确认安全域名等微信公众号配置信息,如分享链接link字段

很多时候的错误并不是前端方法或者sdk等问题,而是后台有没有设置正确的安全域名和白名单等.

 wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })

常见错误

参考微信官网文档-附录5

地址: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

在开发过程遇到

  • invalid signature
  • the permission value is offline verifying
  • permission denied

先参考文档,排除基本因素,还是不行,再查找搜索引擎的答案.

查看原文

赞 1 收藏 1 评论 0

认证与成就

  • 获得 33 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-02-27
个人主页被 1.2k 人浏览