APICloud開發記錄手冊

時間  2020-12-27
標籤 apicloud 简体版
原文   原文鏈接

APICloud開發記錄【持續】

文章目錄

1、開發要求

Web Storm 2018.1

2、創建項目

2.1 WebStorm插件操作

(1) 除了IOS一塊，其餘均建議閱讀並操作
在這裏插入圖片描述

(2) 將webStorm-APICloud加入到項目中
在這裏插入圖片描述

(3) 安裝好需要的插件
在這裏插入圖片描述
在這裏插入圖片描述

2.2 網頁創建

具體創建應用操作步驟：https://docs.apicloud.com/APICloud/creating-first-app

2.3 下載代碼

(1) 採用SVN下載代碼，然後導入到Web Storm
在這裏插入圖片描述
(2) 採用Subversion

2.4 App創建以及測試

(1) 新建一個底部導航應用
在這裏插入圖片描述
(2) 啓動Wifi真機測試

  • 開啓服務 在這裏插入圖片描述
  • 手機輸入ip以及端口，點擊連接；然後在Web Storm中右鍵項目，點擊【Wifi真機同步】
    在這裏插入圖片描述

3、Api的方法

具體API：https://docs.apicloud.com/Client-API/

API.js文檔：https://docs.apicloud.com/Front-end-Framework/framework-dev-guide#37

3.1 監聽返回鍵

api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            api.confirm({
                title: '提示',
                msg: "確認退出應用?",
                buttons: ['確定', '取消']
            }, function (ret, err) {
                var index = ret.buttonIndex;
                if (index == 1) {
                    api.closeWin();
                }
                return;
            });
        });

3.2 撥打電話

api.call({
            type: 'tel', // 直接撥打，無任何提示
            number: '10086' // 電話號碼
        });

參數說明：https://docs.apicloud.com/Client-API/api#7

3.3 跨頁面執行js腳本

execScript:在指定 window 或者 frame 中執行腳本，對於 frameGroup 裏面的 frame 也有效，若 name 和 frameName 都未指定，則在當前 window 中執行腳本，具體執行邏輯見補充說明。

execScript({params})

4、config.xml文件說明

<?xml version="1.0" encoding="UTF-8"?><widget id="A6080528176396" version="0.0.1">
    <name>demo1_nav</name>  <!--app的名稱-->
    <description>
        Example For APICloud.
    </description>
    <author email="[email protected]" href="http://www.apicloud.com">
        Developer
    </author>
    <content src="grid.html"/>  <!--默認app進入的主頁地址-->
	<preference name="appBackground" value="rgba(0,0,0,0)"/>
	<preference name="windowBackground" value="rgba(0,0,0,0)"/>
	<preference name="frameBackgroundColor" value="rgba(0,0,0,0)"/>
	<preference name="autoLaunch" value="true"/>
	<preference name="autoUpdate" value="true"/>
	<preference name="smartUpdate" value="false"/>
	<preference name="debug" value="false"/>
	<preference name="statusBarAppearance" value="true"/>
	<permission name="location"/>
	<permission name="internet"/>
	<access origin="*"/>
</widget>

5、 WeiUI集成

5.1 將樣式以及JS加入到項目中

  • 下載zip，將build中的weui.css樣式文件加入到項目中的css文件夾中

​ https://github.com/lihongxun945/jquery-weui/releases

5.2 weiUI官網

  • 在WeiUi官網查看對應組件的樣式，並移植到頁面中

6、上拉刷新

如果頁面條目過多，需要進行分頁顯示，用戶上滑數據加載下一頁數據，具體實現如下：

6.1 父頁面[只有header]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo-header</title>
    <!--標準mui.css-->
    <link rel="stylesheet" href="../../css/mui.min.css">
    <!--App自定義的css-->
    <link rel="stylesheet" type="text/css" href="../../css/app.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/my.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav" id="topbar">
    <a class="  mui-icon mui-icon-left-nav mui-pull-left" href="#" onclick="goBeforePage()"></a>
    <h1 class="mui-title" id="title">示例</h1>
</header>

<div class="mui-content">
    <ul class="mui-table-view mui-table-view-chevron" id="showResult">


    </ul>
