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

php--------网页开发实现微信JS的(定位,地图显示,照片选择功能)的更多相关文章

  1. 微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法 (持续更新)

    1.微信网页开发调用jssdk时报permission denied 大致是两个原因 (1)首先注册时未将你所调用的接口名字添加至jsApiList (2)第二个就是你的这个公众号没有权限使用这个ap ...

  2. PHP--------微信网页开发实现微信扫码功能

    今天说说微商城项目中用到的扫一扫这个功能,分享一下,希望对各位有所帮助. 前提:要有公众号,和通过微信认证,绑定域名,得到相应信息,appid,appsecret等. 微信开发文档:https://m ...

  3. C#开发微信公众号——网页开发之微信网页授权

    首先咱们先看下公众号的文档里面的介绍 上述图片的文字描述就是讲述了网页授权有什么用,就是为了获取微信用户的基本信息:授权回调域名的规范,说到域名回调的事情就不得不提一下设置网页授权域名 最好将这三个域 ...

  4. JAVA微信公众号网页开发 —— 接收微信服务器发送的消息

    WeixinMessage.java package com.test; import java.io.Serializable; /** * This is an object that conta ...

  5. 微信公众平台开放JS-SDK(微信内网页开发工具包)

    微信公众平台开放JS-SDK(微信内网页开发工具包),这次开放接口是质的飞跃,是对开发者和广大用户一个利好的消息.未来的公众号图文消息会更丰富多彩,准备脑洞大开吧!(第三方平台正式支持接入微信公众平台 ...

  6. 10天学会phpWeChat——第十天:phpWeChat的会员注册、登录以及微信网页开发

    通过前面的系列教程,我们系统的讲解了phpWeChat从视图端.控制器端到模型端的操作流程:熟悉了phpWeChat的目录结构:掌握了视图端模板如何创建一个丰富的表单和模型端如何操作数据库.这一切都是 ...

  7. 微信公众号_订阅号_微信JS-SDK网页开发

    微信JS-SDK( 分享接口很常用 ) 是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包 借助微信高效使用相机.语音.选题.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.支付等 ...

  8. IOS-网络(网页开发-UIWebView,HTML,CSS,JavaScript,OC和JS代码互调)

    一.网页基础 // // ViewController.m // IOS_0218_网页开发1 // // Created by ma c on 16/2/18. // Copyright © 201 ...

  9. 微信公众平台网页开发实战--3.利用JSSDK在网页中获取地理位置(HTML5+jQuery)

    复制一份JSSDK环境,创建一份index.html文件,结构如图7.1所示. 图7.1  7.1节文件结构 在location.js中,封装“getLocation”接口,如下: 01 wxJSSD ...

随机推荐

  1. jenkins之升级

    首先查看系统war包放置的位置 rpm -ql jenkins 下载一个war包 下载地址 https://mirrors.tuna.tsinghua.edu.cn/jenkins/war/2.61/ ...

  2. 徐州网络赛J-Maze Designer【最小生成树】【LCA】

    After the long vacation, the maze designer master has to do his job. A tour company gives him a map ...

  3. What are Traceroute, Ping, Telnet and Nslookup commands?

    https://help.maximumasp.com/KB/a445/connectivity-testing-with-ping-telnet-tracert-and-pathping-.aspx ...

  4. CMDB内功心法,助我登上运维之巅

    很多70.80后甚至90后都在金庸.古龙.梁羽生先生等武林大家熏陶下成长的,这么多年过去了,我的武侠梦依然不曾散去.曾几何,梦想有一天练就一身绝学,搂着小师妹花前月下,仗剑走天涯,快意人生.可每次的酣 ...

  5. java.util.ResourceBundle 读取国际化资源或配置文件

    1.定义三个资源文件,放到src的根目录下面 命名规范是: 自定义名_语言代码_国别代码.properties 默认 : 自定义名.properties   2.资源文件都必须是ISO-8859-1编 ...

  6. 【selenium】selenium ide的安装过程

    简介一:SeleniumIDE安装 1.安装seleniumIDE,打开火狐浏览器,地址栏输入地址—>点击Add按钮—>安装结束后重启FireFox—>在菜单栏中可以看到Seleni ...

  7. mysql 数据操作 单表查询 查询排序: order by

    如果不指定排序 默认是按照id字段 从小到大排序的  升序 mysql> select * from employee; +----+------------+--------+-----+-- ...

  8. 驼峰命名和下划线命名互转php实现

    驼峰命名和下划线命名经常需要互转,下面提供两种php的实现方式.第一种方法效率相对差一些,实现方式如下: //驼峰命名转下划线命名 function toUnderScore($str) { $dst ...

  9. gb28181的SPVMN测试环境搭建以及设备端和服务器的具体实现

    1.GB/T28181开发1之SPVMN(1.0.0.1)环境搭建 https://blog.csdn.net/hiwubihe/article/details/82910685 2.SPVMN 视频 ...

  10. (转)在GitHub多个帐号上添加SSH公钥

    GitHub后台可以添加多个SSH Keys,但是同一个SSH Keys只能在添加在一个帐号上(添加时提示“Key is already in use”).理由很容易想到,SSH公钥使用时相当于用户名 ...