uniapp开发的h5跳转原生小程序

Uniapp是目前比较流行的一款跨平台应用开发框架，可以开发多个平台的应用程序，包括H5、小程序、APP等。在实际开发中，我们通常会遇到需要从一个H5页面跳转到一个原生小程序的场景，比如说我们在H5页面做了一些介绍，但想通过小程序的更好的交互体验来提供更好的服务。那么如何实现H5页面跳转原生小程序呢？以下是实现方法的介绍。

一、H5页面中的原生小程序跳转原理

在微信小程序中，我们可以通过在H5页面中使用小程序功能组件来实现跳转原生小程序的功能，其原理是通过微信开放的JS-SDK提供的API来进行调用。

要想使用微信JS-SDK必须要满足以下条件：

1.小程序必须要先获取到用户授权。

2.必须使用最新的微信版本。

3.必须先经过微信的域名审核，通过DomainVerification。

4.必须在后台配置JS接口安全域名。

二、实现步骤

1.获取微信配置信息

为了使用JS-SDK，我们需要先获取微信的一些配置信息，从而进行验证和调用。

有两种获取微信配置信息的方式：

方式一：通过微信公众号后台获取

微信公众号后台->开发->基本配置->开发者ID（AppID）、开发者密码（AppSecret）->获取access_token->JS接口安全域名

方式二：通过微信开放平台获取

我的菜单->公众号开发->网页授权获取用户基本信息->授权回调页面域名

通过以上获取到相关的信息后，在H5页面的头部添加以下代码，引入微信JS-SDK。

```html

```

在jsp页面的script中添加以下代码，获取微信配置信息并进行签名：

```javascript

function getSignature() {

uni.request({

url: 'https://xxx.xxx.com/api/signature/get',

data: {

url: location.href.split('#')[0]

},

success: res => {

if (res.code === 0) {

wx.config({

appId: res.data.appId,

timestamp: res.data.timestamp,

nonceStr: res.data.nonceStr,

signature: res.data.signature,

jsApiList: [

// 需要使用的JS接口列表

'chooseWXPay',

'updateTimelineShareData',

'updateAppMessageShareData',

'onMenuShareAppMessage',

'onMenuShareTimeline',

'startRecord',

'stopRecord',

'translateVoice',

'chooseImage',

'previewImage',

'uploadImage',

'downloadImage',

'getLocation',

'scanQRCode'

]

})

}

}

})

}

```

以下是封装签名获取接口的示例代码：

```php

public function getSignature()

{

$url = $_GET@['url'];

$noncestr = rand(100000, 999999);

$timestamp = time();

$token = 'TOKEN';

$res = [];

$qstring = "select ticket from wx_ticket where id = 1";

$tickets = $this->db->query($qstring)->fetchAll();

$ticket = $tickets[0]['ticket'];

$signature = sha1("jsapi_ticket=$ticket&noncestr=$noncestr×tamp=$timestamp&url=$url");

$qstring = "select appid,appsecret from wx_config where wxid = 1";

$configs = $this->db->query($qstring)->fetchAll();

$appid = $configs[0]['appid'];

$res['appId'] = $appid;

$res['nonceStr'] = $noncestr;

$res['timestamp'] = $timestamp;

$res['signature'] = $signature;

$this->json_return(0, '', $res);

}

```

2.检查是否授权

如果用户没有授权登录，我们需要先引导用户进行授权，通过以下代码来检查是否授权。

```javascript

wx.ready(function() {

wx.checkJsApi({

jsApiList: ['chooseWXPay'],

success: function(res) {

console.log(res);

if (!res.checkResult.chooseWXPay) {

wx.authorize({

scope: 'scope.userInfo',

success: function(res) {

console.log('授权成功！');

//调用下面的操作action

},

fail: function(res) {

console.log('授权失败');

}

})

}

}

})

})

```

3.调用微信的JS接口

在获取到配置信息并检查授权后，我们就可以调用微信的JS接口来实现跳转小程序的功能了。

以下是跳转小程序的代码示例：

```javascript

wx.miniProgram.navigateTo({

url: '/pages/index/index'

})

```

完整示例代码：

```html

点击跳转到小程序

```

三、总结

通过以上的介绍，我们已经了解到了H5页面跳转原生小程序的实现方法。需要注意的是，微信JS-SDK的使用需要满足一定的条件，在实际开发中需要结合实际情况进行调整。