2019-11-30 14:35:06 jlq_diligence 阅读数 19
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

微信开发者工具中,快速定位小程序样式问题,像浏览器中调试CSS一样,具体步骤如下:

2019-07-24 14:46:19 flysnownet 阅读数 21072
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

一般浏览器里鼠标在元素上右键点击审查元素或检查元素即可快速打开开发者工具并定位到该元素,但在微信开发者工具中不支持,

解决方法 点击 elements左边的 小鼠标 图片,然后在主页面点击元素即可快速定位

2019-03-09 14:54:05 Jonty1024 阅读数 520
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

使用TBS Studio进行微信公众号真机调试

目前在微信公众号开发中大家都很了解微信开发者工具,在早期的微信开发者工具中有移动调试功能,让手机通过代理的方式开通移动调试,但是最新版本的微信开发者工具中移除了移动调试功能。

 

image.png

 

在微信公众号开发的实际过程中,因为网络部署、证书等种种原因会引起某些手机兼容性问题,这时候微信开发者工具就爱莫能助了,如何解决真机调试的问题,那就必须借助TBS Studio。

TBS Studio是什么

TBS Studio是面向基于TBS的Web开发者和移动应用开发商(包括微信、手Q,三方App等)打造的开发服务整体解决方案,以提升广大开发者在真机环境下的开发效率,并帮助开发者分析和优化网页的设计,主要功能有网页Inspector调试,网页性能分析等。

TBS Studio在哪里

TBS Studio 下载

