当前位置: 首页 > Web前端 > vue.js

H5打开跳转到小程序的心路历程

时间:2023-03-31 16:10:55 vue.js

前言:公司短信营销想给用户发短信。用户打开短信中的网址后,就进入了我们公司自己的小程序项目。首先,小程序的“扩展插件”里有一个“营销工具”,不用开发就可以配置满足我的需求,我们不想用腾讯的短信服务(我们是专用的,哈哈,忠于我们自己的短信平台哈哈哈哈其实是不想花钱的),所以我就借了网址在我们自己的平台上发了。营销活动目前仅支持1.国内非个人主体注册的小程序;2、云端开发模式下,可发布支持跳转到对应小程序的免认证短信;3、消息内容可在微信内或在微信外打开链接,用户点击链接可一键跳转到对应小程序。链接网页使用URLScheme拉起微信在外部浏览器打开主小程序。教程云开发短信跳转小程序教程(无代码版)云开发短信跳转小程序教程(自定义开发代码版)于是抱着省钱的心态,白做了这个功能。没有发展,就达到了效果。没有比这更好的了~~~~好日子没过多久,因为是云开发免认证模式。该工具内部实现了一些云函数调用和托管功能。我们云开发的免费额度用完了,欠费提醒。..欠费。..费用。....好吧,还是自己开发吧,逃不过(认命),我是在vue下开发的。跳转分为两个环境,手机浏览器环境和微信环境。只需在代码中执行即可。手机浏览器环境下链接的网页通过URLScheme在外部浏览器打开打开微信主小程序。如果小程序的URLScheme是借助云端开发的,则免认证,直接调用即可获取。这里就不过多赘述了,有兴趣的可以自行查看,我再继续。那如何手动获取我的小程序的URLScheme呢?我需要到微信公众平台右上角“工具”-“生成URLScheme”指定路径和参数。这是可以打开的小程序的路径和参数。.保存生成的URLScheme,直接放在按钮的点击事件中。openWeapp(){location.href='weixin://dl/business/?t=aaaaaa'}微信环境跳转到小程序的打开标签——模板部分使用了,使用的方法输入官方代码:handleErrorFn">引入相应的Bag。从'jweixin-1.6.0'导入wx;在created/beforeCreated中调用获取你微信的参数公众号基本信息,在回调中调用wx.config,我们项目中有微信认证,所以这一步进入页面时,直接加载微信环境.如果按钮没有出现,很可能是在调用wx.config时出了问题。如果要改变按钮的样式,需要在脚本中打一个style标签来实现,但是这个样式要求很严格,多一个空格可能就出不来了,也不是与某些样式兼容。例如,位置不允许。如果想让按钮浮动,需要在最外面加一个div来控制div浮动距离position:fixed;bottom:.8rem;right:28vw;

注意事项使用该功能必须是非个人主体认证的小程序。基于wxjssdk1.6.0+版本。静态网站托管只能为按需计费的云开发环境启用。为了避免Vue下的编译错误,需要将template标签改为script标签。使用用户名属性(小程序的原始id)而不是appId。path属性,声明的页面路径必须以.html为后缀,如pages/home/index.html。目前静态网站只支持h5跳转小程序开启标签权限,其他jssdk接口暂时不支持。以上就是我开发调试的全部心得,希望对大家有所帮助。