2017-09-06 16:44:14 ulike_MFY 阅读数 3323
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

正在做一个项目,要用微信小程序上传自己的实时位置,然后再地图界面显示一条路径,思路是点击按钮开始上传,再点击一下按钮停止上传。位置用api获取后存到一个数组里,然后再把数组定时赋给markers,在地图上渲染出来。
wxml代码:

 <view class="container">

  <view >
    <view >
      <map
        style="width: 100%; height: 300px;"
        latitude="{{latitude}}"
        longitude="{{longitude}}"
        markers="{{markers}}"
        polyline="{{poliline}}"
        >
      </map>
    </view>
    <button catchtap="path">{{path}}</button> 
    <button bindtap="location">上传位置</button>
  </view>


</view> 

js中按钮点击事件代码:

path: function () {
    var that = this
    if (this.data.path == "上传路径") {
      this.setData({
        path: "停止上传"
      })
      var i = 0,
      interval = setInterval(function () {  
        i = i + 0.001,    
        wx.getLocation({
          type: 'wgs84',

          success: function (res) {
            var latitude = res.latitude
            var longitude = res.longitude
            var speed = res.speed
            var accuracy = res.accuracy
            path.push({ latitude: latitude, longitude: longitude + i, iconPath:'../../images/location.png'})
            that.setData({
              markers:path
            });
          },

          fail: function (res) {
            console.log(res)
          }
        })
        i=i+0.0001;
      }, 5000) //循环时间 这里是5秒 
    } else {
      this.setData({
        path: "上传路径"
      })
      clearInterval(interval)

    }
  },

这里用i每次增加0.001来模拟人走路。
发现小程序的IDE有个BUG,路径的小标记物不能显示,但是在真机上可以。
界面:
markers的初始值可以完美显示
点击上传路径后的效果图:
这里写图片描述

最后一个没有解决的问题,困扰了我很久,为什么取消interval总是不成功呢,点击后还是一直更新路径!

2018-01-18 09:14:52 DickyQie 阅读数 2122
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

今天说说微信网页开发中一下JS的功能,分享一下,希望对各位有所帮助。

前提:要有公众号,和通过微信认证,绑定域名,得到相应信息,appid,appsecret等。

微信开发文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

来看看效果图:

 

1:引入JS文件

2:config接口注入权限验证配置

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
 wx.config({
        debug: false,
        appId: appid,
        timestamp: timestamp,
        nonceStr: noncestr,
        signature: signature,
        jsApiList: [
              'openLocation',
              'chooseImage'
        ]
    });


注:所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,

目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

 

html中点击按钮的JS:

  // 定位
    $("#location").click(function () {
            wx.getLocation({
                type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
                success: function (res) {
                    var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
                    var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
                    var speed = res.speed; // 速度,以米/每秒计
                    var accuracy = res.accuracy; // 位置精度
                    DSXUI.success('纬度'+latitude);
                    $("#qrcodevalue").text('纬度'+latitude+" ---经度"+longitude);
                }
            });
        });
      // 地图
        $("#btn1").click(function () {
            wx.openLocation({
                latitude: 26.581379, // 纬度,浮点数,范围为90 ~ -90
                longitude: 104.86983, // 经度,浮点数,范围为180 ~ -180。
                name: '贵州省贵阳市', // 位置名
                address: '详情地址', // 地址详情说明
                scale: 22, // 地图缩放级别,整形值,范围从1~28。默认为最大
                infoUrl: 'http://h5.zhangwoo.cn/?m=weixin&c=wxtest&a=share' // 在查看位置界面底部显示的超链接,可点击跳转,没用
            });
        });
      // 微信选图
         $("#btn2").click(function () {
             wx.chooseImage({
                 count: 3, // 默认9
                 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
                 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
                 success: function (res) {
                     var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
                     $("#qrcodevalue").text('照片的本地ID列表'+localIds);
                 }
             });
         });

     注:我用到的参数  appid,appsecret等信息在php代码中。

2019-06-10 14:27:45 qq_36622149 阅读数 398
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

在微信开发中遇到了安卓正常显示内置地图,但是ios苹果系统不显示,经过排查是因为ios系统调用网页时的经度和纬度必须使用Number类型的,但是安卓的可以.

 wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: [[${wxConfig.appId}]] , // 必填,公众号的唯一标识
        timestamp:[[${wxConfig.timestamp}]] , // 必填,生成签名的时间戳
        nonceStr: [[${wxConfig.nonceStr}]] , // 必填,生成签名的随机串
        signature: [[${wxConfig.signature}]] ,// 必填,签名
        jsApiList: ['checkJsApi', // 必填,需要使用的JS接口列表
            'openLocation',// 使用微信内置地图查看地理位置接口
            'getLocation']// 获取地理位置接口
    });
