精华内容
下载资源
问答
  • Taro小程序开发过程中,往往会遇到h5页面与原生页面互相通讯的过程,而微信小程序为webview组件提供了JSSDK,使用方式:1.在h5项目的入口文件(即index.html)中与meta标签同一层级下,添加远程依赖 <script type...

    Taro小程序开发过程中,往往会遇到h5页面与原生页面互相通讯的过程,而微信小程序为webview组件提供了JSSDK,使用方式:
    1.在h5项目的入口文件(即index.html)中与meta标签同一层级下,添加远程依赖

    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    

    以上即在整个项目全局引入了JSSDK(这里不得不吐槽一下微信小程序开发官方文档,我一开始愣是没有看明白,谁让咱是新手呢)。


    2.接下来就是使用api了,但是目前我们只能使用sdk提供的有限方法。
    举例常见的页面跳转方法:
    // javascript  跳转到小程序原生页面

    wx.miniProgram.navigateTo({url: '/path/to/page'})   


    这里taro webview小程序有个小bug,即如果h5页面内部跳转之后,虽然设置了h5页面的title标题,但在webview顶部只会显示第一次加载的title,在web端跳转之后title切换正常。这里有个不算友好但能解决title无法改变的方法,即在h5页面跳转代码修改为调用桥接的原生api再次跳转到webview页面以达到可以刷新title的目的。
    至于为什么不用Taro提供的修改title的方法,见我另外一篇博客:Taro小程序webview使用及API

    向原生webview页面发送消息:

    //h5页面向原生webview页面发送消息通讯,注意不是立即发送,一般在特定时机(小程序后退、组件销毁、分享)触发并收到消息
    wx.miniProgram.postMessage({ data: 'foo' })
    wx.miniProgram.postMessage({ data: {foo: 'bar'} })

    webview页面 webview组件监听onMessage事件,即可接受到此消息通知数组。这里也可以参考我的另外一篇博客:Taro小程序webview使用及API,两者加起来一起使用。

    //判断当前是否是小程序的环境,返回boolean值
     

    wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })  

    以上即为本人的使用心得,如有帮助,请记得点赞、关注三连~
     

    展开全文
  • H5如何调用小程序分享 微信SDK

    千次阅读 2021-02-07 11:31:44
    我们要做H5的活动页面,但是运营想要...1、引入小程序SDK <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> 2、通过config去注入权限验证配置 * @Description: * @Author

    我们要做H5的活动页面,但是运营想要把这个活动分享到微信中去,所以需要我们在微信打开这个活动连接时,可以用微信的分享功能

    先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

    代码封装:

    1、引入小程序SDK

    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>


    2、通过config去注入权限验证配置

     * @Description:
     * @Author: @[lina]
     * @Date: 2020-06-05 14:51:47
     * @LastEditors: @[lina]
     * @LastEditTime: 2020-06-23 14:22:02
     */
    const setWechatConfig = () => {
      const _this = this
      if (window.navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
        // 判断是微信的话再做
        axios.post('wechat/getUrlConfig', {
          url: window.location.href.split('#')[0]
        }).then(res => {
        // 通过接口返回公众号的appID,等需要的信息
          if (res.code === 200) {
            wx.config({
              // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
              debug: false,
              // 必填,公众号的唯一标识
              appId: res.result.appId,
              // 必填,生成签名的时间戳
              timestamp: res.result.timestamp,
              // 必填,生成签名的随机串
              nonceStr: res.result.nonceStr,
              // 必填,签名
              signature: res.result.signature,
              // 必填,需要使用的JS接口列表
              jsApiList: ['hideOptionMenu', 'hideMenuItems', 'showMenuItems', 'updateAppMessageShareData', 'updateTimelineShareData']
              // ['hideOptionMenu', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems', 'showMenuItems']
            })
            wx.error(function (res) {
              _this.$refs.Errormes.ErrormesFun(`调用分享功能失败 ${res}`)
            })
            // wx.ready(function () {
            //   // 隐藏分享功能
            //   wx.hideMenuItems({
            //     menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline', 'menuItem:share:QZone', 'menuItem:share:qq']
            //   })
            // })
          }
        })
      }
    }
    export default setWechatConfig
    

    3、通过ready接口处理成功验证

     

          if (shareData.isShare) {
            wx.showMenuItems({
              menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline']
            })
            wx.updateAppMessageShareData({
              title: shareData.shareTitle, // 分享标题
              desc: '点击了解活动详情', // 分享描述
              link: url + '?userId=' + userId + '&from=wechat', // 分享链接,该链接域名或路径与当前页面对应的公众号JS安全域名一致
              imgUrl: shareData.shareImgUrl, // 分享图标
              success: function () {
                // 设置成功
                console.log('成功')
              }
            })
            wx.updateTimelineShareData({
              title: shareData.shareTitle, // 分享标题this.activityInfo.shareTitle
              link: url + '?userId=' + userId + '&from=wechat', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: shareData.shareImgUrl, // 分享图标
              success: function () {
                // 设置成功
                console.log('成功1')
              }
            })
          }
        })
    

    4、通过error接口处理失败验证

    wx.error(function(res){
      console.log(res)  //输出错误信息
    });

     

    展开全文
  • 前言:h5嵌入小程序中点击h5页面中的分享按钮调用微信小程序分享功能,需要调用微信JSSDK方法来实现。 步骤: 1.引入微信JSSDK,通过script标签,引入微信官网的JS-SDK文件。 <script type="text/javascript" ...

    前言:h5嵌入小程序中点击h5页面中的分享按钮调用微信小程序分享功能,需要调用微信JSSDK方法来实现。

    步骤:

    1.引入微信JSSDK,通过script标签,引入微信官网的JS-SDK文件。
    
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    

    2.在页面中添加配置

       <script type="text/javascript">
            var url 
    展开全文
  • 业务需求:我需要用小程序web-view嵌入h5地图页面,然后点击h5页面导航功能调起小程序内置地图 第一步: 现在你的h5项目导入或者链接式导入微信jssdk vue导入: npm install weixin-js-sdk --save 连接式导入: ...

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

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

    vue导入: 

    npm install weixin-js-sdk --save

    链接式导入:

    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)直接调用,调起微信内置地图: 

     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

    展开全文
  • 小程序webview内嵌H5页面调用JSSDK接口

    千次阅读 2020-12-19 14:46:17
    小程序webview内嵌H5页面调用JSSDK接口总结H5页面服务端管理页的配置遇到的坑合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容...
  • vue-h5调用支付宝小程序扫一扫功能 1,引入js <script> if (navigator.userAgent.indexOf('AlipayClient') > -1) { document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<...
  • H5页面跳转微信小程序

    千次阅读 2020-09-04 11:17:08
    首先非常开心,微信终于支持H5 HTML页面可以跳转到小程序。又多个一个扩展功能。 开始你的表演 官方API地址 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 一、配置“JS...
  • 支付宝小程序,使用 AlipayJSBridge.call( "scan", { type: "qr" }, function(res) { alert("Alipay扫码结果:" + JSON.stringify(res));... 调用扫一扫,在小程序里面报无权跨域调用
  • 小程序web-view调用H5页面发起小程序支付接口示例完整代码(含详细说明) 小程序web-view调用H5页面发起小程序支付接口示例 这接口是我熬夜写出来的,服务端用的PHP,示例很完整了,有附带说明。 您可以进微信&...
  • 小程序内嵌H5调用微信扫一扫的功能,通过小程序webview来实现,具体方法与思路代码如下: 但是,小程序踩坑之路并没有结束。在公众号网页中通过配置APPID和appsecret可以正常调起微信扫一扫,但是,如何在小程序...
  • H5页面跳转小程序

    2021-02-25 10:54:35
    3)其他环境(如:手机浏览器环境):手机浏览器等外部环境通过调用云函数wx-server-sdk来创建cloud来获取wx返回小程序Url Scheme来打开小程序。 基本上wx官方文档有详细介绍:现在主要讲的是wx没有提供的以及坑点 1...
  • 微信小程序web-view 外部引用h5页面调用摄像头录制视频 配有提示音1、目前的需求是什么2、都踩了那些坑1、小程序2、h5语音提示3、语音合成声音录制不进去,ios有时候是麦克风,有时候是听筒发音!4、语音合成声音...
  • 需求:H5内有地图功能,再将H5嵌入小程序 问题:小程序web-view标签嵌入该H5时,出现如下错误 原因:没配置该域名,但也不能配置,因为配置后需要将一个验证文件放上去,这是腾讯的服务器,必然实现不了,因此就会...
  • 支付不能用微信自带的支付,因为不支持,(就算在开发者工具里支持,体验版和正式版也不支持),所以需要调用小程序的支付功能 实现: 小程序中内嵌H5网页是这样的: //courseUrl 就是网页入口地址 ...
  • 因为微信小程序H5不支持调用h5的微信支付,只能跳转回小程序然后调起小程序的微信支付 1:在h5页面获取小程序微信支付需要的参数组装一下然后跳转到小程序的时候传过去; //h5页面引入jssdk.js 组装参数跳转小程序...
  • 小程序端不支持在本地引入,所以需要将h5发布服务器,以请求接口的形式进行访问 首先是H5的开发: 像素单位:写的时候因为需要顾及ios和安卓,而且小程序端也会遇上各种屏幕比,比较麻烦,单位尽量使用rem; 请求: ...
  • 微信公众号h5页面跳转小程序 文章目录微信公众号h5页面跳转小程序前言一、注意二、使用步骤步骤一:绑定域名步骤二:引入环境步骤三:初始配置 前言 问:h5 页面可以跳转至微信小程序吗? 答:可以 官方解答...
  • 首先关键引入小程序js库 ...调用小程序内的方法即可 wx.miniProgram.navigateBack({}) // 这里退回到上一级页面, 也就是刚刚跳转前的页面 详情可见此链接https://www.freesion.com/article/458369020/ ...
  • H5小程序的 实时通讯方法

    千次阅读 2019-08-30 16:01:55
    对于WebView 中的 H5小程序 的单方向通讯方式,腾讯官方给出了 如下方案: 大家可以点击 这里 查看官方文档 。 看到官方提供了解决办法,焦虑感顿时降低了不少。但仔细一看,不免又发愁起来: 网页向小程序 ...
  • 首先 第一步 通过 GET ...小程序提供的接口 获取到 access_token。官方api:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken
  • H5唤起微信小程序

    2021-08-04 21:46:22
    此文章讲述H5唤起微信小程序(可指定页面并携带参数) 一、H5微信外部浏览器唤起小程序(App里面嵌入的H5也可以唤起) 注意:生成URL Scheme的必要前提:小程序不能是个人的,小程序必须已经上线发布了 1、第一种:...
  • H5页面嵌入第三方微信小程序

    千次阅读 2019-10-30 10:21:36
    前段时间收到了这样一个需求,想做一个微信小程序来嵌到第三方小程序里。瞬间上头。。什么奇葩需求,一听就知道项目经理肯定把它和微信公众号混了,觉得都是微信肯定都行。我是觉得不行的,如果你们谁有实现过这个...
  • 微信公众号h5页面跳转小程序-成功案例 微信公众号h5页面跳转小程序-成功案例,标题已经明确说明,h5页面可以正常跳转微信小程序 官网说可以,不是我说的 文章目录微信公众号h5页面跳转小程序-成功案例前言一、代码...
  • 微信小程序h5页面分享设置

    千次阅读 2020-07-02 21:26:41
    前言(废话): 最近开发新项目,因为公司希望能在开发完h5后顺便吧微信小程序也上了,但是人力有限,只能做到h5,开发小程序压根做不到,只能投机了, 我真是个机灵鬼。。。 然后我就看API,咦,贼拉简单,一。使用web...
  • H5页面跳转至微信小程序(含完整代码)

    千次阅读 热门讨论 2020-09-25 18:47:46
    H5 通过开放标签打开小程序的场景值为 1167. 此功能的开放对象: 已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。 已认证的非个人主体的小程序,使用小程序云开发的...
  • 外部浏览器调用H5调起微信小程序 本次使用的是通过小程序scheme码跳转至小程序 PHP服务端 <?php namespace app\index\controller; use think\Db; use think\Controller; class Mini extends Controller { ...
  • vue-h5项目中使用支付宝小程序调用相机功能 1,在html文件中引入支付宝小程序的js <script> if (navigator.userAgent.indexOf('AlipayClient') > -1) { document.writeln('<script src=...
  • h5页面按钮跳转小程序

    千次阅读 2020-11-03 14:48:59
    h5页面按钮跳转小程序参考文档步骤一:绑定域名步骤二:引入JS文件步骤三:配置config信息如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右...
  • H5网页跳转至微信小程序

    万次阅读 多人点赞 2020-07-08 16:15:53
    好消息,H5网页接入公众号的JSSDK以后可以跳转到小程序了。 开放标签使用步骤 微信开放标签使用步骤与微信JS-SDK类似,也需要绑定安全域名、引入JS文件等步骤。 步骤一:绑定域名 登录微信公众平台进入“公众号...
  • 小程序实现h5页面的微信支付

    万次阅读 热门讨论 2018-05-17 16:10:42
    为了达到兼容,因为支付页面是同一个,所以项目必须同时兼容两个支付,一个是原本h5项目的支付能正常使用,另一个是当在小程序中点击支付的时候调用小程序自己的支付功能。   实现思路: 先判断h5的加载...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,588
精华内容 5,435
关键字:

h5页面调用小程序api