</div>
<script src="../../js/mui.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../js/request.js"></script>
<script type="text/javascript" src="../../js/dot.min.js"></script>
<script type="text/javascript" src="../../js/toastUtils.js"></script>
<script type="text/javascript" src="../../js/error.js"></script>
<script type="text/javascript">
 
    apiready = function () {
        var header = $api.byId('topbar');
        //適配iOS7+，Android4.4+狀態欄沉浸式效果，詳見config文檔statusBarAppearance字段
        // $api.fixStatusBar(header);
        //動態計算header的高度，因iOS7+和Android4.4+上支持沉浸式效果，
        //因此header的實際高度可能爲css樣式中聲明的44px加上設備狀態欄高度
        //其中，IOS狀態欄高度爲20px，Android爲25px
        var headerH = $api.offset(header).h;
        //frame的高度爲當前window高度減去header和footer的高度
        var frameH = api.winHeight - headerH;
        api.openFrame({
            name: 'detection-search-result-list',
            url: './detection-search-result-list.html',
            rect: {
                x: 0,
                y: headerH,
                w: api.winWidth,
                h: frameH
            },
            pageParam: {
                itemsId: api.pageParam.itemsName,
                itemsId: api.pageParam.itemsId
            },
            bounces: true,
            bgColor: 'rgba(0,0,0,0)',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true
        });

        $api.dom('#title').innerHTML = api.pageParam.itemsName;
       
    };
   
    // 返回上一個頁面
    function goBeforePage() {
        api.closeWin();
    }
</script>
</body>


</html>

6.2 子頁面[list頁面]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>檢測-檢測記錄</title>
    <!--標準mui.css-->
    <link rel="stylesheet" href="../../css/mui.min.css">
    <!--App自定義的css-->
    <link rel="stylesheet" type="text/css" href="../../css/app.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/my.css"/>
</head>
<body>
<div class="mui-content">
    <ul class="mui-table-view mui-table-view-chevron" id="showResult">
    </ul>
</div>
<script src="../../js/mui.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../js/request.js"></script>
<script type="text/javascript" src="../../js/dot.min.js"></script>
<script id="searchResultTemp" type="text/x-dot-template">
    {{ for(var x in it) { }}
    <li class="mui-table-view-cell mui-collapse">
        <a class="mui-navigate-right" href="#">{{=it[x].date}}</a>
        <ul class="mui-table-view mui-table-view-chevron">
            {{ for(var t in it[x].result) { }}
            <li class="mui-table-view-cell"><a href="#">
                {{? it[x].result[t].userName!==null }}
                {{=it[x].result[t].userName}}
                {{?? it[x].result[t].userName==null}}
                ----
                {{??}}
                {{?}}
                {{=it[x].result[t].detectionResult}}
                {{=it[x].result[t].detectionAnalysis}}
                {{? it[x].result[t].age!==null }}
                {{=it[x].result[t].age}}歲
                {{?? it[x].result[t].age==null}}
                ----
                {{??}}
                {{?}}
                {{? it[x].result[t].sex === "0" }}
                女
                {{?? it[x].result[t].sex === "1"}}
                男
                {{??}}
                {{?}}
            </a>
            </li>
            {{ } }}
        </ul>
    </li>
    {{ } }}
</script>
<script type="text/javascript" src="../../js/toastUtils.js"></script>
<script type="text/javascript" src="../../js/error.js"></script>
<script type="text/javascript">

    var pageIndex = 0;
    var pageSize = 15;
    var userId = "";
    var itemsId = "";
    apiready = function () {
        api.addEventListener({name: 'scrolltobottom'}, function (ret, err) {
            toDoRequest();
        });

        userId = $api.getStorage(CURRENT_USER)["id"];
        itemsId = api.pageParam.itemsId;
        toDoRequest();
    };

    // 刷新 初始化加載
    function toDoRequest() {
        showProgress('加載中', '加載數據中.....');
        API.detection.getDetectionByItems(userId, itemsId, pageIndex, pageSize, function (ret, err) {
            api.refreshHeaderLoadDone(); //復位下拉刷新
            api.hideProgress();
            if (!globalException(err)) {
                return;
            }
            pageIndex++;
            if(ret["data"]==null||ret["data"].length==0){
                showToast('無更多數據加載',1000);
                return ;
            }
            var evaluation = doT.template($api.dom('#searchResultTemp').innerHTML);
            $api.dom('#showResult').innerHTML += evaluation(ret["data"]);
        });
    }
