杂谈小程序
我不知道的小程序能力
open-data
用于展示微信开放的数据,比如头像、昵称等,注意只符合展示的场景
open-data[1]
navigateToMiniProgramAppIdLis
如果我们的需求需要跳转到其他的小程序的 APPID,则需要配置该选项。
注意:最多只能填写 10 条
微信小程序 IPhoneX 吸底兼容问题
问题:如果跟普通需求一样处理,就会和下面的 Home Indicator 重叠
需要判断设备,使用 wx.getSystemInfoSync(),获取设备信息,判断是否为 iPhoneX,设置一个全局变量(APP 实例下面)进行存储。根据是否为 iPhone X设置不同的样式即可。
小程序中吸底按钮适配 iPhone X 方案[2]
微信小程序中打开手机 APP 的地图
/**
* 使用微信内置地图查看位置,如果不传经纬度就获取当前的位置
* @param name 位置名
* @param address 地址的详细说明
* @param lati 纬度
* @param longi 经度
*/
export function openWxMapLocation (name, address, lati, longi) {
if (lati && longi) {
wx.openLocation({
name,
address,
latitude: lati,
longitude: longi,
scale: 18
})
return
}
wx.getLocation({
type: 'gcj02', // 返回可以用于wx.openLocation的经纬度
success (res) {
const latitude = lati || res.latitude
const longitude = longi || res.longitude
wx.openLocation({
name,
address,
latitude,
longitude,
scale: 18
})
}
})
}
小技巧
•可以在开发者工具的console面板输入 showRequestInfo() 查看相关信息•wx.login获取的code凭证的有效时间是5分钟
深入小程序
双线程模型
天生延迟
其它
parseInt 问题
parseInt(string, radix) 将一个字符串 string 转换为 radix 进制的整数, radix 为介于2-36之间的数
parseInt 的第一个入参要求为 String 类型,当你的值太大,变成科学技术法的时候,就会存在以下的问题。因为数值过大,就会变成科学技术法的形式,调用 toString() 方法的时候就会只返回值不正确
精灵图的使用
原理:background-image 设置图片,background-repeated 设置不重复,background-position (重点)设置图片的位置以显示哪张图片
.btn-members.jump {
background-image: url('6fe21e1d783e8b0.png');
}
.btn-members.free, .btn-members.jump {
width: 580rpx;
height: 108rpx;
background-position: 0 0;
background-size: 580rpx 216rpx;
background-repeat: no-repeat;
}
.btn-members.free.down, .btn-members.jump.down {
/* 精灵图定位 */
background-position: 0 -108rpx;
}
移动端 line-height 问题
移动端(安卓)不能设置 height 和 line-height 一样高,小数点计算会产生误差。
解决:line-height 一般设置大一点
References
[1]
open-data: https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html
[2]
小程序中吸底按钮适配 iPhone X 方案: https://juejin.im/post/5a1d396551882546d71f157b
- 使用dropwizard(4)-加入测试-jacoco代码覆盖率
- goldengate学习-安装篇(71天)
- 使用dropwizard(6)-国际化-easy-i18n
- 配置不同环境下启用swagger,在生产环境关闭swagger
- 使用ControllerAdvice注意事项,Ambiguous @ExceptionHandler method mapped for [class org.springframework.web.
- rac节点无法启动ORA-29702的问题及分析(70天)
- SpringMVC,SpringBoot文件下载
- SpringCloud学习1-服务注册与发现(Eureka)
- 物化视图全量刷新与insert的redo生成量测试(69天)
- SpringCloud学习2-Springboot监控模块(actuator)
- 原码,反码,补码 与(&) 或(|) 非(~) 异或(^) 左移 << 右移 >> 无符号右移 >>>
- lombok使用基础教程
- 【Android基础】Android中的Intent详解
- 关于SCN的总结测试 (68天)
- 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 数组属性和方法
- Swagger2 UI 提示"请确保swagger资源接口正确"解决办法
- Manytasking Jmetal 代码反向解析 2_MMDTLZ
- GitLab服务器搭建
- MATP1生成测试SolutionSet
- 以猜数字游戏引出的分治算法的理解与思考
- MATP ManyTask Multitask Problem 和 Solution 的变量范围
- Sinopia安装部署
- Nginx的405 not allowed错误解决
- Linux免密登陆
- 一起来学matlab-matlab学习笔记8 基本绘图命令_2基本绘图操作
- 用一个图书库实例搞懂二分搜索树的底层原理
- 自已做动画及编写程序搞清楚最大堆的实现原理
- 一起来学演化计算-matlab基本函数strcmp num2str 字符串格式
- 一起来学matlab-matlab学习笔记8 基本绘图命令_1 图形窗口简介
- 根据barcode过滤bam文件