精华内容
下载资源
问答
  • 微信小程序跳转到其他网页(外部链接)

    万次阅读 多人点赞 2018-03-08 13:48:50
    个人类型和海外类型的小程序不支持 web-view 标签 也就是说个人申请的小程序,就别想跳转了!!!! 1.开发的时候,我们难免碰到要跳转到其他网页中去那该怎么实现呢? 2.例如我想点击一个按钮,跳转到百度(百度...

    个人类型和海外类型的小程序不支持 web-view 标签  也就是说个人申请的小程序,就别想跳转了!!!!

    重磅消息 小程序逐渐会支持分享链接到朋友圈 点击下方链接前往查看演示地址

    分享朋友圈文章地址:https://blog.csdn.net/qq_32113629/article/details/107177622

    演示地址:

    1.开发的时候,我们难免碰到要跳转到其他网页中去那该怎么实现呢?

    2.例如我想点击一个按钮,跳转到百度(百度的网页还是在小程序中打开) 

    3.wxml

       1. index.wxml   (按钮页面)

    <view class='wrapper'>
        <button class='wepay' bindtap='goBaidu'>点击跳转</button>
      </view>

       2.out.wxml  (百度页面),

    <web-view src="https://www.baidu.com/"></web-view>
    //放心你没有看错就这么一行就行了//把你要跳转的界面用src 就可以了,以后要跳转到哪,src里面地址就写哪!

        3.别忘了,要在app.json中配置一下路由,

    "pages":[
        "pages/a/a",
        "pages/b/b"
      ],
    
    

        电脑上是可以跳转的,体验版的话,在手机上是不好使的,除非你已经在小程序后台完成了配置域名,但是!!!!

    注意!!这是顶级注释请看第四条


    4.需要配置业务域名并上传验证文件:

    这是我的vx公众号全是技术文章:

    这个是我本人的前端技术QQ交流群

     

     

     

    如果文章对你有帮助  希望各位可以给我的群 冲冲人气 

    4.1校验文件需要放在你要跳转到的网站的根目录下面才可以!!!也就是说你想跳转到别人网站网页里面 需要得到别人的同意!!

    那比如这个跳转到www.baidu.com 就是行不通的了,只能是自己在开发的时候玩玩(在开发者工具中点设置-项目设置-在不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书 前面打上对勾),在正式发布时候肯定是行不通的!!!

    4.2那你想跳转到自己的网站中就需要配置域名、下载校验文件了!!再次强调 个人类型与海外类型的小程序暂不支持使用web-view

    进入到小程序后台 https://developers.weixin.qq.com   设置-开发设置 -业务域名

    4.3web-view 的 src可以是可打开关联的公众号的文章地址! (打开公众号这块也是个坑)

    5.index.js

    goBaidu:function(){
        wx.navigateTo({
          url:'../out/out', //
          success:function() {
    
          },       //成功后的回调;
          fail:function() { },         //失败后的回调;
          complete:function() { }      //结束后的回调(成功,失败都会执行)
     })

    6.效果图

     

     

    展开全文
  • 小程序跳转到其他小程序

    万次阅读 2019-01-17 10:55:02
    我记得在之前的几个月小程序跳转必须是同一主体(同一公众号),但是现在不用了!!可以随便跳转 了!! 一、使用限制 1.需要用户触发跳转 从 2.3.0 版本开始,若用户未点击小程序页面任意位置,则开发者将无法...

    我记得在之前的几个月小程序跳转必须是同一主体(同一公众号),但是现在不用了!!可以 随便跳转 了!!没有数量限制了!之前只能跳转10个,还需要配置到app.json中,现在不用了。现在没有任何限制 随便跳转!!!

    这是我的微信公众号全是技术文章:

     

    【 -------

    差个话题:

    演示地址  : https://blog.csdn.net/qq_32113629/article/details/106711377   

    用Node、Express + Vue、 Element-ui Blog、Mysql 实现前后端分离博客管理系统  ,详情咨询下方技术群

    ---------】

    一、使用限制

        1.需要用户触发跳转

    从 2.3.0 版本开始,若用户未点击小程序页面任意位置,则开发者将无法调用此接口自动跳转至其他小程序。

        2.需要用户确认跳转

    从 2.3.0 版本开始,在跳转至其他小程序前,将统一增加弹窗,询问是否跳转,用户确认后才可以跳转其他小程序。如果用户点击取消,则回调 fail cancel

        3.每个小程序可跳转的其他小程序数量限制为不超过 10 个

    从 2.4.0 版本以及指定日期(具体待定)开始,开发者提交新版小程序代码时,如使用了跳转其他小程序功能,则需要在代码配置中声明将要跳转的小程序名单,限定不超过 10 个,否则将无法通过审核。该名单可在发布新版时更新,不支持动态修改。配置方法详见 如下代码。调用此接口时,所跳转的 appId 必须在配置列表中,否则回调 fail appId "${appId}" is not in navigateToMiniProgramAppIdList

       4.关于调试

    • 在开发者工具上调用此 API 并不会真实的跳转到另外的小程序,但是开发者工具会校验本次调用跳转是否成功。详情
    • 开发者工具上支持被跳转的小程序处理接收参数的调试。详情

    二、配置详情

        app.json文件中 最后一行 是你配置要跳转到的小程序 appid ,最多能配置10个

    "navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
    app.json
    {
      "pages": ["pages/index/index", "pages/logs/index"],
      "window": {
        "navigationBarTitleText": "Demo"
      },
      "tabBar": {
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首页"
          },
          {
            "pagePath": "pages/logs/logs",
            "text": "日志"
          }
        ]
      },
      "networkTimeout": {
        "request": 10000,
        "downloadFile": 10000
      },
      "debug": true,
      "navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
    }
    

    三、使用方法

        这个是我本人的,前端技术QQ交流群,有不会的问题,可以在在群里面问

        1.  使用wx.navigateToMiniProgram 打开 。wx.navigateToMiniProgram 官方api

          如果你打开之后想返回之前的小程序 使用 wx.navigateBackMiniProgram 返回之前小程序api 

         注意:返回到上一个小程序。只有在当前小程序是被其他小程序打开时可以调用成功  。     

    wx.navigateToMiniProgram({
      appId: '',//要打开的小程序 appId
      path: 'page/index/index?id=123',//打开的页面路径,如果为空则打开首页
      extraData: {
        foo: 'bar'//需要传递给目标小程序的数据,目标小程序可在 App.onLaunch,App.onShow 中获取到这份数据
      },
      envVersion: 'develop',//要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。如果当前小程序是正式版,则打开的小程序必定是正式版。
      success(res) {
        // 打开成功
      }
    })

    2. 使用 navigator 组件

    <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
    

     

    展开全文
  • 因为小程序跳转的时候需要公众号关联,但是关联的数量是有限的!因此该文章的处理方案是: a.关联的小程序,直接可以点击打开 b.没有关联的,那么可以长按识别小程序码来进入小程序 下面展示效果: 1.点击关联有...

    场景描述:

    因为小程序跳转的时候需要公众号关联,但是关联的数量是有限的!因此该文章的处理方案是:
    a.关联的小程序,直接可以点击打开
    b.没有关联的,那么可以长按识别小程序码来进入小程序

    下面展示效果

    1.点击关联有appid的时候,直接进入小程序
    2.点击没有appid的时候弹出小程序码,长按识别可以进入小程序
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    js代码:

    Page({
      data: {
         gameInfo: [
    	      {
    	        appid: "",
    	        gameId: 12329,
    	        gameLogo: "http://zhihuiyuan.oss-cn-beijing.aliyuncs.com/1-wechet/game/1537246277627.png",//展示的图片
    	        gameName: "萌宠地图",
    	        gameUrl: "http://zhihuiyuan.oss-cn-beijing.aliyuncs.com/mYPYmhStYj.jpg",//小程序码
    	      },
    	      {
    	        appid: "wx2cb0ab4b1be0e577",
    	        gameId: 12331,
    	        gameLogo: "http://zhihuiyuan.oss-cn-beijing.aliyuncs.com/1-wechet/game/1537246649090.png",//展示的图片
    	        gameName: "游戏点评家",
    	        gameUrl: "",
    	      },
    	    ],
        },
        //点击方法1:跳转小程序
      intoUrl: function(e) {
        console.log(e);
        var gameAppId = e.currentTarget.dataset.appid; //游戏appid
        if (gameAppId){//存在appId
          wx.navigateToMiniProgram({
            appId: gameAppId, // 要跳转的小程序的appid
            path: "", // 跳转的目标页面
            extarData: {
              open: 'auth'
            },
            success(res) {
              console.log("跳转成功展示");
            }
          })
        }else{//不存在appId
          this.previewImageUrl(e);
        }
      },
      previewImageUrl: function (e) {
        var url = e.currentTarget.dataset.url;
        var imgArr = [];
        imgArr.push(url);
        wx.previewImage({
          current: imgArr[0], // 当前显示图片的http链接 
          urls: imgArr // 需要预览的图片http链接”列表“ 
        });
      },
    })
    

    注意:previewImage中”urls“需要填写数组形式的值

    wxml代码:

    <view class="recommend_scroll_box">
      <view class="recommend_hot_box" wx:for="{{gameInfo}}" wx:key="{{info.gameId}}" wx:for-item="info">
        <view>
          <image src='{{info.gameLogo}}' data-url="{{info.gameUrl}}" data-appid='{{info.appid}}' bindtap="intoUrl"></image>
        </view>
        <text>{{info.gameName}}</text>
      </view>
    </view>
    

    注意:data-url如果写成data-URL,注意取值的时候还是var url = e.currentTarget.dataset.url(忽略大小写问题!)

    希望小伙伴们能够看到自己想要的效果!

    展开全文
  • 主要介绍了小程序跳转到的H5页面再跳转回跳小程序的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 最近遇到了一系列的小程序跳转问题,甚是头大,好不容易最后都解决了,总结记录一下 1、小程序中加载H5页面,H5页面是一个表单,提交后执行跳转小程序的其他页面 (1)小程序中加载H5页面 在小程序中加载H5...

     

    最近遇到了一系列的小程序的跳转问题,甚是头大,好不容易最后都解决了,总结记录一下

    1、小程序中加载H5页面,H5页面是一个表单,提交后执行跳转到小程序的其他页面

    (1)小程序中加载H5页面

    在小程序中加载H5页面需要通过小程序提供的<web-view>(官方文档看这里https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html)主要是在src中绑定相应的H5页面url地址,如https://www.baidu.com这种;

    注意:在web-view中加载的页面的域名,需要在微信公共平台中配置业务域名,,否则会在加载页面时给出非法业务域的安全提示,个人和海外账号暂时不支持,因为为了公司的需求开发的,企业账号还是支持的哈哈(可参考这篇腾讯官方文档https://kf.qq.com/touch/sappfaq/171102ue6viI171102jm63uy.html),在这篇文档的底部有几个注意事项需要关注,尤其时联合开发的时候:一个小程序最多配置20个安全业务域名,每个域名最多绑定20个小程序,一年内修改域名的次数不能超过50次(次数这个限制要注意了,所以输入域名的时候一定要谨慎一点);

    添加成功后可以在微信开发者工具中详情信息中的域名信息中进行查看,分为几个分类包括request啊文件上传下载啊各种,如果你的h5页面涉及很多接口的话,建议都添加上,各个分类中相同的域名配置是算作一个的,不用担心在不同分类中配置相同的域名会占用20个业务域名的名额。

    之后,通过访问你设置的web-view的路由加上?url=encode之后的url就可以访问web-view页面了,不过在开发者工具里面有接口的页面在调试的时候预览存在问题,我的是没看到页面。。。不过真机上是ok的。

    2、H5页面跳转回小程序

    这个功能是基于第一步的,在web-view中内嵌了H5页面后,如果需要进行跳转回小程序的操作,参考web-view的官方文档

    我们需要引用微信的jssdk执行这项操作,jssdk官方文档请看这里(https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)但是请注意这一点!很重要,虽然下图中提示不进行wx.config无法使用jssdk,但是!实际情况,使用上图中wx.miniProgram的一系列方法只需要引入jssdk就好了,并不需要进行复杂的注册(跳转调用的是navigateTo方法,不需要注册,不需要注册,不需要注册),如果你需要使用jssdk的其他接口方法,请务必按api进行注册。

    引入jssdk可以通过script直接引入,也可以通过npm 安装后进行导入

    script导入:

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

    npm 安装后导入(yarn不支持安装,试过了) 

    文档看这里https://www.npmjs.com/package/weixin-js-sdk

    npm install weixin-js-sdk

    我h5页面使用的vue,导入方式如下

    import wx from "weixin-js-sdk" ;//引入jssdk 

    接下来就可以使用跳转了,示例代码如下

    let path = '/pages/xxx?id=111';//注意路径一定要有/path/xxx  直接写path/xxx会跳转失败

    wx.miniProgram.navigateTo({

           url: path

    });

    可以实现跳转

    3、小程序跳转小程序

     小程序跳转小程序,官方文档看这里(https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateToMiniProgram.html

    一开始没有仔细看文档。。。以为简单的在判断逻辑里面加跳转方法就好了,结果!我的基础库是2.3.0以上的,当然没有生效了,原因是这一句

    为了让用户点击一下,曲线救国,在逻辑判断里面添加了modal确认跳转提示框,在确认事件里引入了跳转,多了一步确认哈哈,

     wx.showModal({
        title: '提示',
        content: '您已xxx,将跳转至xxxx',
        confirmColor: "#1aad19",//设置确认按钮为绿色
        showCancel: false,//不显示取消按钮
        success: function (sm) {
            wx.navigateToMiniProgram({
                appId: "需要跳转的小程序的appId",
                 path: '跳转页面的路径如path/index/index',
                 extraData: {//传递的参数
                   id: id
                 },
                 envVersion: "develop",//线上版固定为release,开发为develop,体验版为trial
                 success(res) {
                   // 打开成功
                   console.log("跳转成功");
                 }
             });
            }
         })

    跳转还需要在app.json中配置可跳转的小程序的id集合,上图最后也有提示到2.4.0版本xxxx,话不多说,配置文档在这里(https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE),如图添加

    注意:如果是跳还需要在根app.json文件中配置可跳转的小程序appid集合列表(单个小程序可接受跳转过来的小程序链接配置不超过10个),如下图

    "navigateToMiniProgramAppIdList": [
    
        "appid1",
    
        "appid2"
    
    ],

    这个如果跳转成功的话,在开发者工具中就可以得到验证,2.3.0以上会提示将打开xx小程序,是否同意,成功~ 

    个人总结,如有遗漏,欢迎评论批评指正,谢谢~~~

     

    展开全文
  • 小程序跳转h5页面.rar

    2019-12-18 15:19:29
    使用tarojs生成微信小程序,实现小程序跳转h5页,或者跳转小程序,需要配置需要跳转的小程序openid,之后再需要跳转的页面将url带入webview中,动态概念webview中的url,并将webview中的url与视图关联,达到预期效果...
  • 在公众号上关联你要跳转小程序,然后配置在菜单上就可以了。 官方未开放 小程序—×—>公众号 打开小程序 小程序——>小程序 打开同一公众号下关联的另一个小程序。(注:必须是同一公众号下,而非同个 ...
  • 最近开发中常常遇到需要模拟公众号跳转到某个小程序或者小程序跳转小程序的情况,开发阶段一般我们都使用微信开发者工具进行开发,存在跳转的情况应该如何模拟呢,尤其是遇到bug的时候,总是在真机上面看真是太吃力...
  • 小程序跳转到的H5页面,再跳转回跳小程序

    万次阅读 热门讨论 2018-08-21 10:00:14
    哈喽,大家上午好,萍子又来啦,本人最近一段时间一直...之前萍子写过一篇从小程序跳转到H5页面的博文小程序跳H5页面,那么今天我们一起来看看如何跳回来,我们要有始有终哇,O(∩_∩)O哈哈~ H5跳转到小程序的方...
  • taro小程序跳转h5页面

    千次阅读 2019-12-02 11:37:08
    微信小程序跳转h5页面 项目架构-tarojs+react+sass+微信开发者工具 项目使用taro官网上面的步骤构建起来的项目架构,之后生成微信端的小程序,由于项目与车险有关,需要多个渠道融合在一起,所以避免不了要调用...
  • 主要介绍了微信小程序 跳转页面的两种方法详解的相关资料,需要的朋友可以参考下
  • 微信小程序跳转公众号

    千次阅读 2020-07-05 15:09:34
    微信小程序跳转公众号 开发者在小程序内设置公众号关注组件时,需小程序与公众号****主体一致。设置完成后,当用户线下扫码进入小程序时,就能便捷地关注公众号,并获取更好、更完整的服务了。 设置了关注公众号...
  • A小程序跳转到B小程序,并且把参数带到B小程序。 A小程序代码: wxml &lt;navigator target="miniProgram" open-type="navigate" app-id="{{BappId}}" path="{{path}}&...
  • 最近在开发小程序时需要做小程序跳转到美团的小程序商家详情页面,前段使用的是wx.navigateToMiniProgram(Object object),方法,前期使用的时候功能是是正常的,突然昨天用户提出跳转到美团页面时出现白屏,神奇的...
  • 小程序跳转APP

    千次阅读 2019-05-24 14:44:00
    **小程序跳转APP的问题 最近公司要求把小程序和APP之间可以相互跳转,于是我开始了我的艰难探索之旅。下面给大家分享一下我的过程 第一步:场景 小程序是不支持主动跳转app的,这个大家应该清楚。只有在场景值1036,...
  • 微信小程序跳转微信小程序无反应,navigator失效 无响应 // 在 app.json 中添加 // appId 另一个小程序的appId "navigateToMiniProgramAppIdList": ["appId"]; 跳转(navigator) <navigator target=...
  • 微信小程序跳转到另一个小程序有一个条件!! 这两个小程序被同一个微信公众号关联,否则不能跳转,会报错。 官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateToMiniProgram.html wx....
  • 如何识别从其他小程序跳转到另一小程序 1.通过场景值判断 当 referrerInfo.scene == 1037 时,就可以判断是从小程序跳转小程序。 referrerInfo 参数也可以写在 onLaunch 里,不过都需要写在 app.js 里 ...
  • 小程序跳转公众号

    千次阅读 2019-06-13 09:37:13
    小程序跳转公众号是通过组件进行跳转的,步骤如下: 1.在微信公众平台上关联公众号,然后打开公众号关注组件 2.在页面上使用:<official-account></official-account>标签引入公众号关注组件 注意组件...
  • uniapp 微信小程序跳转至其他小程序

    千次阅读 2020-07-31 15:37:43
    微信小程序跳转至拼多多小程序 要点 根据后台传给的路径和appId进行传值 @click="tao(item.weAppInfo.pagePath, item.weAppInfo.appId)" item.weAppInfo.pagePath, item.weAppInfo.appId 都是后端返回的数据 在方法...
  • 微信小程序跳转到外部连接和外部链接跳回小程序1、跳转外部连接1.1、新建一个页面wxml存放web-view组件(page1)1.2需要跳转的页面,跳转到page11.3添加业务域名1.3.1在域名服务器根目录上传微信验证文件1.3.2添加...
  • 微信小程序跳转第三方网页、第三方小程序。微信小程序跳转第三方网页跳转第三方网页的问题微信小程序跳转第三方小程序 微信小程序跳转第三方网页 最近需要做一个小程序跳转携程的功能,首先考虑到的是跳转到携程的h5...
  • 微信小程序跳转页面带参数

    千次阅读 2020-06-23 23:54:02
    微信小程序跳转页面带参数 1.给参数赋值 2.跳转页面 3.在目的地页面的onload里打印即可得到上个页面带过来的参数 4.完整的带参跳转方法(js)
  • 微信小程序跳转其他小程序报错

    万次阅读 2018-08-30 19:32:22
    当前小程序和要跳转到指定的小程序,二者之间已经满足了都是同一公众号下关联的小程序的前提。 不满足前提,无法在一个小程序内打开另一个小程序。 tip:只有同一公众号下的关联的小程序之间才可相互跳转。 详情入口...
  • 微信小程序跳转页面携带参数

    千次阅读 多人点赞 2019-06-21 09:41:55
    小程序跳转页面并携带参数,有两种情况,一是在wxml里通过navigator url跳转,一种是在js里通过点击事件跳转,下面案例为跳转详情页面 在wxml中: <view class='wait-solve' wx:for="{{items}}" wx:key="items...
  • 小程序跳转小程序

    千次阅读 2018-09-30 14:39:12
    id=123',//跳转关联小程序app.json配置里面的地址 extraData: {//需要传递给目标小程序的数据,目标小程序可在 App.onLaunch(),App.onShow() 中获取到这份数据。 foo: 'bar' }, //**重点**要打开的小程序版本,...
  • 小程序跳转html页面方法!

    千次阅读 2020-06-02 15:13:14
    1、web-view是小程序的一个内置标签,可以让你从当前小程序跳转到一个新的html页面,使用起来非常方便。 2、使用方法: <web-view src="https://www.baidu.com/"></web-view> 如果没有打开的话可以试试...
  • 主要介绍了微信小程序跳转到其他网页(外部链接)的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 小程序 跳转到腾讯文档小程序

    千次阅读 2021-07-13 16:30:43
    1、需求 在小程序内打开腾讯文档 2、要打开的文档 先把需要跳转的文档准备好, 然后分享出去, 方便复制链接

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 291,981
精华内容 116,792
关键字:

小程序跳转