盘点| 能够实现小程序开发提效的框架/工具有这些

news2025/1/18 16:48:11

近年来,为了研发效率的提升,技术高频革新,开发者们纷纷表示:“好是好,就是快学不动了!”。开发者们在不断学习新语言、框架、工具等内容的同时,也在担心所学是否真正有用。而小程序其实能够帮助开发者最大化实现技术先进、研发高效和低投入成本。

我们先来梳理一下小程序的交付过程:

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

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

一、mpvue

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

1、快速创建mpvue项目

vue init mpvue/mpvue-quickstart  tengyu-demo
cd  tengyu-demo
npm install
npm run dev

2、需要注意的三点

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

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

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

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

3)如何捕获 app 的 onError

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

export default {
   // 只有 app 才会有 onLaunch 的生命周期
   onLaunch () {
       // ...
   },
 
   // 捕获 app error
   onError (err) {
       console.log(err)
   }
}
 

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

二、Taro

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

1、脚手架安装

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
 
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
 
# OR 安装了 cnpm,使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

2、初始化Taro项目

taro init tengyu-taro-demo
# 或
npx @tarojs/cli init myApp
 
# 进入项目根目录
$ cd myApp
 
# 使用 yarn 安装依赖
$ yarn
 
# OR 使用 cnpm 安装依赖
$ cnpm install
 
# OR 使用 npm 安装依赖
$ npm install

3、多端编译

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

# yarn
$ yarn dev:weapp
$ yarn build:weapp
 
# npm script
$ npm run dev:weapp
$ npm run build:weapp
 
# 仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp
 
# npx 用户也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp
 
# watch 同时开启压缩
$ set NODE_ENV=production && taro build --type weapp --watch # Windows
$ NODE_ENV=production taro build --type weapp --watch # Mac

三、FinClip

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

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

 

1、集成SDK

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

1)安装pod环境

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

sudo gem install cocoapods
pod setup
 

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的依赖:

pod 'FinApplet'
pod 'FinAppletExt'
pod 'FinAppletBDMap'
pod 'FinAppletGDMap'
pod 'FinAppletWebRTC'
pod 'FinAppletBLE'
pod 'FinAppletAgoraRTC'
pod 'FinAppletContact'
pod 'FinAppletClipBoard'

2、初始化SDK

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

