这里记录一下微信HTML网页跳转微信小程序的开发过程。
先放一下微信公众号的开发文档地址：
developers.weixin.qq.com/doc/offiacc…
众做周知，嗯，微信公众号的开发文档。是一个很正经的文档。你要是一点经验没有，或者您作为一个纯前端的开发人员来看这个玩意的话，你以为你看懂了，但是他就是不好用，就是这么神奇。就吐槽到这里。下面直接进入主题。
事先声明一下，我这里使用单页面html + vue2开发。
我这里按照开发文档一步一步来推进。
一：在html文件中引入如下js库
<!-- VUE库 -->
<script src="https://cdn.staticfile.net/vue/2.6.0/vue.js"></script>
<!-- JQUERY库 -->
<script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
<!-- 微信JS文件 -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
二：HTML部分
我们先来看一下文档中给出的实例，代码如下：
<wx-open-launch-weapp
id="launch-btn"
appid="wx1111111111111111"
username="gh_111111111111"
path="pages/index/index.html"
@error="handleErrorFn"
@launch="handleLaunchFn">
<script type="text/wxtag-template">
<style>.btn { padding: 120px }</style>
<img style="width:100%;" src="https://resource.guanchao.site/uploads/atricle/20210327/002902a941102f161bbbd325c907861e.jpg" alt="">
<p>跳转小程序</p>
</script>
</wx-open-launch-weapp>
这里要注意一个小问题，这个小问题折磨的我好难受，在HTML页面中可以使用script标签包裹的内容，如上图所示。
但是我使用的是VUE，那这个文件就不是单纯的HTML页面了。使用script标签包裹的内容就显示不出来了。切记。
那该怎么办呢？
使用template标签包裹即可，代码如下所示：
<template>
<div>
<style>.btn { padding: 120px }</style>
<img style="width:100%;" class="btn" src="https://resource.guanchao.site/uploads/atricle/20210327/002902a941102f161bbbd325c907861e.jpg" alt="">
<p>跳转小程序</p>
</div>
</template>
好啦这个问题就解决了。
wx-open-launch-weapp标签的属性值按照官方给出的示例对应填写即可。
三：js部分
1：按照官方文档：通过config接口注入权限验证配置并申请所需开放标签
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [], // 必填，需要使用的JS接口列表
openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});
这里需要使用到权限签名算法来获取上方代码块中的参数，这部分算法我写在了后端的接口中。我后端使用的是PHP语言。
我的做法是，签名在后端生成。返回给前端。因此我做了一个接口请求，代码如下：
<script>
Vue.config.ignoredElements = ['wx-open-launch-weapp'];
var app = new Vue({
el: '#app',
data: {
dataList: null,
},
methods: {
handleErrorFn(e) {
console.log('fail', e.detail);
alert('vuefail');
},
handleLaunchFn(e) {
console.log('success');
alert('vuesuccess');
},
//获取数据 卡片详情
getData()
{
var tagUrl = location.href;
tagUrl = encodeURIComponent(tagUrl); // 自己后台接口 传当前页面路径参数, 获取 config配置参数
// console.log(tagUrl)
$.get('https://xxxxxxxxxx?url=' + tagUrl, function (res) {
console.log(res);
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.data.appId, // 必填，()我们这里填的服务号)公众号的唯一标识
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
signature: res.data.signature, // 必填，签名
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'checkJsApi',
"scanQRCode",
"updateAppMessageShareData",
"updateTimelineShareData",
], // 必填，需要使用的JS接口列表 (随便写一个就行)
openTagList: ['wx-open-launch-weapp'],
});
// config之后会自动调用ready方法
wx.ready(function ()
{
console.log(111111111)
// 验证接口是否注册完成
wx.checkJsApi({
// jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'wx-open-launch-weapp'],
jsApiList: ['wx-open-launch-weapp'],
success: function (res) {
console.log('验证接口是否注册完成-成功');
},
error:function(res)
{
console.log('验证接口是否注册完成-失败');
}
});
});
wx.error(function (res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
console.log(res)
});
});
},
},
/**
* @name: 页面挂载的时候请求数据
* @author: camellia
* @date: 2024-01-28
*/
mounted()
{
this.getData();
},
});
</script>
后端获取权限签名算法的PHP代码如下所示：
/**
* @name: 获取签名包
* @author: camellia
* @date: 2022-02-11
* @param $url string 链接
*/
public function getWxSign($url = '')
{
$jsapiTicket = $this->getJsApiTicket();
$timestamp = time();
$nonceStr = $this->createNonceStr();
// 这里参数的顺序要按照 key 值 ASCII 码升序排序
$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=" . $url;
$signature = sha1($string);
// $signature = hex_sha1($string);
$signPackage = array(
"appId" => getenv("WX_APPID"),
"nonceStr" => $nonceStr,
"timestamp" => $timestamp,
"url" => $url,
"signature" => $signature,
"rawString" => $string,
"jsapiTicket" => $jsapiTicket,
);
return $signPackage;
}
/**
* @name: 获取微信通行票据
* @author: camellia
* @date: 2022-02-11
*/
private function getJsApiTicket()
{
$Ticket_expire_time = 0;
$JsApiTicket = 0;
$info = DB::table('wx_config')->where('id', 1)->first();
$Ticket_expire_time = $info->Ticket_expire_time ?? 0;
$JsApiTicket = $info->JsApiTicket ?? '';
// 过期了，重新获取
if (time() > $Ticket_expire_time + 0)
{
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=" . $this->getAccessToken();
$result = http::curlPost($url);
$res = json_decode($result);
$JsApiTicket = $res->ticket;
$this->addLog(5,$JsApiTicket);
if ($JsApiTicket)
{
// 7200秒后过期
$time = time() + 7000;
$res = DB::table('wx_xxxxxx)->where('id', 1)->update([
'ticket' => $JsApiTicket,
'time' => $time,
]);
}
}
return $JsApiTicket;
}
完整前端代码可在文末下载。至此，代码部分。我们就研究的差不多了，接下来，我们需要配置一下微信公众平台。
1：要完成如上的操作，你的微信公众号必须是已认证的服务号。
2：你需要配置js安全域名。配置位置如下图所示：
3：你需要配置IP白名单。具体配置的位置如下图所示：
配置完微信公众号，还注意以下几个坑点
1：上方代码中的wx-open-launch-weapp 标签属性值path="pages/index/index.html" 后面要加.html
2:：就是代码中openTagList: ["wx-open-launch-weapp"] config配置参数必须填这个开放接口
3：不能用js来模拟点击，有了局限性
4：样式无法写在外面中，只能在script标签内内链写或者行内样式
5：无论是内链还是行内 都不支持rem
6：不会继承样式
7：如果开发标签内需要使用图片，不能用本地图片，得用外网可以访问的图片，要不然会不显示
8：信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上 , 不然 显示不了
以上大概就是HTML网页跳转微信小程序的过程。
有好的建议，请在下方输入你的评论。