TBS Studio如何使用

  1. 下载安装。
    按照官方手册安装。
  2. 手机打开usb调试,连接到电脑

     

    image.png

     

    3.打开手机上的微信app并让微信保持在前台。
    4.打开TBS Studio,点击启动检测。

     

    image.png

  3. tbs弹出确认,点击确定。

     

    image.png

     

    6.设定tbs的调试状态,公众号里选择普通网页。

     

    image.png

  4. 使用微信扫二维码,根据提示操作,操作完成后重新开启微信app,打开要调试的公众号或h5链接。
    8点击tbs的启动调试,得到如下界面。(这里可能需要打开微信浏览器的TBS调试,方法是:微信打开这个网址 http://debugx5.qq.com/ ,选择“信息”→把TBS调试勾上)

     

     

     

    9.找到要调试的连接点击对应的inspect,打开开发者工具,剩下的就和电脑chrome一样了,这里操作界面是和手机同步的。

     

2019-04-19 10:35:34 weixin_43866709 阅读数 497
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

首先我们要制作一个微信小程序。
这里一定要注意微信开发者工具版本的问题,有一些API已经不支持了。

该微信小程序要有定位,添加单车,扫码解锁单车,支付等功能。

1.首先要去微信公众平台注册一个账号
https://mp.weixin.qq.com/

2.登录账号,完善信息(这里不再详细讲解),下载微信开发者工具

3.使用微信开发者工具创建一个小程序项目

这里只记录一下我写的代码(由于我并非擅长js,所以代码比较low,),详细的开发API再微信公众平台的小程序开发中都有非常详细的讲解和实例。

微信小程序代码:

pages/demo.wxml

 <view class='map'>
<map
  id="map"
  longitude="{{longitude}}"
  latitude="{{latitude}}"
  markers='{{markers}}'
  scale="18"
  polyline="{{polyline}}"
  bindregi"regionchange"
  show-location
  style="width: 100%; height: 100vh;"
></map>
<cover-view bindtap='location' class='location'>
  <cover-image src="/image/location.png" class='location_img'></cover-image>
</cover-view>
<cover-view bindtap='back' class='back'>
  <cover-image src="/image/img1.png" class='img1'></cover-image>
</cover-view>
<cover-view bindtap='qrcode' class='qrcode'>
  <cover-image src="/image/qrcode.png" class='qrcode_img'></cover-image>
</cover-view>
<cover-view bindtap='pay' class='pay'>
  <cover-image src="/image/pay.png" class='pay_img'></cover-image>
</cover-view>
<cover-view bindtap='bike' class='bike'>
  <cover-image src='/image/bike.png' class='bike_img'></cover-image>
</cover-view>
</view>

pages/demo.wxss

/* pages/demo/demo.wxss */
page{
  height: 100%;
  background: #eeeeee;
}
.map{
  position: relative;
}
.back{
  position: absolute;
  bottom:10rpx;
  left:20rpx;
}
.img1{width:100rpx;height:100rpx;}
.qrcode{
  position: absolute;
  bottom:20rpx;
  left:50%;
  margin-left:-110rpx;
}
.qrcode_img{width:250rpx;height:110rpx}
.pay{
  position: absolute;
  bottom:10rpx;
  right:10rpx;
}
.pay_img{width:110rpx;height: 110rpx;}
.location{
  position: absolute;
  top:44.1%;
  left:46.5%;
}
.location_img{width:50rpx;height: 80rpx;}
.bike{
  position: absolute;
  top:0%;
  left: 0%;
}
.bike_img{width:55rpx;height:65rpx;}

pages/demo.js

Page({
  data: {
    latitude:0,
    longitude:0,
    //显示的单车
    markers:[],
    // markers: [{
    //   iconPath: '/image/location.png',
    //   id: 0,
    //   latitude: this.lat,
    //   longitude: this.log,
    //   // longitude: 113.3245211,
    //   // latitude: 23.10229,
    //   width: 20,
    //   height: 30
    // }],
    polyline: [{
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 113.324520,
        latitude: 23.21229
      }],
      color: '#FF0000DD',
      width: 2,
      dottedLine: true
    }]
  },
  onLoad() {
    var that = this;

    //创建一个map上下文,如果想要调用地图相关的方法
    that.mapCtx = wx.createMapContext('map');

    //获取当前的位置信息
    wx.getLocation({
      //如果获取成功,会调用success
      success: function (res) {
       // console.log(res.latitude+"  "+res.longitude)
       var log=res.longitude;
       var lat=res.latitude;
        // console.log("纬度" + that.lat + "经度" + that.log)

        //查找附近的单车
        wx.request({
          url: "http://localhost:8888/bikes",
          method: 'GET',
          success: function (res) {
            const bikes = res.data.map((item) => {
              return {
                id: item.id,
                iconPath: "/image/bike.png",
                width: 30,
                height: 35,
                latitude: item.latitude,
                longitude: item.longitude
              };
            });
            // 修改data里面的markers
            that.setData({
              // iconPath: "/image/bike.png",
              // width: 5,
              // height: 8,
              latitude: lat,
              longitude: log,
              markers: bikes
            });
          }
        })

      }
    });
  },

  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  location(){
    console.log('location')
  },
  back() {
    this.mapCtx.moveToLocation();
    //console.log('back')
  },
  qrcode(){
    var that = this;
    //console.log('qrcode')
    //点击扫描按钮
    wx.scanCode({
      success: function (r) {
        //扫描成功获取二维码的信息
        var code = r.result;
        //console.log(r);
        //向后台发送请求
        wx.request({
          //method: 'POST',
          url: 'http://localhost:8888/bike', //仅为示例,并非真实的接口地址
          data: {
            qrCode: code,
            status:0,
            latitude: that.data.latitude,
            longitude: that.data.longitude
          },
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: function (res) {
            console.log(res.data)
          }
        })
      }
    })
  },
  pay(){
    console.log('pay')
  },

  bike(){
    var that = this;
    //console.log('bike')
    //添加车辆的按钮
    that.mapCtx.getCenterLocation({
      success: function (res) {
        var lat = res.latitude;
        var log = res.longitude;
        wx.request({
          url: "http://localhost:8888/bike",
          method: 'POST',
          data: {
            latitude: lat,
            longitude: log
          },
          success: function () {
            console.log("成功!!!")
            //向后台发送请求,将单车查找出来
            wx.request({
              url: "http://localhost:8888/bikes",
              method: 'GET',
              success: function (res) {
                const bikes = res.data.map((item) => {
                  return {
                    id: item.id,
                    iconPath:"/image/bike.png",
                    width:30,
                    height: 35,
                    latitude: item.latitude,
                    longitude: item.longitude
                  };
                });
                // 修改data里面的markers
                that.setData({
                  // iconPath: "/image/bike.png",
                  // width: "50rpx",
                  // height: "65rpx",
                  markers: bikes
                });
              }
            })

          }
        })
      }
    })
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //在这个事件中,记录用户的行为,然后发送到后台服务器
    //获取当前位置
    wx.getLocation({
      success: function (res) {
        //纬度
        var lat = res.latitude;
        //经度
        var log = res.longitude;
        //从本地存储中取出唯一身份标识
        var openid = wx.getStorageSync('openid')
        //发送request向mongo中添加数据(添加一条文档(json))
        wx.request({
          //用POST方式请求es可以只指定index和type,不用指定id
          url: "http://localhost:8888/log/ready",
          data: {
            time: new Date(),
            openid: openid,
            lat: lat,
            log: log
          },
          method: "POST"
        })
      },
    })
  }


})

app.js

//app.js
App({
  onLaunch: function () {

    // 登录,然后获取到用户的唯一身份ID,用于以后记log
    wx.login({
      success: res => {
        //根据你的微信小程序的密钥到后台获取ID
        // 发送 res.code 到后台换取 openId, sessionKey, unionId

        if (res.code) {
          var appid = "wxee303494e2cd7684";
          var secret = "06f9669da34167957c4e67173f26e849";
          var code = res.code;
          //发起网络请求
          wx.request({
            url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&js_code=' + code + '&grant_type=authorization_code',
            success: function (r) {
              //获取到每个用户的对立id
              //console.log(r.data.openid)
              //把openid保存到本地
              wx.setStorageSync('openid', r.data.openid)
            }
          })
        } else {
          console.log('获取用户登录态失败!' + res.errMsg)
        }

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

app.

{
  "pages": [
    "pages/demo/demo",
    "pages/index/index",
    "pages/register/reg",
    "pages/logs/logs"
   
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "单车",
    "navigationBarTextStyle": "black"
  }
}

bike.png
img1.png
location.png
pay.png
qrcode.png

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

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

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

功能点:地图
本文基于微信小程序公测版,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引到小程序里面,所以这个功能并不是很好用。

微信开发调试方法

阅读数 151

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