悲伤沙拉

H5 调起第三方地图软件（百度、腾讯、高德）

新的需求，项目为 H5 嵌入 App，需要让 H5 能直接调起第三方地图软件实现目标地点的导航。

食用方法很简单，直接跳转相应的 URL 即可，不过 H5 无法判断用户是否安装了相应的地图 App。

区分用户端环境

1
2
3
4
5
6
7

let ua = navigator.userAgent.toLowerCase()
if (ua.indexOf('like mac os x') > -1) {
    this.OS = 'IOS'
}
if (ua.indexOf('android') > -1) {
    this.OS = 'Android'
}

uni-app 实现汉字按拼音首字母排序

索引列表页面需要利用首字母区分字段，后端没返回，那么前端来做。 首先找一个现有的轮子：https://github.com/xinglie/pinyin。

uni-app 使用 Canvas 实现随机验证码

简单小组件，利用 Canvas 生产图片，然后返回相应的验证码。

Template 部分

1
2
3

<view class="dt-verification">
  <canvas :style="{width: width, height: height}" canvas-id="myCanvas"></canvas>
</view>

uni-app 踩坑心路历程

拧螺丝日常。

uni-app 引入 iconfont 编译失败

使用绝对路径：

1
2
3
4

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('./static/iconfont/iconfont.ttf') format('truetype');
}

生成二维码

uQRCode 二维码生成插件 - DCloud 插件市场

在 template 中创建 <canvas/> 并设置 id，画布宽高

1

<canvas id="qrcode" canvas-id="qrcode" style="width: 354px;height: 354px;" />