关于微信小程序跳转PC端H5页面

1需要配置业务域名

2没有配置业务域名，连接本地调试的：

目前没能在真机上调试

3formwxml页面

formjs

4PC端处理

wxnavigateToMiniProgram

从小A序跳转到小B序

首先介绍一下需要用到的api  ：wxnavigateToMiniProgram 

他的参数们

参数名        是否必填        类型        说明

appId            是                 string        要打开的小程序 appId

path              是                 string        目标小程序的指定页面，为空的话跳首页

extraData     否                 object        需要带给目标小程序的参数

envVersion   否                 string        目标小程序的版本  （基本没啥用）

success       否                 function     成功回调

fail               否                 function     失败回调

complete     否                 function     结束回调

在起步小程序中的appjson中需要配置跳转小程序的appid

目标小程序 可以在appjs中接收起步小程序带过来的参数，官方文档给的是apponLaunch和apponshow都能接到参数，但是我的onLaunch不能打印出来，可能我的小程序是个傻的小程序。（ 注意千万是在appjs中，而不是目标页面的js文件 ，我就吃了这个亏）

小A序(表演跳转)

小B序(表演接收参数)

关于调试，开发者工具是不能跳转的，不过我们可以真机调试，两个小程序都开始真机调试，在小程序右上角的三个小点点有个打开调试，就能看到log出来的参数了，根据自己习惯吧，展示在页面上也是个好办法。

1、首先打开微信开发者工具。

2、然后打开一个页面，找到wxml文件，点击打开。

3、在里面新建一个button按钮。

4、为这个按钮绑定一个事件addweibo，用来做跳转。

5、接着打开这个页面中的js文件。

6、在js文件中新建刚才绑定的函数addweibo。

7、在这个函数里面写上wx:navigateTo({url: '/pages/addweibo/addweibo',})其中url是要进行跳转的地址。然后打开模拟器预览就完成了。

wxrequest({

    success: res => {

        consolelog(resdata)

        if (resdata) {

            wxnavigateTo({

                url: `/pages/index/index` // 希望跳转过去的页面

            })

        }

    }

})

微信小程序实现页面内的跳转——scroll-view

需求：在页面内我们常常会写这样一个效果，一个a标签href=”#id” 点击会跳转到本页面的某个模块。微信小程序里我们要实现这个效果需要用到scroll-view组件

官方组件介绍：/debug/wxadoc/dev/component/scroll-viewhtmlt=2017112

问题：我第一次尝试这个组件的时候应用到自己的项目里发现完全没有反应

然后我开始检查我的代码：

Scroll-y=”true”设置--ok

目标元素Id设置--ok

Scroll-into-view点击跳转时设置为id--ok

将scroll-view组件包裹在整个页面外面并且设置高度为整个页面的高度--ok

表面看完全遵从官方文档，但在我把官方给出的例子看了之后对这个组件有了更清楚的认识，我意识到他其实给我之前写的轮播用了一样的思路，在固定大小的视觉窗口里有一个超出这个窗口大小的页面，通过滚动这个大页面的位置让它的不同部位显示在窗口的可视部分这就给我们造成了页面或其实是在滚动的感觉。

Scroll-view的官方介绍里说需要给scroll-view组件一个固定高度就是这个意思，所以我其实不应该设置scroll-view的固定高度为整个页面的高度，只需要设置为整个屏幕的可视区域高度就可以了。

就像上面这张图展示的，scroll-view组件的高度要设置为移动设备屏幕可视区域高度。

而得到设备高度就又需要微信小程序提供的API：wxgetSystemInfo

/debug/wxadoc/dev/api/systeminfohtml#wxgetsysteminfoobject

Js页

Page({

onLoad:function(){

var that=this

wxgetSystemInfo({

success: function(res) {

thatsetData({

systemInfo:res

})

thatupdate()

}

})

},

data:{

viewID:'main',

systemInfo:{}

},

toBuyCar:function(){

var id='buyCar'

thissetData({

viewID:id

})

}

})

页面上wxml

<scroll-view style="height:{{systemInfowindowHeight}}px;" scroll-into-view="{{viewID}}" scroll-y="true">

以上就是关于关于微信小程序跳转PC端H5页面全部的内容，包括:关于微信小程序跳转PC端H5页面、小程序之间的跳转（带参）、微信小程序怎样实现一个页面里面有两个页面切换等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！