</script>
</body>
</html>

7、異步請求

$api.get('http://192.168.2.66:8081/app/index', function (ret) {
            alert($api.jsonToStr(ret));
        }, 'json');
api.ajax({
            url: 'http://192.168.2.66:8081/app/index',
            method: 'get',
        },function(e){
            alert($api.jsonToStr(e));
        });

8、dot.js[模板引擎]

當使用web方式顯示數據列表時，使用js模板可以有效提高開發效率。使用方式如下：

8.1 下載地址

https://github.com/olado/doT

8.2 在頁面引用dot.min.js

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../js/dot.min.js"></script>

8.3 定義頁面模板

<ul class="mui-table-view mui-grid-view mui-grid-12">
        <div id="itemsDataDiv"></div>
        <script id="itemsDataTemp" type="text/x-dot-template">
            {{ for(var x in it) { }}
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                <a href="#" onclick="goToItems(3)" tapmode>
                    <img src="../../image/cbd.jpg" class="indeximg"/>
                    <div class="mui-media-body">{{=it[x].itemsName}}</div>
                </a>
            </li>
            {{ } }}
        </script>
    </ul>

8.4 js驅動模板

apiready = function () {
        doFindAllItems();
    };

    // 查詢所有的檢測項目
    function doFindAllItems(){
        //TODO:
        var data = [
            {itemsName:"A",itemsIcon:"../../image/cbd.jpg",},
            {itemsName:"B",itemsIcon:"../../image/cbd.jpg",},
            {itemsName:"C",itemsIcon:"../../image/cbd.jpg",},
            {itemsName:"D",itemsIcon:"../../image/cbd.jpg",},
        ];
        // 
        var evaluation = doT.template($api.dom('#itemsDataTemp').innerHTML);
        $api.dom('#itemsDataDiv').innerHTML = evaluation(data);
    }

8.5 參考鏈接

9、Git管理

9.1 創建項目

  1. 在APICloud中創建新的項目
  2. 在git中創建repository，命名爲demoApp
  3. 編寫項目，即widget
    在這裏插入圖片描述

9.2 提交項目

1 在與widget同級的情況下，運行git bash,然後輸入

$ git init

在這裏插入圖片描述

2 與遠程庫（demoApp)關聯

git remote add origin https://github.com/xx/demoApp.git

3 推送代碼到遠程庫

$ git add .
  $ git commit -m "commit message"
  $ git push -u origin master

9.3 與APICloud關聯

在這裏插入圖片描述

9.4 雲編譯

當做完以上操作後，之後進行雲編譯，然後下載App.

9.5 官方說明git管理

10、各個項目模板參考

11、Android Stduio 設置代理訪問

在本機安裝shadowsockets 然後設置本機ip端口爲1081 ，最後file->setting->System Settings-> Http Proxy

配置完畢後，進行測試
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

12、自定義模塊開發

開發之前，下載【模塊開發SDK】，地址：https://docs.apicloud.com/Download/download

12.1 自定義模塊開發[Eclipse]

​ 在用Android Studio打包模塊並測試，發現so文件並不能加載，具體原因因爲調試環境限制，暫時不明確（AS可以開發不需要so文件的模塊，調用無問題）。故採用Eclipse開發模塊。具體步驟如下：

1、下載SDK模塊開發項目,並導入到Eclipse工作空間

在這裏插入圖片描述

2、創建 apiDigital 模塊，並加入代碼

在這裏插入圖片描述

3、加入需要的依賴，並build path

在這裏插入圖片描述

在這裏插入圖片描述

4、加入需要的libXXX.so庫

在這裏插入圖片描述

5、映射

package com.apicloud.apiDigital;

