H5转小程序（h5打包成微信小程序）

本篇文章给大家谈谈H5转小程序，以及h5打包成微信小程序对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享H5转小程序的知识，其中也会对h5打包成微信小程序进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、h5跳转小程序导致二次刷新
• 2、如何把手机h5页面 转成微信小程序
• 3、微信支持H5跳转App、跳转小程序
• 4、h5打开支付宝小程序/生活号
• 5、H5与小程序数据交互

h5跳转小程序导致二次刷新

调用刷新。不需兼容PC端小程序时 直接 使用 页面周期函数 onTabItemTap 里面调用刷新方法即可。H5是一系列制作网页互动效果的技术集合，即H5就是移动端的web页面。对于许多手游玩家来说，H5是个十分陌生的名词，其实H5就是HTML的高级版本。

如何把手机h5页面 转成微信小程序

可以把h5的页面镶嵌小程序中,
web-view
基础库
1.6.4
开始支持，低版本需做兼容处理
web-view
组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。

微信支持H5跳转App、跳转小程序

定义: 微信开放标签是微信公众平台面向网页开发者提供H5转小程序的扩展标签集合。通过使用微信开放标签H5转小程序，网页开发者可安全便捷地使用微信或系统H5转小程序的能力，为微信用户提供更优质的网页体验

有哪些开放标签?

<wx-open-launch-weapp 打开小程序

<wx-open-launch-app 打开app

接入要求

主体要求: 仅开放给已认证的服务号

系统要求H5转小程序：

微信版本要求为：7.0.12及以上。系统版本要求为：iOS 10.3及以上、Android 5.0及以上

接入方法

打开小程序使用步骤与微信JS-SDK类似，需要绑定安全域名、引入JS文件等步骤

打开app需要前往微信开放平台的管理中心-公众账号或小程序详情-接口信息-网页跳转移动应用-关联设置中绑定所需要跳转的App

示例:

配置最新JSSDK

wx.config({

// 其它配置不变， openTagList配置可使用的开放标签,

openTagList: ['wx-open-launch-app, wx-open-launch-weapp']

})

页面使用开放标签

打开小程序

id="launch-btn"

// 小程序id

username="gh_xxxxxxxx"

// 小程序路径

path="/a/b/c?d=1e=2#fg"


.btn { padding: 12px }

打开小程序

打开app

id="launch-btn"

// 移动应用appid

appid="your-appid"

// 额外信息, 客户端自行解析

extinfo="your-extinfo"


.btn { padding: 12px }

App内查看

回调
var btn = document.getElementById('launch-btn');

// 调起成功回调

btn.addEventListener('launch',function(e) {

console.log('success');

});

// 调起失败回调

btn.addEventListener('error',function(e) {

console.log('fail', e.detail);

});

h5打开支付宝小程序/生活号

支付宝钱包中打开的H5页面里，可以通过支付宝提供的alipays链接跳转到指定的商户生活号，

跳转链接如下：

参数说明：

注意：

官方文档没有给出从外部h5直接跳转到支付宝对应生活号，咨询售后有推荐以下方式（未尝试），及通过以下链接跳转支付宝应用，然后在通过嵌套， encode传入上方给您的文档拼接链接，先唤起支付宝在跳入生活号

注意⚠️：外部浏览器跳转支付宝小程序和生活号，只需要 alipays://platformapi/startapp?appId=20000042publicBizType=LIFE_APPpublicId=2013110600000000 这个地址跳转就可以

外部 APP/浏览器 唤起小程序，需要通过 scheme 调用，在 scheme 中可以传参和设置跳转的首页参数。

H5跳转小程序 :

如果想要在scheme中加上域名，调用小程序，则需要把scheme当作参数进行uri编码。例如：

转换为：（js的转换方法）

H5与小程序数据交互

 功能已通过原生+vue混合开发的方式实现了，现需要将这个功能原封不动的搬到微信小程序。综合各方面评估，选择了微信小程序套webview的方式实现（若时间允许，建议还是通过小程序实现）。

 采用小程序webview的方式，可以复用大部分H5页面，但H5调用的原生方法还是需要重新实现。实现方式主要分以下几种情况（当然也可以通过jssdk的方式去实现 https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3 ，但不在本文讨论范围内）：
 (1) 获取照片，可通过html的input标签实现；
 (2) 获取经纬度，可通过webview的url拼接参数实现；
  (3) 人脸识别，可通过H5调起刷脸小程序的方式实现。
 下面主要描述下第3种情况的实现方式。

 H5与小程序交互所涉及的数据部分主要包括两块：
 (1)H5如何将数据传给小程序？
   url参数拼接。
 (2)小程序如何将数据传给H5？
   wx.setStorage及wx.getStorage。
 详细流程如图所示。

 webview小程序pageA调起人脸小程序pageB，pageB回退到pageA。因为pageA重新设置了webview的url，其所嵌套的H5与历史H5页面无法进行数据共享，导致业务功能无法继续。解决办法就是调起人脸小程序之前，在H5页面先将必要的信息通过 localStorage.setItem 保存，人脸识别结束回到H5页面时，再通过 localStorage. getItem 获取所需要的业务数据。

关于H5转小程序和h5打包成微信小程序的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 H5转小程序的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于h5打包成微信小程序、H5转小程序的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。