H5打开小程序 分为普通浏览器-和微信浏览器

在这个之前必须要满足

公众号

1. 已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
2. 已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

普通浏览器
1、获取小程序scheme码，适用于短信、邮件、外部网页等拉起小程序的业务场景。通过该接口，可以选择生成到期失效和永久有效的小程序码，目前仅针对国内非个人主体的小程序开放

H5打开小程序 普通浏览器

使用微信开放的urlscheme.generate生成小程序scheme码 使用这个之前需要先获取到接口调用凭证拿到access_token

常见错误

/* 普通浏览器--这个放在前端请求也是可以的-不过不建议 */

          const appid = '小程序appid';
            const secret = '小程序secret ';
          //获取access_token
            const {data:{access_token}} = await axios.request({
                  url:`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`
            })
            
            //获取scheme
            const {data:{openlink}} = await axios.post("https://api.weixin.qq.com/wxa/generatescheme?access_token="+access_token,{
                  "jump_wxa" : {
                        "path" : "/pages/index/index",
                        "query" : "dex=2"
                  }
            })

          //openlink就是scheme
            console.log(openlink);

          然后使用weixin://dl/business/?t= openlink
          直接使用location.href = 'weixin://dl/business/?t= openlink'
          或者创建一个a标签，get事件也是可以的

微信公众号 --这个就必须要服务器了

普通浏览器的相对公众号还是比较简单的，公众号还要使用jssdk还要配置sdk-还要配置服务器，
官方文档

配置好服务器的可以跳过直接看下面
1、先要配置-进入公众号-开发-基本配置-服务器配置-启用填好资料，
当然你也可以选择明文模式
查看示例
2、保存的时候会请求校验服务器-请求上面写的URL

//加密模块
import crypto from 'crypto';
//加密方法
function signFn(arr:Array<string>){
      const sha1  = crypto.createHash('sha1');//sha1
      var str=arr.sort().join('');
      sha1.update(encodeURI(str));//添加需要的加密数据
      return sha1.digest('hex');//加密,(hex表示16进制)
  }

//--[token,传过来的时间戳,传过来的随机字符串]
var obj=['1839a5f3b7feba22a6e2a6ef1467d348',this.get('timestamp'),this.get('nonce')];
            //进行加密
            var sign=signFn(obj);
            console.log(this.get('signature'));
            //对比加密
            if(sign === this.get('signature')){
                  return this.body = this.get('echostr');
            }
            return this.body = 'error';

配置好之后就需要写获取jssdk然后配置jssdk

//服务器端代码
import crypto from 'crypto';

const appid = '公众号appid';
const secret = '公众号secret';

//服务器当前时间
 const timestamp = parseInt(String(new Date().getTime()));
//随机字符串
const nonceStr = 'Wm3WZYTPz0wzccnW';
//加密方式
const sha2  = crypto.createHash('sha1');//sha1
 
//获取access_token
const {data:{access_token}} = await axios.request({
          url:"https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+appid+"&secret="+secret;
 })

//获取api ticket
const {data:{ticket}} = await axios.request({
           url:"https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+access_token+"&type=jsapi"
})
   //需要当前验证的页面路径
const reUrl = this.post('url');
            
if(reUrl)
{
  //加密方式依次为ticket 随机字符串noncestr 时间戳timestamp 验证的页面url
      const content = `jsapi_ticket=${ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}`;
                  //加密
      const signature = sha2.update(content).digest('hex')
    //返回给前端
      return this.json({
             appid,
             timestamp,
             signature,
             nonceStr
         })
 }

//前端代码 -js
安装jssdk(npm install weixin-js-sdk --S) 或者直接[cnds](https://res.wx.qq.com/open/js/jweixin-1.6.0.js)
const get =  async function(){
              //请求上面写好的接口
                const response = await fetch('jssdk路径',{
                        method:"post",
                        headers: {
                              "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
                        },
                        body:`url=${location.href.split('#')[0]}`
                  })
                //返回的数据
                  const {data} = await response.json();
                  wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: data.appid, // 必填，公众号的唯一标识
                        timestamp: data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: data.noncestr, // 必填，生成签名的随机串
                        signature: data.signature,// 必填，签名
                        jsApiList: ['checkJsApi'], // 必填，需要使用的JS接口列表
                        openTagList: ['wx-open-launch-weapp'],   //这里一定要写上wx-open-launch-weapp 不写就不会出现
                  });
//走这个回调的时候说明注入成功了
wx.ready(function(){})  
//这里就肯定失败了
wx.error(function(){})
            }
get();

//html代码
//path小程序的页面路径-一定要加上.html
//这个只会在微信浏览器里面而且jssdk注入成功才会显示
<wx-open-launch-weapp id="launch-btn" class="launch-weapp" username="小程序原始id  gh_开头的" path="/pages/guide/main.html">
                  <script type="text/wxtag-template">
                                             //样式，只能写在这里面外面不生效
                        <style>.btn { padding: 12px }</style>
                        <button class="btn">打开小程序1</button>
                  </script>
            </wx-open-launch-weapp>

我总结了以下几点不显示的问题
1、个人账号 -- 没办法
2、签名错误 -- 校验签名 看看access_token 是否获取成功 看看ticket是否获取成功 失败一个都会签名错误 签名请求一定要带上url
3、域名错误 -- 没有设置安全域名-在设置-公众号设置-功能设置里面
4、IP白名单 -- 把服务器ip加入到 ip白名单里面即可
5、vue里面会报错wx-open-launch-weapp 标签未注册 --
···· 1在main.js添加Vue.config.ignoredElements = ['wx-open-launch-weapp']
···· 手动拼接用v-html显示

this.wxOpenWeApp = `
        <wx-open-launch-weapp id="launch-btn" class="launch-weapp" username="小程序原始id  gh_开头的" path="${path}">
            <script type="text/wxtag-template">
                <style>
                    .close-btn{
                        border: none;
                        outline: none;
                        padding: 10px 20px;
                        line-height: 1;
                    }
                </style>
                <button class="close-btn">
                    打开小程序
                </button>
            <\/script>
        </wx-open-launch-weapp>`

老规矩，个人的不会显示，
必须是已认证的服务号

推荐一个移动端开发利器 vconsole

建议再开发环境使用--生成环境当然也可以使用-可以使用特定参数进入的方式 比如带参debug=xx

使用方法也简单 new Vconsole()

npm cdns 都可以