不凡说 / 文章详情

【前端培训-知识点】小程序中常见的插件使用

2022-04-22 16:50 1462

1.1 腾讯位置服务地图选点

  1. 打开微信服务平台,点我跳转

  2. 选择 开发者资源
    image

3.选中插件后,搜索地图选点 。然后就得到我们要的腾讯位置服务地图选点插件。
image

  1. 点击添加插件,然后选择要使用插件的小程序。
    image
    image

  2. 在所选小程序后台,设置==>第三方设置==>插件管理中就可以看到刚刚添加的插件。
    image

  3. 使用刚刚添加的插件。

    6.1 在app.json中添加如下配置:

    // app.json
    {
      "plugins": {
        "chooseLocation": {
          "version": "1.0.9",
          "provider": "wx76a9a06e5b4e693e" // 这里的provider的值,是插件提供者的appid,我们保持不变,不需要修改
        }
      }
    }
    

    6.2 设置定位授权

    地图选点插件需要小程序提供定位授权才能够正常使用定位功能:

    // app.json
    {
      "permission": {
        "scope.userLocation": {
          "desc": "你的位置信息将用于小程序定位"
        }
      }
    }
    

    6.3 在页面中使用

    <!-- dmeo.wxml -->
    <view>位置信息: {{ address.address }}  </view>
    <button type="primary" bindtap="chooseAddress">选取位置</button>
    

    用一个view展示选中的位置,点击按钮跳转到选点页面

    // 导入插件
    const chooseLocation = requirePlugin('chooseLocation');
    Page({
      data: {
        address: {},//选点后的位置地址信息
        location: {} // 定位信息
      },
      onLoad() {
        var that = this
        wx.getLocation({
          success(res) {
            that.setData({
              location: res
            })
          }
        })
      },
      // 从地图选点插件返回后,在页面的onShow生命周期函数中能够调用插件接口,取得选点结果对象
     onShow() {
        const location = chooseLocation.getLocation(); // 如果点击确认选点按钮,则返回选点结果对象,否则返回null
        console.log("location==>",location);
        if(location !=null){
          this.setData({
            address:location
          })
        }
      },
      chooseAddress() {
        const key = 'BWXBZ-XEPCP-CPDDE-LGMUD-BW27S-LCFHX'; //使用在腾讯位置服务申请的key,如果不清楚如何申请,请回顾我们的小程序基础教程
        const referer = 'demo'; //调用插件的app的名称
        const location = JSON.stringify({
          latitude: this.data.location.latitude, // 纬度
          longitude: this.data.location.longitude // 经度
        });
        // 自定义分类
        const category = '教育培训,休闲娱乐,停车场';
        wx.navigateTo({
          url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`
        });
      }
    })
    
  4. 最终效果:
    image

1.2 腾讯位置服务城市选择器

城市选择器的用法与地图选点的用法几乎是一般的,引入步骤参考地图选地的前五步骤。直接看如何在页面中使用:

  1. 在app.json文件如添加如下配置:

    // app.json
    {
      "plugins": {
        "chooseLocation": { // 这个是上一个的选点插件
          "version": "1.0.9",
          "provider": "wx76a9a06e5b4e693e"
        },
        "citySelector": { // 城市选择插件
          "version": "1.0.1",
          "provider": "wx63ffb7b7894e99ae"
        }
      },
      "permission": {
        "scope.userLocation": {
          "desc": "你的位置信息将用于小程序定位" 
        }
      },
    }
    
  2. 在页面中使用:

    <!--wxml -->
    <view>选择的城市:{{city.name}}</view>
    <button type="primary" bindtap="goChooseCity">选择城市</button>
    
    // 引入插件
    const citySelector = requirePlugin('citySelector');
    Page({
      data: {
        city: '' //选中的城市
      },
      // 从城市选择器插件返回后,在页面的onShow生命周期函数中能够调用插件接口,获取cityInfo结果对象
      onShow() {
        const selectedCity = citySelector.getCity(); // 选择城市后返回城市信息对象,若未选择返回null
        console.log("selectedCity===",selectedCity);
        if(selectedCity!=null){
          this.setData({
            city:selectedCity
          })
        }
      },
      onUnload() {
        // 页面卸载时清空插件数据,防止再次进入页面,getCity返回的是上次的结果
        citySelector.clearCity();
      },
      goChooseCity() {
        const key = 'BWXBZ-XEPCP-CPDDE-LGMUD-BW27S-LCFHX'; // 使用在腾讯位置服务申请的key
        const referer = 'demo'; // 调用插件的app的名称
        const hotCitys = ''; // 用户自定义的的热门城市
    
        wx.navigateTo({
          url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}`,
        })
      }
    })
    
  3. 最终效果:
    image