CallMeSoul

< 小程序开发-使用editor组件替换第三方富文本组件 >

小程序富文本问题因为小程序用的不是html标签，，所以市面上的富文本编辑器都不适用，自己改起来也麻烦，大多都是小程序嵌入webview方式解决的富文本编辑框来实现，局限比较大。还有个问题就是渲染富文本内容也就是html，前期哟很多第三方组件解决了这个问题，例如：htmlparse 等，但大多这些第三方组件也只是解决富文本的的渲染问题，而且性能也较大问题，编辑富文本一直是一个硬伤。最近期小程序推出了editor组件，就能基本解决以上问题，代替市面上第三方的关于小程序富文本插件。本文就主要讲解下怎么用editor组件，封装一个自定义的富文本组件，既可以渲染html富文本，又可以变成富文本编辑框。 editor关于editor组件的使用可以直接看官方的文档 editor组件自定义富文本组件其实还是比较简单的，editor组件文档里有示例代码，我们把示例带啊跑起来，就是一个富文本编辑框了：然后我们主要就新建一个组定义组件，把示例带啊复制过去，把编辑框内容(html)，是否只读（read-only），placeholder（空提示）作为参数传入即可。 read-only ture 时即为渲染html模式，把编辑相关的隐藏即可。 false 即为编辑框，显示编辑框相关内容，大家自行控制即可需要注意的是在组件内获取editor wxml时要加.in(this)表示是组件内的wxml wx.createSelectorQuery().in(this) .select('#editor') .context(function(res) { }) .exec() 剩下的都比较简单了，我直接贴代码,大家可以根据自己需求diy <config> { "component": true } </config> <template> <view class="wrapper {{readOnly?'readOnly':''}}"> <view class="toolbar" bindtap="format" wx:if="{{!readOnly}}">  </view> <editor id="editor" class="readOnly?'readOnly-container':'ql-container'" placeholder="{{placeholder}}" showImgSize showImgToolbar showImgResize bindstatuschange="onStatusChange" read-only="{{readOnly}}" bindready="onEditorReady" ></editor>  </view> </template> <script> Component({ properties: { readOnly: { type: Boolean, value: false }, placeholder:{ type: String, value: '开始输入...' }, html:{ type: String, value: '' } }, data: { formats: {}, bottom: 0, _focus: false, editorCtx:'' }, observers: { 'html': function (html) { // 在 numberA 或者 numberB 被设置时，执行这个函数 if(this.editorCtx){ this.editorCtx.setContents({ html: html }) } } }, attached: function() {}, ready: function() {}, methods: { onEditorReady() { const that = this wx.createSelectorQuery().in(this) .select('#editor') .context(function(res) { that.editorCtx = res.context that.editorCtx.setContents({ html: that.data.html }) }) .exec() }, undo() { this.editorCtx.undo() }, redo() { this.editorCtx.redo() }, format(e) { let { name, value } = e.target.dataset if (!name) return // console.log('format', name, value) this.editorCtx.format(name, value) }, onStatusChange(e) { const formats = e.detail this.setData({ formats }) }, insertDivider() { this.editorCtx.insertDivider({ success: function() { console.log('insert divider success') }, }) }, clear() { this.editorCtx.clear({ success: function(res) { console.log('clear success') }, }) }, removeFormat() { this.editorCtx.removeFormat() }, insertDate() { const date = new Date() const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}` this.editorCtx.insertText({ text: formatDate, }) }, insertImage() { const that = this wx.chooseImage({ count: 1, success: function() { that.editorCtx.insertImage({ src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543767268337&di=5a3bbfaeb30149b2afd33a3c7aaa4ead&imgtype=0&src=http%3A%2F%2Fimg02.tooopen.com%2Fimages%2F20151031%2Ftooopen_sy_147004931368.jpg', data: { id: 'abcd', role: 'god', }, success: function() { console.log('insert image success') }, }) }, }) }, }, }) </script> <style lang="scss" src="./rich-text.scss"></style> 大家赶紧把第三方的富文本组件换过来吧~

10月 9, 2019

< 产品经理使用git发布/部署Axure原型 >

前言工作了几年了，也和不少产品打过交道发现了和产品交流上的一些问题，就是axure原型分享。产品做完原型就要发给老板，设计师，开发看，每人发一份。然后后面原型有修改或添加之类的，又要重新每人发一份，别人又要经常接受一份。看似很正常的传统工作流程，但效率有点低，而且接受的人，接受了多个版本以后会经常弄混乱，没有整理的人还要每次去找产品经理发的原型放在了哪里？哪个才是最新的版本。下面就介绍下git来解决以上问题。 Axureaxure是一原型开发工具，做产品都都应该很熟悉。其实前言说到的问题，一些新的做原型产品其实很好解决了，例如墨刀之类的，做完只需要发个预览链接到群里就行了，然后每次更新了，预览的链接也会跟着更新。但墨刀是收费，而且功能也相对Axure有点限制，axure的生态更完善，比如UI框架都有开源自己的Axure组件，所以大多产品还是比较喜欢Axure做原型多。 Gitgit 是一版本控制系统，一般用来管理开发代码居多，开发人员必会的了，产品经理可能少接触写。 windows 安装：https://www.cnblogs.com/wj-1314/p/7993819.html mac 安装：https://git-scm.com/book/zh/v2/%E8%B5%B7%E6%AD%A5-%E5%AE%89%E8%A3%85-Git 安装完打开命令行初始化 windows : win键 + R键 –> 输入cmd 回车 git config --global user.name "你的名字" git config --global user.email "你的邮箱"Gitee,Github可以理解为使用git的文件托管平台这里推荐gitee，国内快。网址：https://gitee.com/ 先去注册个账号，免费的放心。开始使用gitee 部署 axure项目 github等其他托管平台相似登陆后创建个仓库创建一个index.html文件开始仓库pages服务点启动需要等一会时间部署完后就可以访问下地址 https://你的用户名.gitee.io 其实就是我们刚创建的index.html内容把gitee项目拉下来复制gitee项目地址打开你要放置项目的目录右键，右键打开命令行 windows用户可以右键选择Git Bash here 输入 git clone 刚复制的项目地址完成后就会多个你的项目名的文件夹设置 Axure 项目导出到本地的 gitee 项目文件夹地址打来Axure, 选择发布 -> 生成html 然后输出目标文件夹我们就选刚创建的gitte本地文件夹，然后考虑我我们后面会有多个项目，于是乎我们就在里面新建一个文件夹去当前项目，下次有新项目了就只需在里面再创建个心文件夹放就可以了弄完此时就可以看到可以访问打方才输出的html axure原型了但此时只是本地或局域网可以问题，你发给别人，别人看不到的。而且要一直开着机。下面我们就要把gitee本地文件夹中里面我们刚才新加的内容同步上gitee仓库里，这样就可以通过上面的域名访问了。把本地的gitee文件夹同步到gittee仓库回到本地gitee文件夹的命令行输入 git add *意思就是添加所有文件再输入 git commit -m 备注信息就是提交修改的意思，后面的备注信息是备注你每次提交修改了什么内容一个提示（自定义）最后输入 git push意思就是推送到线上对应仓库，第一次推送时会需要填写gitee的账号密码，因为要知道那你仓库是属于你的才可以推送，不然每个人都可以往你仓库推送那就麻烦了。然后回到gittee仓库的pages服务页面更新下就可以访问了然后就可以试下访问线上的域名了。还记得域名么？ https://你的用户名.gitee.io/ 你直接访问这个是没变的，因为我们的文件放在了一个目录下了。所有要加上目录名，然后Axure的导航页是start.html 于是你要访问的域名就是 https://你的用户名.gitee.io/项目文件夹名/start.html 最后大功告成，可以把url发给各位老板，开发者，设计师了。

9月 10, 2019

< 小程序开发-PC网页端扫小程序码登陆解决方案 >

最近做了一个小程序我爱阅读,是一款针对小学生阅读习惯培养的一个小程序工具，有兴趣的可以了解下。小程序在学校反映不错，于是有了老师提出需要PC网页端的需求。因为老师平时办公一般在电脑上，在电脑上给学生布置阅读作业，会更方便得多，而移动小程序端对于老师来说更像一个辅助工具，平时用不到电脑时可以通过小程序操作。而且学生的阅读数据再网页展示也方便老师在课堂上给学生投影展示。于是乎就有了网页端的需求。登陆这是要做网页端最开始要解决的问题。一开始有一下解决方案初始化账号密码，网页通过账号密码登陆微信开发平台，公众号和小程序绑定，通过公众平台的网页二维码授权登陆。但以上两种方法都不能很好地解决需求：第一种，初始化账号密码，秘密好办可以统一初始密码，但用什么作为账号呢？微信用户名，openid不可能，用户手机又不是全都用。就算解决了初始化账号密码问题，安全度也不高。第二种，有个缺陷就是用户必须关注了绑定的公众号后再进入小程序，才可以实现。我们现在主打的是小程序，公众号只是运行的一个中间平台。而且很多新用户是通过小程序分享的链接进入，完全没法先去关注公众号。所以这种方法也不适合。转转游戏以上两种方法行不通，于是网上找各种方法。最终找到了转转游戏，就是通过扫描小程序码登陆的，体验了一下，大概也了解了方法。扫小程序码登陆逻辑首先在小程序添加一个网页登陆的页面，页面接收一个登陆id（loginId）网页端展示小程序网页登陆页的小程序码，附带登陆id（loginId）用户通过扫描网页上的小程序码，手机微信进入相应小程序的网页登陆页，设置确认登陆和取消登陆按钮，同时网页端扫面后应开启socket或者定时去请求后台，当前登陆id(loginId)的使用状态。如果loginId使用后且确认登陆，应一起返回用户的token，网页就可以使用该token去当前单用户去请求接口了如果用户取消登陆或超时则网页提示相应信息，且重新获取新的小程序码。总结这样可以完美地使用小程序当前用户信息去登陆网页端，用户不用输入账号密码，也不用计账号密码，直接用微信扫一扫就可以登陆，真实方便简洁。完美~~

9月 10, 2019

< 小程序静态资源无缝转移到腾讯云COS 使用wepy mpvue 等webpack打包的小程序项目 >

今天介绍的工具是wecos 原生小程序原生的小程序直接根据wecos的文章操作即可，wecos提供了上传本地资源文件到cos、替换小程序的引用本地路径为上传路径等。这里不作详细说明，主要介绍webpack打包的小程序项目。因为原生写起来很不方便。 webpack小程序打包项目最好是开发完再来进行这一步，前期专心开发。我前期开发时，引用静态资源用的是相对路径，用的绝对路径应该也可以的。项目开发完后 webpack设置打包后的cdn地址, webpack rules选项： { test: /\.(png|jpg|jpeg|gif|svg)$/, use: { loader: 'file-loader', options: { name: '/[path][name].[ext]', publicPath: function (file) { if(isProduction){//判断是否生产环境，自己判断咯。 if(file.indexOf('tabbar')>=0){//如果有tabbar的，tabbar用一个tabbar的文件夹装起来，因为tabbar图片只支持本地。 return file; } else{ return 'https://xxx-1234567.cos.ap-guangzhou.myqcloud.com/'+file;//你的腾讯云cos bucket的域名。 } }else{ return file; } } } }, }, 安装wecos npm install -g wecos 跟目录创建wecos.config.json文件填写wecos.config.json 配置 { "appDir": "./dist/assets", "cos": { "secret_id": "xxxxx", "secret_key": "xxxxx", "bucket": "xxx-1234567",//bucker-appid "region": "ap-guangzhou", //创建 bucket 时选择的地域简称 "folder": "/assets" //资源存放在 bucket 的哪个目录下 }, "uploadFileSuffix": [".jpg",".png",".gif",".webp",".svg"], "uploadFileBlackList": [//不上传的图片，填tabbar的目录 "./dist/assets/images/tabbar", ] } 在根目录运行wecos即可。总结为什么不用webpack的 publicPath 而用file-loader的publicPath ？因为webpack的 publicPath只支持字符串，一但改成线上域名，所有静态资源的前缀都会变成cdn域名。而小城的tabbar并不支持网络图片，base64也不支持，只支持本地图片。这时我们就用file-loader的publicPath ，支持函数且返回文件名，可以写条件去过滤掉tabbar的文件。使tabbar文件使用本地的，而其他使用线上cdn域名的文件。为什么要用wecos？当然你也可以不用自己，本地打包后自己手动上传到cos后台。然后删除了本地的图片文件（除了tabbar的图片）。然后开发者工具再上传代码。你会发现这步骤很累赘。使用wecos后，我们打包后只需要跑一下cos就可以自动上传本地的上cdn，且自动删除本地的（tabbar图片除外）。是不是方便多了？赶紧在你项目用上把！

2月 10, 2019

< 石墨文档 Vs 腾讯文档 >

最近腾讯大力再推一个新产品—腾讯文档。朋友圈也纷纷转发感觉是一个不错的产品。但其实早在四年前左右吧，大概忘记了，就有了石墨文档了。没用过石墨文档的，直接用腾讯文档可能觉得腾讯文档很6，下面就来对比两款产品。大家都主打的功能在线文档在线编辑，word，excel文档。即时保存，不用手动保存，即使电脑死机奔溃，记录都在。大家应该都试过谢了一篇很长的文章就突然死机等原因就需要重写了吧。在这两款产品都可以很好的解决这问题。多人协助这也是我最开始用石墨文档的原因。我是做开发，经常有一些开发需求，或bug需要修复。产品就会把需要做的东西用word文档列好发给我。然后我做着做着发现有一些问题出现 · 不是我的问题 —我发文档给源问题人。 · 多人同时处理 —-需要分工，然后把问题的文档也得发他一份。 · 做完要给回人复验 — 又要把文档发给别人，因为我再文档做了标注哪些问题之类的。 · 最重要的是进度没有一个全局的把控。 — 一份文档多人再分工。进度需要查看多人的文档处理的和 · 等等等~~ 项目大，人越多就会有越多的问题出题在沟通成本上。但用了这两个产品后。多人同时编辑一个文档，有新的内容需求，直接加，所有都可以看到。不用再另外再给没人发一份新添加的需求文档这样。用石墨文档首页的介绍，很好地介绍了多人协作文档的强大！这里的动画是gif比较不顺畅。可以看石墨官网的原展示介绍(https://shimo.im/)[https://shimo.im/] 界面对比没用石墨文档的人可能没感觉，但用过石墨文档的人在用腾讯文档。就会感觉的怎么就一个翻本石墨文档呢？可能我想多了吧。但企鹅的抄袭却是不是盖的。腾讯文档word界面石墨文档word界面石墨word vs 腾讯word可以看书界面布局几乎差不多，但是可以看出石墨的设计更细致写，有一种沉浸式写作的感觉，毕竟上线一段时间了，有一定的优化。相对腾讯刚上线，页面相对比粗糙简单。可看到功能基本差不多腾讯文档word多了水印和翻译功能。试了下翻译功能好像挺不错。而石墨文档word功能会多了一个特殊格式的片段，如代码片段，引用片段等。不同的内容有不同的段落样式，可读性会高很多。 markdown功能是两个文档的缺陷。两个产品都支持一些很简单的写法不能很好的兼容markdown。还有以下几点：石墨文档有修改记录，也有手动保存的版本记录两种。而腾讯只有修改记录。石墨文档多个评论的功能。使文档变得可交互交流。石墨文档的每个小功能都有一个简单的视频操作介绍，点右下角的问号可找到石墨文档支持快捷键，也有快捷列表可以看，同样右下角问号多人协助的文档，石墨可看到每一个部分的的编写者，这个还是很强大的。石墨贴心的的免打扰，不过网页的消息一般会比较少。石墨 excel Vs 腾讯excel和word文档对比差不多。布局风格，功能都差不多。石墨多了些高级点的功能如：根据表格信息生产图表。也可以创建表单收集信息等。总结以上可以出，石墨是个很用心的产品，无论从设计还是功能的研发还是一些交互。而且石墨也有了一段时间的沉淀优化，所以石墨总体还是比腾讯文档更细致一些。感觉腾讯文档就如早其版本的石墨吧。但是后面也难说，腾讯有这么大的流量各种优势，后面会变怎样很难说。替石墨抓鸡了… 题外话有现场的比较完善的石墨文档腾讯为何还要自研发一款呢？其实原因的显而易见的。QQ脱离了日常沟通，变成了工作交流的主流功能，每天不知道都有多少工作文件在qq传来传去。再从qq到TIM的转变都可以看出qq在日常娱乐社交工具慢慢转向一个专注工作交流的工具。而在线文档这么核心的功能是不太可能接入第三家的，第一费用大。长期的这么多分享。第二资源外泄。其实我会更看好腾讯收购石墨文档，然后用石墨文档。这样就双赢了。以上只针对web端的简单评测。 ##你还在用word，excel？？？欧特曼啦！！ ##快来用用在线文档吧。 *不过一些非常私隐性，安全要求比较高的文档还是线下吧

9月 10, 2018

< 歧江吹风随便拍拍 >

拍照时间：2018-04-04 拍照设备手机（坚果Pro2）地点在歧江河边的末端，较兴中更安静，人会少点，没有市区人多的吵杂，更清静。

9月 10, 2018

< 使用**gitalk** 代替其他第三方评论插件 >

前言第三方评论插件已经死得差不多了，从一开始多说到后来的网易云跟帖，最后剩下了畅言。最近畅言为了活下去，也退出了广告，让用户体验更差了。本来用户体验就不咋地。可惜碍于找不到其他更好的代替者就只好将就一下了。知道今天找到gitalk，坚定不移地把畅言给换了。关于gitalkGitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。使用 GitHub 登录支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru] 支持个人或组织无干扰模式（设置 distractionFreeMode 为 true 开启）快捷键提交评论（cmd|ctrl + enter） Readme 在线示例使用在需要插入评论的地方给个占位<div id="gitalk-container"></div> 接着在占位下方引入插件 <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css"> <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>也可以js文件和css文件下载下来自己引入创建 GitHub Application，如果没有点击这里申请在自己的GitHub账号创建一个库来放评论，库名称填上一步的应用名称在博客的引用插件下方填写配置 var gitalk = new Gitalk({ clientID: '9f89xxxxxxde0f46', ///步骤3创建后得到的 clientSecret: '22fc21a22xxxxxxf599fd41746ff54f',///步骤3创建后得到的 repo: 'myblog_comment',///步骤4创建的库名 owner: 'callmesoul',//自己的GitHub用户名 admin: ['callmesoul'],//自己的GitHub用户名 id: '{{id}}', // 唯一标示，一般是文章id也可以是文章url distractionFreeMode: false // Facebook-like distraction free mode }) gitalk.render('gitalk-container') 以上完成后就可以上传上自己的博客了。上传完，第一次进入相应页面会出现一个初始化提示。根据操作登录自己的GitHub授权就可以了。值得一说的就一有评论就相当于项目有issue，gitthub就自动会有邮件提示。比畅言好多了，畅言你不登录它后台看都不知道有新的评论。以上就完成了，有什么问题不懂得可以在评论处提问。

6月 10, 2018

< 装机日志 >

前言只从从家里搬出来后，自己带着台小mac air。因为太小了，用惯了台式。这段是时间每天下班都很少开电脑，也就少做事了。最近有空想着不能这么闲下去，于是就像买回台台式回来干些事。首先自己逛了下组装机市场，感觉低端市场，较少了。好多品牌都主打高端组装机，水冷之类，动不动上万。个人虽也玩玩游戏，但也不是什么游戏骨灰级或发烧级玩家，一般配置也就玩得起我玩得游戏了。没必要那么高。而做稍微低端点市场的品牌都较杂，质量难保证。尤其淘宝，你可以搜下组装电脑，有些一整套才两千多，但跟着他的配置自己去京东捡，远超两千多好不。哪有那么好的事的，硬件的来源渠道和质量可想而知。而且个人对审美较高要求啊，想自己组装个小机箱，不想那么大，占位置，所有最后还是确定自己组装咯。预算价格：4000左右作用：玩玩lol啊，吃吃鸡啊（虽然我不吃鸡），开发，ps简单设计等。算是正常的娱乐+工作级别的机器吧。硬件机箱：乔思伯（JONSBO）UMX1-PLUS侧透版本银色 MINI-ITX机箱（支持ITX主板/全铝外（这机箱合适我这种，没多少预算又追求颜值的，价格刚刚好，能接受，颜值算同价格数一数二了。没颜值追求的可以在机箱省些钱。而且买普通大机箱，其他硬件随便挑）主板：华擎（ASRock）H310M-ITX/ac主板（Intel H310/LGA 1151）（如果选了小机箱，选主板一定要注意，只能选ITX小主板，不然就装不了翻车了。） CPU：英特尔（Intel）酷睿i3 8100/8350K CPU八代台式机电脑处理器盒装板U套装中文盒装（为了最求稳定，稳定至上，最后还是选了I系列，为什么选i3，不选i5，i7。有钱我能不选？）内存：金士顿(Kingston)骇客神条 Fury系列 DDR4 2400 8G 台式机内存*2（开发都是知道了，内存必须16g起步，不然很烦心的，开个PS，开个webStrom，开个chrome都去了不少了。）固态硬盘：金士顿(Kingston)A400系列 240G SATA3 固态硬盘（这年头没固态不行啊，120能装个系统和一些其他东西，但是我的一些开发工具啊，工作相关的工具都想放在固态上，保证速度，于是乎选个240，应该差不多了。）机械硬盘：希捷(SEAGATE)酷鱼系列 2TB 7200转64M SATA3 台式机机械硬盘(ST2000DM006)（建议1Tb起步啦，2Tb应该一般用户都足够用，不用愁了。而且机械硬盘便宜到烂了现在。）电源：安钛克(Antec)VP500台式机电脑主机机箱电源500W（40万好评VP系列/台系电容/静音风（小机箱对电源的大小也有要求，要看好咯。这电源好评多，品牌也行，也就这个。）键盘：雷柏（Rapoo） V500PRO 104键混光机械键盘游戏键盘吃鸡键盘背光键盘电脑键盘（较便宜的机械键盘了，有的话可以买更好的。不过也够用了。）鼠标：华擎（ASRock）ASR-M01 幻影之舞光电游戏鼠标电竞鼠标（这是是买华擎主板送的，还不错）散热器：乔思伯（JONSBO）CR-701七彩流光版 CPU散热器（多平台/5热管/下吹CPU散热器/12CM（买这个主要为了颜值啊，加点氛围，不然的话完全不用买，cpu自带散热风扇的了。一开始买回来只为了颜值，买回来后发现，乔思伯真的很不错，颜值做工用料设计都很用心很有保证，说是追求完美的厂家一点不过分，以后买东西乔思伯有的都可以考虑买乔思伯的。）显卡：显卡一开始没买的。因为集显先可以先用着，前期还是开发为主，后面买了条影驰的GTX 760 发现不兼容 win10 因为760最高支持dix11，而win10的dix是 12；后面换了条微星（MSI）GeForce GTX 1050 Ti GAMING X 4G 1290-1493MHZ 128BIT GDDR5 PCI-E 用760显卡的话总费用是4500左右，算在预算中，后面不兼容换了1050就5000多点，超了点，也还行。个人感觉整体配置旗鼓相当，都是统一等级的硬件，不会说那个硬件买贵了，浪费看了，用不了这么高。但要说唯一的话那就是显卡吧，但是显卡可以长期用，以后升级其他都不用升级显卡。有什么好建议，也可以留言，给其他人一些参考。装机京东就是快啊，全部京东送货，隔天就全到了，服务赞赞赞！下面就开始紧张的装机咯！拆机箱机箱做工设计都完美装电源 500w大电源，不怕不够啦。拆主版主版还行，小身板，麻雀虽小五脏俱全啊。拆CPU 八代I3，基本够用也稳定。把cpu装主版上这部最好小心点，毕竟cpu你懂的~ 那封盖是要拿掉的哦。装Cpu风扇自带的风扇没有，用了乔思伯的风扇，做工设计颜值都一流。把装好Cpu和风扇的主版装进机箱装好主版就连机箱线，电源线等，不懂的百度可以找到教程，跟着教程走没什么难度。原来这主版自带无限网卡，自带两天线，赞！连好机箱线跟电源线就可以开机了，这里用的是主版的集显。开机试试注意的是有些主版cpu要独立供电，我这款就是。能进到主版的bios就证明成功了。成功，就可以把剩下的机械和固态硬盘装上去了机械不用说了，有了固定座。固态硬盘是有些水绵圈，装上后再卡位向下推卡进去的，挺不错的设计。显卡最后装，因为比较大。装完就可以开机装系统了。结尾好了，装机到此结束了。好久没装机了。一开始卡在了cpu独立供电哪里。因为之前的都是主版供电给Cpu的啊，坑。折腾了很久，主版通电，风扇也转，就是进不去主版的bois。后来发现cpu附近有6口的电源位，后来插上就行了。感觉自己组装会更适合自己，配置啊，机箱啊颜值啊。也实惠。也可以增强自己的动手能力。好了，大家也去装机把。

5月 10, 2018

< 小程序开发之-使用GraphQl >

之前文章有介绍到graphql的好处，而且很大可能就是未来Restful api的代替者,不过以后的事谁也不好说啊。反正就是好的东西，我们就想折腾下用起来。最近自己写了小程序，想顺便学习graphql，实践。于事有了本篇教程 ApolloApollo是一整套的关于GraphQl的工具套件吧，各种后台语言java、php、nodej的都有，关于前端框架封装GraphQl，让GraphQl使用更简单，更优化的库类也都有。vue、react等。小程序但小程序不同传统的网页。小程序是无浏览器环境的，而且也没ajax用的是自己的api。很显然apollo这么好的社区出的这么好的工具在小程序上根本没法用啊。毕竟小程序比较小众，想用的话就只能自己折腾了。原理其实GraphQl请求跟Restfel api的请求一样，都是一个http请求。只是GraphQl的请求入口有且只有一个，一般是graphql服务端的入口，一般是/graphql 而且是post放，所有。所以GraphQl请求无非就是post方法的http://xxxx.com/graphql的请求后台再传这graphql的参数来使graphql服务端根据参数不同来执行不同的方法，从而实现不同的接口效果。搞清这原理就可以慢慢折腾了。开始var Fly=require("../lib/wx.js") //wx.js is your downloaded code var fly=new Fly(); //Create an instance of Fly import message from './message' import { create_client } from 'tiny-graphql-client' const client =create_client( async( body)=>{ const res_data = await fly.post("/graphql",body) const {data ,errors}=res_data; if(errors){ message.error(errors[0].message); throw errors; } return res_data.data; }) export default client; fly是一个兼容小程序的http组件，你可以使用原生的request来替换。 tiny-graphql-client 是一别人封装好的graphql工具类，详情：https://github.com/xialvjun/tiny-graphql-client graphql返回的字段，一定会有data，无论成功后失败。只是有错误失败时才会有errors字段。所以我们在全局处理graphql返回时先判断有没有errors字段的存在，有就是有错误。没有就是成功了。使用queryuser=await this.$parent.client.run(`query getUser{getUser{id nickName avatarUrl space nowSpace album}}`);mutationlet bucket=await this.$parent.client.run(`mutation createBucket($name:String!){createBucket(name:$name){id name createdAt}}`,this.album);使用前记得先引入上面封装好的client哦。好了，大家快来试试吧。

10月 10, 2017

< 小程序开发-路由拦截设计 >

首先说下小程序的简单运行：1.app onLaunch 2.如果有app onLaunch 的 path参数有值则跳到 path对应页面否则为app的json第一个路由 onLaunch 的path怎么来的？1.通过分享给朋友的接口传的path 暂时只发现这个 app onLaunch 里拦截路由？以后可得知小程序统一入口就是app的onLaunch，所以在onLaunch 拦截是最理想的。但是onLaunch里并没有提供拦截的接口或方法，当你在onLaunch有异步处理时，还没处理完，onLaunch就直接跳到了下一个页面了。例如：你想获得用户信息在进入页面。你在app onLaunch去请求用户信息，但onLaunch不会等你请求完再跳到页面。所以在app没办法实现。 app.json第一个路由里拦截！！！既然app里面实现不了只能退居求次在第一个页面处理了，因为当没有path（onLaunch(option)）也就是正常打开小程序都会进入第一个页面，我们可以在第一个页面统一处理好逻辑再选择去跳其他页面。分享的页面带path会直接跳到path页面不跳到第一个页面？其实很简单分享的时候分享页面的path填写第一个页面路由例如/pages/login,在把你当前页面的路由作为一个参数一起传过去： onShareAppMessage(res) { let fromPath='/pages/activity' return { title: 'xxxxx！', path: '/pages/login?fromPath='+fromPath, imageUrl:xxxxx, success: (res) => { xxxxxx } } }这样分享出去的页面就会跳到一个页面而且是带你分享的页面路径作为参数的。在第一个页面获得分享的路径做跳转就好，还可以加些逻辑之类方便多。上面的写法有个问题，如果分享的页面也要参数，分享的path就会有两个?? /pages/login?fromPath=/pages/activity?activityId=1 如果这样直接传过去第一个页面，activityId会被拦截掉，所以我们需要一个把问号转码的函数转码了再传过去，第一个页面获得页面后解码再跳转即可: onShareAppMessage(res) { let fromPath='/pages/activity?activityId=2' fromPath=encodeURIComponent(fromPath); return { title: xxxxxx！', path: '/pages/login?fromPath='+fromPath, imageUrl:xxxx, success: (res) => { xxxx } } }然后在第一个页面使用对应函数解码即可： onLoad(params){ if(params.fromPath){ let fromPath=decodeURIComponent(params.fromPath); ///do somethings... } }大概流程就这样。

10月 10, 2017