wx.ready(function(){
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
        wx.getLocation({
            type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
            success: function (res) {
               // var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
                //var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
               // gaoBegin(longitude,latitude);

                wx.openLocation({
                    latitude: Number([[${wxrouteneed.glatitude}]]), // 纬度,浮点数,范围为90 ~ -90
                    longitude: Number([[${wxrouteneed.glongitude}]]), // 经度,浮点数,范围为180 ~ -180。
                   // latitude: 31.846120131031, // 纬度,浮点数,范围为90 ~ -90
                   // longitude: 117.271610135544, // 经度,浮点数,范围为180 ~ -180。
                    name: [[${wxrouteneed.garagename}]], // 位置名
                    address: [[${wxrouteneed.address}]], // 地址详情说明 address
                    scale: 18, // 地图缩放级别,整形值,范围从1~28。默认为最大
                    infoUrl: 'http://www.cetcbw.com' // 在查看位置界面底部显示的超链接,可点击跳转
                });


            },
            fail:function (res) {
                alert("对不起,您不能选择拒绝定位:"+res);
            }
        });


    });

重要的是上面的代码经度和纬度的前面加上了Number();

2018-07-24 09:53:02 c1149418436 阅读数 2724
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

相关环境:微信公众号+百度地图

需求:需要在页面上实现,点击落图按钮——》定位当前位置(获取经纬度)——》通过百度地图显示

内容:

做这个功能之前,并未接触过百度地图还有微信公众号开发之类的,所以即便突击学习了一下,也不太了解。

1.微信接口定位+百度地图显示位置(成功)

开始做的时候,由于微信只是刚接触,虽然知道微信有定位的接口,但是还是先去尝试了百度地图的定位和h5的定位,结果当然是失败(后面会总结一下失败的经验),最后尝试的使用微信公众号定位接口获取当前坐标+百度地图显示位置的方式才成功搞定,

 //这就是微信获取地理位置的接口,官方文档,百度资料一大堆
    function getwxlocal(){
        wx.getLocation({
            success: function (res) {
                var point=new BMap.Point(res.longitude , res.latitude);
                //使用百度接口对h5定位坐标进行坐标转换0-》4
                BMap.Convertor.translate(point,0,translateCallback);
                //alert("获取地理位置成功,经纬度为:(" + res.latitude + "," + res.longitude + ")" );
                //alert(JSON.stringify(res));
            },
            cancel: function (res) {
              $.alert('用户拒绝授权获取地理位置',"提示");
            } 
         });
    }

//坐标转换完之后的回调函数方法
    function translateCallback(point) {
        initMap(point.lng,point.lat);//用得到的经纬度初始化地图
  }

2.百度地图的api进行实时定位(失败)

    测试遇到了一些问题:

  (1)定位位置偏移严重(室内偏移-正常)

   虽然不太了解地图,但是一看到功能需求的时候,就想到了使用百度地图的api进行定位,第一次点击按钮,垮。。。成功了,可以定位,但是偏的几百米,偏了几百米,感觉挺严重的,拼命研究各种方法,什么百度的纠偏接口,纠偏算法,一点用也没有。

     咋办啊,愁死了,跟一个同事说起的时候,答案居然是正常的,手机的定位的基于卫星还有基站的什么的(了解不多),所以在室内进行测试的时候,偏移是很正常的,好吧,虽然很郁闷,但是知道原因了。后来在室外测试确实没问题,这个问题算是解决了。

(2)无法进行第二次定位(app才有实时定位),(但是如果打开手机上的地图app,后台运行,公众号内的实时定位就完全没问题了)

  一开始定位完,没发现问题,但是在回家的路上,我开着微信,打开网页,按钮那么一按,问题出来了,咋还是公司的位置,一直刷一直刷,没有用还是公司的位置,没办法,放弃了,打算回公司再看一下情况,过了几个小时,心血来潮,定位按钮一按,成功了。要喷血啊,这是咋回事,开始疯狂查资料,百度没找到,谷歌没找到,每次定位完,都要好久才可以再定位一次,这显然是不行的。找来找去,在只言片语中发现,一句话,百度地图只支持在app程序中实现实时定位,在网页上只能是过好久才能定位一次(当然我现在也不知道真的假的?),反正我是实现不了,姑且当他是真的。那使用百度地图实现实时定位的方法,就没有用了。(本方法宣告失败)

百度定位代码 (定位一次后,许久才能定位一次)//百度定位当前位置 --与h5定位类似(根据h5定位做的)
    var geolocation = new BMap.Geolocation();
    function getLocal(){
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                initMap(r.point.lng,r.point.lat);//定位完获取经纬度,初始化地图
            } else {
                alert('failed'+this.getStatus());
            }        
        },{enableHighAccuracy: true})
    } 

