在开发过程中会经常遇到要从H5、APP、短信等各端进入小程序的功能。今天就来简单聊聊怎么实现从各端进入到微信小程序的现实和背景 短信进入到小程序 背景：短信作为一个重要的流量入口，经常会被用于唤醒用户。但是历史原因，短信一般都是内嵌网页链接，带给用户的体验较差，并且对此渠道的粘性态度，微信小程序的出现刚好一定程度的解决了这方面的问题，微信小程序的功能多样，并且有一些订阅功能，能够一定程度降低唤起成本，所以越来越多的渠道选择通过用短信拉起小程序作为一个入口 实现方式： 生成小程序的URL Scheme，进入小程序管理后台，选择“工具-生成URL Scheme”，这样 [图片] 添加需要跳转指定页面路径，是否需要传参，添加完成之后生成你的地址，这时候发送短信只要把这个地址带上，用户点开的时候就能直接跳转到对应的小程序了 [图片] Tips: 这种方式只能实现固定路径和参数的scheme，如果需要动态路径则需要考虑后端支持或者自己动手实现云函数支持了，这里就不多赘述了。 H5进入小程序 背景：H5作为用户增长投放最重要的一环，经常会被投放到各个app或者浏览器中，这种推广简单且无兼容问题，所以也是备受青睐的一种方式 实现：实现方式也是基于微信小程序的scheme，在H5页面跳转到地方放入scheme，跳转也只需要执行 window.location.href="weixin://dl/business/?t=cwlT2e6Avvq" 就可以，部分app或者浏览器不兼容可以使用 iframe的方式来实现 const iframe = document.createElement('iframe') iframe.style.display = 'none' iframe.src = scheme document.documentElement.appendChild(iframe) setTimeout(function () { if (iframe) { document.documentElement.removeChild(iframe) } }, 0) Tips： 一般做用户触发调用可以直接通达，有些浏览器会有拦截直接放到onload函数中的操作，这时候需要手动点击才可以打开。 APP进入小程序 背景：移动互联网时代的来临，每个人已经离不开手机，更离不开手机里的各种app。抖音快手微博网易等app占据了时间和精力，所以一写聪明的人又抓住了眼球，通过常用app里来打广告实现用户增长 实现方式：一些用户量大的APP一般都会暴露出一些Native方法供调用，不通的app有不同的接入方式，并且需要做一些注册能力等的功能可以按实际接入的方式来实现即可。

