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

安装

1
npm i --save jian-pinyin

引用

1
2
import Pinyin from 'jian-pinyin'
const Pinyin = require('jian-pinyin')

使用实例

1
2
console.log(Pinyin.getSpell('疯狂星期四!'));
// feng,kuang,xing,[qi,ji],si,!

根据具体情况封装一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
cityList() {
let letters = "ABCDEFGHIJKLNMOPQRSTWXYZ".split('');
letters.map(item => {
this.city.push({
title: item,
item: []
})
})
},
sort(obj) {
let letters = "ABCDEFGHIJKLNMOPQRSTUVWXYZ".split('');
obj.map(item) => {
let first = Pinyin.getSpell(item.Name).split(',').join('').toUpperCase()[0];
let num = letters.indexOf(first);
this.city[num].item.push(item);
})
}

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;" />
阅读更多