2017-01-29 12:20:00 u011495204 阅读数 63683
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27856 人正在学习 去看看 秦子恒

环境搭建

  • 注册,获取APPID(没有这个不能真鸡调试)
  • 下载微信web开发者工具(挺多bug,将就用)
  • 打开微信web开发者工具,扫码登录,新建小程序,输入APPID,勾选创建quick start项目。

工程结构

可以看到工程根目录中有个app.js,这里可以定义全局变量,通过getApp()获取。
项目中有了一些示例,已经有了获取用户信息的方法等。

开发地图定位,选择位置功能

我们直接修改index页面来做这个功能。

准备

  • 新建imgs目录,加入2个图标(ic_location和ic_position),用于标记当前位置,和地图中央位置。
  • ic_location
  • ic_position

添加定位功能

修改app.js,加入定位功能,获取当前位置。

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  }
  ,getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  }
  //get locationInfo
  ,getLocationInfo: function(cb){
    var that = this;
    if(this.globalData.locationInfo){
        cb(this.globalData.locationInfo)
    }else{
        wx.getLocation({
          type: 'gcj02', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
          success: function(res){
            that.globalData.locationInfo = res;
            cb(that.globalData.locationInfo)
          },
          fail: function() {
            // fail
          },
          complete: function() {
            // complete
          }
        })
    }
  }

  ,globalData:{
    userInfo:null
    ,locationInfo: null
  }
})

地图控件布局

修改pages/index/index.wxml文件,添加map标签,如下


<map id="map4select"
 longitude="{{longitude}}" latitude="{{latitude}}" 
 markers="{{markers}}"
 scale="20" 
 style="width:{{map_width}}px;height:{{map_height}}px"
 bindregionchange="regionchange"
 controls="{{controls}}">
</map>
  • 需要给地图指定一个id,后面可以通过id获取地图的上下文。
  • 监听bindregionchange事件,地图变化的时候可以监听到。
  • 地图的大小不要写死,动态设置,我这里打算设置为宽高都是屏幕宽度。
  • controls是固定在map组件上面的。一开始我想用image替代,但是设置z-index也不能在地图上面,毕竟不是H5开发。

逻辑代码编写

编辑index.js

var app = getApp()

Page({
    data:{
      map_width: 380
      ,map_height: 380
    }
    //show current position
    ,onLoad: function(){
    var that = this;
    // 获取定位,并把位置标示出来
    app.getLocationInfo(function(locationInfo){
        console.log('map',locationInfo);
        that.setData({
          longitude: locationInfo.longitude
          ,latitude: locationInfo.latitude
          ,markers:[
            {
            id: 0
            ,iconPath: "../../imgs/ic_position.png"
            ,longitude: locationInfo.longitude
            ,latitude: locationInfo.latitude
            ,width: 30
            ,height: 30
            }
          ]
        })
    })

    //set the width and height
    // 动态设置map的宽和高
    wx.getSystemInfo({
      success: function(res) {
        console.log('getSystemInfo');
        console.log(res.windowWidth);
        that.setData({
           map_width: res.windowWidth
          ,map_height: res.windowWidth
          ,controls: [{
            id: 1,
            iconPath: '../../imgs/ic_location.png',
            position: {
              left: res.windowWidth/2 - 8,
              top: res.windowWidth/2 - 16,
              width: 30,
              height: 30
            },
            clickable: true
          }]
        })
      }
    })

  }
  //获取中间点的经纬度,并mark出来
  ,getLngLat: function(){
      var that = this;
      this.mapCtx = wx.createMapContext("map4select");
      this.mapCtx.getCenterLocation({
        success: function(res){

            that.setData({
            longitude: res.longitude
            ,latitude: res.latitude
            ,markers:[
              {
              id: 0
              ,iconPath: "../../imgs/ic_position.png"
              ,longitude: res.longitude
              ,latitude: res.latitude
              ,width: 30
              ,height: 30
              }
            ]
          })

        }
      })
  }
  ,regionchange(e) {
    // 地图发生变化的时候,获取中间点,也就是用户选择的位置
      if(e.type == 'end'){
          this.getLngLat()
      }
  }
  ,markertap(e) {
    console.log(e)
  }
})

展示

这样,就OK啦,用户可以看到自己的定位,如果觉得有偏差,可以移动地图,把中央点放到自己认为的准确位置上。
这里写图片描述
这里写图片描述
这里写图片描述

2019-08-06 12:21:25 qq_21537671 阅读数 544
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27856 人正在学习 去看看 秦子恒

iview-Weapp

本项目中使用的UI为iview-Weapp,可在百度自行进入官网并根据文档下载并引入至项目,此处就不多说了。

具体实现

主要实现了在微信小程序下使用地图的marker点击弹出画圆,并根据圆的大小实现地图缩放的问题。
注意!!!:目前半径不可超过60KM,过大会导致进入死循环卡死,如有需要请自行更改代码。

实现的效果如下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

目录如下:
在这里插入图片描述
map.js代码:

注意:代码中 drawingnumber 的单位是m(米),drawingnumberKM所代表的的是KM(千米), getCrlcle()方法所计算出的当前缩放半径单位为KM

// pages/map/map.js
// pages/map/map.js
const {
  $Message
} = require('../../dist/base/index');
var QQMapWX = require('../../lib/qqmap-wx-jssdk.js');
var qqmapsdk;
var mapapp;
const app = getApp();
var EARTH_RADIUS = 6378.137; //地球半径

function rad(d) {
  return d * Math.PI / 180.0;
}

function getDistance(lng1, lat1, lng2, lat2) {
  var radLat1 = rad(lat1);
  var radLat2 = rad(lat2);
  var a = radLat1 - radLat2;
  var b = rad(lng1) - rad(lng2);
  var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
    Math.cos(radLat1) * Math.cos(radLat2) *
    Math.pow(Math.sin(b / 2), 2)));
  s = s * EARTH_RADIUS;
  s = Math.round(s * 10000) / 10000;
  return s; //返回数值单位:公里
};

Page({

  /**
   * 页面的初始数据
   */
  data: {
    longitude: "",
    latitude: "",
    markers: [],
    markerseeion:[],
    visible: false,
    drawingnumber: 0,
    drawingnumberKM: 0,
    circles: [],
    //点击标记点的经纬度
    markerlongitude: "",
    markerlatitude: "",
    scale: 16,
    //页面加载时的半径
    nowradius: 0,
    //地图加载
    mapload:false,
    //地图
    hidden:false,
    buttonhidden:true,
    localhidden:true,
    localplace:"",
    //判断getCrlcle方法走完没有
    Crlcleisfinish:false,
    markere:"",
    //调用查询当前地图半径方法位置(0:点击标记时  1:在得到地图缩放等级后)
    markerbechange:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    // this.getCrlcle();
    var that = this;
    qqmapsdk = new QQMapWX({
      key: '自行填写KEY'
    });
    //获取当前位置
    wx.getLocation({
      type: 'gcj02',
      success: function(res) {
        var latitude = res.latitude
        var longitude = res.longitude
        that.setData({
          latitude: latitude,
          longitude: longitude
        })
        console.log(latitude+"纬度")
        console.log(longitude + "精度")
        //逆地址坐标解析
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (addressres){
            var address = addressres.result.formatted_addresses.recommend;
            that.setData({
              localplace:address
            })
          },
          fail:function(err){
            var errr=err.message;
            console.log(errr+"进来错误了")
          }
        })
      }
    })
    //定义个marker,并设置点击事件
    var getmarkers = []; 
    var allmarkersession=[];
    app.wxRequest("GET","/markers/getAllMarkers",{},(res)=>{
      var usermarkers=res;
      console.log(res);
      for (var i = 0; i < usermarkers.length;i++){
        allmarkersession.push(usermarkers[i]);
        //如果是指挥中心
        if (usermarkers[i].type==0){
            getmarkers.push({
              id: parseInt(usermarkers[i].id),
              iconPath: "/images/CommandingOrganization.png",
              longitude: usermarkers[i].longitude,
              latitude: usermarkers[i].latitude,
              width: 50,
              height: 50,
            })
          }
        //如果是器材库
        if (usermarkers[i].type == 1) {
          getmarkers.push({
            id: parseInt(usermarkers[i].id),
            iconPath: "/images/Equipment.Repository.png",
            longitude: usermarkers[i].longitude,
            latitude: usermarkers[i].latitude,
            width: 50,
            height: 50,
          })
        } 
        //如果是重点保护目标
        if (usermarkers[i].type == 2) {
          getmarkers.push({
            id: parseInt(usermarkers[i].id),
            iconPath: "/images/Key.Protection.Objectives.png",
            longitude: usermarkers[i].longitude,
            latitude: usermarkers[i].latitude,
            width: 50,
            height: 50,
          })
        }
        //如果是应急力量
        if (usermarkers[i].type == 3) {
          getmarkers.push({
            id: parseInt(usermarkers[i].id),
            iconPath: "/images/Emergency.Force.png",
            longitude: usermarkers[i].longitude,
            latitude: usermarkers[i].latitude,
            width: 35,
            height: 35,
          })
        }
      }
      that.setData({
        markers: getmarkers,
        mapload: true,
        localhidden:false,
        markerseeion: allmarkersession
      })
    },(err)=>{
      console.log("错误信息"+err.errMsg);
    })
    if (this.data.Crlcleisfinish){
      this.setData({
        Crlcleisfinish:false
      })
    }

  },
  //点击标记点
  markertap(e) {
    this.setData({
      markere:e,
      markerbechange:0
    })
    this.getCrlcle();
  
  },
  //点击确定关闭画圆选择
  handleCloseOK() {
    //判断异步是否执行完了
    console.log(this.data.Crlcleisfinish + "当前状态")
    console.log(this.data.hidden + "当前状态2")
    var that=this;
    if (this.data.Crlcleisfinish) {
      mapapp.getScale({
        success:function(res){
          var scale=res.scale;
          console.log("这是当前的缩放等级"+scale);
          var nowscale = scale + 1
          console.log("这是当前的缩放等级+2" + nowscale);
          that.setData({
            scale: scale,
            Crlcleisfinish: false,
            markerbechange: 1
          },
          ()=>{
            that.getCrlcle();
          }
          )
          console.log("点击后的半径" + that.data.nowradius)
    //首先清空原来的圆
    var clearCircles = [];
          that.setData({
      circles: clearCircles,
    });
    //计算当前地图缩放级别是否过小或者过大
      var frequency=0;
    while (true) {
      frequency = frequency+1;
      if (frequency>50){
        console.log("===========超过50次退出==============")
        frequency=0;
        break;
      }
      console.log("当前的地图半径" + that.data.nowradius)
      console.log("当前的选择画圆的半径" + that.data.drawingnumberKM)
      if (that.data.drawingnumberKM == 0) {
        var thescale = 15;
        frequency = 0;
        that.setData({
          scale: thescale
        })
        break;
      } else if (that.data.nowradius < that.data.drawingnumberKM) {
        var thescale = that.data.scale - 1;
        var thenowradius = that.data.nowradius * 2;
        that.setData({
          scale: thescale,
          nowradius: thenowradius
        })
      } else if (that.data.nowradius > that.data.drawingnumberKM * 2) {
        var thescale = that.data.scale + 1;
        var thenowradius = that.data.nowradius / 2;
        that.setData({
          scale: thescale,
          nowradius: thenowradius
        })
      } else {
        frequency = 0;
        break;
      }

    }

    //定义一个圆
    var drawCircles = [{
      latitude: that.data.markerlatitude,
      longitude: that.data.markerlongitude,
      color: '#FF0000DD',
      fillColor: '#7cb5ec88',
      //半径为M
      radius: that.data.drawingnumber,
      strokeWidth: 1
    }]
    //将当前中心点定位到画圆的marker
          if (that.data.drawingnumberKM==0){
            that.setData({
        hidden: false,
        visible: false,
        buttonhidden: true,
        localhidden: false,
        circles: drawCircles,
        longitude: that.data.markerlongitude,
        latitude: that.data.markerlatitude
      });
    }
    else{
            that.setData({
        hidden: false,
        visible: false,
        buttonhidden: false,
        localhidden: true,
        circles: drawCircles,
              longitude: that.data.markerlongitude,
              latitude: that.data.markerlatitude
      });
    }


        }
      })


//if的结尾符
    }

    


  },
  //点击取消关闭画圆选择
  handleCloseCancel() {
    this.setData({
      hidden: false,
      visible: false,
      Crlcleisfinish:false
    });
    // console.log(this.data.drawingnumber+"取消关闭");
  },
  //监听圆输入框的范围大小
  drawingnumberchange({
    detail
  }) {
    this.setData({
      drawingnumberKM: detail.value,
      drawingnumber: detail.value * 1000
    })
  },

//抽屉遮罩层'取消'关闭
  drawerclose(){
  this.setData({
    drawervisible:false
  })
  },
  //抽屉遮罩层'确定'关闭
  drawerclose() {
    this.setData({
      drawervisible: false
    })
  },

  //计算当前屏幕的半径
  getCrlcle() {
    var that = this;
    var mapradius1 = 0;
    mapapp = wx.createMapContext('map')
    mapapp.getRegion({
      success: function(res) {
        let lng1 = res.northeast.longitude;
        let lat1 = res.northeast.latitude;
        let lng2 = res.southwest.longitude;
        let lat2 = res.southwest.latitude;
        let longitude = lng1 - lng2;
        let latitude = lat1 - lat2;
        let flag = longitude > latitude ? true : false;
        let radius = 0;
        //计算得到短边,除2得到半径,*0.8优化显示,让圈圈只占界面的80%
        if (flag) {
          radius = getDistance(lng1, lat1, lng1, lat2) / 2 * 0.8;
        } else {
          radius = getDistance(lng1, lat1, lng2, lat1) / 2 * 0.8;
        }
        mapradius1 = radius;
        console.log(radius+" 当前地图的半径")
        that.setData({
          nowradius: radius,
          Crlcleisfinish:true
        })
        var allmarkers = that.data.markerseeion;
        //如果不是应急力量(人员),则打开画圆
        for (var i = 0; i < allmarkers.length; i++) {
          if (allmarkers[i].id == that.data.markere.markerId) {
            if (allmarkers[i].type != 3) {
              if(that.data.markerbechange==0){
              that.setData({
                hidden: true,
                visible: true,
                markerlongitude: allmarkers[i].longitude,
                markerlatitude: allmarkers[i].latitude
              })
              }
              else{

              }
            }
          }
        }

      },
    });

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

map.json代码:

{
  "usingComponents": {
    "i-modal": "../../dist/modal/index",
    "i-input-number": "../../dist/input-number/index",
    "i-drawer": "../../dist/drawer/index",
    "i-button": "../../dist/button/index"
  }
}

map.wxml代码:

<!--pages/map/map.wxml-->
<!--pages/map/map.wxml-->
<view>
<!-- <view>地图展示</view> -->
<map hidden="{{hidden}}" id="map" style="width: 100%"  class="container" longitude="{{longitude}}" latitude="{{latitude}}" bindmarkertap="markertap" show-location="true" 
markers="{{markers}}"  circles="{{circles}}" bindregionchange="regionchange" 
scale="{{scale}}" wx:if="{{mapload}}" ></map>
<i-modal title="选择画圆半径(单位为KM)" visible="{{ visible }}"  
  bind:ok="handleCloseOK" bind:cancel="handleCloseCancel">
   <view style="padding: 16px">
        <i-input-number value="{{ drawingnumberKM }}" min="0" max="60" bindchange="drawingnumberchange" />
    </view>
</i-modal>
<view class="mapbutton" >
<view hidden="{{buttonhidden}}">
<i-button bind:click="handleClick" type="primary">选择人员</i-button>
</view>
<view class="localin" hidden="{{localhidden}}">
<view class="local">当前位置</view>
<view class="place">{{localplace}}</view>
</view>
</view>
</view>

map.wxss代码:

//如有需要可自行增加样式
//此样式必须存在,否则会导致地图显示失败
.container {
height: 90vh
} 
.mapbutton{
height: 7vh
}
::-webkit-scrollbar {
display: none;
}
.local{
  font-weight: bold;
   font-size: 23px;
   margin-left: 2px
}
.place{
  padding-top: 3px;
  color: #8a8a8a;
  font-size: 13px;
  margin-left: 2px
}

以上为具体实现,如有问题,欢迎各位大佬指教与交流。

附qq群:535564936

2017-01-04 12:04:16 u010635353 阅读数 12890
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27856 人正在学习 去看看 秦子恒

功能点:地图
本文基于微信小程序公测版,IDE:微信开发者工具 0.11.122100

今天打算继续写一下这个系列的文章,因为17年1月9号微信小程序就要正式上线了,为了赶这波热潮,打算把本系列上篇文章的demo,《附近三公里》当做一个正式版发布。

然而悲催的事情总是这么多,打开工具的时候,发现微信做了几次升级,而我们之前跑的好好的项目,个别功能居然跑不起来了,没办法,继续采坑吧,这里先介绍一下这个版本上地图的变化。

如果看过我这个系列的文章的话,你可能还记着,在写上篇文章的时候,微信提供了一个js的方法,调用一下就直接打开了微信内置的地图,但是这个版本上,这个功能被改了!被改了!被改了!

这个版本(小程序刚出,有些东西难免会有改动,这里所讲的也只能说基于这个版本,至于下一个版本会不会改,谁都说不好)地图被抽出成一个组件map。这里不得不说一句,本版本的map,开放的功能接口还是太少,有很多效果都不能达到。


这里我修正一下,写这篇文章的时候,本文说的内容都没有问题,前文的demo用的是wx.openLoaction方法打开微信的内置地图,但是写本文的时候,这个方法不好用了。当时以为是微信的版本迭代把这个方法干掉了,但是在昨天我发现这个方法又好用了,现在想想可能是当时这个方法存在bug。

那就在这里简单说一下wx.openLoaction。这个方法提供了一系列的参数来打开微信的内置地图。

参数如下:

latitude: e.currentTarget.dataset.lat , // 纬度,范围为-90~90,负数表示南纬
longitude: e.currentTarget.dataset.lng, // 经度,范围为-180~180,负数表示西经
scale: 14, // 缩放比例
name: e.currentTarget.dataset.name, // 位置名
address: e.currentTarget.dataset.address, // 地址的详细说明

如上打开的地图可以显示当前定位位置和你传入的位置,并可以规划路线(这个目前是在ios中提供,android中并没有提供)和在第三方地图中打开。


组件 map

下面来自官方文档

这里写图片描述

我们可以通过设置中心经纬度来设置地图中心点。设置scale 来设置地图的缩放层级。markers,polyline,circles,都接受一个点的集合,来显示不同的样式。controls允许我们以相对布局的方式设定一系列的控件,并通过bindcontroltap属性绑定事件。

官方文档对各个属性都有很详细的介绍,请移步。

下面把我的demo中地图的page,贴出来给大家当一个例子,好好看看可以避免很多我踩过的坑。

<!-- map.wxml -->
<map 
    id="map" 
    longitude="{{lng}}" 
    latitude="{{lat}}" 
    scale="14" 
    show-location="{{true}}"
    markers="{{markers}}" 
    bindmarkertap="markertap" 
    polyline="{{polyline}}" 
    bindregionchange="regionchange" 
    show-location style="width: 100%; position:absolute;top:0;bottom:0;height:auto;">
</map>
// map.js
//获取应用实例
var app = getApp()
Page({
  data: {
    lng: 0,
    lat: 0
  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  onLoad: function (options) {

    this.setData({
      lng: app.globalData.longitude, // 全局属性,用来取定位坐标
      lat: app.globalData.latitude,
      markers: [{
        iconPath: "/image/03.png",
        id: 0,
        latitude: options.lat, // 页面初始化 options为页面跳转所带来的参数 
        longitude: options.lng,
        width: 20,
        height: 20
      }],
      polyline: [{
      points: [{
          longitude: app.globalData.longitude,
          latitude: app.globalData.latitude
        }, {
          longitude: options.lng,
          latitude: options.lat
        }],
        color: "#FF0000DD",
        width: 20,
        dottedLine: true
      }]
    })
  }
})

这个页面本来笔者是打算做一个导航的,前一个页面传进来一个坐标和自己的定位坐标做一个路线的规划,但是map 并没有给我们提供这个接口,唯一搭点边的只有 polyline 属性,但是,这个属性连起来的是直线!是直线!是直线!你不能指望着你的客户,拿着你的小程序,在地图上按直线给过去吧。

后来,我有研究了一下用js版的百度地图嵌套,发现然并卵,可能笔者功力不够,没找到怎么把百度的js引到小程序里面,所以这个功能并不是很好用。

2019-03-17 11:41:58 Lyj1010 阅读数 203
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27856 人正在学习 去看看 秦子恒

在小程序中使用个性化地图

小程序中的map组件 :官方文档中的map介绍

登录“微信小程序”,在小程序后台中,“开发”->“开发者工具”->“腾讯位置服务”申请开通。具体步骤参考 《小程序个性地图使用指南》

小程序个性地图的设置参考: 小程序Javascript SDK。在此获取 qqmap-wx-jssdk.min.js 文件。

遇到的问题

微信小程序的map组件的层级是最高的,当你希望在map 组件之上显示其他的标签,在模拟器上是可以的,但是显示在手机上,就只有map组件了。不是没有渲染,而是被map组件覆盖了, 因为在小程序中,map组件的优先级是最高的,即使你使用了 z-index 也无济于事。

解决方法:

微信小程序为我们提供了 cover-view 组件,可覆盖的原生组件有 map , video ,canvas , camera ,live-player , live-pusher。

当把标签换为 cover-view 后,的确能显示在 map 组件之上。但是当需求是希望在map组件上显示一个 搜索框 时,问题又来了。因为在 cover-view 中只支持嵌套 cover-view ,cover-image ,button。

而希望显示 input ,会报如下错误:

解决思路:

在 cover-view 下写 input 标签。

将 cover-view 的高度和 input 的高度相同(假如为50px),在为 input 设置 margin-top:50px(即 cover-view 和 input 的高度),这样就会显示重叠的效果。

将 cover-view 标签中的内容和 input 中的 value 值进行绑定,即使用同一个数据,这样当用户输入需要搜素的地方时,这两个标签的内容就会同步。 

关键代码:

.wxml

<cover-view id='searchDiv'>
  <!-- 输入框,通过将 cover-view 中的内容和 input 标签的 value 设置相同的数据实现 -->
  <cover-view  bindtap='tapInput'>
    <cover-view class='text'>{{key || "搜周边"}}</cover-view>
    <input type="text" class='search_input' wx:value="{{key}}" placeholder='搜周边' focus='{{inputFocus}}' confirm-type="done" bindinput="set_key" bindblur='blurInput'/>
  </cover-view>
  <!-- 搜索图片 -->
  <cover-view  catchtap='search_key' class='search_icon' >
    <cover-image src='/images/map/search.png'></cover-image>
  </cover-view>
</cover-view>

.wxss

#searchDiv{
  top: 5px;
  width: 80%;
  margin: 0 10%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  box-shadow: 0px 0px 5px #E0E3E4; 
  position: fixed;
}
#searchDiv .text,#searchDiv .search_input,#searchDiv .search_icon{
  height: 50px;
  line-height: 50px;
}
#searchDiv .text{
  margin-left: 20px;
}
#searchDiv .search_input{
  margin-left: 20px;
  /* 使视觉上和text保持一致 */
  margin-top: -50px;
}
#searchDiv .search_icon{
  display: inline-block;
  top: 0;
  position: absolute;
  right: 0px;
}
#searchDiv .search_icon cover-image{
  width: 30px;
  height: 30px;
  padding: 10px;
}

 .js

tapInput() {
  this.setData({
    // 为 input 设置获取焦点
    inputFocus: true
  });
},
// input 失去焦点后将 input 的输入内容给 cover-view
blurInput(e) {
  this.setData({
    key: e.detail.value
  });
}

以上是自己练习时遇到的问题和解决方法,下面附上微信小程序调用 map 组件的完整代码。

微信小程序调用 map 组件的完整代码

map.wxml

<view class='maps'>
  <map
    id="map"
    longitude="{{longt}}"
    latitude="{{lat}}"
    scale="16"
    controls="{{controls}}"
    bindcontroltap="controltap"
    markers="{{markers}}"
    bindmarkertap="markertap"
    polyline="{{polyline}}"
    bindregionchange="regionchange"
    show-location
    show-compass="true"
  ></map>
  
  <cover-view id='searchDiv'>
    <!-- 输入框,通过将 cover-view 的内容和 input 标签的value 绑定相同的 data 实现 -->
    <cover-view  bindtap='tapInput'>
      <cover-view class='text'>{{key || "搜周边"}}</cover-view>
      <input type="text" class='search_input' wx:value="{{key}}" placeholder='搜周边' focus='{{inputFocus}}' confirm-type="done" bindinput="set_key" bindblur='blurInput'/>
    </cover-view>
    <!-- 搜索图片 -->
    <cover-view  catchtap='search_key' class='search_icon' >
      <cover-image src='/images/map/search.png'></cover-image>
    </cover-view>
  </cover-view>
</view>

map.wxss

#searchDiv{
  top: 5px;
  width: 80%;
  margin: 0 10%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  box-shadow: 0px 0px 5px #E0E3E4; 
  position: fixed;
}
#searchDiv .text,#searchDiv .search_input,#searchDiv .search_icon{
  height: 50px;
  line-height: 50px;
}
#searchDiv .text{
  margin-left: 20px;
}
#searchDiv .search_input{
  margin-left: 20px;
  /* 使视觉上和text保持一致 */
  margin-top: -50px;
}
#searchDiv .search_icon{
  display: inline-block;
  top: 0;
  position: absolute;
  right: 0px;
}
#searchDiv .search_icon cover-image{
  width: 30px;
  height: 30px;
  padding: 10px;
}
#map{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

map.js

// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap/qqmap-wx-jssdk.min.js');

// 实例化API核心类
var qqmapsdk = new QQMapWX({
  // 登录 小程序后台,在腾讯位置服务中获取 key ,并在此处的key值中写入你的key
  key: '...' // 必填
});

Page({
  data: {
    inputFocus: false,
    key:"",
    searchRes:[],
    longt: 114.68308,
    lat: 33.63497,
    markers: [ {
        iconPath: '/images/map/position.png',
        id: -1,
        latitude: 33.63497,
        longitude: 114.68308,
        width: 30,
        height: 30,
        title: '周口师范学院'
    }],
    polyline: [{
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 113.324520,
        latitude: 23.21229
      }],
      color: '#FF0000DD',
      width: 2,
      dottedLine: true
    }]
  },
  regionchange(e) {
    // console.log(e.type)
  },
  markertap(e) {
    // console.log(e.markerId)
  },
  controltap(e) {
    // console.log(e.controlId)
  },
  set_key:function(e){
    this.setData({
      key: e.detail.value
    })
  },// 事件触发,调用接口
  search_key: function () {
    var _this = this;
    console.log(this.data.key);
    if (this.data.key == '' || this.data.key == "搜周边"){
      wx.showToast({
        icon: 'none',
        title: '请输入您要游览的地方'
      });
      return;
    }
    // 调用接口
    qqmapsdk.search({
      keyword: _this.data.key,  //搜索关键词
      location: '33.625607,114.64202',  //设置周边搜索中心点
      success: function (res) { //搜索成功后的回调
        if(res.data.length == 0){
          wx.showToast({
            icon:'none',
            title: '未搜索到您游览的地方'
          });
          return;
        }
        var mks = []
        for (var i = 0; i < res.data.length; i++) {
          mks.push({ // 获取返回结果,放到mks数组中
            title: res.data[i].title,
            id: res.data[i].id,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng,
            iconPath: '/images/map/position.png', //图标路径
            width: 30,
            height: 30
          })
        }
        _this.setData({ 
          markers: mks, //设置markers属性,将搜索结果显示在地图中
          lat:mks[0].latitude, // 设置地图中心点的经纬度
          longt:mks[0].longitude
        })
      },
      fail: function (res) {
        if (res.data.length == 0) {
          wx.showToast({
            icon: 'none',
            title: '搜索失败'
          });
          return;
        }
      },
      complete: function (res) {
        console.log(res);
      }
    });
  },
  tapInput() {
    this.setData({
      // 为 input 设置获取焦点
      inputFocus: true
    });
  },
  // input 失去焦点后将 input 的输入内容给 cover-view
  blurInput(e) {
    this.setData({
      key: e.detail.value
    });
  }
})

 

2019-06-28 15:30:19 qq_41808386 阅读数 836
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27856 人正在学习 去看看 秦子恒

下载微信开发者工具

注册开发者 获取appid 和 appSecret 

获取code 发送后台获取openid 和sessionKey(获取用户信息)

用sessionKey iv  encrypetdData 传到后台进行解密 得到手机号

 

获取用户信息java代码

Map<String, String> params = new HashMap<String, String>();
    params.put("appid", appid);
    params.put("secret", appSecret);
    params.put("grant_type", grantType);
    params.put("js_code", code);

    String resultStr = HttpUtil.httpsGet(this.code2SessionUrl, params);

    Map<String, Object> result = JsonUtils.parseJSON2Map(resultStr);

    if (result.containsKey("errcode")) {
        Integer errorCode = (Integer) result.get("errcode");
        throw new ServiceException(errorCode.toString());
    }

    String openId = (String) result.get("openid");
    String sessionKey = (String) result.get("session_key");


    // 每次获取新的sessionKey后更新缓存
    this.setSessionKeyCache(openId, sessionKey);

    MiniProgramLoginInfo info = new MiniProgramLoginInfo();

    info.setOpenId(openId);

    Member member = this.getMemberByOpenId(openId);

    if (null != member) {
        Long memberId = member.getId();
        info.setMemberId(memberId.toString());
        info.setMobileNo(member.getMobile());
    }

    return info;
}

 