3.h5定位实现实时定位(失败)

百度地图实时定位的方法失败后,就开始找其他方法了,百度了一下,h5定位的方法例子一大堆,高兴了一下,还以为有解决方案了,但是最终还是失望了。

由于h5的定位和百度定位很相似(网上是说百度定位是根据h5定位做的),反正是失败了,与百度定位一样过好久才能实现一次定位,(一样也是打开手机上的地图app,实时定位就可以实现)

//h5定位代码

function getLocation() {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition, showError);

} else {

       str= "Geolocation is not supported by this browser.";//浏览器不支持定位

}   }

function showPosition(position) {

      str = "Latitude: " + position.coords.latitude+ "<br />Longitude: " + position.coords.longitude;//经纬度

}

function showError(error) {

switch (error.code) {

case error.PERMISSION_DENIED:

    str= "User denied the request for Geolocation.";//用户不允许地理定位

    break;

case error.POSITION_UNAVAILABLE:

    str= "Location information is unavailable.";//无法获取当前位置

    break;

case error.TIMEOUT:

    str= "The request to get user location timed out.";//操作超时

    break;

case error.UNKNOWN_ERROR:

    str= "An unknown error occurred.";//未知错误

    break;

}   }

4.h5跟踪定位实现实时定位(尝试失败,勉强可一用)

  百度和h5定位失败后,突发奇想使用h5的跟踪定位实现,跟踪定位大概每过几十秒自动定位一次,但是我要的功能是点击按钮采取定位,所以想通过跟踪定位看能不能实现,大概想了几个方案:

(1)点击定位按钮,删除当前跟踪定位,重新建一个,然后定位,但是跟普通定位一样失败了,还是只能几十秒定位一次

(2)跟踪定位在后台运行,每定位一次,把坐标存到一个变量里面,点击定位按钮的时候,直接去取坐标,然后定位显示到百度地图上,当然这种方法虽然还是几十秒才能定位一次,但是在需要的时候去取坐标,且几十秒的时间,人大概也移动不了多远,满足基本的需求是足够了,但是想一想还是排除,感觉用在实时定位上还是很不合适。

//h5跟踪定位代码
    function getLocal(){
        if(loc!=null){  loc=null;  }
        loc=window.navigator.geolocation;
        if (loc) {
            if(watchID!=null){ watchID=null; }
            watchID=loc.watchPosition(showPosition,showError);//h5跟踪定位
             if(currentID!=null){ currentID==null;   }
            //h5当前位置定位
            currentID=loc.getCurrentPosition(showPosition,showError,{provider:'baidu'});  
        }else {
            alert("该浏览器不支持定位。");
        } 
    } 

2019-01-07 16:17:01 weixin_42980713 阅读数 224
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

微信开发中,图灵机器人回复、天气、翻译、美食、地图、二维码功能,随处可见。大小网站、APP都在运用这项技术在项目中。今天简单介绍一下图灵机器人回复,天气接口调用、翻译接口,希望对朋友们有用。

效果案例:

思路很简单,首先,token要一致,然后在浏览器上跑起来, 回到微信平台配置后进行提交,显示配置成功,则OK!配置失败,检查token和代码规范,如果还不行,百度上有很多解决办法,不过有的没有用。可以试一试不用框架可不可以执行。

下面不多说,上代码:

<?php
/**
  * wechat php test
  */
 
//define your token
define("TOKEN","token可以随意些");//定义常量token值,与微信中的值进行对比
$wechatObj = new wechatCallbackapiTest();//实例化下面的类
//判断微信传过来的值是否存在
if(!isset($_GET['echostr'])){
//如果微信传过来的值存在执行下面方法
$wechatObj->responseMsg();
}else{
//不存在执行下面方法
$wechatObj->valid();
}
//$wechatObj->valid();
 //封装文件类
