跨平台输出web
从2.3.0版本开始，Mpx开始支持将已有项目跨平台输出web平台中运行的能力，由于该能力目前还处于持续开发阶段，目前仅支持将一些简单的运营类的小程序输出为web项目，无法直接转换大型复杂项目，我们会持续对输出web的能力进行完善和补全，以提高其适用范围和开发体验。
技术实现
与小程序平台间的差异相比，web平台和小程序平台间的差异要大很多，小程序相当于是基于web技术的上层封装，所以不同于我们跨平台输出其他小程序平台时以编译转换为主的思路，在输出web时，我们更多地采用了封装的方式来抹平组件/Api和底层环境的差异，与当前大部分的跨平台框架相仿。但与当前大部分跨平台框架以web MVVM框架为base输出到小程序上运行的思路不同，我们是以Mpx小程序增强语法为基础输出到web中运行，前面说过小程序本身是基于web技术进行的实现，小程序->web的转换在可行性和兼容性上会好一些。
在具体实现上，Mpx项目输出到web中运行时在组件化和路由层面都是基于Vue生态实现，所以可以将Mpx的跨端输出产物整合到既有的Vue项目中，或者在条件编译中直接使用Vue语法进行web端的实现。
使用方法
使用@mpxjs/cli创建新项目时选择跨平台并选择输出web后，即可生成可输出web的示例项目，运行npm run watchweb，就会在dist/web下输出构建后的web项目，并启动静态服务预览运行。
支持范围
目前输出web的能力仍处于持续开发阶段，现阶段支持的小程序技术能力范围有限，下列表格中显示了当前版本中已支持的能力范围
模板指令
| 指令名称 |
是否支持 |
| Mustache数据绑定 |
是 |
| wx:for |
是 |
| wx:for-item |
是 |
| wx:for-index |
是 |
| wx:key |
是 |
| wx:if |
是 |
| wx:elif |
是 |
| wx:else |
是 |
| wx:model |
是 |
| wx:model-prop |
是 |
| wx:model-event |
是 |
| wx:model-value-path |
是 |
| wx:model-filter |
是 |
| wx:class |
是 |
| wx:style |
是 |
| wx:ref |
是 |
| wx:show |
是 |
事件绑定方式
| 绑定方式 |
是否支持 |
| bind |
是 |
| catch |
是 |
| capture-bind |
是 |
| capture-catch |
是 |
事件名称
| 事件名称 |
是否支持 |
| tap |
是 |
| longpress |
是 |
| longtap |
是 |
web同名事件默认全部支持，已支持组件的特殊事件默认为支持，不支持的情况下会在编译时抛出异常
基础组件
| 组件名称 |
是否支持 |
| view |
是 |
| cover-view |
是 |
| scroll-view |
是 |
| progress |
是 |
| navigator |
是 |
| swiper |
是 |
| swiper-item |
是 |
| text |
是 |
| image |
是 |
| block |
是 |
| form |
是 |
| input |
是 |
| textarea |
是 |
| button |
是 |
| checkbox |
是 |
| checkbox-group |
是 |
| radio |
是 |
| radio-group |
是 |
| picker |
是 |
生命周期
| 声明周期名称 |
是否支持 |
| onLaunch |
是 |
| onLoad |
是 |
| onReady |
是 |
| onShow |
是 |
| onHide |
是 |
| onUnload |
是 |
| onError |
是 |
| created |
是 |
| attached |
是 |
| ready |
是 |
| detached |
是 |
| updated |
是 |
组件配置
| 配置项 |
支持度 |
| properties |
部分支持，observer不支持，请使用watch代替 |
| data |
支持 |
| watch |
支持 |
| computed |
支持 |
| methods |
支持 |
| mixins |
支持 |
| observers |
不支持，请使用watch代替 |
| behaviors |
不支持，请使用mixins代替 |
组件API
| api名称 |
支持度 |
| triggerEvent |
支持 |
| $nextTick |
支持 |
| createSelectorQuery/selectComponent |
支持 |
全局API
| api名称 |
支持度 |
| navigateTo |
支持 |
| navigateBack |
支持 |
| redirectTo |
支持 |
| request |
支持 |
| connectSocket |
支持 |
| SocketTask |
支持 |
| EventChannel |
支持 |
| createSelectorQuery |
支持 |
| base64ToArrayBuffer |
支持 |
| arrayBufferToBase64 |
支持 |
| nextTick |
支持 |
| set |
支持 |
| setNavigationBarTitle |
支持 |
| setNavigationBarColor |
支持 |
| setStorage |
支持 |
| setStorageSync |
支持 |
| getStorage |
支持 |
| getStorageSync |
支持 |
| getStorageInfo |
支持 |
| getStorageInfoSync |
支持 |
| removeStorage |
支持 |
| removeStorageSync |
支持 |
| clearStorage |
支持 |
| clearStorageSync |
支持 |
| getSystemInfo |
支持 |
| getSystemInfoSync |
支持 |
| showModal |
支持 |
| showToast |
支持 |
| hideToast |
支持 |
| showLoading |
支持 |
| hideLoading |
支持 |
| onWindowResize |
支持 |
| offWindowResize |
支持 |
JSON配置
| 配置项 |
是否支持 |
| pages |
是 |
| usingComponents |
是 |
| packages |
是 |
| subpackages |
是 |
| navigationBarTitleText |
是 |
拓展能力
我的书签
添加书签
移除书签
