JSSDK
- 微信使用方法
wx.config
时需要输入appid, 否则会直接抛出config:fail而不会有具体的错误提示。如果你的应用的appid来源比较复杂的话有必要检查一下appid - 微信在分享时如果
link
参数非法, 则会出现debug内容一切 正常 但是无法正常进行分享内容自定义。
wx.config
时需要输入appid, 否则会直接抛出config:fail而不会有具体的错误提示。如果你的应用的appid来源比较复杂的话有必要检查一下appidlink
参数非法, 则会出现debug内容一切 正常 但是无法正常进行分享内容自定义。使用linode服务器第二天就经历一次网络攻击,对方通过暴力破解root账号成功攻陷了我密码强度相对较低的服务器并通过我的服务器向外发起DDOS攻击导致在2小时间流失上行流量500G。造成了相当的损失
1 |
lastb
命令查询试图通过SSH访问服务器密码失败的记录。可以查询到有来自印度,韩国与一个不知名国家的ip的重复尝试请求,由于访问次数多、频率高,可以看出是通过脚本来实现暴力破解的行为
1 |
last
查询登录记录,在登录记录中查看到在事发时间没有任何登录请求。可能原因有二:
同时可以通过查看/var/log/secure
日志文件查询用户登录记录
https://www.linode.com/docs/security/securing-your-server/
https://www.cnblogs.com/alimac/p/5848372.html
1 |
|
700
.ssh600
authorized_keysflask
是一个轻量级的web框架。
混合半透明图片与半透明图片时会出现中空透明项目的问题
im
与 layer
为两张半透明图,如下图所示:
im(100x100)
layer(100x100)
执行:
1 | im.paste(layer, mask=layer) |
返回
会发现里面有透明像素,而不是我们想要的layer
叠加到im
上的效果
这是因为layer本身拥有一个渐变的alpha通道,通过mask
指定的alpha通道蒙版会在im
抠出一个渐变的圆形。然后再把拥有渐变效果的layer
叠加到im
上。
这就相当于在两个地方处理了两次透明处理。解决方法很简单,就是在粘贴layer
的时候丢弃掉它的alpha通道即可
返回
本文主要是经过部分调研,几种技术栈的初步调研与入门使用。以及部分网络资料的整理下得出的带有一部分主观判断的结论,并因互联网发展迅速的关系可能会有一定的时效性,因此在阅读本文的时候请读者酌情根据当前情况进行自己的思考与结论。
apicloud是国内一家闭源的html5移动端app解决方案提供商。用纯html的方式生成页面并通过原生注入jsbridge来与js进行交互。处理原生事件与页面切换。对于开发人员来说,是纯html+一个api事件。无需接触到任何底层,并如果有特殊需求可以自行开发原生应用模块来进行拓展。
因为闭源的关系,国内社区并不是很火。因此名气不是很大。
类似产品有AppCan、Dcloud、WeX5
首先是一个对比表来区别几种技术栈。
技术特点 | Native | ReactNative | Weex | Apicloud |
---|---|---|---|---|
学习成本 | 高 | 中 | 中 | 低 |
开发成本 | 高 | 中 | 低 | 低 |
调试难度 | 难 | 难 | 简单 | 中 |
控制台输出 | 支持 | 支持 | 支持 | 不支持 |
断点调试 | 支持 | 支持 | 支持 | 不支持 |
开发工具 | 官方提供IDE | 官方提供终端 | 官方提供终端 | 官方提供IDE |
模拟器/真机 | 必须 | 必须 | 非必须 | 必须 |
开发硬件需求(ios) | Mac | Mac | 无 | 无 |
应用硬件需求(ios) | All | Android 4.1 (API 16), iOS 8.0+ | Android 4.1 (API 16), iOS 8.0+ and WebKit 534.30+ | (未找到) |
可拓展性 | 高 | 中 | 中 | 低 |
优化难度 | 低 | 中 | 中 | 高 |
渲染流畅 | 高 | 高 | 高 | 中 |
渲染方式 | 原生图形库 | Virtual DOM | Virtual DOM | Webview |
布局方式 | XML | React | Vue | Html |
样式写法 | 属性 | 基于css的对象 | 阉割版css | 原生css |
代码结构 | 基于类 | 基于类 | 基于类 | 基于Page |
代码架构 | MVC | MVVM | MVVM | 无 |
技术栈 | JAVA+Android SDK; OC/Swift + cocoa |
React+ReactNative | Vue+Weex | Html+Apicloud api |
社区活跃度 | 活跃 | 活跃 | 一般 | 不活跃 |
开源闭源 | 开源(安卓,核心代码闭源); 闭源(ios) |
开源 | 开源 | 闭源 |
开源协议 | Apache(安卓) | BSD | Apache | / |
支持公司 | 谷歌苹果 | 阿里巴巴 | 活了3年的小公司 | |
坑量 | 少 | 多 | 多 | 少 |
遇坑概率 | 小 | 大 | 大 | 小 |
专业著作 | 《Android从入门到翻墙》; 《IOS从买Mac到装Windows》 |
《ReactNative从入坑到弃坑》 | 《Weex从信任到骂KPI》 | 无 |
以上大概是我个人总结出来的各个技术栈的区别。
为什么要在这里提一下KPI呢。就不得不说一说阿里传统。阿里的工资水平是基于 关键绩效指标 来进行升迁评估。因此为了个人、小组的工资待遇,必须要给上级做出点成绩来。也就是说要考虑到阿里的项目是不是基于这个原则来开源的项目。
(PS: 据网络流传阿里内部自己都不用weex)
这就是为什么业内普遍对weex很冷淡,而weex本身也没有花太多力气去推广。
为什么说是技术选择呢?因为技术不是产品,技术是一种创新的态度。产品,要求的是稳,快。而技术,要的是新。如果是考虑技术的话。我会选择ReactNative 或者 Weex。这两者都是基于现代前端的MVVM架构诞生的以HTML技术编写原生应用的产品。它们不是用的手机端的html解释器与渲染引擎,而是以标签与嵌套描述原生组件的技术。因此它们的渲染效率可以直追原生应用。
但是,它们尚不是一个很成熟的技术,不像原生技术有多年沉淀,不像html有厚重的历史。它们作为前端最前沿的技术(应当还要算上NativeScript
),它们还比较年轻,换种说法就是坑比较多。在网上找找,大部分文章都是ReactNative踩坑大全、Weex踩过的坑。不可否认它们能够做出比较成熟,渲染效率也不错的APP应用。但是如果是作为一个产品的话,我们不得不计算上使用这个技术所需要花费的时间成本。
如果只是为了实现一个产品的话。那么我推荐使用Apicloud
等以html渲染方式的技术。其内核是cordova
,前身是phonegap
,也是前段跨平台编写原生应用的老前辈了。技术也是已经达到了一个相对成熟的地步。因为野心不大,所以坑少。牺牲一部分不明显的渲染效率来换取稳定且成熟的实现方式,我认为是一种很明智的选择。举个最简单例子。一个页面,原生渲染需要消耗10ms,而cordova需要消耗50ms。其中渲染效率相差整整5倍,然而实际上用户并不能感受到这之间明显的差别。当然如果是需要比较复杂的动画效果的话,这个问题可能会被放大。(人眼辨别连续运动的物体只需要每秒24帧,但是却可以很明显的感觉到每秒60帧与每秒30帧的区别)
其问题还在于,对于喜欢折腾的技术人员来说,使用旧技术去做产品是一件很无趣的事情。如果是我自己的项目,我绝对不会去使用该类技术。因为真的很无聊。
代码风格很重要,因为很明显的可以影响程序员的编写效率。一个好的框架可以极大程度上改变工作的进度。
这里截取一部分代码,来感受下各个技术栈之间的差异。
React: F8App
1 | var React = require('React'); |
React 应用是基于组件(或者说类),其特点是不直接接触html代码,而是返回一个虚拟dom,根据虚拟dom来修改前端显示。其所有的组件(包括根容器)都是基于React.Component
这个类进行实现的,开发者要做的都是复写他的方法(主要是render
方法)
Weex: yanxuan-weex-demo
1 | <template> |
Weex2.x 是基于Vue作为前端驱动。一个vue文件是由template
, script
, style
三个标签组成的。相比React
更加趋近与网页端的写法。最后返回给解释器一个大对象,来对dom进行操作。当然我个人是不喜欢这种返回一个大对象的方式的。曾经也有一个类似操作一个大对象的前端工具叫grunt
,然后被gulp
取代了。。。
Apicloud: Answer
1 |
|
而Apicloud
这种技术就是基于html实现的,而每个html对应一个网页对应一个窗口。和普通的网页编写非常类似。这也就是为什么该项技术成熟的原因。因为完全就是玩个的编写方式。当然区别就是提供了一个可以供js调用的原生服务的接口。
具体选择哪项技术,要根据自己的实际需求来决定。任何脱离实际需求的选择都是耍流氓。
但是,如果决定选择ReactNative或者Weex这样注定是未来趋势的新技术的话。就必须做好不断踩坑的打算,毕竟我们需要给予这些技术以发展的时间。当然,reactjs与vue已经是相对成熟的技术了,如果是为了学习的话。顺便学习一门新的技术也是一个不错的决定。
npm adduser
出现错误在确定用户名密码无误的情况下出现如下错误:
1 | Username: moonrailgun |
如果你在全局设定过 淘宝镜像,那么你有可能是 淘宝镜像 的受害者。
解决方案
删除在个人用户文件夹目录下的.npmrc
文件即可。
如window
则是在C:\Users\username
文件夹下
npm install
时不安装devDependencies需要的包如果发生这种情况那么你有可能是因为升级到了npm@5
。解决方案要么降级npm,要么进行一下npm配置。因为npm@5
以后默认为生产环境。尝试输入:npm config set -g production false
来解决这个问题
除了在webpack、babel等工具定义绝对路径的map以外,package.json文件也能提供类似的子包管理的功能。详见文章:How to Use Absolute Paths in React Native
需要检查一下这两个对象是否来自于不同的包。这个问题很难被发现,因为没有好的办法去检查一个对象的来源。需要人肉检查。这是node这种树形结构的包管理所必然会遇到的一个问题(即你安装的A包与B包依赖的A包可能是两个同名但不同版本的依赖)。
在window下可以用管理员权限的终端安装npm install --global windows-build-tools
,该模块会一键帮你安装大部分的编译环境。更多细节可以查看Github
在使用Blender为角色做衣服,特别是贴身衣物的时候,会出现这样的一个问题:权重不好刷,没法完全的和人物基础模型保持一致。为了解决这个问题,blender给我们提供了一个非常好用的工具:权重传递。
权重传递需要几个前提:
首先确保两个模型都绑定在同一个骨骼上(为了防止出现错误与方便测试),然后先选中身体模型,再选中衣服模型,衣服模型切换到权重模式以保证T栏出现权重工具。
点击权重工具,即可完成传递权重的操作。按下F6
可以对传递权重进行一些细微的修改上的配置。一般默认即可。
那么现在就可以开始随便动动骨骼测试一下结果啦。
为什么要配置虚拟主机?
/conf/httpd.conf
,将Include conf/extra/httpd-vhosts.conf
这行启用。即引入httpd-vhosts.conf
配置文件。/conf/extra/httpd-vhosts.conf
配置文件。可以看到已经提供了两个demo如下:1 | <VirtualHost *:80> |
DocumentRoot
,ServerName
两个字段。分别代表了项目路径
与服务器名
。这里需要注意服务器名就是完整的URL路径如test.example.com
这样的2级域名或者三级域名。如果有特殊的需求也可以写作顶级域名。这个字段的作用是把监听端口的请求网址为服务名的请求指向对应的虚拟主机项目路径。如果该服务器配置的顶级域名已经被DNS服务器解析完毕,则可以直接在浏览器中输入ServerName
访问。如果该服务器域名未被解析,可以通过修改HOSTS
方法强制指向服务器来访问
在添加虚拟主机以后,可能会出现原始项目路径不可用的情况。如果想保留原始访问地址可以引入别名模块。
在/conf/httd.conf
中打开LoadModule vhost_alias_module modules/mod_vhost_alias.so
这项来载入模块。
gulp是一款非常好用的前端工具,自从用了gulp以后我马上就抛弃了grunt投入的gulp的怀抱。
比起grunt的配置型,我更加喜欢gulp的函数型。通过编写各种各样的gulp任务函数来配置一系列任务来完成各种各样的需求。
总得来说,就很爽
gulp-sourcemaps
gulp-sass
gulp-clean
gulp-rev
gulp-fingerprint
gulp-plumber
gulp-compass
gulp.start()
//执行任务gulp.task()
//注册任务gulp.watch()
//监听文件gulp.src()
//获取匹配文件
在最近的项目中顺便学习了一下React
.而React
推荐使用ES6
所以也顺便学习了一下ES6
.然后现有浏览器不能直接支持ES6
的语法因此需要第三方打包工具.这里学习使用了Webpack
.然而React
本身大小就有1M+.每次Webpack
进行打包操作的时候总是会显得过于臃肿.消费时间近10s.因此写下本篇文章来记录自己的打包优化之路
对于React
这类第三方库而言.我们是不需要多次进行打包的因为我们本身不会对其源码进行操作修改.因此多次打包同一个包是一件多余的事情.因此我们要告诉Webpack
我们不需要打包这个包.而只需要用手动的方式来直接引入预编译好的js版本即可.
webpack.config.js
中添加externals
字段.如以下写法:1 | module.exports = { |
npm uninstall --save react react-dom
)如果打包时启用了devtool, 请在生产环境下关闭或打到独立的sourcemap文件中。可以大大减少打包后的文件体积
dll是一种非常棒的优化手段。它直接以比较粗暴的方式将一些常用的,不修改的第三方库打包到独立的文件,使日常开发中不会去编译他。这种方式非常类似于用CDN引用第三方库不过可以顺便对其进行一些特殊的处理。
首先创建一个 webpack.dll.config.js
文件
1 | const path = require('path'); |
独立编译
1 | $ webpack --config webpack.dll.config.js |
生成一个 manifest.json
和 一个 dll_vendor.js
文件
我们在我们正常的webpack.config.js
文件中引用他
1 | const path = require('path'); |
然后在HTML模板中手动增加该文件的引入即可
1 | <script src="/dll_vendor.js"></script> |
你也可以通过dllConfig
的name属性来增加hash来实现更好的更新
学习团队使用需要先学习如何个人使用git来管理自己的项目,如何使用git来管理自己的独立项目可以查看我之前的文章
个人使用git方法简明教程
本篇文章使用git bash作为说明工具。是为了让读者能够更好的了解git的原理(作为程序员来说了解原理比仅仅知道如何使用可能更加简单入门)。对于git原理方便以后我会专门开一篇文章介绍更加深入的内容这里不做累述
初次使用
1 | #已有在远程仓库有项目 |
平时代码
1 | #开始写项目前,拉取远程git仓库代码保证不会出现大的错误 |
简单的说流程就是pull —> add —> commit —> push
特殊远程
我们在pull和push的时候可以通过在后面添加远程仓库地址 分支名
的方式管理pull和push的来源。默认的远程仓库名为origin
分支管理
首先了解几个常用命令:
git branch
查看分支,带*
号的是当前分支git branch [分支名]
创建一个分支git branch -d [分支名]
删除一个分支git checkout [文件名或文件夹路径]
检出本地库中最新的文件(一般用于撤销文件的修改)git checkout [分支名]
切换到某个分支git checkout -b [分支名]
创建并切换分支git merge [分支名]
将该分支合并到当前分支操作流程:创建分支 —> 进行改动 —> 完成改动 —> 合并到主分支 —> 如有冲突手动处理冲突 —> 删除开发分支
example:
1 | #创建分支并切换到该分支 |
暂存工作
很多时候会遇见这样一个问题:我现在在一个独立的分支工作。而另一个分支出现了一个bug需要的紧急修改并提交,而我手头的工作还没完成一阶段内容(即无法提交一个新的commit),那么我们要如何临时保存自己的进度去切换到出现问题的分支呢?git给我们提供了一个非常实用的工具:git stash
用法很简单,简单使用只要记住两个命令即可:
git stash
暂存当前工作git statsh pop
还原最近一次的暂存工作git stash list
方法查看git栈中有几个工作节点不建议在git栈中保存多个节点容易导致混乱
知道以上几点即可简单方便的使用git工具进行团队开发了。
在个人版已经推荐过了github的git客户端
,但是在团队协作,特别是多人单分支团队协作中优势很不明显,无法很直观的看见各个协作者的提交情况。这里推荐另一款git图形化界面客户端: