Skip to content

Commit 9b55422

Browse files
LaoMengFlutterLaoMengFlutter
committed
Merge branch 'master' of https://github.com/781238222/flutter-do 
2 parents 5a8ba11 + 82150c9 commit 9b55422

File tree

2 files changed

+276
-16
lines changed

2 files changed

+276
-16
lines changed

‎flutter_fly/README.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,29 @@ Flutter Fly是什么？Flutter Fly是一款开源的Flutter 项目，App内集
88

99
欢迎页：
1010

11-
<img src="http://img.laomengit.com/fly_1.gif" style="zoom:33%;" />
11+
![](/screen/fly_1.gif)
1212

1313
首页、控件页面、详情页及搜索页面：
1414

1515
| 首页 | 详情页 | 控件页 | 搜索搜索 |
1616
| :----------------------------------------------------------: | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
17-
| <img src="http://img.laomengit.com/fly_2.gif" style="zoom:33%;"/> | <img src="http://img.laomengit.com/fly_3.gif" style="zoom:33%;"/> | <img src="http://img.laomengit.com/fly_4.gif" style="zoom:33%;"/> | <img src="http://img.laomengit.com/fly_5.gif" style="zoom:33%;"/> |
17+
| ![](https://github.com/781238222/flutter-do/tree/master/flutter_fly/screen/fly_2.gif) | ![](https://github.com/781238222/flutter-do/tree/master/flutter_fly/screen/fly_3.gif) | ![](https://github.com/781238222/flutter-do/tree/master/flutter_fly/screen/fly_4.gif) | ![](https://github.com/781238222/flutter-do/tree/master/flutter_fly/screen/fly_5.gif) |
1818

1919
我：
2020

2121
| | |
2222
| ------------------------------------------------------------ | ------------------------------------------------------------ |
23-
| <img src="http://img.laomengit.com/fly_my_1.png" style="zoom:33%;" /> | <img src="http://img.laomengit.com/fly_my_2.png" style="zoom:33%;" /> |
23+
| ![](https://github.com/781238222/flutter-do/tree/master/flutter_fly/screen/fly_my_1.png) | ![](https://github.com/781238222/flutter-do/tree/master/flutter_fly/screen/fly_my_2.png) |
2424

2525
| | | |
2626
| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
27-
| <img src="http://img.laomengit.com/fly_my_3.png" style="zoom:33%;" /> | <img src="http://img.laomengit.com/fly_my_4.png" style="zoom:33%;" /> | <img src="http://img.laomengit.com/fly_my_5.png" style="zoom:33%;" /> |
27+
| ![](https://github.com/781238222/flutter-do/tree/master/flutter_fly/screen/fly_my_3.png) | ![](https://github.com/781238222/flutter-do/tree/master/flutter_fly/screen/fly_my_4.png) | ![](https://github.com/781238222/flutter-do/tree/master/flutter_fly/screen/fly_my_5.png) |
2828

2929
App升级功能：[https://github.com/781238222/flutter_app_upgrade](https://github.com/781238222/flutter_app_upgrade)
3030

3131
| | | |
3232
| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
33-
| <img src="http://img.laomengit.com/app_upgrade_3.png" style="zoom:33%;" /> | <img src="http://img.laomengit.com/app_upgrade_4.gif" style="zoom:33%;" /> | <img src="http://img.laomengit.com/app_upgrade_5.png" style="zoom:50%;" /> |
33+
| ![](https://github.com/781238222/flutter-do/tree/master/flutter_fly/screen/app_upgrade_3.png) | ![](https://github.com/781238222/flutter-do/tree/master/flutter_fly/screen/app_upgrade_4.gif) | ![](https://github.com/781238222/flutter-do/tree/master/flutter_fly/screen/app_upgrade_5.png) |
3434

3535

3636

@@ -49,7 +49,9 @@ App升级功能：[https://github.com/781238222/flutter_app_upgrade](https://git
4949
- 收藏的问题
5050
- 浏览过的文章
5151
- 关于页面
52-
- App升级：升级功能介绍查看：[https://github.com/781238222/flutter_app_upgrade](https://github.com/781238222/flutter_app_upgrade)
52+
- App升级：升级功能介绍查看：[https://github.com/781238222/flutter-do/tree/master/flutter_upgrade](https://github.com/781238222/flutter-do/tree/master/flutter_upgrade)
5353
- 支持Android下载Apk包进行升级
5454
- IOS未上架到app store，暂时不能升级。
5555

56+
57+
[Android apk下载](http://img.laomengit.com/app-release-v1.0.0.apk)

‎flutter_upgrade/README.md

Lines changed: 268 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,272 @@
1-
# flutter_upgrade
1+
## Flutter App 升级功能
22

3-
A new Flutter plugin.
3+
如果你需要支持Android平台，在`./android/app/src/main/AndroidManifest.xml`文件中配置`provider`，代码如下：
44

5-
## Getting Started
5+
```
6+
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
7+
xmlns:tools="http://schemas.android.com/tools"
8+
package="com.flutter.laomeng.flutter_upgrade_example">
9+
<application
10+
android:name="io.flutter.app.FlutterApplication"
11+
android:icon="@mipmap/ic_launcher"
12+
android:label="flutter_upgrade_example">
13+
...
14+
<provider
15+
android:name="androidx.core.content.FileProvider"
16+
android:authorities="com.flutter.laomeng.flutter_upgrade_example.fileprovider"
17+
android:exported="false"
18+
android:grantUriPermissions="true">
19+
<meta-data
20+
android:name="android.support.FILE_PROVIDER_PATHS"
21+
tools:replace="android:resource"
22+
android:resource="@xml/file_paths" />
23+
</provider>
24+
</application>
25+
</manifest>
26+
```
627

7-
This project is a starting point for a Flutter
8-
[plug-in package](https://flutter.dev/developing-packages/),
9-
a specialized package that includes platform-specific implementation code for
10-
Android and/or iOS.
28+
注意：provider中authorities的值为当前App的包名，和顶部的package值保持一致。
29+
30+
31+
32+
## App升级功能使用介绍
33+
34+
35+
36+
只需在主页的`initState`方法中调用升级检测方法：
37+
38+
```dart
39+
@override
40+
void initState() {
41+
AppUpgrade.appUpgrade(
42+
context,
43+
_checkAppInfo(),
44+
iosAppId: 'id88888888',
45+
);
46+
super.initState();
47+
}
48+
```
49+
50+
`_checkAppInfo`方法访问后台接口获取是否有新的版本的信息，返回`Future<AppUpgradeInfo>` 类型，`AppUpgradeInfo`包含title、升级内容、apk下载url、是否强制升级等版本信息。
51+
52+
`iosAppId`参数用于跳转到app store。
53+
54+
`_checkAppInfo()`方法通常是访问后台接口，这里直接返回新版本信息，代码如下：
55+
56+
```dart
57+
Future<AppUpgradeInfo> _checkAppInfo() {
58+
return Future.value(AppUpgradeInfo(
59+
title: '新版本V1.1.1',
60+
contents: [
61+
'1、支持立体声蓝牙耳机，同时改善配对性能',
62+
'2、提供屏幕虚拟键盘',
63+
'3、更简洁更流畅，使用起来更快',
64+
'4、修复一些软件在使用时自动退出bug',
65+
'5、新增加了分类查看功能'
66+
],
67+
apkDownloadUrl: '',
68+
force: false,
69+
));
70+
```
71+
72+
好了，基本的升级功能就完成了，弹出提示框的效果如下：
73+
74+
![](http://img.laomengit.com/app_upgrade_3.png)
75+
76+
点击“以后再说”，提示框消失，点击“立即体验”，自动区分不同平台。
77+
78+
访问后台接口获取新版本的信息一般需要当前App的包名和版本，查询方法如下：
79+
80+
```dart
81+
await FlutterUpgrade.appInfo
82+
```
83+
84+
返回的类型是`AppInfo`：
85+
86+
- versionName：版本号，比如1.0.0。
87+
- versionCode：Android独有版本号，对应Android build.gradle中的versionCode，ios返回“0”。
88+
- packageName：包名，对应Android build.gradle中的applicationId，ios的BundleIdentifier。
89+
90+
### iOS平台升级
91+
92+
iOS平台直接跳转到app store相关页面，`iosAppId`一定要设置对，否则app store会找不到应用程序。
93+
94+
### Android平台下载apk
95+
96+
Android平台则会判断是否设置了apk下载url，如果设置了则下载apk则直接下载，效果如下：
97+
98+
![](http://img.laomengit.com/app_upgrade_4.gif)
99+
100+
当下载完成时直接跳转到apk安装引导界面，效果如下：
101+
102+
![](http://img.laomengit.com/app_upgrade_5.png)
103+
104+
用户点击允许，出现如下界面：
105+
106+
![](http://img.laomengit.com/app_upgrade_6.png)
107+
108+
点击继续安装即可，上面的安装引导界面是系统界面，不同的手机或者不同的Android版本会略有不同。
109+
110+
111+
112+
### Android平台跳转应用市场
113+
114+
如果不提供apk下载地址，点击“立即体验”，则会跳转到应用市场，不指定应用市场则会弹出提示框，让用户选择应用市场，效果如下：
115+
116+
![](http://img.laomengit.com/app_upgrade_7.png)
117+
118+
提示框内将会包含手机内安装的所有的应用市场，用户选择一个然后跳转到对应应用市场的详情界面，如果当前应用未在此市场上架则会出现“找不到的界面”。
119+
120+
通常情况下会指定应用市场，这就需要知道用户手机内安装的应用市场，查询方法如下：
121+
122+
```dart
123+
_getInstallMarket() async {
124+
List<String> marketList = await FlutterUpgrade.getInstallMarket();
125+
}
126+
```
127+
128+
插件内置了国内常用的应用市场，包括小米、魅族、vivo、oppo、华为、zte、360助手、应用宝、pp助手、豌豆荚，如果你需要检测其他的应用市场，比如google play，只需添加googl play的包名即可：
129+
130+
```dart
131+
_getInstallMarket() async {
132+
List<String> marketList = await FlutterUpgrade.getInstallMarket(marketPackageNames: ['google play 包名']);
133+
}
134+
```
135+
136+
方法返回手机安装的应用市场，根据安装的应用市场指定跳转应用市场，如果你要指定内置的应用市场，可以根据包名获取内置的应用市场的相关信息：
137+
138+
```dart
139+
AppMarketInfo _marketInfo = AppMarket.getBuildInMarket(packageName);
140+
```
141+
142+
指定华为应用市场：
143+
144+
```dart
145+
AppUpgrade.appUpgrade(
146+
context,
147+
_checkAppInfo(),
148+
iosAppId: 'id88888888',
149+
appMarketInfo: AppMarket.huaWei
150+
);
151+
```
152+
153+
指定没有内置的应用市场方法如下：
154+
155+
```dart
156+
AppUpgrade.appUpgrade(
157+
context,
158+
_checkAppInfo(),
159+
iosAppId: 'id88888888',
160+
appMarketInfo: AppMarketInfo(
161+
'应用市场名称（选填）','应用市场包名','应用市场类名'
162+
),
163+
);
164+
```
165+
166+
167+
168+
## 提示框样式定制
169+
170+
如果默认的升级提示框不满足你的需求，那么你可以定制你的升级提示框。
171+
172+
title及升级内容文字样式设置：
173+
174+
```dart
175+
AppUpgrade.appUpgrade(context, _checkAppInfo(),
176+
titleStyle: TextStyle(fontSize: 30),
177+
contentStyle: TextStyle(fontSize: 18),
178+
...
179+
)
180+
```
181+
182+
通过`titleStyle`和`contentStyle`设置其样式，可以设置字体大小、颜色、粗体等。
183+
184+
设置“取消”和“升级按钮”文本和样式：
185+
186+
```dart
187+
AppUpgrade.appUpgrade(context, _checkAppInfo(),
188+
cancelText: '以后再说',
189+
cancelTextStyle: TextStyle(color: Colors.grey),
190+
okText: '马上升级',
191+
okTextStyle: TextStyle(color: Colors.red),
192+
...
193+
)
194+
```
195+
196+
默认“取消”按钮文本是"以后再说"，默认“升级”按钮的文本是“立即体验”。
197+
198+
设置“升级”按钮的背景颜色，需要2种颜色，2种颜色左到右线性渐变，如果想设置纯色，只需将2种颜色设置为同一个颜色即可，默认颜色是系统的`primaryColor`:
199+
200+
```dart
201+
AppUpgrade.appUpgrade(context, _checkAppInfo(),
202+
okBackgroundColors: [Colors.blue, Colors.lightBlue],
203+
...
204+
)
205+
```
206+
207+
设置进度条的颜色：
208+
209+
```dart
210+
AppUpgrade.appUpgrade(context, _checkAppInfo(),
211+
progressBarColor: Colors.lightBlue.withOpacity(.4),
212+
...
213+
)
214+
```
215+
216+
设置升级提示框的圆角半径，默认是20：
217+
218+
```dart
219+
AppUpgrade.appUpgrade(context, _checkAppInfo(),
220+
borderRadius: 15,
221+
...
222+
)
223+
```
224+
225+
226+
227+
## Flutter App 升级功能流程
228+
229+
应用程序升级功能是App的基础功能之一，如果没有此功能会造成用户无法升级，应用程序的bug或者新功能老用户无法触达，甚至损失这部分用户。
230+
231+
232+
对于应用程序升级功能的重要性就无需赘言了，下面介绍下应用程序升级功能的几种方式，从平台方面来说：
233+
234+
- IOS平台，应用程序升级功能只能通过跳转到app store进行升级。
235+
- Android平台，既可以通过跳转到应用市场进行升级，也可以下载apk包升级。
236+
237+
从强制性来说可以分别强制升级和非强制升级：
238+
239+
- 强制升级：就是用户必须升级才能继续使用App，如果不是非常必要不建议使用如此强硬的方式，会造成用户的反感。
240+
- 非强制升级就是允许用户点击“取消”，继续使用App。
241+
242+
243+
244+
下面分别介绍IOS和Android升级流程。
245+
246+
## IOS升级流程
247+
248+
IOS升级流程如下：
249+
250+
![](http://img.laomengit.com/app_upgrade_1.png)
251+
252+
流程说明：
253+
254+
1. 通常我们会访问后台接口获取是否有新的版本，如果有新的版本则弹出提示框，判断当前版本是否为“强制升级”，如果是则只提供用户一个“升级”的按钮，否则提供用户“升级”和“取消”按钮。
255+
2. 弹出提示框后用户选择是否升级，如果选择“取消”，提示框消失，如果选择“升级”，跳转到app store进行升级。
256+
257+
258+
259+
## Android 升级流程
260+
261+
相比ios的升级过程，Android就稍显复杂了，流程图如下：
262+
263+
![](http://img.laomengit.com/app_upgrade_2.png)
264+
265+
流程说明：
266+
267+
1. 访问后台接口获取是否有新的版本，这里和IOS是一样的，有则弹出升级提示框，判断当前版本是否为“强制升级”，如果是则只提供用户一个“升级”的按钮，否则提供用户“升级”和“取消”按钮。
268+
2. 弹出提示框后有用户选择是否升级，如果选择“取消”，提示框消失，如果选择“升级”，判断是跳转到应用市场进行升级还是通过下载apk升级。
269+
3. 如果下载apk升级，则开始下载apk，下载完成后跳转到apk安装引导界面。
270+
4. 如果跳转到应用市场升级，判断是否指定了应用市场，比如只在华为应用市场上架了，那么此时需要指定跳转到华为应用市场，即使你在很多应用市场都上架了，也应该根据用户手机安装的应用市场指定一个应用市场，让用户选择应用市场不是一个好的体验，而且用户也不知道应该去哪个市场更新，如果用户选择了一个你没有上架的应用市场，那就更尴尬了。
271+
5. 指定应用市场后直接跳转到指定的应用市场的更新界面。
11272

12-
For help getting started with Flutter, view our
13-
[online documentation](https://flutter.dev/docs), which offers tutorials,
14-
samples, guidance on mobile development, and a full API reference.

0 commit comments

Comments
 (0)