import com.uzmap.pkg.uzcore.UZWebView;
import com.uzmap.pkg.uzcore.uzmodule.UZModule;
import com.uzmap.pkg.uzcore.uzmodule.UZModuleContext;
import com.xmgh.digitalreader.proxy.DigitalReaderProxy;

/**
* 該類映射至Javascript中apiDigital對象<br>
* <br>
* <strong>Js Example:</strong><br>
* var module = api.require('apiDigital');<br>
* module.xxx();
*
* @author fangping
*/
public class APIDigitalModule extends UZModule {// 需要繼承UZModule

   private static DigitalReaderProxy digitalReaderProxy = null;

   public APIDigitalModule(UZWebView webView) {
   	super(webView);

   }
 
   /**
    * <strong>函數</strong><br>
    * <br>
    * 該函數映射至Javascript中moduleDemo對象的showAlert函數<br>
    * <br>
    * <strong>JS Example：</strong><br>
    * moduleDemo.showValue(argument);
    *
    * @param moduleContext
    *            (Required)
    */
	public void jsmethod_showValue(final UZModuleContext moduleContext)
			throws JSONException {
		JSONObject ret = new JSONObject();
		ret.put("msg", "Hello");
	    moduleContext.success(ret, false);
	}
}

6、導出jar,只導出該模塊的代碼即可

在這裏插入圖片描述
在這裏插入圖片描述

在這裏插入圖片描述

然後點擊【Finish】即可。

7、資源修改

在這裏插入圖片描述

8、頁面調用

在這裏插入圖片描述
在這裏插入圖片描述

9、打包的項目結構，新建一個與模塊名一致的文件夾

在這裏插入圖片描述

文件夾說明：

res_apiDigital（可選目錄）:

1）、該目錄命名規範必須爲「res_」開頭，後面跟模塊名。例如「res_apiDigital」。

2）、res_apiDigital目錄中內容審覈： res_apiDigital的根路徑下最多僅允許包含res子目錄和AndroidManifest.xml文件，如圖：
在這裏插入圖片描述

這兩個文件對應項目中的：
在這裏插入圖片描述

sources: source目錄爲必須目錄。

1）、該目錄爲模塊的代碼導出的JAR文件及其依賴的JAR所在目錄，可存放多個JAR文件。

2）、該目錄下均存放的.jar後綴名的文件，如apiDigital.jar、digitalreaderproxylibrary.jar.jar、tencent.jar。

4）、該目錄下不允許存放名爲android-support-v4.jar的文件。

5）、該目錄下不允許存放名類似爲apiEngine v1.1.0.jar的文件。

截圖如下：
在這裏插入圖片描述

target:該目錄爲可選目錄。
在這裏插入圖片描述

實際複製模塊項目中的：
在這裏插入圖片描述

1）、該目錄爲模塊用到的so庫其依賴的so庫所在目錄，可存放多個so文件。

2）、該目錄允許包含子目錄，如armeabi-v7a、arm64、x86、mips等，這些子目錄均爲可選。

10、新建module.json,添加內容如下

{
   name:'apiDigital',
   class:'com.apicloud.apiDigital.APIDigitalModule'
}

11、壓縮打包成zip即可

在這裏插入圖片描述

在這裏插入圖片描述

12、加入自定義模塊，並添加到項目中.頁面調用模塊，不再累述

在這裏插入圖片描述

在這裏插入圖片描述

13、注意

  • res中需要去掉以下配置,以防衝突導致app編譯失敗

    <resources>
    <string name="app_name">apiDigital</string>
</resources>

  • AndroidManifest.xml只加入對應的權限以及其他Activity，多餘的去掉

  • 加入so庫，不需要加入libsec.so

14、參考

12.2 自定義模塊開發[AS]

12.3 模塊開發之上傳文件

代碼：

package com.apicloud.apiDigital;
import java.io.BufferedReader;
import java.io.ByteArrayInputStream;
import java.io.DataOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.UUID;

import org.json.JSONException;
import org.json.JSONObject;

import com.uzmap.pkg.uzcore.uzmodule.UZModuleContext;

public class UploadUtil {
	private static final int TIME_OUT = 180 * 1000; // 超時時間
	private static final String CHARSET = "utf-8"; // 設置編碼