class wechatCallbackapiTest
{
    //定义微信传值不存在执行的方法,既然不存在值,那当然也就不需要返回什么了
    public function valid()
    {
        $echoStr = $_GET["echostr"];
 
        //valid signature , option
        if($this->checkSignature()){
            echo $echoStr;
            exit;
        }
    }
  //定义微信有值执行的方法
    public function responseMsg()
    {
        //get post data, May be due to the different environments
        $postStr = file_get_contents('php://input');    //全局变量的信息    可以接收
 
        //extract post data
        if (!empty($postStr)){
                //如果$postStr不为空
                $postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);
                $RX_TYPE = trim($postObj->MsgType);
 
                switch($RX_TYPE)
                {
                    case "text":
                        $resultStr = $this->handleText($postObj);
                        break;
                    case "event":
                        $resultStr = $this->handleEvent($postObj);
                        break;
                    default:
                        $resultStr = "Unknow msg type: ".$RX_TYPE;
                        break;
                }
                echo $resultStr;
        }else {
            echo "";
            exit;
        }
    }
    //绑定图灵机器人,返回数据转化为微信使用的格式
    public function handleText($postObj)
    {
        $fromUsername = $postObj->FromUserName;
        $toUsername = $postObj->ToUserName;
        $keyword = trim($postObj->Content);
        $time = time();
        $textTpl = "<xml>
                    <ToUserName><![CDATA[%s]]></ToUserName>
                    <FromUserName><![CDATA[%s]]></FromUserName>
                    <CreateTime>%s</CreateTime>
                    <MsgType><![CDATA[%s]]></MsgType>
                    <Content><![CDATA[%s]]></Content>
                    <FuncFlag>0</FuncFlag>
                    </xml>";             
        if(!empty($keyword ))
        {
        	//主要内容--机器人---天气接口---
            $msgType = "text";
        	if($keyword=="博客"){
                $contentStr = "YFeng888的博客地址是:https://blog.csdn.net/weixin_42980713";
            }else if($keyword=="天气"){
                 //创建函数调用图灵机器人接口
                $url = "http://apis.haoservice.com/weather?cityname=北京&key=99ae8b89d4a14c0881c2ac64c831cdd6"; 
              $send_info = file_get_contents($url);
              $c = json_decode($send_info,true);
              $contentStr = "【".$c['result']['today']['city']."天气预报】\n"." ".$c['result']['today']['date_y']."时发布"."\n\n实时天气\n".$c['result']['today']['weather'].$c['result']['today']['temperature'].$c['result']['today']['wind']."\n\n温馨提示:".$c['result']['today']['dressing_advice']."\n\n明天\n".$c['result']['future'][1]['temperature']." \n\n后天".$c['result']['future'][2]['temperature']."\n";
          }elseif($keyword=="经典语录"){
             //创建函数调用图灵机器人接口
            $url="http://apis.haoservice.com/lifeservice/JingDianYulu/getTypes?key=你自己的key";
              $send_info = file_get_contents($url);
              $json = json_decode($send_info,true);
              $contentStr=$json['result'];
          }else{
            //翻译接口
            $url = "http://apis.haoservice.com/efficient/robot?info=$keyword&address=&key=你自己的key";
              $send_info = file_get_contents($url);
              $json = json_decode($send_info,true);
              $contentStr =$json['result']['text'];
               file_put_contents("haoyu.txt",$contenStr);//写入日志到haoyu.txt文件内
          }
           
            // $contentStr = "Welcome to wechat world!";
            $resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, $msgType, $contentStr);
            echo $resultStr;
        }else{
            echo "Input something...";
        }
    }

    public function handleEvent($object)
    {
        $contentStr = "";
        switch ($object->Event)
        {
            case "subscribe":
                $contentStr = "感谢您关注【最帅男人帮】"."\n"."微信号:shuaigege"."\n"."卓越锦绣,名城苏州,我们为您提供苏州本地生活指南,苏州相关信息查询,做最好的苏州微信平台。"."\n"."目前平台功能如下:"."\n"."【1】 查天气,如输入:苏州天气"."\n"."【2】 查公交,如输入:苏州公交178"."\n"."【3】 翻译,如输入:翻译I love you"."\n"."【4】 苏州信息查询,如输入:苏州观前街"."\n"."更多内容,敬请期待...";
                break;
            default :
                $contentStr = "Unknow Event: ".$object->Event;
                break;
        }
        $resultStr = $this->responseText($object, $contentStr);
        return $resultStr;
    }
    
    public function responseText($object, $content, $flag=0)
    {
        $textTpl = "<xml>
                    <ToUserName><![CDATA[%s]]></ToUserName>
                    <FromUserName><![CDATA[%s]]></FromUserName>
                    <CreateTime>%s</CreateTime>
                    <MsgType><![CDATA[text]]></MsgType>
                    <Content><![CDATA[%s]]></Content>
                    <FuncFlag>%d</FuncFlag>
                    </xml>";
        $resultStr = sprintf($textTpl, $object->FromUserName, $object->ToUserName, time(), $content, $flag);
        return $resultStr;
    }
 
    private function checkSignature()
    {
        $signature = $_GET["signature"];
        $timestamp = $_GET["timestamp"];
        $nonce = $_GET["nonce"];    
                
        $token = TOKEN;
        $tmpArr = array($token, $timestamp, $nonce);
        sort($tmpArr);
        $tmpStr = implode( $tmpArr );
        $tmpStr = sha1( $tmpStr );
        
        if( $tmpStr == $signature ){
            return true;
        }else{
            return false;
        }
    }
}
 
?>

ok,亲测可行!

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