H5跳转小程序，可以跳转任意小程序，以及任意小程序的页面地址获取。

H5跳转小程序 。

1登录 微信公众平台 进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

2这个JS接口安全域名就是访问你H5地址的域名。

3通过config接口注入权限验证配置并申请所需开放标签（ 签名算法 ）

如果上面操作都没有问题 那么打开页面会显示这样的界面

这里可以看到config配置都加载出来了，但是按钮没有显示

直接用手机打开这个网页

好的，测试成功。

有的<template>这个标签不显示换成<script type="text/wxtag-template">这个试试

如果按钮手机上不显示 检查下config是否载入 检查APPID是否是对应的服务号，检查JS安全域名是否配置了你的H5域名地址。

如果出现图上这样的问题：需要确认一下，微信版本要求为：7012及以上。 系统版本要求为：iOS 103及以上、Android 50及以上。

此标签id为小程序的原始ID，path为小程序的页面地址后面必须加html，上面这个地址是我跳转小程序直播间，亲测成功。

你可以跳转任意小程序，只需要知到他页面地址。页面地址的获取方法：

我这里以QQ音乐小程序为例。

1第一步把该小程序添加到我的小程序

2第二部点击名称 查看更多资料获取到原始ID和APPID

3进入小程序后台，点击工具获取小程序码，把刚刚得到的APPID放进去

4点击获取更多页面路径，把自己的微信号填进去，点击开启。然后回到QQ音乐小程序，点击右上角三个点，你会发现多了个复制链接。

pages/home/homehtml 这个就是获取到QQ音乐的页面链接。

然后我们把原始ID和这个链接填入到刚刚H5标签内，就可以跳转到QQ音乐了。

小程序上线后，改版了很多次，包括一些 Api 接口也有改动。如果你学习一个很久之前的小程序项目是没有意义的，本文推荐的小程序都是最近有更新的。相信在你学习、部署的过程中，不会遇到很多问题。

本文推荐的项目从入门到进阶都有，收藏起来吧。

02 小程序书店

技术栈：Taro + Taro UI + Redux + Webpack + ES6 + Mock。这个项目可以作为你第一个小程序练手项目。

这个小程序非常简单，可以作为初学者第一个实战项目。帮助新手理解 Taro 与 Redux 的配合方式与 Taro 的基本使用。本项目还提供了一个快速搭建本地 mock 服务的解决方案。

除此之外，这个项目还提供了学习文档：

03 高仿喜马拉雅

如果你仅仅有 HTML CSS Js 的知识储备，想开发一个属于自己的小程序，这个 Demo 再适合你不过了，这个高仿喜马拉雅是一个初级项目完全使用微信小程序原生开发，没有使用自定义组件，非常的适合微信小程序开发新手。

04 网易云音乐小程序

基于Taro与网易云音乐 api 开发，技术栈主要是：typescript+taro+taro-ui+redux+react-hooks。

目前主要是着重小程序端的展示，主要也是借此项目强化下上述几个技术栈的使用，打造一个最佳实践项目，通过这个项目也可以帮助你快速使用 Taro 开发一个属于你自己的小程序。

这是该小程序实现的一些功能：

小程序 GitHub Trending Hub 是一个以 Feed 流形式查看 GitHub Trending 仓库集合的工具，通过它可以及时查看最近更新的热门仓库。

刚刚提及的项目适合新手入门，这个小程序适合进阶选手。这个程序涉及很多组件的使用比如：

07 情书站点

第一个项目是校园小情书的微信小程序，该项目功能包括表白墙、树洞、校园论坛。

下载。

微信js文件版本大于等于160

https://reswxqqcom/open/js/jweixin-160js

windowwxconfig({ otherConfig, openTagList:['wx-open-launch-weapp']})

conststyle = {position:'absolute',top:0,right:0,bottom:0,left:0,};functionOpenWeapp({ originId, pagePath }) {return();}// 使用方式