首页 > 编程语言> 文章详细

h5跳微信小程序流程实现——使用云函数，不开通静态网站

2021-03-22 17:02:01 阅读：402 来源： 互联网

标签：index 网页函数微信程序流程 server h5

官方开源库：

GitHub TCloudBase/WXSEVER-SMS

参考教程：

https://developers.weixin.qq.com/community/develop/doc/000ae2a7a7c9402a4d8bca2875b409

此教程为官方提供，包含视频+文档

步骤：

1. 开通云开发

2. 新建云函数 openMini

3. 重新打开“微信开发者工具”，即会在项目工程中自动生成云函数目录

关于此云函数目录：

文件夹上会有云 logo
文件名后会注明云开发环境
右键会看到云操作项，可更改环境、同步云函数、部署云函数等

若未如愿生成云函数目录，有两种解决方案：

可在 project.config.json 中添加 "cloudfunctionRoot": "cloudbase/" // cloudbase是云函数目录名
微信开发者工具版本过低，尝试升级

4. 云函数开发并部署

在 openMini 下创建俩文件 index.js package.json

index.js 内开发云函数

const cloud = require('wx-server-sdk')
cloud.init()

exports.main = async (event, context) => {
 return cloud.openapi.urlscheme.generate({
   jumpWxa: {
     path: '', // 打开小程序时访问路径，为空则会进入主页
     query: '',// 可以使用 event 传入的数据制作特定参数，无需求则为空
   },
   isExpire: true, //是否到期失效，如果为true需要填写到期时间，默认false
   expire_time: Math.round(new Date().getTime()/1000) + 3600
     //我们设置为当前时间3600秒后，也就是1小时后失效
     //无需求可以去掉这两个参数（isExpire，expire_time）
 })
}

package.json 配置依赖等

{
 "name": "openapi",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
   "wx-server-sdk": "~2.4.0"
 }
}

npm install 安装依赖后，右键上传并部署

5. 创建h5网页

创建 webviews 文件夹，与云开发目录 cloudbase 同级。

webviews 下创建 index.html 文件。内容如下：

<script src="https:acc.cloudbase.vip/res/web2weapp.js" charset="utf-8"></script>
<script>
 window.onload = function(){
   window.web2weapp.init({
     appId: 'appid', //替换为自己小程序的AppID
     gh_ID: 'gh_id', //替换为自己小程序的原始ID
     env_ID: 'cloud_id', //替换小程序底下云开发环境ID
     function: {
       name:'openMini', //提供UrlScheme服务的云函数名称
       data:{} //向这个云函数中传入的自定义参数
     },
     path: 'pages/index/index.wxml' //打开小程序时的路径
   })
 }
</script>

6. 查看效果

vscode 安装插件 Live Server ，成功后在 webviews/index.html 右键 → 选用 live server 启动网页。

注：一定要用 live server 方式启动，不能用 localhost 启动。

启动成功的网页上，会出现一个按钮 “点击进入微信小程序”

F12 打开控制台 console → 刷新页面，让控制台重刷数据 → 控制台会打印出一组数据，里面包含result.openlink，值类似于 "weixin://dl/bussiness/?t=NapElbyOrIo" 即说明已成功。

7. 后续需要把h5网页部署到服务器上，在手机浏览器打开，即可使用跳转功能

都多数人在进行此功能调研或者仅作为学习的话，不想开通需要付费的云开发-静态网站功能，但是h5网页还需要部署到服务器上才能走通流程。

这里可以用webpack或者nodejs启动一个服务，在手机浏览器输入（mock服务的ip）+（上个步骤 live server 启动的端口及路径），正常情况下可加载h5网页跳转到小程序。

标签：index,网页,函数,微信,程序流程,server,h5
来源： https://blog.csdn.net/weixin_44137575/article/details/115084730

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9