小程序開發(fā)要點(diǎn)(小程序開發(fā)要點(diǎn)怎么寫)
目前的疑惑
微信小程序發(fā)展的越來越快，目前小程序甚至取代了大部分 App 的生態(tài)位，公司的坑位不增反降，只能讓原生應(yīng)用開發(fā)兼顧或換崗進(jìn)行小程序的開發(fā)。
以我的實(shí)際情況來講，公司應(yīng)用采用的 Flutter 框架，同樣的功能不可避免的就會(huì)存在 Flutter 應(yīng)用開發(fā)和微信小程序開發(fā)兼顧的情況，這種重復(fù)造輪子的工作非常低效。
為什么會(huì)存在這種情況？
隨著 2019 年5月 Google I/O 上 Flutter 1.5.4 的發(fā)布，宣示著 Flutter 真正開始進(jìn)入全終端時(shí)代，意味著只需要寫一份代碼，不需要任何額外的修正改，就可以運(yùn)行在 iOS、Android、Web、PC 上。Flutter 正在革命性的改變移動(dòng)開發(fā)的生態(tài)系統(tǒng)，從面向各個(gè)終端的開發(fā)，轉(zhuǎn)向面向框架開發(fā)，不僅會(huì)改變開發(fā)者的開發(fā)方式，也有越來越多的公司開始關(guān)注使用 Flutter。
Flutter 作為一個(gè)跨平臺(tái)的框架，其開發(fā)技術(shù)棧融合了 Native 和前端的技術(shù)，不僅涉及到了 Native（Android、iOS ）的開發(fā)知識(shí)，又吸取了很多前端（例如 React）的技術(shù)理念和框架，并且在此基礎(chǔ)上又有提升，形成 Flutter 自己獨(dú)特的技術(shù)思維。
但目前來講，F(xiàn)lutter 并不支持小程序，F(xiàn)lutter for Web 雖然最后也會(huì)生成 JS 代碼，但是 Flutter 生成的 JS 和 CSS 都是不能修改的。而在 Flutter 中也沒辦法通過 Dart 直接調(diào)用小程序的接口，所以現(xiàn)階段用 Flutter 開發(fā)小程序不是太好的選擇。
一些解決思路的產(chǎn)生
但是公司和業(yè)務(wù)也不得不向著互聯(lián)網(wǎng)巨頭的流量低頭，同時(shí)小程序的逐漸風(fēng)靡，也使得用戶下載 App 的習(xí)慣產(chǎn)生變化，不管購物、訂餐還是辦事都會(huì)首先查找“打開即用，即用即走”的小程序可以使用，省去了下載 App 的繁瑣流程。
當(dāng)然也知道很多開發(fā)者對(duì)于小程序是有非常多意見的，App 也不會(huì)說死就死，畢竟 App 相對(duì)于小程序來講，還是有很多優(yōu)勢(shì)。所以 App 和小程序開發(fā)都共存的情況下，如何解決效率問題？
能否讓過往開發(fā)的小程序直接運(yùn)行在 Flutter 開發(fā)的應(yīng)用中呢？同樣一個(gè)功能業(yè)務(wù)僅需一次小程序開發(fā)，即可實(shí)現(xiàn)在除了微信端的其它 App 中也運(yùn)行起來。
展開全文
在 Google 找相關(guān)的解決方案和資料的時(shí)候，發(fā)現(xiàn)國外幾乎沒有這種方案，國內(nèi)倒是有廠商在做這塊，想想也確實(shí)符合情理?；诠?Flutter 框架的基礎(chǔ)現(xiàn)實(shí)情況下，名為 FinClip 小程序容器技術(shù)的產(chǎn)品是能夠支持除原生 iOS、Android 之外的 Flutter 和 React Native ，并且能夠直接兼容微信小程序語法，于是大概測(cè)試了下這個(gè)產(chǎn)品。
實(shí)操上手過程
原理其實(shí)挺簡(jiǎn)單的，F(xiàn)inClip 提供了小程序 SDK 給 Flutter 應(yīng)用進(jìn)行集成，這樣以來 App 即擁有了一套可運(yùn)行小程序業(yè)務(wù)代碼的宿主環(huán)境。
1、獲取憑據(jù)
集成 SDK 需要在 FinClip 平臺(tái)中創(chuàng)建應(yīng)用并綁定小程序，獲得每個(gè)應(yīng)用專屬的 SDK KEY 及 SDK SECRET ，隨后可以在集成 SDK 時(shí)填寫對(duì)應(yīng)的參數(shù)。打開小程序時(shí) SDK 會(huì)自動(dòng)初始化，并校驗(yàn) SDK KEY，SDK SECRET 與BundleID (Application ID) 是否正確。
2、集成插件
在項(xiàng)目 pubspec.yaml 文件中添加依賴。
mop: latest.version
如果電腦是 mac M1 芯片，還需要在 iOS 文件夾的 Podfile 文件增加以下3行代碼
config.build_settings['ENABLE_BITCODE'] = 'NO'
config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0'
config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64 i386'
示例：
post_install do |installer|
installer.pods_project.targets.each do |target|
flutter_additional_ios_build_settings(target)
target.build_configurations.each do |config|
config.build_settings['ENABLE_BITCODE'] = 'NO'
config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0'
config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64 i386'
end
end
end
3、Flutter API
在集成后，使用 SDK 提供的 API 之前必須要初始化 SDK 。下面我羅列官方的一些必要的 API ，更具體的也可以查閱官方文檔。
1）初始化 sdk 接口
///
///
/// initialize mop miniprogram engine.
/// 初始化小程序
/// [sdkkey] is required. it can be getted from api.finclip.com
/// [secret] is required. it can be getted from api.finclip.com
/// [apiServer] is optional. the mop server address. default is https://mp.finogeek.com
/// [apiPrefix] is optional. the mop server prefix. default is /api/v1/mop
/// [cryptType] is optional. cryptType, should be MD5/SM
/// [disablePermission] is optional.
/// [encryptServerData] 是否對(duì)服務(wù)器數(shù)據(jù)進(jìn)行加密，需要服務(wù)器支持
/// [userId] 用戶id
/// [finStoreConfigs] 多服務(wù)配置
/// [uiConfig] UI配置
/// [debug] 設(shè)置debug模式，影響調(diào)試和日志
/// [customWebViewUserAgent] 設(shè)置自定義webview ua
/// [appletIntervalUpdateLimit] 設(shè)置小程序批量更新周期
/// [maxRunningApplet] 設(shè)置最大同時(shí)運(yùn)行小程序個(gè)數(shù)
///
FutureMap initialize(
String sdkkey,
String secret, {
String? apiServer,
String? apiPrefix,
String? cryptType,
bool encryptServerData = false,
bool disablePermission = false,
String? userId,
bool debug = false,
bool bindAppletWithMainProcess = false,
ListFinStoreConfig? finStoreConfigs,
UIConfig? uiConfig,
String? customWebViewUserAgent,
int? appletIntervalUpdateLimit,
int? maxRunningApplet,
})
2）打開小程序
/// open the miniprogram [appId] from the mop server.
/// 打開小程序
/// [appId] is required.
/// [path] is miniprogram open path. example /pages/index/index
/// [query] is miniprogram query parameters. example key1=value1key2=value2
/// [sequence] is miniprogram sequence. example 0,1.2.3,4,5...
/// [apiServer] is optional. the mop server address. default is https://mp.finogeek.com
/// [apiPrefix] is optional. the mop server prefix. default is /api/v1/mop
/// [fingerprint] is optional. the mop sdk fingerprint. is nullable
/// [cryptType] is optional. cryptType, should be MD5/SM
FutureMap openApplet(
final String appId, {
final String? path,
final String? query,
final int? sequence,
final String? apiServer,
final String? scene,
})
3）獲取當(dāng)前正在使用的小程序信息
當(dāng)前小程序信息包括的字段有appId,name,icon,description,version,thumbnail
///
/// get current using applet
/// 獲取當(dāng)前正在使用的小程序信息
/// {appId,name,icon,description,version,thumbnail}
///
///
FutureMapString, dynamic currentApplet()
4）關(guān)閉當(dāng)前打開的所有小程序
///
/// close all running applets
/// 關(guān)閉當(dāng)前打開的所有小程序
///
Future closeAllApplets()
4、官方示例
官方給了一個(gè)實(shí)例，我也直接放上來，大家可以參照下。
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:io';
import 'package:mop/mop.dart';
void main() = runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() = _MyAppState();
}
class _MyAppState extends StateMyApp {
@override
void initState() {
super.initState();
init();
}
// Platform messages are asynchronous, so we initialize in an async method.
Futurevoid init() async {
if (Platform.isIOS) {
//com.finogeeks.mopExample
final res = await Mop.instance.initialize(
'22LyZEib0gLTQdU3MUauARlLry7JL/2fRpscC9kpGZQA', // SDK Key
'1c11d7252c53e0b6', // SDK Secret
apiServer: 'https://api.finclip.com', // 服務(wù)器地址
apiPrefix: '/api/v1/mop' // 服務(wù)器接口請(qǐng)求路由前綴
);
print(res);
} else if (Platform.isAndroid) {
//com.finogeeks.mopexample
final res = await Mop.instance.initialize(
'22LyZEib0gLTQdU3MUauARjmmp6QmYgjGb3uHueys1oA', // SDK Key
'98c49f97a031b555', // SDK Secret
apiServer: 'https://api.finclip.com', // 服務(wù)器地址
apiPrefix: '/api/v1/mop' // 服務(wù)器接口請(qǐng)求路由前綴
);
print(res);
}
if (!mounted) return;
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(' FinClip 小程序 Flutter 插件'),
),
body: Center(
child: Container(
padding: EdgeInsets.only(
top: 20,
),
child: Column(
children: Widget[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
gradient: LinearGradient(
colors: const [Color(0xFF12767e), Color(0xFF0dabb8)],
stops: const [0.0, 1.0],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: FlatButton(
onPressed: () {
Mop.instance.openApplet('5e3c147a188211000141e9b1'); // 小程序 AppID
},
child: Text(
'打開示例小程序',
style: TextStyle(color: Colors.white),
),
),
),
SizedBox(height: 30),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
gradient: LinearGradient(
colors: const [Color(0xFF12767e), Color(0xFF0dabb8)],
stops: const [0.0, 1.0],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: FlatButton(
onPressed: () {
Mop.instance.openApplet('5e4d123647edd60001055df1', sequence: 1); // 小程序 AppID
},
child: Text(
'打開官方小程序',
style: TextStyle(color: Colors.white),
),
),
),
],
),
),
),
),
);
}
}
最后的話
目前我是基于我個(gè)人的實(shí)際情況而找到的方案，如果大家有更好的方案也歡迎留言討論交流。
掃描二維碼推送至手機(jī)訪問。
版權(quán)聲明：本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布，如需轉(zhuǎn)載請(qǐng)注明出處。
