2018-07-13 00:19:30 Feihongxiansen 阅读数 3425
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

一、在开发微信小程序地图的过程中,有这样一个需求,用户发表祝福语,然后存入数据库,可以在地图上显示用户头像并且点击用户头像时显示祝福语。

二、自己在开发时遇到的问题:

1.微信头像是网络图片,而地图的markers中的iconPath只能使用本地图片

2.将网络图片缓存到本地,但是因为小程序的异步执行导致图片不能显示

三、解决办法:

1.解决微信头像是网络图片的问题,可以使用wx.downloadFile({})方法来将头像缓存到本地,然后再将本地路径赋给iconPath即可,第一个不能使用网络图片的问题解决。

2.异步请求导致本地缓存的图片不能在地图上显示,我的解决办法是,先通过request请求获取到祝福语后,用for循环赋值给markers,iconPath路径填写一个本地路径,同时调用一个方法,获取当前用户头像的本地缓存路径,获取成功后赋值给markers中每个对象的iconPath,所以一般来说,地图上的图片会有切换,首先显示的是本地的统一的图片,经过一段时间的请求后,图片一个个变为用户头像。

四、相关操作代码

getBlessing: function(){
    var that = this;
    var getUserPic = function (pic_url,i) {
      let cachePath;
      if(pic_url==null || pic_url=='') return;
      wx.downloadFile({
        url: pic_url,
        success: (pathInfo) => {
          // pathInfo.path 这是下载成的缓存链接,模拟器marker有时不支持http开头,真机不影响,得去掉http:/
          cachePath = pathInfo.tempFilePath.replace("http:/", '').replace("https:/", '')//真机中无需replace,都支持,
          var mak = "markers[" + i +"].iconPath";
          that.setData({
            [mak]: cachePath
          })
        }
      })
      
    }
  
    wx.request({
      url: '你的后台请求地址',
      method: 'POST',
      success: function (res) {
        var list = res.data.list;
        var tempArr = [];
        var includeArr = [];
        var item = {};
        var includeItem = {};
        for (var i = 0; i < list.length; i++) {
          var pic = getUserPic(list[i].user.user_pic,i);
          item = {
            iconPath: '/images/icon/small-logo.png',
            id: list[i].id,
            latitude: list[i].latitude,
            longitude: list[i].longitude,
            width: 30,
            height: 30,
            alpha: 0.8,
            callout: {
              content: list[i].content,
              color: '#FFFFFF',
              fontSize: 10,
              borderRadius: 10,
              bgColor: '#F44336',
              padding: 5,
              display: 'BYCLICK',//'BYCLICK':点击显示; 'ALWAYS':常显
            }
          }

          includeItem = {
            latitude: list[i].latitude,
            longitude: list[i].longitude,
          }
          tempArr.push(item);
          includeArr.push(includeItem);
        }
        that.setData({
          markers: tempArr,
          includepoints: includeArr,
          count: res.data.count
        })
        console.log(that.data.markers)
      }
    })
  },
五、效果截图


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

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

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

正在做一个项目,要用微信小程序上传自己的实时位置,然后再地图界面显示一条路径,思路是点击按钮开始上传,再点击一下按钮停止上传。位置用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 阅读数 2200
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

今天说说微信网页开发中一下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代码中。

2017-11-15 16:35:47 zhongguohaoshaonian 阅读数 3190
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

微信公众号内调用微信内置地图,在安卓上可以正常显示,但是在ios上显示一片空白,而且报错:fail invalid_coordinate
解决方法:
微信小程序默认将组件上绑定的参数都当作字符串了,所以认为坐标点不正确,强制转换成number类型即可。
这里写图片描述

2017-11-29 20:31:44 huali_1995 阅读数 6777
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

1、开发过程中,莫名markers中的图片无法显示,折腾很久发现图片
iconPath:”../../resource/images/mymarker.png”中不能有空格,之前写成
iconPath:”../../resource / images / mymarker.png”就无报错无图片

wc_markers:[{
      id:20,
      latitude: 31.243567,
      longitude: 121.438834,
      width: 22,
      height:22,
      iconPath:"../../resource/images/mymarker.png",
      callout:{
      content:"叶家宅路停车场" ,
      color: '#f24f3b',
      fontSize: 12,
      borderRadius: 10,
      bgColor: "#FFFFFF",
      padding: 2,
      display: 'ALWAYS'
    }]

2、一个我不仔细的问题
latitude: 31.243567,
longitude: 121.438834,
额mmmm,我两个数据写反了,所以图片不知道放到地球的哪个洋里去里,当然显示不出啦



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