精华内容
下载资源
问答
  • 微信分享实现 前端发送接口获取微信配置信息api.getWxConfigParams({ currentUrl: encodeURIComponent(window.location.href) }).then(res => { if (res.code === 0) { const { appId, nonceStr, signature, ...

    微信分享实现

    1. 前端发送接口获取微信配置信息
      api.getWxConfigParams({
        currentUrl: encodeURIComponent(window.location.href)
      }).then(res => {
        if (res.code === 0) {
          const { appId, nonceStr, signature, timeStamp } = res.data
        //执行第二步
        } else {
          console.error(res.msg)
        }
      })
      // 注: 换取签名的地址一定是动态的,前端在传值给后台的时候记住要进行编码,一定不要传送带#(hash)的部分
      
    2. 前端根据接口返回的数据信息调用微信配置
        ···
        const data = {
            debug: false,
            appId,
            nonceStr,
            signature,
            timestamp: timeStamp,
            jsApiList: [...jsApiList] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
          }
      
          wx.config(data)
          wx.ready(function () {
            wx.showOptionMenu && wx.showOptionMenu()
            success && success()
          })
          wx.error(function (res) {
            fail && fail()
          })
          // 注: 需要在配置后的功能需要配置在jsApiList里面,主要有以下几个常用功能
          'onMenuShareAppMessage', // 获取'分享给朋友'按钮状态&&自定义分享内容 --- 即将废弃
          'updateAppMessageShareData', // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容(更新点击右上角分享时的信息)
          'updateTimelineShareData', // 朋友圈
          'chooseImage', // 拍照或从手机相册中选图
          'previewImage', // 预览图片
          'hideOptionMenu', // 隐藏
          'showOptionMenu', // 显示
          'uploadImage', // 上传图片
          'downloadImage', // 下载图片
          'getNetworkType', // 获取网络状态
          'chooseWXPay' // 微信支付
      
    3. 配置成功后调用微信分享api
    // 分享当前页
        shareCurryPage ({ name = '', userId = '' }) {
          wxConfig.injectConfig(() => {
            console.warn('zhixinglllll========>', wx)
            wx.onMenuShareAppMessage({
              title: `我是${name}分享标题`, // 分享标题
              desc: '我是分享描述', // 分享描述
              link: `我是分享地址?${userId}`, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: '我是分享图片', // 分享图标
              function (res) {
                // 设置成功
                console.warn(res)
              }
            })
          })
        },
        // 注: 在配置分享图片的时候需要检查一下地址是否正确,注意this的指向
    

    微信h5跳转微信小程序-原文

    1.新增wxconfig配置

    ...
    const data = {
      debug: false,
      appId,
      nonceStr,
      signature,
      timestamp: timeStamp,
      jsApiList: [...jsApiList], // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
      openTagList: ['wx-open-launch-weapp'] // 跳转小程序配置
    }
    ...
    
    // 微信的jsdk的版本必须在1.6.0及以上版本才能使用
    

    2.使用代码

    <wx-open-launch-weapp
      id="launch-btn"
      username="小程序原生id"
      path="跳转地址.html"
    >
      <script type="text/wxtag-template">
        <style>.btn { padding: 12px }</style>
        <button class="btn">打开小程序</button>
      </script>
    </wx-open-launch-weapp>
    <script>
      var btn = document.getElementById('launch-btn');
      btn.addEventListener('launch', function (e) {
        console.log('success');
      });
      btn.addEventListener('error', function (e) {
        console.log('fail', e.detail);
      });
    </script>
    
    // 注: 在微信环境打开才可以看到对应标签
    

    签名失败

    1. 微信配置config打开debug是弹出签名失败提示
      微信签名失败
    2. 检查失败原因
      微信文档截图
      注意点如下:
      1. 注意配置文件中的各个值的命名方式,严格遵守大小写
      2. 换取签名中间值的时候所使用的appid,timestamp,noncestr要保持一致
      3. 上送的地址不能含有#,最好进行转码
      4. 生成的签名可以根据开发文档上提供的地址进行检查
      5. 如果以上问题都没有错误,请阅读开发文档的第一条要求,确定绑定域名方可使用
        在这里插入图片描述
    3. 域名绑定步骤
      • 登录公众号平台
      • 进入公众号设置
        在这里插入图片描述
      • 设置好对应的安全域名地址
        在这里插入图片描述
      • 最后再次打开设置界面将验证文件下载下来上传到安全域名对应的服务器文件夹根目录下

    具体问题请参考微信开发文档,根据文档提示进行检验,如果还是有问题,可以随时联系社区,希望你顺利实现响应功能

    展开全文
  • 微信h5跳转小程序

    2020-12-31 16:02:51
    微信h5跳转小程序 要求: 微信开放标签有最低的微信版本要求,以及最低的系统版本要求。 微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。 具体实施: 参考链接微信官方...

    微信h5跳转小程序

    要求:

    微信开放标签有最低的微信版本要求,以及最低的系统版本要求。

    微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。

    具体实施:

           参考链接 微信官方文档 公众号

    一 绑定域名

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

    二 引入JS文件

         在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js

         如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)

         备注:支持使用 AMD/CMD 标准模块加载方法加载

    三 通过config接口注入权限验证配置

      这是微信给出的

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

    这里是我的项目实际实现

    setWxConfig() {//方法名
          let that = this;
          let url = window.location.href; // 注意这里,我的项目中路由模式用的是history模式
          let postData = {
            url: url,
          };
          that.$post(that.$getSignPackage, postData).then((res) => {
            //这里请求获取wx.config配置
            if (res.status_code === 0) {
              let data = res.data.signPackage;
              wx.config({
                debug: false, // 开启调试模式,
                appId: "公众号id", // 必填,企业号的唯一标识,此处填写企业号corpid
                timestamp: data.timestamp, // 必填,生成签名的时间戳
                nonceStr: data.nonceStr, // 必填,生成签名的随机串
                signature: data.signature, // 必填,签名,见附录1
                jsApiList: [
                  "checkJsApi",
                  "openLocation",
                  "getLocation",
                  "closeWindow",
                  "scanQRCode",
                  "chooseWXPay",
                  "chooseImage",
                  "uploadImage",
                  "previewImage",
                  "getLocalImgData",
                ], // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
                openTagList: ["wx-open-launch-weapp"], // 这里要配置一下
              });
              wx.error(function (res) {
                // ios环境下第一次获取授权失败,重新加载页面
                window.location.reload();
              });
            } else {
              this.$toast({
                message: res.message,
                position: "top",
                duration: 1500,
              });
            }
          });
        },

     注意:在ios设备上首次获取微信授权失败,微信开发者工具上模拟不出来,只有真机的时候才会暴露出来问题,安卓设备不会有这样的问题

    四 页面配置

    <wx-open-launch-weapp
          id="launch-btn"
          username="小程序原始id"
          path="pages/index/index.html"
        >
          <script type="text/wxtag-template">
            <div>
              <style>
                  .btn { width: 335px;height: 50px;border: 1px solid #bfbfbf;border-radius: 3px; font-size: 17px;font-family: PingFang, PingFang-SC;color: #1c1c1c;background-color: #ffffff;}
              </style>
              <button class="btn">去小程序中查看</button>
            </div>
          </script>
        </wx-open-launch-weapp>

     

    展开全文
  • 微信H5跳转小程序

    2020-08-19 16:55:18
    最近微信官方放开了从H5页面跳转小程序的能力,业务需要就刚好写了个需求,分享下这个新鲜的玩意。 这里默认已经做好微信公众平台的相关配置以及安全域名配置,wx.config也配置完成 一:引入1.6.0的js-sdk文件 引入...

    最近微信官方放开了从H5页面跳转小程序的能力,业务需要就刚好写了个需求,分享下这个新鲜的玩意。

    这里默认已经做好微信公众平台的相关配置以及安全域名配置,wx.config也配置完成

    一:引入1.6.0的js-sdk文件

    引入如下JS文件: http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)

    二:wx.config里写入开放标签列表

    需要jssdk 的标签;来触发跳转,所以需要添加如下:

    wx.config({
    	...
    	openTagList:['wx-open-launch-weapp']
    })
    

    三:配置wx-open-launch-weapp标签

    实例看一看呐:

    <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxx" path="你的小程序路径">
    	<template>
    		<div>
    			<div class="adv_img">
    				<img src="'+adList[i].ad_img+'" />
    			</div>
    			<p class="adv_word">跳转小程序</p>
    		</div>
    	</template>
    </wx-open-launch-weapp>
    

    标签内的username代表小程序的原始id、path代表的是跳转的路径
    实测都能跳转,普通页面、页面带参、甚至直播间都能直接跳

    四:注意问题

    标签外部的css无法对template里面的元素生效,要么在里面写style标签 要么直接行间样式。

    展开全文
  • 微信内打开H5页面,选择跳转任意微信小程序
  • 首先获取微信签名 wx.config({ debug: true, appId: res.appId, // 必填,公众号的唯一标识 timestamp: res.timestamp, // 必填,生成签名的时间戳 nonceStr: res.nonceStr, // 必填,生成签名的...

    主要知识点:wx-open-launch-weapp

    首先获取微信签名

    wx.config({
          debug: true,
          appId: res.appId, // 必填,公众号的唯一标识
          timestamp: res.timestamp, // 必填,生成签名的时间戳
          nonceStr: res.nonceStr, // 必填,生成签名的随机串
          signature: res.signature,// 必填,签名
          jsApiList: [], // 必填,需要使用的JS接口列表
          openTagList: ['wx-open-launch-weapp']
    });
    
    

     然后使用wx-open-launch-weapp组件跳转小程序

    <wx-open-launch-weapp id="launch-btn" username="小程序原始id(在更多资料里面gh_开头)" path="目标小程序路径">
        <template>
          <style>
            .btn {
              padding: 12px
            }
          </style>
          <button class="btn">打开小xxx程序</button>
        </template>
      </wx-open-launch-weapp>
    
    

    微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

    展开全文
  • 微信浏览器里面h5跳转小程序注意事项,以vue框架为例一、获取jssdk配置,在wx.ready回调函数里面展示按钮wx.config({debug: false,appId: data.appId,timestamp: data.timestamp,nonceStr: data.nonceStr,signature: ...
  • 微信跳转_跳转微信_wap跳转微信_h5跳转微信源码_ticket接口api
  • 微信h5跳转

    2019-11-21 11:27:53
    window.location.assign(‘网址’) 微信公众号h5非手动点击按钮,根据接口返回信息跳转时Android正常iOS无反应,要用这个方式跳,,,
  • 微信H5网页跳转小程序

    千次阅读 2020-12-02 11:19:50
    鉴于微信 开放标签说明文档 写的不是很清楚,大多数开发者看了以后表示:我从哪里来?要到哪里去? 所以鄙人记录下这篇文章,以便帮助到一些人。官方文档 废话不多说,上才艺! <html> <head> <...
  • 包括微信环境下H5与小程序环境不同环境下的支付,以及小程序嵌入H5的支付方式,并且简要的说明了一下从H5跳转小程序的方式,以及小程序嵌入H5的方式
  • 很多朋友的推广链接需要在...基于微信接口开发了一款全新的手机端微信中的推广,通过这个程序生成的链接,安卓用户在微信中点击的话,是可以直接跳转手机默认浏览器打开链接。   IOS用户在微信中点击的话会弹...
  • 先放上微信官方文档:微信官方文档 1、先请求接口配置微信需要的一些参数 // 需要先请求后端接口 let url = window.location.href.split("#")[0]; let shareConfig = await shareViewAPI.getWechatConfig({url}); ...
  • · 请确保小程序是已认证的非个人主体的小程序,或者已认证的服务号 · “JS接口安全域名” 已经绑定(登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”) 二、引入JS文件(单页面H5中...
  • 开放标签使用:id="launch-btn"username="gh_xxxxxxxx"path="/a/b/...e=2#fg">.btn { padding: 12px }打开小程序var btn = document.getElementById('launch-btn');btn.addEventListener('launch', function (e) ...
  • 问:h5 页面可以跳转微信小程序吗? 答:可以 官方解答飞机票 官方社区讨论飞机票 一、注意 微信开放标签有最低的微信版本要求,以及最低的系统版本要求。 微信版本要求为:7.0.12及以上。 系统版本要求为:iOS ...
  • 前段时间,有需求:H5跳转微信小程序页面,于是查了微信官方文档 <wx-open-launch-weapp> 只需要微信小程序的originalId和某个页面的路径即可 最难受的是:样式问题 需求:点击上面的卡片,进入微信小程序 ...
  • 微信网页开发-开放标签说明文档 核心代码 #launch-btn { width: 50%; background: transparent; } <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxxxxxx" path="pages/home/home.html"> &...
  • 鉴于微信 开放标签说明文档 写的不是很清楚,大多数开发者看了以后表示:我从哪里来?要到哪里去? 所以鄙人记录下这篇文章,以便帮助到一些人。 废话不多说,上才艺! <html> <head> <meta charset...
  • 微信官方文档:微信官方文档 微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。 1、先请求接口配置微信需要的一些参数 // 需要先请求后端接口 let url = window.location....
  • 微信公众的文档参考链接 [api文档链接]wx-open-launch-weapp...这个是自己写的例子的地址(跳转的是公司开发的小程序可以参考) https://test.okall.com.cn/h5/JFK/static/login.h
  • 如题,最近有项目需要H5跳转微信小程序,之前的认知中,跳转到微信小程序只有通过公众号、小程序、扫码这几种方式。终于H5支持跳转小程序了,废话不多说直接贴代码1、需要微信公众号,并且是已经认证过的服务号。...
  • }, username对应的小程序的原始id path对应小程序跳转的页面, 本项目是微信小商店 1、个人中心优惠券列表 __plugin__/原始id/pages/userCoupon/userCoupon 2、优惠券领取页面path plugin-private://原始id/pages...
  • 为了这个问题,于是我就去看了下微信的文档,发现微信有这个接口的,可以让微信浏览器下的H5跳转小程序内。微信相关文档在这边:在h5界面中的配置wx.config({debug: true, // 开启调试模式,调用的所有api的返回值...
  • <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index....action=abc" > <template>...打开小程序</button> </template> </wx-open-launch-weapp>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,128
精华内容 4,851
关键字:

微信h5跳转微信小程序

微信小程序 订阅