[图片] 首先，根据官网文档可以知道 只有非个人 的小程序才可以使用web-view组件，如果你的个人开发者，可以跳过这篇文章。 [图片] 一、使用web-view以及它的好处 1、己方账号（第三方）与小程序openId/UnionId的关联绑定，实现免登陆 比如你是某门户网站S，你要识别自己小程序上的用户与网站用户的关系，你可以通过三种方法绑定关系，公众号，小程序源生，小程序web-view内嵌跳转三种方法 2、内嵌H5的富文本，减少重复开发 比如你是门户网站，社区，以往有大量的新闻和帖子，里面带了各种css样式的富文本，小程序源生是无法直接读取的，需要大量转化，这时候直接内嵌这些H5新闻，大大降低开发成本 3、热更新，减少发布审核 某些需要经常更新的内容、公告、活动页，内嵌H5可以减少频繁提交小程序审核 二、小程序功能赋权 为H5提供各种小程序才有的功能，比如录音，扫一扫等。 注意事项 多场景判断，建议使用官方API： wx.miniProgram.getEnv H5唤醒一些小程序API有一定的延时，0.3~1秒 请调用小程序专用的JSSDK，同一个jssdk，但是webview的功能收到限制，和之前微信打开H5有所不同 小程序自动获取加载H5的title H5中iframe的url必须也是业务域名 web-view一定是撑满全屏的，自定义顶部菜单，悬浮的都没用 三、小程序和H5之前的互相通讯 1、 从小程序 ==>> h5 小程序控制H5，可以直接用src路径传参的形式，比如 [代码]<!-- 小程序端 HTML --> <web-view src="//URL?a=param1&b=param2"></web-view> [代码] 避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent。 2、 从 H5 ==>> 小程序 [图片] 这里我们知道bindmessage是小程序用来监听H5的推送的内容，但是这里不大不小的坑！就是它的三个出发场景： 小程序后退：使用接口名 wx.miniProgram.navigateTo，wx.miniProgram.navigateBack，wx.miniProgram.switchTab 等切换小程序页面/场景的API时候都会出发 分享：这个就是当你点分享小程序的时候，会接受到H5之前发送的postMessage 组件销毁，web-view组件销毁，类似 wx.miniProgram.redirectTo 都会触发。 [代码]<!-- 小程序端 HTML --> <web-view bindmessage="handleGetMessage" src="{{openUrl}}"></web-view> [代码] [代码]// 小程序端 JS --> Page({ /** * 页面的初始数据 */ data: { openUrl: "", }, /** * 获取请求数据 */ handleGetMessage: function (e) { console.log(e.detail.data); } }, }) [代码] [代码]<!-- h5端 HTML和JS --> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script> wx.miniProgram.postMessage({ data: { link: "//test.com", title: "一起学习，一起进步" } }); //wx.miniProgram.redirectTo({ // url:"/pages/inner/index?source=123" //}) wx.miniProgram.navigateBack({delta: 1}) </script> [代码] 注意事项 那些H5控制小程序的跳转路径必须是“/”开头，如 “/pages/xxx/xxx”，且路径必须在app.json里有，地址错误的话，有时不报错。 postMessage的json必须是data开始，不然接收不到数据。 [图片] 四、bindmessage接收到消息有3个重要特性(重点) 接收可以是H5之前几分钟前发送postMessage，不一定是即刻发出的。 之前发出的 postMessage的DATA信息会累加，当触发bindmessage接收的时候是一个数组。 [图片] 当bindmessage 再次 接收到数据，之前发送的数据不会被清空，将累加一起返回，获取时要判断好数组的角标 [图片] 五、Tips 1、在IDE工具中如何调试H5 [图片] 可以在 web-view 组件上通过右键 - 调试，打开 web-view 组件的调试。 2、内嵌H5缓存问题 web-view加载的H5具有很重的缓存，如果需要调试，可以通过在url后面加时间戳的方式解决。 3、小程序关闭，H5背景音乐仍然在播放问题 小程序已经关闭，但是H5自带的背景音乐仍然在手机后台播放的问题。这里可以利用一个属性： visibilitychange：页面可见性状态 简单的说，浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。 [代码]var statusBeforeHide = true; //初始化页面的状态 var music = document.getElementById("xxx"); // 更改音乐播放状态 function setChangeMusic() { if (document[hiddenProperty]) { // 页面隐藏 if (statusBeforeHide) { music.pause(); // 暂停 } } else { // 页面显示 if (statusBeforeHide) { music.play() //如果statusBeforeHide是true, 继续播放 } } } let hiddenProperty = ('hidden' in document) ? 'hidden' : ('webkitHidden' in document) ? 'webkitHidden' : ('mozHidden' in document) ? 'mozHidden' : null; if (hiddenProperty) { let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange'); let onVisibilityChange = () => { //console.log('visibilityChange'); setChangeMusic(); }; document.addEventListener(visibilityChangeEvent, onVisibilityChange); } else { console.log("不支持这个api"); } [代码] 总结，web-view还是非常实用的组件，且用且珍惜~ 往期回顾： 小程序自定义头部导航栏“完美”解决方案 小程序Canvas生成海报（一） 小程序新版订阅消息+云开发实战与跳坑

介绍 3.0 项目重写了~~基于uni-app，colorUI，封装了《自定义TabBar》《上传图片》《全局自定义loading》等功能 主要适配 微信小程序、APP、H5。 新版特点 加入了 colorUI 开发起来更顺手更快。 融合了七牛云存储+阿里OSS存储 优化了TabBar H5在线示例 H5在线示例 全局自定义loading [代码]// 已在 main.js 注册全局组件，在每个页面中 添加<cu-loading>即可 页面中添加即可，其他组件无需添加。（页面就是在pages.json 中注册了的） <cu-loading></cu-loading> // 具体 // 是否显示 半透明背景 // 是否点击 半透明背景 关闭loading // 在 /components/loading/loading.vue 中自行修改 [代码] 自定义TabBar 这次做成了引入外部配置文件 uni-setting.json 请求在 App.vue 中的 onLaunch 里 H5注意需要服务端允许跨域 几乎所有配置及数据 也在 vuex中统一管理 /store/index.js 注意：tabbar 所能切换的页面 必须以组件的形式 已经加载进 home.vue（根页面）。 详见 示例代码 上传图片 普通上传文件直接通过 官方的API 上传到业务服务器 ，我就没写。 上传至七牛云存储 （支持 微信小程序 APP H5 其他未测，未兼容 ），上传至七牛云均采用base64上传。 上传至阿里OSS （阿里OSS不支持直接上传base64） H5上传 是通过服务端 STS签名 然后客户端使用 ali-oss库 进行上传。 其他端 为 客户端直接自己签名，通过uni.uploadFile(OBJECT)直接上传，因为H5 客户端代码会直接暴露，所以H5采用服务端签名。 主题色 项目用到颜色的地方全部使用 vuex 中的 配置数据。 开发时候就得注意写法 麻烦是麻烦了一些 不过如果有一键切换主题色的需求可以试试 非专业写文档，凑合看。 有疑问联系 QQ 113276952 mail：thamiti@163.com;yb.lane.thamiti@gmail.com