陈年往事徒流过 幡然却在一梦中 点击跳转新地址
作者:tl
《晶体管》游记
倘若程式过于“聪明”,那么世界会变成什么样呢?
成群结队的机器人饲养着人类?遇到天网派来的杀手?或是具现化到地球删除掉我们的城市河流?
由程式构成的世界云提城–其街道、天气、甚至天空的颜色都由程序控制。出厂的角色有音乐家、画家、设计师、赛车手、裁缝店老板、橄榄球运动员、官员议员还有程序管理者等,云提城是现代科技与艺术的完美结合,许多游客乘坐飞机和船只慕名来到此地。
一天,城市的管理员(罗伊斯 布莱克)发现了城市的另一端 观景城中有一把世界的钥匙–晶体管!他与好友数学天才(艾什肯德尔)发现通过晶体管可以轻松的创造或改变现有的世界 比如在观景城和金色长廊放置一座桥。好奇的他向晶体管内窥觑,仿佛看了另一个世界,他继续研究这个拥有魔力的东西。晶体管是一种单项通信的通道,所有人进来就不能回去。期间,他的另一位好友城市的管理者(格兰特肯德尔)得知此事,邀请他成立了一个组织–来不瑞德。
组织的愿景 是重新改造这个城市,但其他成员却被他们的leader欺骗了。格兰特只想要绝对的权利,他不断的杀死对城市产生影响的异端者,而其中的以外事件便是刺杀歌手红玲!我们的主人公红玲天生的嗓音对民众有着极强的感召力,在这座思想先进的城市中,不同的艺术家用不同的方式表达着不同的思潮,而无一例外的,这些创新行为给当权者带来了不稳定因素。受民众爱戴的歌手红玲在一次演出中 被格兰特用晶体管袭击 而男主人公挺身而出救了红玲。醒来的红玲失去了引以为豪的声音,而男主人公也被整合到晶体管内,迷茫的红玲跟随着晶体管内男主人公的声音踏上了,解开一切谜题,挑战来不瑞德的道路。
1.游戏中 晶体管收集了不同进入者的灵魂 根据不同灵魂生前的性格赋予了晶体管本身不同的函数 即不同的技能
2.不同的函数耗费的内存不同 最大耗费 4内存 最少为1 用户所有配置的函数内存消耗总和应小于等于用户的内存上限
3.函数 不同函数可以自由组合配置
作为主函数 (直接使用技能)
作为辅助函数 (增幅主函数技能)
作为全局函数(被动技能)
turn()函数 类似定时器 每隔一段时间 可以进行一次turn()函数操作进行行为规划 触发turn() 函数期间 用户可以移动 和 释放主动技能
4.限制器 增加游戏难度的设置 设置限制器会每次战斗会给与玩家额外经验值奖励
5.升级 可以获得 函数 全局函数槽 技能增幅槽 内存上限 限制器
6.剧情 游戏中除了根据男女主人公的对话获取信息和剧情 可以通过以下途径获取更多信息
OVC控制台
在游戏中检视 人物点 可以解锁函数(人物)的描述 根据不同任务描述推演剧情
击杀不同数量的机器人 解锁限制器的描述
var 与 let区别
变量提升–带有变量提升的变量会在js创建阶段 先赋值为undefined 在运行阶段 赋值为对应值
let声明的变量 没有变量提升特性 是在声明阶段进行赋值 var声明变量有变量提升
function a(){ console.log(b);//undefine console.log(c);//会报错,错误信息:Uncaught ReferenceError: c is not defined var b = 1; let c = 2 } a()
let声明变量作用域在对应代码块{}内 只能在对应代码块内调用 且不能被再次赋值
function a(){ let b = 1; let b = 2;//会报错 错误信息:Uncaught SyntaxError: Identifier 'b' has already } a()
var声明在全局 则任何处都可以调用 声明在函数内 则在函数任意处都可以调用 声明在块内 也可以在父级域内调用(全局或某层函数)
function a(){ for(var i=0;i<3;i++){ console.log(i);//0,1,2 } for(let j=0;j<3;j++){ console.log(j);//0,1,2 } } a()
function b(){ for(var i=0;i<3;i++){ setTimeout(function(){ console.log(i);//3,3,3 },0) } for(let j=0;j<3;j++){ console.log(j);//0,1,2 setTimeout(function(){ },0) } } b()
微信支付weixinjsbridge.invoke()和wx.choosewxpay的区别
weixinjsbridge.invoke()出现的版本更早 无需引用jssdk 无需wx.config方法注入 需要参数appId 使用回调 有详细的说明
而wx.choosewxpay出现的版本比较晚 需要jssdk注入 不需要参数appId 使用回调 只有SUCCESS 和 FAIL没有具体的说明
weixinjsbridge.invoke()是微信浏览器的内置方法 其实wx.choosewxpay在引用的微信jssdk文件中 也调用了weixinjsbridge.invoke() 是对weixinjsbridge.invoke() 的再次封装
综上所诉 这是微信前后设计的不同方法的支付 还是weixinjsbridge更方便一些 有具体的失败回调
小程序开发采坑
2.wx:for={{arr}} 模板传入参数如果用 this.data 里的参数
属性值 + 标签中属性值 需分别使用
A. {{paras}} + paras.item模式
B. {{…paras}} +item模式
3.使用Content-type来指定不同格式的请求信息
wx.request()其中 默认为GET请求 对应 header 中 ‘Content-Type’ 为’application/json’
而POST请求 对应 header 为 “application/x-www-form-urlencoded”
4.注意组件map外部父元素尺寸问题 地图demo 中 尺寸写在css中
5.页面加载时 初始化函数 onload 执行时不能 操作 this.data
生命周期说明 this.data加载 在 onload 之后 如果这样定义成功回调函数:
success:function(res){ … }
在 success 函数执行后 onload才结束 之后this.data进行加载 故而不能加载初始化数据
异步加载定义方法:
success:res =>{ … }
其中res为回调返回值
6.小程序数据接口地址必须使用https
7.小程序异步数据绑定
不能直接使用this.data因为异步操作的函数中作用域不包含this变量
也不能直接使用this.key = XXX 会造成只改数据层 不能 修改视图层
var object = this;
将类this与新定义的对象object绑定 在异步函数里 object可以被操作或引用
在需要修改data的地方使用 要修改的数据key值不同 互不影响
object.setData({
key:val
})
8.初始化变量必须使用 var 或 const 否则报错
9.标签属性 逻辑语句 中注意不要有空格或其他字符串 会被解释成string 当做true来运行
如 wx:if=”{{false}} ” 条件后面有空格会被当做true解释
10.支付API变量使用小写字母加下划线组合,微信支付使用驼峰法定义变量
万恶的appId “I” 居然是大写
11.再说授权
步骤一涉及app.js文件
步骤二三四涉及a.js文件 a.wxml和组件页面z.wxml
步骤一 :app.js写入静默授权
前台传入js_code (本次登录凭证)
服务端 用js_code换取openid 如果没有用户注册 有用户直接返回结果
附带用户是否授权信息
存入本地数据localstorage
具体页面a.js
步骤二 : 设置组件浮层
添加z.wxml组件 提示窗 提示用户授权设置授权按钮
浮层实现与否绑定 a.data.auth
步骤三 : 设置加载方法
添加全局方法 在onload中 判断本地数据中是否授权 操作auth属性控制组件浮层是否显示
步骤三: 设置授权方法
点击授权按钮 拿到用户授权结果 如果用户同意授权
启动该全局方法 注意变量传入本页数据 this
在全局方法中操作a页数据this.data.auth和本地数据
12.未发布小程序二维码 扫码后提示未发布
未发布小程序二维码只能在微信开发工具中 通过 二维码变异进入对应页面进行调试
13.微信原生组件 与 需要用户主动点击按钮的 带有授权用途的 功能冲突
如微信弹窗 底部菜单等 不能触发 带有open-type属性的动作 不能绑定对应触发方法
14.配置模板消息url 微信文档没有说明 验证token之后应该作何反应
微信公众号 是返回token
小程序返回 返回$_GET[‘echostr’]
15.小程序 IOS、安卓 解释页面跳转函数不一样
IOS 关闭页面后 不执行该页面的其他跳转函数 即卸载了该页面
安卓 关闭页面后 执行剩余其他函数
造成的结果是IOS在关闭上一层页面和跳转到新页面 只能选一项 而且跳转到新页面没有切换页面的动画效果
16 IOS渲染bug
hidden属性为真的元素 在IOS渲染没有被完全隐藏 会出现在左上角 留出一条缝
尽量使用wx:if避免此问题
17 canvas画图 – 开发工具错误
设置文字 文字大小 开发工具识别居然小数点 真机不认识 造成文字很小
18 服务短消息 – 开发工具错误
通过开发工具 支付扫码获取的prepay_id不能发送服务短消息 会提示41028 form_id不正确
前端js直接导出生成csv文件
本文链接: http://www.zxlucky.com/wordpress/archives/296
作者:陶路
场景:
有些场景下,前端需要筛选数据内容 编辑数据内容 之后生成表格文件 或者不想泄露给服务端数据资料,该方法无需通过服务端 可以直接在浏览器生成csv文件
csv文件格式定义方法:csv文件可以用excel打开 ,每行间隔用 “\n” 隔开,每列间隔用“,”隔开
标签代码:
<a id="out2csv" href="#" >导出csv</a>
js代码:
out2csv.click(function(){ str = 'id,name,tel\n1,taolu,02423187000\n2,taodalu,02423186000' out2csv.attr('href', 'data:text/txt;charset=utf-8,\ufeff'+str); out2csv.attr('download', 'out2csv.csv'); out2csv.click(); })
可能遇到的问题:
在mac上可能无法打开 可以用商店里的其他软件打开csv文件
另外 导出的csv文件 excel因为没有任何数据描述信息 可能存在将电话号 订单编号等长数字数据强制转换成科学计数法的 数字类型 解决这个问题 参考其他应用里 采用了在数据前 加“`”字符的方法 导出的数据会携带该字符 做excel导入的时候需要特殊处理
阿里云备案、域名迁入、转移备案信息
2017年新版阿里云备案
2016年整理企业备案及域名迁入
转移备案信息
[转载]人类被猫驯化史
标题:人类被猫驯化史
人类正在遭遇史上规模最大的物种入侵——猫,正在驯服人类。无数人类撸猫上瘾,猫与人类相互依存。
南宋著名诗人陆游就是一位「猫奴」。他曾经写过 12 首咏猫的诗歌,其中以《十一月四日风雨大作(其一)》最为知名。
在穷困潦倒、债台高筑之时,也只有猫才会对你不离不弃。猫之所以能够「驯化人类」,是从无时不刻的陪伴开始的。
移动互联网时代,猫已然成为我们生活的一部分,即便你不养猫,猫也会一直陪着你。
常用meta标签 小结
1.PC宽度 自动100%
<meta name="viewport" content="width=device-width, initial-scale=1" />
width=device-width兼容winphone ie浏览器
2.文档类型/编码
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
3.对搜索引擎友好
<meta name="keywords" content="别搜我" />
<meta name="description" content="告诉你别搜我,对,就你" />
<meta name="revised" content="Frank, 2016/3/1" />
//定义网页版本
<meta name="robots" content="index,follow" />
4.重定向 相当于js跳转
<script>window.location.href="";</script>
<meta http-equiv="refresh" content="5;url=" http:="" zxlucky.com"="">
5.强制全屏/竖屏 移动端
<meta name="full-screen" content="yes" />
<meta name="browsermode" content="application" />
6.兼容ie浏览器的版本
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
7.360等国内浏览器 号称双核浏览器的渲染兼容模式
<meta name="renderer" content="webkit" />
//默认webkit内核
<meta name="renderer" content="ie-comp" />
//默认IE兼容模式
<meta name="renderer" content="ie-stand" />
//默认IE标准模式
8.其他
<meta name="author" content="" />
网站作者 <strong>iphone webapp常用meta标签小结</strong> 1.宽度
<meta name="”viewport”" content="”width=device-width;" initial-scale="1.0;" maximum-scale="1.0;" user-scalable="0;”" />
移动端safari浏览器宽度适配 尤其针对打开输入键盘后 iphone自动改变屏幕宽度有显著疗效
2.添加到主屏幕后,全屏显示。
<meta name="apple-touch-fullscreen" content="yes" />
3.去掉工具栏
<meta name="apple-mobile-web-app-capable" content="yes" />
这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。
4.添加到主屏后的标题(iOS 6开始)
<meta name="apple-mobile-web-app-title" content="标题" />
5.设置状态栏的背景颜色
<meta name="apple-mobile-web-app-title" content="yes" />
6苹果手机浏览器safari会自动识别页面中的数字和邮件 并进行拨号和发邮件操作
<meta content=”telephone=no” name=”format-detection” />
<meta content=”email=no” name=”format-detection” />
腾讯地图 多个覆盖物设置点击事件
今天一个项目用到地图,因为是基于微信公众号网页,因此选用腾讯地图。
优点:腾讯地图申请权限简单 只要有QQ号 填写基本的开发者认证资料即可 而且可以立刻获得秘钥 无需人工审核 经过验证,在实际项目中,即使不使用秘钥也可以开发项目,但腾讯官方的声明是不保证之后永久有效。
项目是网页开发模式,JDK选择 WEB开发 JavascriptAPI。前面获取点击位置,添加覆盖物等操作均没有问题,不过在进行为覆盖物添加点击事件的时候出现了问题。为一个覆盖物添加点击事件,OK没有问题,但在进行多个覆盖物的点击事件添加后。会出现每个覆盖物的事件都被覆盖(重写)成最后一个事件,也就是所有覆盖物出发的事件都是一个而且是最后一个添加的点击事件。
data是商铺数组信息
一开始,读了腾讯官方文档 写了如下代码,这是用单一插点 模拟的多个插点。
for(var i in data){
shop = data[i];
x = shop.shop_position.split(',')[0];
y = shop.shop_position.split(',')[1];
//--插点
marker = new qq.maps.Marker({
position: new qq.maps.LatLng(x,y),
animation: qq.maps.MarkerAnimation.BOUNCE,
map: map,
draggable: true,
icon: new qq.maps.MarkerImage("img/point.png"),
visible: true,
});
//--插点点击事件
qq.maps.event.addListener(marker[i], 'click', function() {
//--事件函数
});
//--跳转到最后一个搜索结果的位置
map.panTo(new qq.maps.LatLng(x,y));
}
结果是插点成功,但绑定的事件不成功,事件被最后一个覆盖。
之后看到有多个覆盖物的插点文档:http://lbs.qq.com/javascript_v2/case-run.html#sample-event-closure
for(var i in data){
shop = data[i];
x = shop.shop_position.split(',')[0];
y = shop.shop_position.split(',')[1];
//--标记插点
marker[i] = new qq.maps.Marker({
position: new qq.maps.LatLng(x,y),
animation: qq.maps.MarkerAnimation.BOUNCE,
map: map,
draggable: true,
icon: new qq.maps.MarkerImage("img/point.png"),
visible: true,
});
var infoWin = new qq.maps.InfoWindow({
map: map
});
latlngs[i] = new qq.maps.LatLng(x,y);
//添加到提示窗
info[i] = new qq.maps.InfoWindow({
map: map
});
//--插点点击事件1
qq.maps.event.addListener(marker[i], 'click', function() {
info[i].open();
info[i].setContent('
');
info[i].setPosition(new qq.maps.LatLng(x,y));
});
//--插点点击事件2
qq.maps.event.addListener(marker[i], 'click', function() {
//--点击事件内容
});
//--跳转到最后一个搜索结果的位置
map.panTo(new qq.maps.LatLng(x,y));
}
这次注意上面已经使用数组进行创建覆盖物和点击事件,插点点击事件1是弹出腾讯默认给出的提示框(蛮不错),插点点击事件2是项目需要的逻辑。又一次失败!但是再一次接近了真相!当时已经卡了一个多小时了,郁闷!
经过本大神冥思苦相,果然真相只有一个!说多了都是废话,还是上码吧,同志!
for(var i in data){
shop[i] = data[i];
x = shop[i].shop_position.split(',')[0];
y = shop[i].shop_position.split(',')[1];
var infoWin = new qq.maps.InfoWindow({
map: map
});
latlngs[i] = new qq.maps.LatLng(x,y);
//--创建marker以及点击事件
(function(i){
var marker = new qq.maps.Marker({
position: new qq.maps.LatLng(x,y),
animation: qq.maps.MarkerAnimation.BOUNCE,
icon: new qq.maps.MarkerImage("img/point.png"),
map: map
});
qq.maps.event.addListener(marker, 'click', function() {
//--业务逻辑 顺便加了一个腾讯自带提示框 加了一张图片
});
})(i);
//--跳转到最后一个搜索结果的位置
map.panTo(new qq.maps.LatLng(x,y));
}
最后发现:腾讯地图中覆盖物点击事件触发时,调用的时JS在内存中储存的变量信息,我本以为既然官方文档中的marker既然是重复使用的,那么在创建覆盖物点击事件的时候,函数的内容已经固定(函数内部函数已经赋值),由此看到腾讯地图的开发者的习性!
而我的习惯是在元素创建时为其创建点击方法,在元素创建的时候,函数内容已经确定。比较起来,如果数据量大,创建元素众多的情况下,腾讯开发者的思路会减少浏览器储存的信息,占用的空间等于函数+变量(覆盖物信息数组);而我的方法是创建一个函数数组(函数内含有数组信息)。
腾讯文档地址:http://lbs.qq.com/javascript_v2/demo.html