	/**
	 * android上傳文件到服務器
	 * 
	 * @param file
	 *            需要上傳的文件
	 * @param RequestURL
	 *            請求的rul
	 * @param userId 
	 * @param itemsId 
	 * @param batchCode 
	 * @param moduleContext
	 * @return 返回響應的內容
	 */
	public static String uploadFile(File file, String RequestURL,
			String itemsId, String userId, String batchCode, UZModuleContext moduleContext) {
		String result = null;
		String BOUNDARY = UUID.randomUUID().toString(); // 邊界標識 隨機生成
		String PREFIX = "--", LINE_END = "\r\n";
		String CONTENT_TYPE = "multipart/form-data"; // 內容類型
		DataOutputStream dos = null;
		InputStream is = null;
		try {
			URL url = new URL(RequestURL);
			HttpURLConnection conn = (HttpURLConnection) url.openConnection();
			conn.setReadTimeout(TIME_OUT);
			conn.setConnectTimeout(TIME_OUT);
			conn.setDoInput(true); // 允許輸入流
			conn.setDoOutput(true); // 允許輸出流
			conn.setUseCaches(false); // 不允許使用緩存
			conn.setRequestMethod("POST"); // 請求方式
			conn.setRequestProperty("Charset", CHARSET); // 設置編碼
			conn.setRequestProperty("connection", "keep-alive");
			conn.setRequestProperty("Content-Type", CONTENT_TYPE + ";boundary="
					+ BOUNDARY);
			conn.connect();

			if (file != null) {
				/**
				 * 當文件不爲空，把文件包裝並且上傳
				 */
				dos = new DataOutputStream(conn.getOutputStream());
				// 
				StringBuffer sb = new StringBuffer();
				sb.append(PREFIX);
				sb.append(BOUNDARY);
				sb.append(LINE_END);
				sb.append("Content-Disposition: form-data;name=\"itemsId\"");
				sb.append(LINE_END);
				sb.append(LINE_END);
				sb.append(itemsId);
				sb.append(LINE_END);
				dos.write(sb.toString().getBytes());
				// 用戶
				sb = new StringBuffer();
				sb.append(PREFIX);
				sb.append(BOUNDARY);
				sb.append(LINE_END);
				sb.append("Content-Disposition: form-data;name=\"userId\"");
				sb.append(LINE_END);
				sb.append(LINE_END);
				sb.append(userId);
				sb.append(LINE_END);
				dos.write(sb.toString().getBytes());
				
				// 
				sb = new StringBuffer();
				sb.append(PREFIX);
				sb.append(BOUNDARY);
				sb.append(LINE_END);
				sb.append("Content-Disposition: form-data;name=\"batchCode\"");
				sb.append(LINE_END);
				sb.append(LINE_END);
				sb.append(batchCode);
				sb.append(LINE_END);
				dos.write(sb.toString().getBytes());
				sb = new StringBuffer();
				sb.append(PREFIX);
				sb.append(BOUNDARY);
				sb.append(LINE_END);
				/**
				 * 這裏重點注意： name裏面的值爲服務器端需要key 只有這個key 纔可以得到對應的文件
				 * filename是文件的名字，包含後綴名的 比如:abc.png
				 */
				sb.append("Content-Disposition: form-data; name=\"Fdata\"; filename=\""
						+ file.getName() + "\"" + LINE_END);
				sb.append("Content-Type: application/octet-stream; charset="
						+ CHARSET + LINE_END);
				sb.append(LINE_END);
				dos.write(sb.toString().getBytes());
				is = new FileInputStream(file);
				byte[] bytes = new byte[1024];
				int len = 0;
				while ((len = is.read(bytes)) != -1) {
					dos.write(bytes, 0, len);
				}
				is.close();
				dos.write(LINE_END.getBytes());
				byte[] end_data = (PREFIX + BOUNDARY + PREFIX + LINE_END)
						.getBytes();
				dos.write(end_data);
				dos.flush();
				/**
				 * 獲取響應碼 200=成功 當響應成功，獲取響應的流
				 */
				int res = conn.getResponseCode();
				if (res == 200) {
//					is = conn.getInputStream();
					BufferedReader in = new BufferedReader(new InputStreamReader(conn.getInputStream(),"UTF-8"));
					StringBuffer sb1 = new StringBuffer();
					int ss;
					while ((ss = in.read()) != -1) {
						sb1.append((char) ss);
					}
					result = sb1.toString();
					JSONObject ret = new JSONObject();
					ret.put("msg", result);
					ret.put("identity", 1);
					file.delete();// 刪除上傳
					moduleContext.success(ret, true);
				}else{
					JSONObject ret = new JSONObject();
					ret.put("msg", "請求失敗,請聯繫後臺管理員");
					ret.put("identity", -1);
					moduleContext.success(ret, true);
				}
				
			}
		} catch (MalformedURLException e) {
			JSONObject ret = new JSONObject();
			try {
				ret.put("msg", e.getMessage());
				ret.put("identity", -1);
			} catch (JSONException e1) {
				e1.printStackTrace();
			}
			moduleContext.success(ret, true);
			e.printStackTrace();
		} catch (Exception e) {
			JSONObject ret = new JSONObject();
			try {
				ret.put("msg", e.getMessage());
				ret.put("identity", -1);
			} catch (JSONException e1) {
				e1.printStackTrace();
			}
			moduleContext.success(ret, true);
			e.printStackTrace();
		} finally {
			try {
				if (dos != null) {
					dos.close();
				}
				if (is != null) {
					is.close();
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		return result;
	}
}

13、自定義拍照模板

1 效果如下：

在這裏插入圖片描述

2 步驟如下

自定義模板scanner.html頁面

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>

        html,body {
            padding-top: 80px;
            background-color: transparent;
            padding-left: 0%;
        }
      /*.box{width: 18%;height: 80px;margin: 0 auto;background: #fff;}*/
      .box{width: 400px;height: 100px;margin: 0 auto; border: 2px dotted #f3f3f7; margin-left:-15%;
          /*旋轉90度*/
          -webkit-transform: rotate(90deg); /* Safari and Chrome */
          -moz-transform: rotate(90deg);   /* Firefox */
          -moz-transform: rotate(90deg);   /* Firefox */
          -ms-transform: rotate(90deg);   /* IE 9 */
          -o-transform: rotate(90deg);   /* Opera */
          transform: rotate(90deg);}
        .linebox {
            width: 173px;
            float: left;
            margin-left: 25%;
            margin-top: 16px;
        }
      .line{display: block; width:5px;height:30px;float: left; margin:25PX 25PX;border: 2px dotted #f3f3f7; }
        .Rightbox {
            float: left;
            margin-left: 70px;
            margin-top: 32px;
        }
        .circle{display: block; width:40px;height:30px;border-radius:40%; border: 2px dotted #f3f3f7; } /**f3f3f7**/

    </style>
</head>

<body>

<!--<a class="button" tapmode="active" onclick="fnTakePhoto()">拍照 </a>-->
   <div class="box">
       <span class="linebox" id="lineBox">
        <span class="line"></span>
        <span class="line"></span>
       </span>
       <div class="Rightbox">
           <span class="circle"></span>
       </div>
   </div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
 
</html>

頁面調用js

// 切換手機拍照
    function doChangePhoto() {
        var header = $api.dom('header'); // 獲取 header 標籤元素
        var headerH = $api.fixStatusBar(header);
        var FNPhotograph = api.require('FNPhotograph');
        var curdate = new Date();
        var photoPath = 'fs://FNPhotograph/' + curdate.getTime() + '.jpg';
        exitFlag = false;
        FNPhotograph.open({
            path: photoPath,
            album: true,
            quality: 'high',
            qualityValue:100
        }, function (ret) {
            if (ret.eventType == 'show') {
                api.openFrame({
                    name: 'scanner',
                    url: './photo/scanner.html',
                    bounces: true,
                    rect: { // 推薦使用Margin佈局，用於適配屏幕的動態變化
                        x: 30, // main頁面距離win頂部的高度
                        y: 80, // main頁面距離win底部的高度
                        // w: 'auto' // main頁面的寬度 自適應屏幕寬度
                        w: 'auto',
                        h: '430px',
                    },
                    bounces: false,
                });
            } else if (ret.eventType == 'takePhoto') {
                console.log(JSON.stringify(ret));
                var imagePath = ret.imagePath;
                if (imagePath != null) {
                    api.openWin({
                        name: 'detection-takephoto-submit',
                        url: './photo/detection-takephoto-submit.html',
                        rect: {
                                  api.openFrame({
                    name: 'scanner',
                    url: './photo/scanner.html',
                    bounces: true,
                    rect: { // 推薦使用Margin佈局，用於適配屏幕的動態變化
                        x: 30, // main頁面距離win頂部的高度
                        y: 80, // main頁面距離win底部的高度
                        // w: 'auto' // main頁面的寬度 自適應屏幕寬度
                        w: 'auto',
                        h: '430px',
                    },
                    bounces: false,
                });
            } else if (ret.eventType == 'takePhoto') {
                console.log(JSON.stringify(ret));
                var imagePath = ret.imagePath;
                if (imagePath != null) {
                    api.openWin({
                        name: 'detection-takephoto-submit',
                        url: './photo/detection-takephoto-submit.html',
                        rect: {
                            w: api.winWidth,
                            h: api.winWidth
                        },
                        pageParam: {imagePath: imagePath}
                    });
                }

            } else if (ret.eventType == 'close') {
                // document.getElementById('abc').src = ret.imagePath;
                // api.closeFrame({
                //     name: 'scanner'
                goToBeforePage();
            }
        });
    }

14、調用模塊說明

14.1 調用定位模塊說明

15、App抓包

15.1 安裝說明

首先下載安裝Fiddler，運行後選擇菜單Tools->Fiddler Options。

選中"Decrpt HTTPS traffic"，Fiddler就可以截獲HTTPS請求：
在這裏插入圖片描述

選中"Allow remote computers to connect"，是允許別的機器把HTTP/HTTPS請求發送到Fiddler上來：
在這裏插入圖片描述

配置完成後重啓Fiddler。

15.2 安裝證書【安卓不裝】

1.獲取當前電腦的IP地址，例如我這裏是：192.168.2.65

2.在iPhone中打開safari並訪問地址http://192.168.2.65:8888，點"FiddlerRoot certificate"然後安裝證書：

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

15.3 手機設置代理

在iPhone上打開設置->無線局域網，點擊當前WIFI後面的i圖標查看當前連接信息，滾動到底部的HTTP代理，切換爲「手動」：
在這裏插入圖片描述

15.4 使用過程報錯

使用中彈出：

creation of the root certificate was not successful

解決如下：

cd  d:\Program Files\Fiddler

makecert.exe -r -ss my -n "CN=DO_NOT_TRUST_FiddlerRoot, O=DO_NOT_TRUST, OU=Created by http://www.fiddler2.com" -sky signature -eku 1.3.6.1.5.5.7.3.1 -h 1 -cy authority -a sha1 -m 120 -b 09/05/2012

再安裝證書

16、app更新

16.1 版本更新

16.2 雲更新

17、ios證書

​ 現在apicloud官方不提供測試版本的IOS證書， 所以這裏使用一個工具去生成IOS證書。

1.創建免費的蘋果開發者賬號的過程

2.申請ios證書步驟說明，這一步主要弄證書以及描述文件即可

3.打包ios的步驟說明

4.apicloud官方說明一些問題

5.博客說明ios證書

地址：https://blog.csdn.net/xxw888/article/details/76083152

6.注意

蘋果端安裝ipa，採用第三方去安裝。掃描二維碼以及ipa安裝，會報安裝失敗等錯誤。

18、集成極光推送

18.1 集成步驟

1.app加入極光模塊

在這裏插入圖片描述

2.極光官網綁定app

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

3.修改config.xml,在配置文件中，加入以下配置

<feature name="ajpush">
		 <param name="channel" value="developer-danqiusheng" />
		 <param name="app_key" value="93458e2fe2c88736b455b743" />  <!--上面的AppKey-->
	 </feature>

4.推送

在這裏插入圖片描述
在這裏插入圖片描述

18.2 鏈接

  • 論壇極光示例說明：
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程