获取用户手机号java代码

private JSONObject decryptData(String encryptedData, String sessionKey, String iv) throws Exception {
    byte[] dataByte = Base64.decodeBase64(encryptedData);
    // 加密秘钥
    byte[] keyByte = Base64.decodeBase64(sessionKey);
    // 偏移量
    byte[] ivByte = Base64.decodeBase64(iv);
    try {
        // 如果密钥不足16位,那么就补足.  这个if 中的内容很重要
        int base = 16;
        if (keyByte.length % base != 0) {
            int groups = keyByte.length / base + (keyByte.length % base != 0 ? 1 : 0);
            byte[] temp = new byte[groups * base];
            Arrays.fill(temp, (byte) 0);
            System.arraycopy(keyByte, 0, temp, 0, keyByte.length);
            keyByte = temp;
        }
        // 初始化
        // 初始化
        Security.addProvider(new BouncyCastleProvider());
        Cipher cipher = Cipher.getInstance("AES/CBC/PKCS5Padding");
        SecretKeySpec spec = new SecretKeySpec(keyByte, "AES");
        AlgorithmParameters parameters = AlgorithmParameters.getInstance("AES");
        parameters.init(new IvParameterSpec(ivByte));
        cipher.init(Cipher.DECRYPT_MODE, spec, parameters);// 初始化
        byte[] resultByte = cipher.doFinal(dataByte);
        if (null != resultByte && resultByte.length > 0) {
            String result = new String(resultByte, "UTF-8");
            return JSONObject.fromObject(result);
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
    return null;
}

获取手机号时  个人开发者是没有权限的  encryptedData 和 iv 发送到后台的数据如果带 + 号会被解析成空格 所以要进行转换再解密 

没有更多推荐了,返回首页