精华内容
下载资源
问答
  • h5跳转小程序

    千次阅读 2020-08-17 11:08:11
    JSAPI中,在openTagList开放标签中有以下两个属性,开发的项目是h5跳转小程序 ,所以要用 wx-open-launch-weapp,当时没注意,写成了 wx-open-launch-app,导致页面中渲染不出来。 小程序跳转按钮: App跳转按钮: ...

    官方文档

    https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

    <wx-open-launch-weapp
      id="launch-btn"
      username="gh_xxxxxxxx"
      path="pages/home/index.html?user=123&action=abc"
    >
      <template>
        <style>.btn { padding: 12px }</style>
        <button class="btn">打开小程序</button>
      </template>
    </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>
    

    实践

    引入JS

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

    生成JSAPI

    wx.config({
        "appId":"你懂得",
        "nonceStr":"fbjnehiswxmupfatefn3eptk04fasapo",
        "timestamp":1597629992,
        "signature":"43cc187e8103717f98daefbb0825f90abd628c87",
        "jsApiList":[
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "chooseImage",
            "previewImage",
            "uploadImage",
            "chooseWXPay",
            "hideAllNonBaseMenuItem"
        ],
        "openTagList":[
            "wx-open-launch-weapp"
        ]
    });
    

    HTML片段

    <div class="search">
    	<div class="input-box"><i class="search-btn"></i>搜索精选好货</div>
    	   <wx-open-launch-weapp username="" path="pages/index/index.html">
    	       <template>
    	           <style>
    	               .weappArea{
    	                   width: 100%;
    	                   height: 100%;
    	                   color: transparent;
    	                   opacity: 0;
    	                   font-size: 100px;
    	               }
    	           </style>
    	           <div class="weappArea">跳转小程序</div>
    	       </template>
    	   </wx-open-launch-weapp>
    	</div>
    </div>
    

    爬坑

    1. JSAPI中,在openTagList开放标签中有以下两个属性,开发的项目是h5跳转小程序 ,所以要用 wx-open-launch-weapp,当时没注意,写成了 wx-open-launch-app,导致页面中渲染不出来。

    小程序跳转按钮:<wx-open-launch-weapp>
    App跳转按钮:<wx-open-launch-app>

    2. 开发项目是一个H5商品的推广页面,点击某个商品跳到小程序的某个商品下,加上wx-open-launch-weapp标签后,原本已写好的html及样式包括图片大小,官方给的文档是说在template 下写内联样式要定义局部,那对于我们这已写的html改动太大也不好调整,所以采用以下方式:
    在template下定义一个标签覆盖到原DIV上,使它透明看不到,其实跳转点击还是 weappArea标签

    <template>
       <style>
            .weappArea{
                width: 100%;
                height: 100%;
                color: transparent;
                opacity: 0;
                font-size: 100px;
            }
        </style>
        <div class="weappArea">跳转小程序,跳转小程序</div>
    </template>
    

    3. 点击跳转标签后发现跳转到小程序后找不到页面,原因出现在了 path属性的路径上,因为习惯了小程序页面的路径光溜溜的,所以特意没写 .html 结果导致无法识别找不到页面,

    错误的

    <wx-open-launch-weapp username="" path="/pages/index/index?id=1&gid=1"></wx-open-launch-weapp>
    

    正确的

    <wx-open-launch-weapp username="" path="/pages/index/index.html?id=1&gid=1"></wx-open-launch-weapp>
    
    展开全文
  • H5跳转小程序(1).pdf

    2021-04-30 11:20:51
    H5跳转小程序
  • H5跳转小程序

    2021-02-26 14:13:32
    标签 创建一个接龙 <wx-open-launch-weapp id=“launch-btn” username=“gh_f1eeefa0f69d” path=“pages/index/index....@launch=“handleLaunchFn” @error=“handleErrorFn” style=“width: 100%;... 跳转小程序

    标签



    创建一个接龙
    <wx-open-launch-weapp
    id=“launch-btn”
    username=“gh_f1eeefa0f69d”
    path=“pages/index/index.html”
    @launch=“handleLaunchFn”
    @error=“handleErrorFn”
    style=“width: 100%; height: 100%; position: absolute; top: 0; left: 0;”
    >

    跳转小程序
    配置 import { weixinConfig } from '@/utils/wechatPay' import wx from 'weixin-js-sdk' Vue.config.ignoredElements = ['wx-open-launch-weapp']

    async get_sign_package() {
    let that = this
    if (process.env.NODE_ENV === ‘production’) {
    let url = window.location.href
    let sharUrl = url.split(’#’)
    await get_sign_package({
    url: url,
    apis: ‘updateAppMessageShareData,updateTimelineShareData’,
    }).then((res) => {
    if (res.data.errcode != 0) {
    Toast(res.data.msg)
    return false
    }
    weixinConfig(res.data.jsSdkConfig)
    // console.log(‘get_sign_package’, res)
    wx.ready(function (res) {
    console.log(‘susses’, res)
    })
    wx.error(function (res) {
    console.log(‘err’, res)
    if (process.env.NODE_ENV === ‘production’) {
    location.reload()
    }
    })
    })
    }
    },

    展开全文
  • 支付宝小程序: h5跳转 小程序

    千次阅读 2020-07-27 11:27:51
    比如 你是 h5跳转小程序是吧 但必须是 微信内置得浏览器才可以跳转 而不是你拿着链接去 手机自带的浏览器 或者下载一个uc浏览器进行跳转 这样好像不行 反正我试了 不行 但是支付宝的小程序 你在 支付宝和钉钉中都可

    alipays://platformapi/startapp?appId=[appId]&page=[pagePath]&query= [params]
    不需要引入什么js文件通过scheme链接进行跳转

    但是吧 小程序跳转必须得是在 小程序的大框架下进行跳转 否则是跳转不过去
    比如 你是 h5跳转小程序是吧 但必须是 微信内置得浏览器才可以跳转 而不是你拿着链接去 手机自带的浏览器 或者下载一个uc浏览器进行跳转 这样好像不行

    不过真的不行么 教你一种方式 把下面的换成你的 appid 和文件路径

    <a href="alipays://platformapi/startapp?appId=xxxxx&page=xxxx/xxx/xxx">唤起支付宝</a>
    

    但是支付宝的小程序 你在 支付宝和钉钉中都可以进行跳转得
    跳转得时候可以先判断下 当前的环境是不是 支付宝内置的 浏览器环境

    alipays://platformapi/startapp?appId=[appId]&page=[pagePath]&query= [params]
    

    在这里插入图片描述
    然后再h5中使用 window.location 进行跳转
    按照官方的说法 很容器拼接成下面的这种方式 我去 还是不能带参数传递

    window.location.href="alipays://platformapi/startapp?appId=20170713077xxxxx&page=x/yz&query=xx%3dxx";
    

    https://opensupport.alipay.com/support/helpcenter/142/201602496413?ant_source=zsearch 官方参考文档

    1.有网友说下面的这种方式 可惜我这里还是不行 小程序中收不到参数 崩溃啊 😩

    //有页面参数(没有启动参数)
    location.href = "alipays://platformapi/startapp?appId=xxx&page=pages/goodDetail/goodDetail"+encodeURIComponent("?goods_id="+goods_id)
    //有页面参数,有启动参数(如渠道号、平台号等打开小程序就需要传过来的参数)
    location.href = "alipays://platformapi/startapp?appId=xxx&page=pages/goodDetail/goodDetail"+encodeURIComponent("?goods_id="+goods_id)+&query=encodeURIComponent("appParams="+xx)
    

    我尝试了下哈 不带任何参数的跳转是可以跳到小程序的,但是带参数跳转虽然跳过去了 但是 不知道为什么 参数再小程序中收不到 到现在没有在网上找到 答案

    后来也是实在受不了就去问了官方人员 人家也是耐心给我讲解了半天 虽然最后莫名其妙好了 很感谢蚂蚁技术人员

    <a href="alipays://platformapi/startapp?appId=2018091961472520&page=pages/xxx/xx&query=test%3dhelloworld">支付宝</a>
    

    上面的是一个参数得传递 test=helloworld
    要是传递多个参数 的话 要把参数给 uridecode一下

    &query=encodeURIComponent("appParams=hello&test=123");
    

    同时你的如果你要是想本地测试的话
    下面的是跳转未上线版本的小程序的做法 打开手机联调
    https://opensupport.alipay.com/support/helpcenter/142/201602487442?ant_source=antsupport#

    再app.js得 onshow和onlaunch 中进行获取

    onLaunch(options) {
        console.log('1');
         my.alert({content: '启动参数:'+JSON.stringify(options.query),});
      },
    onShow() {
        console.log('2');
         my.alert({content: '启动参数:'+JSON.stringify(options.query),});
      },
    

    如果不行的话 建议 直接上传一次 然后设置成体验版本 跳转一下试试看
    因为有一种情况就是 好像是 你的小程序必须上架过一次才可以哦
    最后还是感谢支付宝技术人员

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

    微信浏览器里面h5跳转小程序

    注意事项,以vue框架为例

    一、获取jssdk配置,在wx.ready回调函数里面展示按钮wx.config({

    debug: false,

    appId: data.appId,

    timestamp: data.timestamp,

    nonceStr: data.nonceStr,

    signature: data.signature,

    //这里必须填一个不能为空数组

    jsApiList: ['chooseImage'],

    //这里注意需要填“wx-open-launch-weapp”,官方文档上是填的“wx-open-launch-app”

    openTagList: ["wx-open-launch-weapp"],

    });

    wx.ready(function() {

    me.showtplBtn=true;

    me.$nextTick(()=>{

    try {

    var btn = document.getElementById('launch-btn');

    btn.addEventListener('launch', function (e) {

    console.log('success');

    console.log(e);

    });

    btn.addEventListener('error', function (e) {

    console.log('fail', e);

    })

    } catch (error) {

    }

    })

    });

    wx.error(function(err) {

    me.$toast(err.errMsg);

    });

    二、对应的HTML模板

    注意点:username:需要跳转的微信小程序的原始id以gh_开头

    path:需要跳转的微信小程序的路径,这里注意的是路径后面需要添加.html

    由于是vue框架,需要把template标签转换为script标签避免和vue的tempalte报错

    id="launch-btn"

    :username="appid"

    path="pages/personalInfoSub/personalInfoSub.html?type=active"

    v-if="showtplBtn"

    >

    //这里的样式必须在这个插槽中写

    .label {

    color: #448ce1;

    font-size: 15px;

    display:block;

    text-align:center;

    margin-top: 10px;

    }

    跳转小程序

    三、解决报错问题如若在控制台出现以下报错信息vconsole.min.js?aac1:10 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    found in

    --->

    at src/views/index/index.vue

    at src/App.vue

    解决办法:

    在main.js里面天下Vue.config.ignoredElements = ['wx-open-launch-weapp']这一行代码即可

    四、一些注意事项需要再公众号里面绑定需要跳转的小程序

    获取jssdk配置的时候需要再公众平台绑定安全域名

    通过接口获取jssdk配置的时候url需要时动态获取的,且绑定过安全域名

    微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android5.0及以上。

    如若需要在微信的wx-open-launch-weapp添加img标签,img的路径需要为base64或者远程地址,不能为本地的静态地址

    在vue里面若wx-open-launch-weapp子元素里面包含img标签,不能通过循环(v-for)来渲染图片,否则图片渲染不出来,可以在HTML模板里面写死

    展开全文
  • 支付宝h5跳转小程序

    2021-03-12 11:12:07
    其他 APP 或 外部 H5 跳转小程序目前有两种方式可以跳转: Scheme 拼接方式: 前缀https://ds.alipay.com/?scheme= 后拼接 Scheme alipays://platformapi/startapp?appId=xxx&page=x/y/z&query=xx%3dxx 小...
  • vue 实现H5跳转小程序

    千次阅读 2020-12-28 14:46:36
    这里写自定义目录标题vue实现H5跳转小程序 vue实现H5跳转小程序 公司需求实现h5跳转小程序,看了很多文档发现对于小白不太容易理解,记录下,以备查阅。 适用环境 微信版本要求为:7.0.12及以上。 系统版本要求为:...
  • 微信h5跳转小程序

    2020-12-31 16:02:51
    微信h5跳转小程序 要求: 微信开放标签有最低的微信版本要求,以及最低的系统版本要求。 微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。 具体实施: 参考链接微信官方...
  • 解决h5跳转微信小程序样式问题
  • 云开发生成短连接h5跳转小程序 **此项目是在之前的非云开发项目中添加云函数–从而达到生成短连接h5跳转小程序的目的。。 前提-先开通云服务:点击左上角云开发按指引开通 ** 如想直接通过静态网站html的方式h5跳转...
  • 一、H5跳转小程序必须满足的几个条件 1、开发使用者必须是已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。 2、开发使用者必须是已认证的非个人主体的小程序,使用小...
  • 网页跳转小程序需要使用微信的开放标签wx-open-launch-weapp ,使用开放标签需要使用微信的jssdk,然后sdk的版本不能低,低版本点击无效。 先给官方文档的链接点击跳转 建议认真看完,这个坑有点多 1.必须有插槽...
  • 微信虽然推出了微信开放标签可以实现h5跳转小程序。 但是,开发者在使用之前要在公众号设置JS接口安全域名,不仅限制个数还限制修改次数,而且在使用之前还得获取access_token、ticket等计算signature传入config,...
  • 背景 目前的vue公众号项目 有个投放需求 投放位置 在非微信端 为了转化效率 我们使用了 小程序 要在用户购买后 可以直接跳转 小程序 使得用户的流程更加顺畅 但是在 H5 跳转小程序的时候 尤其是在建立云函数的时候 ...
  • 有时候小程序会引用一些wap页面,但是wap页面里有一些点击跳转的地方还是wap,我想让他在小程序里时点击跳转小程序。 例如:列表页里的一个按钮#clickDetail,在wap站里点击跳转wap详情页,如果在小程序里点击就跳...
  • vue H5跳转小程序

    千次阅读 2020-12-17 18:07:34
    使用此标签后,用户需在网页内点击标签按钮方可跳转小程序H5 通过开放标签打开小程序的场景值为 1167. 此功能的开放对象: 已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合
  • 通过在微信小程序公众号平台管理中进行设置跳转到web链接地址,就可以实现小程序中访问我们的官网或某一个H5页面,增加其他功能的潜入,如果是京东那么可能就会把小程序中打开的H5进行关联起来,接下来看如何进行...
  • H5跳转小程序(微信开放标签使用)

    千次阅读 2020-08-31 10:30:02
    今天七月,微信终于提供了H5跳转小程序的功能;果然方便了许多;限制条件也比较宽松吧。 限制条件: 微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。 使用步骤: 微信开放...
  • 微信H5跳转小程序

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

空空如也

空空如也

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

h5跳转小程序