本文作者为奇舞团前端开发工程师
小程序简介
小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
需求
微信小程序 H5 混合开发就是 在一个小程序中,采用部分小程序原生页面,部分通过Webview内嵌 H5 页面¹,二者配合实现完整业务逻辑的方案。
为什么需要混合开发
原生无法满足(例如某团队维护SDK 只提供了WEB端jsSDK,且不维护小程序SDK)
H5可以同时适用多端(适用范围更广)
H5可以弥补小程序部分欠缺
微信生态有部分限制(包大小,设计规范等)
小程序WebView基本用法
定义:微信小程序组件 Web-view 定义:承载网页的容器
用法
<web-view class="web-holder" src="{
{url}}" bindload="bindload" binderror="binderror" bindmessage="bindGetMsg"></web-view>
web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。支持的接口有:
接口名 | 说明 | 最低版本 |
---|---|---|
wx.miniProgram.navigateTo | 参数与小程序接口一致 | 1.6.4 |
wx.miniProgram.navigateBack | 参数与小程序接口一致 | 1.6.4 |
wx.miniProgram.switchTab | 参数与小程序接口一致 | 1.6.5 |
wx.miniProgram.reLaunch | 参数与小程序接口一致 | 1.6.5 |
wx.miniProgram.redirectTo | 参数与小程序接口一致 | 1.6.5 |
wx.miniProgram.postMessage | 向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的 message 事件 | 1.7.1 |
wx.miniProgram.getEnv | 获取当前环境 | 1.7.1 |