NSString *plistPath = [[NSBundle mainBundle] pathForResource:@"servers" ofType:@"plist"];
NSArray *array = [NSArray arrayWithContentsOfFile:plistPath];
NSMutableArray *storeArrayM = [NSMutableArray array];
for (NSDictionary *dict in array) {
    FATStoreConfig *storeConfig = [[FATStoreConfig alloc] init];
    storeConfig.sdkKey = dict[@"sdkKey"];
    storeConfig.sdkSecret = dict[@"sdkSecret"];
    storeConfig.apiServer = dict[@"apiServer"];
    storeConfig.apmServer = dict[@"apmServer"];
    if ([@"SM" isEqualToString:dict[@"cryptType"]]) {
        storeConfig.cryptType = FATApiCryptTypeSM;
    else {
        storeConfig.cryptType = FATApiCryptTypeMD5;
    }
     
    [storeArrayM addObject:storeConfig];
}
FATConfig *config = [FATConfig configWithStoreConfigs:storeArrayM];
[[FATClient sharedClient] initWithConfig:config error:nil];

3、打开小程序

FATAppletRequest *request = [[FATAppletRequest alloc] init];
request.appletId = @"小程序id";
request.apiServer = @"服务器地址";
request.transitionStyle = FATTranstionStyleUp;
request.startParams = startParams;
     
[[FATClient sharedClient] startAppletWithRequest:request InParentViewController:self completion:^(BOOL result, FATError *error) {
    NSLog(@"打开小程序:%@", error);
} closeCompletion:^{
    NSLog(@"关闭小程序");
}];

                

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/155518.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

9、Javaweb_http响应概念Response+验证码案例ServletContext+文件下载

HTTP协议: 1. 请求消息:客户端发送给服务器端的数据 * 数据格式: 1. 请求行 2. 请求头 3. 请求空行 4. 请求体 2. 响应消息:服务器端发送给客户端的数据 * 数据格式: …

Nginx 常用配置、操作详解

学习每个技术都要有目标,比如说要源码精通gRPC实现原理,要熟练应用Prometheus、Gin,以及Nginx,Nginx个人定位目标是不需要深入了解技术原理、更不要阅读源码,只需要在自己使用的时候能通过本文章快速检索就够了。 在看…

Graphing calculator PRO

Graphing calculator PRO计算器是一个专业的计算器,它也是编译的,也是学生和学生需要的工具。该程序旨在取代大型和昂贵的图形计算。此外,它在手机或广告牌显示屏上以更高的质量显示计算,这使其更易于理解。Mathlab提供的计算器是…

【云原生进阶之容器】第三章List-Watch机制3.1节-- List-Watch机制剖析

1 list-watch机制 1.1 list-watch介绍 Kubernetes 是通过 List-Watch 的机制进行每个组件的协作,保持数据同步的,每个组件之间的设计实现了解耦。 用户是通过 kubectl 根据配置文件,向 APIServer 发送命令,在 Node 节点上面建立 Pod 和 Container。 APIServer 经过 API 调…

回收租赁商城系统功能拆解06讲-商品评价

回收租赁系统适用于物品回收、物品租赁、二手买卖交易等三大场景。 可以快速帮助企业搭建类似闲鱼回收/爱回收/爱租机/人人租等回收租赁商城。 回收租赁系统支持智能评估回收价格,后台调整最终回收价,用户同意回收后系统即刻放款,用户微信零…

Ubuntu20.04 (ROS noetic) 运行 Vins-Fusion

参考博客:Ubuntu20.04 运行 Vins-Fusion,问题没有完全解决,所以自己写了一篇Vins-Fusion 开源地址:https://github.com/HKUST-Aerial-Robotics/VINS-Fusion由于仅支持ROS kinetic 和 melodic,所以在Ubuntu20.04对应的R…

【Nginx】Nginx的安装

1. 基于apt源安装 1.1 安装1.2 测试安装是否成功1.3 卸载 1. 停止nginx服务2. 删除nginx,-purge包括配置文件3. 移除全部不使用的软件包4. 罗列出与nginx相关的软件并删除5. 查看nginx正在运行的进程,如果有就kill掉 2. 通过源码包编译安装 1. 安装各种…

Java 开源开发平台 O2OA V7.3 发布,新增带权限的全文检索等重要功能

O2OA 自产品发布以来,我们收到了很多伙伴对产品的宝贵建议和意见,在 2022 年的最后一个版本里,我们为伙伴们又提供了新的能力,v7.3 版本正式发布,对平台做了更多的优化。一、平台架构新增带权限的全文检索协同办公领域…

MATLAB-拉格朗日插值运算

在结点上给出结点基函数,接着做该基函数的线性组合,组合的系数为结点的函数值,这种插值多项式称为拉格朗日插值公式。通俗地说,就是通过平面上的两个点确定一条直线。该插值方法是一种较为基础的方法,同时该方法也较容易理解与实现…

Go语言结构

Go语言结构 知识主要参考菜鸟教程。 简单实例 Go语言的基础组成有以下几个部分: 包声明引入包函数变量语句 & 发表达式注释 package mainimport "fmt"func main() {/*这是一行注释*/fmt.Println("hello,world") }上述程序各个部分组成&am…

北大硕士LeetCode算法专题课-字符串相关问题

算法面试相关专题: 北大硕士LeetCode算法专题课-数组相关问题_骨灰级收藏家的博客-CSDN博客 北大硕士LeetCode算法专题课---算法复杂度介绍_骨灰级收藏家的博客-CSDN博客 北大硕士LeetCode算法专题课-基础算法之排序_骨灰级收藏家的博客-CSDN博客 反转字符串(Lee…

springcloud3 Nacos的服务搭建和生产消费案例

一 nacos 1.1 nacos概念 Nacos是服务注册发现中心配置中心的组合。比eurka实现的功能更加强大。 nacos默认均有负载均衡的功能,集成了netflix的ribbon代码包。 1.2 nacos与其他进行对别 1.3 nacos的配置 1.4 namespace和group和dataid之间的关系 二 nacos的安…

2023年网络工程师必备10大软件,最新安装包分享

常听人说:拳头再硬,也比不上锤子!同样的,作为一个网络工程师只有满腹的技术而不会使用对应的软件工具,是完全不行的。那作为一个2023年的网络工程师必备的软件有哪些呢?以下10大网工必备软件都已整理好安装…

smsalarm怎么读取intouch系统平台的点

有两种方式,分别是DDE和OPC方式 DDE方式 在SMC里面添加SIDIR驱动,连接到1200PLC 在IDE中创建对象DT01并绑定到驱动上 可看到已经可以读取到值了 打开smsalarm 8.26 创建一个DDE连接 创建一个DDE逻辑组 创建一个tag. 名称可以填任意字符串,…

SpringBoot在使用测试的时候是否需要@RunWith?

我们在使用SpringBoot进行测试的时候一般是需要加两个注解: SpringBootTest 目的是加载ApplicationContext,启动spring容器。 RunWith 是一个测试启动器,可以加载SpringBoot测试注解让测试在Spring容器环境下执行。如测试类中无此注解&#…

ORACLE中的行列转换(行转列,列转行)

行转列: 源表: 方法1:case when select y, sum(case when q1 then amt end) q1, sum(case when q2 then amt end) q2, sum(case when q3 then amt end) q3, sum(case when q4 then amt end) q4 from test04 group by y; 效果: …

详解动态库静态库、动态链接静态链接

目录 静态库&&动态库 举例 注意 动态链接 静态链接 静态库&&动态库 静态库是指编译链接时,把库文件的代码全部加入到可执行文件中,因此生成的文件比较大,但在运行时也就不再需要库文件了。其后缀名一般为“.a” libXXXXXXX.a (windows下是.lib) 动态…

韩国网民钟爱的国内电商平台商品详情响应示例

一、中国电商业的发展,已经超过了欧美等过,大家都喜欢中国的商品,中国商品的特点个人总结有以下几点: 1、款式新颖多样 2、价格实惠 3、品种齐全 二、常用接口响应示例说明 公共参数 展开请求参数 三、返回响应示例 {"…

LeetCode 128. 最长连续序列

🌈🌈😄😄 欢迎来到茶色岛独家岛屿,本期将为大家揭晓LeetCode 128. 最长连续序列,做好准备了么,那么开始吧。 🌲🌲🐴🐴 一、题目名称 LeetCode…

反电信网络诈骗普法宣传答题实现联表查询学生的平均成绩

国际经济与贸易学院组织反电信网络诈骗线上答题活动,开展集中普法宣传教育活动,从而构筑立体化反诈骗防线。通过此次比赛,引导广大同学时刻牢记反诈骗内容,提高师生的自我财产安全防范意识,加强自我网络保护的思想理念…