微信小程序web-view嵌入h5页面调用微信jssdk接口

news/2024/7/20 1:58:16 标签: 微信, 小程序, javascript

业务需求:我需要用小程序web-view嵌入h5地图页面,然后点击h5页面导航功能调起小程序内置地图

第一步: 现在你的h5项目导入或者链接式导入微信jssdk

vue导入: 

javascript">npm install weixin-js-sdk --save

链接式导入:

javascript">http://res.wx.qq.com/open/js/jweixin-1.6.0.js

然后,在需要的页面配置使用: 

此接口让后端封装好,直接去调用,注意: 看官网的解释:

  1. 确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)://'部分,以及'?'后面的GET参数部分,但不包括'#'hash后面的部分。

  2. 确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去'#'hash部分的链接(可用location.href.split('#')[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。

 jsapi_ticket({
       jsapiticket_url:  location.href.split('#')[0]
     }).then((res) => {
       console.log(res);
      this.wxJsSdk = res.signPackage;
      wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: this.wxJsSdk.appId, // 必填,公众号的唯一标识
        timestamp: this.wxJsSdk.timestamp, // 必填,生成签名的时间戳
        nonceStr: this.wxJsSdk.nonceStr, // 必填,生成签名的随机串
        signature: this.wxJsSdk.signature, // 必填,签名
        jsApiList: ["openLocation"], // 必填,需要使用的JS接口列表
      });
      })

要把你当前的页面url传给后端,后端再用url去验证token,返回给你config配置参数

第二步 wx.config验证没问题后,(h5)直接调用,调起微信内置地图: 

javascript"> wx.ready(function (res) {
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
        wx.openLocation({
          latitude: 31.851159,
          longitude: 117.260537,
          success: (res) => {
            console.log("success");
          },
        });

最后总结: 在调用wx.config过程中,会遇到错误,这个比较坑,遇到的错误解决方法官网上也有说明,去微信jssdk官网:  https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html


http://www.niftyadmin.cn/n/903021.html

相关文章

js遍历出从某一年到最新年份

//获取到从那一年开始this.smallYears res.msg//获取当前时间var date new Date;this.nowYears date.getFullYear()var Years this.nowYears - this.smallYearsvar arrYear [];for (var i 0; i < Years; i) {arrYear.push(this.nowYears--)}arrYear.forEach(v> {//…

uniapp做微信小程序身份证识别功能(百度云身份证识别api)

html: <!-- 拍照识别 --><uni-popup ref"photograph" type"center" :animation"false"><view class"popup-content photographCenter":style"height: scrollheightspx;box-sizing: border-box;border-radius:0&q…

用js把百度经纬度转换成腾讯经纬度

// 百度坐标系转腾讯坐标bMapToQQMap(lng, lat) {let x_pi (3.14159265358979324 * 3000.0) / 180.0;let x lng - 0.0065;let y lat - 0.006;let z Math.sqrt(x * x y * y) - 0.00002 * Math.sin(y * x_pi);let theta Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);…

uniapp微信小程序动态更新scroll-view标签的高度

onReady() {//精确动态计算轮播图高度//自定义tabbar获取方法uni.getSystemInfo({success: res > {const query uni.createSelectorQuery()query.select(.tabbars).boundingClientRect()query.exec(res1 > {this.scrollheight res.windowHeight - res.statusBarHeight …

uniapp小程序自定义tabbar适配个别手机底部塌陷问题

塌陷场景&#xff1a; 此处已塌陷 解决方法&#xff1a; // 适配手机底部塌陷问题 padding-bottom: env(safe-area-inset-bottom); 完整css代码&#xff1a; .tabbars {position: fixed;z-index: 99;left: 0;right: 0;bottom: 0;display: flex;justify-content: center;alig…

uni-app微信小程序封装全局判断是否登录方法结合全局变量

新建的uni-app项目会有个app.vue文件&#xff0c;在此文件下 onLaunch应用生命周期封装一个方法(把全局变量定义一下): 注意&#xff1a;onLaunch应用生命周期只会触发一次 app.vue&#xff1a; <script>export default {//全局变量globalData: {//用于判断用户是否登录…

在vue里面写一个js防抖函数(节流函数)

一般用于防止用户暴力点击&#xff0c;导致多次请求接口&#xff0c;效果是在一定时间内点击多次后只触发一次 methods: { //防抖函数(节流函数)trans: (function() {let timer null;return function() {clearTimeout(timer);timer setTimeout(() > {//处理业务逻辑conso…

uni-app微信小程序封装一个request请求接口

在uniapp项目根目录里面新建一个文件 utils: 再新建一个api.js: //你的请求地址(线上或线下) const BASE_URL https://www.baidu.com/ export const http (options) > {return new Promise((resolve, reject) > {uni.request({url: BASE_URL options.url,method: opt…