杂谈小程序

2020-09-24 15:24:51 浏览数 (1)

我不知道的小程序能力

open-data

用于展示微信开放的数据,比如头像、昵称等,注意只符合展示的场景

open-data[1]

navigateToMiniProgramAppIdLis

如果我们的需求需要跳转到其他的小程序的 APPID,则需要配置该选项。

注意:最多只能填写 10 条

微信小程序 IPhoneX 吸底兼容问题

问题:如果跟普通需求一样处理,就会和下面的 Home Indicator 重叠

需要判断设备,使用 wx.getSystemInfoSync(),获取设备信息,判断是否为 iPhoneX,设置一个全局变量(APP 实例下面)进行存储。根据是否为 iPhone X设置不同的样式即可。

小程序中吸底按钮适配 iPhone X 方案[2]

微信小程序中打开手机 APP 的地图

代码语言:javascript复制
/**
 * 使用微信内置地图查看位置,如果不传经纬度就获取当前的位置
 * @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 (重点)设置图片的位置以显示哪张图片

代码语言:javascript复制
.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

0 人点赞