写点什么

以 Vue 为代表的提升小程序开发效率框架及工具

作者:Geek_99967b
  • 2022 年 9 月 22 日
    黑龙江
  • 本文字数:1709 字

    阅读完需:约 6 分钟

 这几年为顺应效率提升,高频的技术换新让开发者又爱又恨,所谓的“学不动了”,不单单包括语言,框架、工具还有很多理念思维上的内容。但若学无所用,它的性价比就会下降。那么,小程序如何帮助开发者最大化实现技术先进、研发高效和投入成本低?

小程序的交付过程是这样的:

一般小程序从 idea 到发布,安装小程序开发者工具→新建模板小程序→开发→编译→发布,且整个过程为可视化操作,只需写核心逻辑代码即可。小程序框架本身所具有的快速加载和快速渲染能力,加之配套的云能力、运维能力和数据汇总能力,可以释放开发者的精力。且在语言上,小程序的前端开发学习成本较低。

在小程序的基础上是否还有效率提高办法呢?下面就进行梳理:

一、mpvue

mpvue 是一个类 vue 的小程序框架,mpvue 继承自 Vue.js,其技术规范和语法特点与 Vue.js 保持一致。可以帮助开发者提高效率,增加开发体验,开发者只需要熟悉 vue 的 api 语法使用即可上手。官方还提供了了基于 @vue/cli 脚手架的快速开发方式。

1、快速创建 mpvue 项目

2、需要注意的三点

1) 获取小程序在 page onLoad 时候传递的 options

在所有页面的组件内可以通过 this.$root.$mp.query 进行获取。

2) 如何获取小程序在 app onLaunch/onShow 时候传递的 options

在所有的组件内可以通过 this.$root.$mp.appOptions 进行获取。

3)如何捕获 app 的 onError

由于 onError 并不是完整意义的生命周期,所以只提供一个捕获错误的方法,在 app 的根组件上添加名为 onError 的回调函数即可。如下:



点击并拖拽以移动

​编辑

 

 
复制代码

这样就搭建好了一个基本的 mpvue 小程序, 可以基于以上创建我们自己的项目,直接开发项目,将微信小程序的 IDE 当作一个预览调试器即可。

二、Taro

各大厂商发布了自己的小程序平台,其中包括:支付宝小程序、百度小程序、字节跳动小程序等。Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发小程序 / H5 / RN 等应用,能够解决各小程序平台间存在的语法差异、规范差异等,对于开发者而言,可以在编译时抹平各端差异从而提升开发效率,降低开发成本。

1、脚手架安装

2、初始化 Taro 项目

3、多端编译

使用 Taro 的 build 命令可以把 Taro 代码编译成不同端的代码,然后在对应的开发工具中查看效果。


 
复制代码

三、FinClip

FinClip 主要将小程序的能力 SDK 化,只需简单集成 FinClip SDK ,即可在 iPhone、Android、Windows、Linux、macOS、统信、麒麟等平台下的应用中运行你的小程序,这意味着,移动端、PC 端、车载设备、智能电视、智能手表都能运行小程序了, 从而使 APP 架构由紧耦合向松耦合的转变 , 将业务功能碎片化,实现独立开发、独立测试及独立发布,真正做到敏捷开发,提升效率。

FinClip 天然支持微信小程序语法 WXML,无需使用第三方跨端跨框架解决方案,即可编译运行已有微信小程序代码。



点击并拖拽以移动

​编辑

 

1、集成 SDK

FinClip 小程序 SDK 目前支持 pod 集成或者手动集成。具体文档可见:iOS 集成 | 小程序开发帮助中心_小程序常见问题_小程序介绍-FinClip

1)安装 pod 环境

Cocoapods 提供了一个非常简单的依赖管理系统,避免手动导入产生的错误。


 
复制代码

2)创建 Podfile 文件

如果你不需要使用扩展 SDK,那么在 podfile 中只依赖 FinApplet 即可。如果你需要使用扩展 SDK 中的 api,那么你还需要依赖 FinAppletExt。

当你在使用 map 组件的功能时,如果想使用三方地图来实现的话,可引用 FinAppletBDMap(百度地图)或 FinAppletGDMap(高德地图),默认由原生地图实现。

如果需要在小程序中使用 WebRTC 功能,可以在 podfile 中添加 FinAppletWebRTC 依赖,这个库是我们基于 GoogleWebRTC 的二次封装库,支持 iOS9 以上系统版本。

如果需要在小程序中使用蓝牙功能,可以在 podfile 中添加 FinAppletBLE 依赖。

如果需要在小程序中使用 live-pusher,live-player 功能,可以在 podfile 中添加 FinAppletAgoraRTC 依赖。

如果需要在小程序中使用 addPhoneContact,添加手机通讯录联系人,可以在 podfile 中添加 FinAppletContact 依赖。

如果需要在小程序中使用剪贴板功能,可以在 podfile 中添加 FinAppletClipBoard 依赖。

在 Xcode 项目的根目录下,新建一个 Podfile 文件,在 Podfile 文件中添加对小程序 SDK 的依赖:

2、初始化 SDK

在工程的 AppDelegate 中的以下方法中,调用 SDK 的初始化方法。

3、打开小程序

用户头像

Geek_99967b

关注

还未添加个人签名 2022.05.17 加入

还未添加个人简介

评论

发布
暂无评论
以Vue为代表的提升小程序开发效率框架及工具_小程序_Geek_99967b_InfoQ写作社区