实例分享微信小程序项目搭建(下)
关于 wx.getLocation
首次 执行 wx.getLocation 小程序将自动调启如下 dialog:
请注意是 首次 !无论用户选择“确定”或是“取消”,再次进入“更美测试”均不会被询问是否开启定位(调用 100 次 wx.getLocation 也无济于事)。除非用户手动清理微信缓存、更新微信、切换账号...
各种缓存:
存在上述问题的 API 绝不止 wx.getLocation 例如 wx.login,遗憾的是,小程序并未开放清理缓存的接口。但可通过 wx.openSetting 再次请求用户开启授权:
关于 wx.reportAnalytics
小程序数据分析可通过填写配置上报、API 上报:
对于填写配置上报,需提交触发动作、触发页面、触发元素、埋点数据等。但埋点数据需从 page data 中获取,看看官方文档是怎么曰的:
OMG...需要在 page data 内维护埋点状态,当埋点量较大时上报数据的复杂度可想而知。我曾傻傻的认为 data 字段值等同 dataset 值:
<text
wx:for="{{ areas }}"
data-id="{{ item.id }}"
data-name="{{ item.name }}"
data-idx="{{ index }}"
bindtap="tapItem">{{ item.name }}</text>
未曾想竟为 page 实例中的 data 值:
Page({
data: {},
onLoad: function () {},
onReady: function () {}
});
如此看来 API 上报更简单,为触发元素 dataset 埋点数据并调用 wx.reportAnalytics 传入参数:
<text
wx:for="{{ orders }}"
data-id="{{ item.id }}"
data-name="{{ item.name }}"
data-type="order"
bindtap="triggerSelected">{{ item.name }}</text>
triggerSelected (e) {
var dataset = e.target.dataset;
var id = dataset.id;
var name = dataset.name;
var type = dataset.type;
wx.reportAnalytics('click_fliter_item', {
item_type: type,
item_id: id,
item_name: name
});
}
关于 rpx
rpx 在不同设备被小程序换算为 px 时能产生各种 bug,当设备宽度除不尽 750 时结果值精确至哪一位呢(额...bug 产生原因本人猜的),看看换算表:
举个例子:
<view class="fliter-bar" style="top: {{ top }}rpx;"></view>
<view class="fliter-wrap" style="top: {{ top + 84 }}rpx;"></view>
问题一:当 top = 0 时,0rpx 被换算为 0.5px 也是厉害~
解决方案:
<view class="fliter-bar" style="top: {{ top ? (top + 'rpx') : 0 }};"></view>
问题二:当 fliter-bar 高度为 84rpx,理论上紧贴的 fliter-bar 与 fliter-wrap 在部分设备上也不紧贴...
关于 setData
假如你想在 this.setData 的 key 中传入变量,下述写法报错:
triggerSelected (e) {
var dataset = e.target.dataset;
var id = dataset.id;
var name = dataset.name;
var type = dataset.type;
this.setData({
selected[type]: {
id: id,
name: name
}
});
}
且 this.setData 不支持模板字符串形式的 key,下述写法也报错:
triggerSelected (e) {
var dataset = e.target.dataset;
var id = dataset.id;
var name = dataset.name;
var type = dataset.type;
this.setData({
`selected.${type}`: {
id: id,
name: name
}
});
}
可将 selected 存入变量,直接操作 selected 变量后再 this.setData:
triggerSelected (e) {
var dataset = e.target.dataset;
var id = dataset.id;
var name = dataset.name;
var type = dataset.type;
var selected = this.data.selected;
selected[type] = {
id: id,
name: name
};
this.setData({
selected: selected
});
}
检测 page data 内 selected 值与预期的一致,但当 selected 与视图渲染相关时,意想不到的情况发生了...假定我通过 selected 的某一属性值控制元素 class:
<text
class="{{ selected.order.id == item.id ? 'active' : '' }}"
wx:for="{{ orders }}"
data-id="{{ item.id }}"
data-name="{{ item.name }}"
data-type="order"
bindtap="triggerSelected">{{ item.name }}</text>
当元素被点击时其 class 被赋值 active 使之呈现绿色:
而后我点击了另一与之前被点击元素 type 不同的元素,理论上不应影响第一次被点击元素的状态(selected.type2 变化不影响 selected.type1),然而:
active 仍在绿色却不见了,这 bug 也是醉了,我不得不写点烂代码了(通过 switch case 一一处理):
triggerSelected (e) {
var dataset = e.target.dataset;
var id = dataset.id;
var name = dataset.name;
var type = dataset.type;
var selected = this.data.selected;
switch (type) {
case 'area':
this.setData({
'selected.area': {
id: id,
name: name
}
});
break;
case 'tag':
this.setData({
'selected.tag': {
id: id,
name: name
}
});
break;
case 'order':
this.setData({
'selected.order': {
id: id,
name: name
}
});
break;
}
}
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Web-高明的黑客
- CVE-2017-7529 Nginx整数溢出漏洞分析
- 【Vulnhub】pegasus
- 2019-11-20-app专项测试【Android电量】Battery Historian耗电分析
- CVE-2017-7529 Nginx整数溢出漏洞分析2
- Redis find hot key 牛X!
- Python加水印
- 自动化运维实践 | Ansible变量
- Python-SSH日志审计
- 因 Redis 分布式锁造成的 P0 级重大事故,整个项目组被扣了绩效。。。
- Python-SSH日志分析
- 小记一次验证码绕过
- 脚本刷课思路-1
- 脚本刷课思路-2
- SQLMAP配合PHP中转忽略ssl