avatar

目录
【前端21_微信】常用之制作二维码、腾讯地图API、百度地图API、获取位置的天气信息

制作二维码

用途:扫二维码进入一个网站
二维码是用canvas画出来的演示如下
在这里插入图片描述

  • 首先下载这个 weapp.qrcode.min.js
    链接:https://pan.baidu.com/s/1MvY5iI60ipSCiCWZJOlEyQ 提取码:3yrs
    把这个复制到你的项目中去,可以新建个名字叫 js 的文件夹,丢进去
  • 然后再你的项目的 js 文件中导入,语句如下
Javascript
1
2
3
// pages/12-10/demo1/demo1.js
//写在你的js文件中,写开头就行,路径自己写,这个是我的路径演示
import drawQrcode from "../../../utils/weapp.qrcode.min.js";
  • 在 wxml 中写个 canvas,记住他的宽高,后面要用到,注意 canvas-id 要写对了
html
1
< canvas style="width:200px;height:200px" canvas-id="birdId">< /canvas>
  • 接下来写 js
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//你可以把这段写在onLoad:function()里试试看
drawQrcode({ //画二维码
width:200, //这里用wxml里的宽
height:200, //同理,用wxml里设置的canvas的高,写的不对的话二位码会画乱
canvasId: "birdId", //canvasId也要写上
text:"https://blog.csdn.net/u010263423/category_9162796.html", //这个是二维码能跳转的网站
background:"#6A586C", //背景颜色
foreground:"#E7EAD9", //码的颜色
image:{ //你可以在你的二维码上添加个图标,例如你的微信头像之类的
imageResource:"../../../img/twitter.png", //本地图像
dx:70, //图标的x轴偏移量
dy:70, //图标的y轴偏移量,注意没有单位的
dWidth:60, //图标的宽
dHeight:60 //图标的高
}
})

腾讯地图 API :选择位置

演示如下:
在这里插入图片描述

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// pages/12-10/demo2/demo2.js
let {log:l} = console;
Page({
//我是把这个函数绑定在按钮上了
choosePosition(){
var that = this; //固定指针,让that 指向page中的对象
wx.getLocation({ //调用wx的获取位置信息功能
type: 'gcj02', //wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
success(res) { //成功获得坐标的话
const latitude = res.latitude //记录纬度
const longitude = res.longitude //记录经度
const speed = res.speed
const accuracy = res.accuracy //精度值
console.log("getLocation:", res);

//弹出选择位置
wx.chooseLocation({
success: function (res) { //成功回调函数
l("chooseLocation:",res); //打印
l(res.address);
that.setData({ //更改网页的信息
name:res.name,
pos:res.address
})
},
})
}
})
},
})

百度地图 API 使用示例

实例为显示当前位置

在这里插入图片描述

  • 首先在搜索引擎里搜索 百度地图api,然后进入,注册
  • 注册成功之后打开百度地图的控制台
    在这里插入图片描述
  • 看图
    在这里插入图片描述
  • 取名字
    在这里插入图片描述
  • 创建好之后,复制你的 ak 值
    在这里插入图片描述
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// pages/12-10/demo3/baiduApi.js
//写page里,我这里就不写page了
location(){
let that = this;
wx.showLoading({
title: '加载中',
})
wx.getLocation({ //获取用户的位置信息

//用户已经授权了接口才会接着执行
success: function(res) {
wx:wx.hideLoading();//隐藏加载提示

// 纬度
console.log("纬度:",res.latitude);

// 经度
console.log("经度:",res.longitude);

wx:wx.request({
//请求百度地图的接口
url: 'http://api.map.baidu.com/reverse_geocoding/v3',
data:{
ak:"nhFmMePLH66sRx1DcT0wwk2bPjymwBfq", //填你自己的ak值
location: `${res.latitude},${res.longitude}`, //传值,注意纬度、经度的顺序
output:"json"
},
success(res){
console.log("baiduApi:",res);
if(res.data.status == '0'){
that.setData({
locationTest: res.data.result.formatted_address
})
}
}
})
},
})
},

获取位置天气信息

首先又是下载插件hhh
链接:https://pan.baidu.com/s/1_gjqqt8ZKqZB1hErWH1TvQ
提取码:r85m

Javascript
1
2
3
// pages/12-10/demo4/demo4.js
//这个写在page的外面,作用是把百度api的所有导入过来
let bamp = require('../../../js/bmap-wx.min.js');

然后在js中写如下的

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//我把这些写在onLoad()函数中了
let that = this;
let BMap = new bamp.BMapWX({
//new一个插件的对象出来
ak: "填你自己的"
});

// 抽离的思想
let success = function(res){
let string = console.log(res.currentWeather[0]);
//{currentCity: "烟台市", pm25: "206", date: "周二 12月10日 (实时:8℃)", temperature: "12 ~ 2℃", weatherDesc: "多云转晴", …}

let city = res.currentWeather[0].currentCity;
let pm25 = res.currentWeather[0].pm25;
let date = res.currentWeather[0].date;
let temperature = res.currentWeather[0].temperature;
let weatherDdesc = res.currentWeather[0].weatherDdesc;
}
BMap.weather({
success:success,//成功的话执行success函数
})

#

文章作者: Lovely Ruby
文章链接: https://wangzhongqing.xyz/p/46259.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Ruby の いえ
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论