H5网页跳转微信小程序

官方文档

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html

适用于微信浏览器、外部浏览器打开小程序。

需要的工具和资料

微信开发者工具、非个人主体并且已认证的小程序

步骤

打开微信开发者工具申请云开发

购买云开发

购买成功后会有一个云开发ID，这个很重要后面会用到

然后点击更多申请静态网站

如果没有的静态网站这个选项需要到腾讯云后台开通，大概需要几分钟的样子

下一步需要创建一个云开发的小程序

创建成功后应该会有这样的一个文件夹

这个就是云函数调用的库。

如果目前的项目是传统的小程序项目那么需要转成云开发的小程序的步骤是

在目录内创建一个cloudfunctions的文件夹

然后打开

project.config.json的文件，添加以下语句

如果你的账号已经开通了云开发，那么开发者工具会把cloudfunctions去自动绑定云开发。

然后在app.js中添加以下语句。

curr_env这个变量就是，云开发的环境Id

然后查看官方文档，下载H5跳小程序的云函数示例代码。

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html#:~:text=%3A-,%E7%82%B9%E5%87%BB%E4%B8%8B%E8%BD%BD,-%E6%96%B0%E5%BB%BA%E4%B8%80%E4%B8%AA%E4%BA%91

下载之后应该有下面的两个文件夹

打开clouldfunctions 可以看到里面的public文件夹

将public文件夹拷贝到 项目小程序cloudfunctions文件夹下

打开index.js 文件

填入你要跳转小程序的页面，

改好之后，然后选中public文件右键

选中在内建终端中打开

填入命令npm install

安装完成后

再次选中public文件夹右键

点击：上传并部署：不上传node_modules 这个选项

打开云开发环境查看部署是否成功。

查看是否部署成功

下一步添加静态网站网页

看官方文档的示例代码

  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
  
    

      

        
正在打开 “填入你的小程序名称”...
 
        
          
          打开小程序
        
      
      

        
点击以下按钮打开 “填入你的小程序名称”
 
        
         
          
        
      
      

        
请在手机打开网页链接
      
    
  

官方代码需要改的的地方有以下两处

  wx.config({
            // debug: true, // 调试时可开启
            appId: '小程序 AppID', // 
            timestamp: 0, // 必填，填任意数字即可
            nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
            signature: 'signature', // 必填，填任意非空字符串即可
            jsApiList: ['chooseImage'], // 必填，随意一个接口即可 
            openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
          })

 var c = new cloud.Cloud({
            // 必填，表示是未登录模式
            identityless: true,
            // 资源方 AppID
            resourceAppid: '小程序 AppID', // 
            // 资源方环境 ID
            resourceEnv: '云开发环境 ID', // 
          })

下一步将改好的静态index.html 上传到云开发环境中

 上传成功后就可以冲网络配置中查看测试域名访问就行了