制作二维码

用途：扫二维码进入一个网站
二维码是用 canvas 画出来的演示如下

首先下载这个 weapp.qrcode.min.js
链接：https://pan.baidu.com/s/1MvY5iI60ipSCiCWZJOlEyQ 提取码：3yrs
把这个复制到你的项目中去，可以新建个名字叫 js 的文件夹，丢进去
然后再你的项目的 js 文件中导入，语句如下

1
2
3

// pages/12-10/demo1/demo1.js
//写在你的js文件中，写开头就行，路径自己写，这个是我的路径演示
import drawQrcode from "../../../utils/weapp.qrcode.min.js";

在 wxml 中写个 canvas，记住他的宽高，后面要用到，注意 canvas-id 要写对了

1	<canvas style="width:200px;height:200px" canvas-id="birdId"></canvas>

接下来写 js

//你可以把这段写在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 ：选择位置

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

// 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 值

// 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

1
2
3

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

然后在 js 中写如下的

//我把这些写在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函数
});