Ionic的前后端簡(jiǎn)單交互與打包

????前言：這篇文章同樣是新手專用，對(duì)于一個(gè)像我一樣的前端渣新來(lái)說(shuō)，看看還可以，大神的話就算啦。里面涉及的點(diǎn)都不算太難，雖然我也有一堆東西沒(méi)懂，但是跟著先敲起來(lái)，慢慢地就會(huì)理解了。這個(gè)之后還做了一個(gè)angular的前后端簡(jiǎn)單交互，道理都一樣，只是pc端會(huì)出現(xiàn)跨域問(wèn)題，需要配置一下nginx的反向代理之類的。本篇就不說(shuō)這些了，因?yàn)樽鲞@個(gè)的時(shí)候沒(méi)遇到這些問(wèn)題，遇到的是一些網(wǎng)絡(luò)權(quán)限的問(wèn)題，在下面也都提了。

1.實(shí)現(xiàn)目標(biāo)

????目標(biāo)是搭建一個(gè)簡(jiǎn)單的前后端交互，應(yīng)用ionic實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表單，點(diǎn)擊提交按鈕，會(huì)發(fā)送一個(gè)請(qǐng)求，并且能在搭建的后端處查看到提交表單上的值。如圖：

示例圖

2.頁(yè)面搭建

前提：已安裝node.js，ionic，cordova。

????安裝node.js可以去官網(wǎng)下載，下載完node.js之后可以使用集成包管理工具npm安裝剩下的兩樣（全局安裝）。

$ npm install -g cordova ionic

2.1 創(chuàng)建ionic空模板項(xiàng)目

????在終端，進(jìn)入搭建工程的目錄

$ cd /Users/apple/Desktop/

????下載ionic空模板

$ ionic start ionicTest blank

????下載成功之后，進(jìn)入工程。

工程目錄

????其中www是我們主要編寫代碼的文件夾。這時(shí)候我們?cè)诮K端運(yùn)行

$ cd /Users/apple/Desktop/ionicTest/
$ ionic serve

????會(huì)編譯生成頁(yè)面，在瀏覽器中顯示如下圖：

2.png

這就是ionic的空模板，所以展示出來(lái)的是空頁(yè)面。

2.2 編寫代碼

1 編寫頁(yè)面html代碼

????進(jìn)入/www/index.html。在body中的標(biāo)簽 <ion-content></ion-content>之間，寫下如下頁(yè)面代碼。

<div>

  <div class="row1">
    <div class="inner_box">
      <div class="title_msg">版本號(hào) :</div>
      <input class="input_text" type="text" name="name" id="name" placeholder="請(qǐng)輸入姓名">
    </div>
  </div>

  <div class="row1">
    <div class="inner_box">
      <div class="title_msg">編碼方式 :</div>
      <input class="input_text" type="text" name="age" id="age" placeholder="請(qǐng)輸入年齡">
    </div>
  </div>

  
  <div class="row1">
    <div class="button_box">
      <input type="submit" value="提交" class="submit_btn">
    </div>
 </div> 

</div>

結(jié)果如圖：

3.png

2 編寫css樣式

<style type="text/css">
    .inner_box{
    width: 310px;
    height: 40px;
    margin: 0 auto;
    background-color: lightblue;
    border-radius: 5px;
}
.row1{
    width: 98%;
    height: 40px;
    margin:0 auto;
    margin-top: 5px;
    padding: 0;
}
.title_msg{
    float: left;
    width: 100px;
    margin-left: 5px;
    height: 40px;
    text-align: left;
    font-size: 14px;
    line-height: 40px;
    color: #333;
}
.input_text{
    padding: 0px !important;
    float: left;
    width: 200px;
    height: 26px!important;
    margin-top: 7px;
    border: 1px solid #dddddd !important;
    border-radius: 5px;
    font-size: 14px;
    line-height: 26px;
}
.button_box{
    width: 200px;
    height: 40px;
    margin: 0 auto;
}
.submit_btn{
    padding: 0px !important;
    width: 150px;
    height: 30px;
    margin-top: 5px;
    margin-left: 25px;
    border: 1px solid lightblue !important;
    border-radius: 5px;
    background-color: lightblue;
    color: #333333;
}
</style>

????這里提一嘴：css中用了不少!important的原因是因?yàn)閕onic里面很多東西的樣式都有初始設(shè)定，所以很多時(shí)候需要強(qiáng)制設(shè)定下。我寫css也沒(méi)幾天，不知道這種方式算不算對(duì)，要是大家有好的解決辦法，一定要告訴我。

結(jié)果如圖：

4.png

3 添加form標(biāo)簽

<form action="http://192.168.1.100:3000/Info" method="post" onsubmit="return submitForm();">

</form>

????其中submitForm()方法是點(diǎn)擊提交按鈕的時(shí)候先觸發(fā)的方法。在這個(gè)方法中進(jìn)行一些驗(yàn)證或者判斷是否為空值。action之后接的是需要將表單上的內(nèi)容發(fā)送到的地址。這里就用本機(jī)ip地址來(lái)吧。

4 添加邏輯代碼，如果輸入框?yàn)榭眨蛷棾鎏崾究颉?/h5>

<script type="text/javascript">
    function submitForm(){
        var name = document.getElementById("name");
        var age = document.getElementById("age");

        if(name.value == null || name.value == ""){
            alert("請(qǐng)輸入姓名");
            return false;
        }
        if(age.value == null || age.value == ""){
            alert("請(qǐng)輸入年齡");
            return false;
        }
    }
</script>

????以上基本上就搭建好了界面，現(xiàn)在需要的是搭建一個(gè)后臺(tái)服務(wù)，來(lái)接受發(fā)送的請(qǐng)求。

3.服務(wù)搭建

????在這里為了簡(jiǎn)便，我們所使用的是express來(lái)搭建，express是基于node.js平臺(tái)，快速，開(kāi)放，極簡(jiǎn)的web開(kāi)發(fā)框架。

1 創(chuàng)建server文件

????進(jìn)入工程目錄的www文件夾下，創(chuàng)建server.js文件

2 安裝express組件

$ npm install express --save

????此外還需要安裝express的中間件bodyParser。因?yàn)椴恢脑?，express里沒(méi)有包括bodyParser。bodyParser用來(lái)解析表單提交的數(shù)據(jù)。

$ npm install body-parser --save

3 編寫代碼（按照官網(wǎng)的教程寫）

var express = require('express');
var bodyParser = require('body-parser');//引入
var app = express();//創(chuàng)建實(shí)例
var router = express.Router();

app.use(bodyParser.json());
app.use(require('body-parser').urlencoded({extended: true}));

//請(qǐng)求時(shí)開(kāi)始使用的方法
router.use(function(req, res, next) {
    next();
});

//請(qǐng)求返回的方法
router.post('/Info', function (req, res) {
    res.send('Got a POST request');
    console.log(req.body);
});

app.use(router);
app.listen(3000); //指定端口并啟動(dòng)express web服務(wù)

4.運(yùn)行

????編譯前端：

$ ionic serve

????啟動(dòng)后臺(tái)服務(wù)：

$ node server.js

????在頁(yè)面輸入姓名，年齡。

5.png

????點(diǎn)擊提交

6.png

????成功的話會(huì)出現(xiàn)后臺(tái)我寫的返回報(bào)文。這個(gè)時(shí)候在終端上看，后臺(tái)打印的內(nèi)容，會(huì)發(fā)現(xiàn)如下圖：

7.png

????表單提交的內(nèi)容都已經(jīng)在后臺(tái)顯示出來(lái)。這樣就完成了自建前后端簡(jiǎn)單的交互。

5.打包

1. 添加設(shè)備

$ ionic platform add ios
$ ionic platform add android

????一般項(xiàng)目都需要兩個(gè)平臺(tái)同時(shí)部署，所以我們就添加兩個(gè)，執(zhí)行完畢之后執(zhí)行命令查看你已經(jīng)添加的平臺(tái)列表：

$ ionic platform list

結(jié)果：

    Installed platforms:ios 4.1.1，android ~5.2.0
    Available platforms: amazon-fireos ~3.6.3 (deprecated)，blackberry10 ~3.8.0，browser ~4.1.0，firefoxos ~3.6.3，osx ~4.0.1，webos ~3.7.0

2 iOS

2.1 編譯

????在終端進(jìn)入工程目錄下，進(jìn)行編譯

$ ionic build ios

????開(kāi)始編譯項(xiàng)目，編譯完成之后代開(kāi)Xcode，打開(kāi)platform->ios->myIonic.xcodeproj的項(xiàng)目文件，Xcode中選擇要運(yùn)行的模擬器版本并執(zhí)行快捷鍵cmd+R運(yùn)行模擬器，模擬器打開(kāi)后會(huì)自動(dòng)運(yùn)行你應(yīng)用。

????輸入姓名年齡，點(diǎn)擊提交，這個(gè)時(shí)候會(huì)報(bào)錯(cuò)：

    ERROR Internal navigation rejected - <allow-navigation> not set for url='http://192.168.14.102:3000/Info'

????出現(xiàn)這個(gè)錯(cuò)誤的原因是因?yàn)闆](méi)有設(shè)置白名單，iOS9+會(huì)拒絕請(qǐng)求。
????所以解決方案也很簡(jiǎn)單。只需要在ios -> ionicTest -> config.xml中配置

<allow-navigation href="*" /> //即允許跳轉(zhuǎn)到任意http協(xié)議的頁(yè)面  

這樣就成功解決這個(gè)問(wèn)題，接下來(lái)重新運(yùn)行，就通暢了。

2.2 打包ipa包

????在Xcode中，模擬器選擇Generic iOS Device

????在頂部導(dǎo)航欄上的product中選擇Archive進(jìn)行打包，接下來(lái)的選擇根據(jù)不同的需要選擇不同的選項(xiàng)，我這里選擇的是測(cè)試包。

    Export -> Save for Ad Hoc Deployment -> select a Development Team -> Export one app for all compatible devices -> next -> Export到指定文件夾下。

????以上就是打包iOS包的方法和遇到的一些小問(wèn)題。

3 Android

安卓模塊不是我負(fù)責(zé)的，我也就沒(méi)有花太多精力去詳細(xì)研究，一些配置什么的也就大概說(shuō)下，具體的配置項(xiàng)需要自己根據(jù)自己所處的環(huán)境進(jìn)行配置。我就不贅述了。
3.1 配置環(huán)境

????1.安裝Java的JDK，并配置好環(huán)境變量。

????2.安裝工程需要版本的AndroidSDK，并配置好環(huán)境變量；這里JDK和andriodSDK的安裝和配置都很重要，必須安裝好JDK和AndroidSDK，才可以進(jìn)行下面的打包，否則是打不了包的。

3.2 打包
????在終端進(jìn)入工程目錄下，進(jìn)行編譯

$ ionic build android

????注意：這里會(huì)提示你安裝部分版本的Android SDK，按照上面的步驟跟著安裝就可以，之后重新編譯一下。

????編譯之后可以選擇在模擬器上運(yùn)行或者是在真機(jī)上運(yùn)行。（需要先新建虛擬機(jī)/連接手機(jī)，新建方法：打開(kāi)Android SDK安裝目錄下的AVD Manager.exe選擇新建）

$ ionic run android

????同樣，iOS中出現(xiàn)的問(wèn)題，Android也出現(xiàn)了。

????只需要在platform -> Android-> AndroidManifest.xml中，添加上以下一些權(quán)限設(shè)置的代碼即可：

<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.READ_LOGS" />

????以上就是整個(gè)Ionic的前后端簡(jiǎn)單交互與打包了。項(xiàng)目要是有需求的話可以評(píng)論留言跟我要。不過(guò)這個(gè)項(xiàng)目比較簡(jiǎn)單，跟著一步一步走很快就可以搞定的。要是大家在這里發(fā)現(xiàn)什么問(wèn)題，請(qǐng)私信或者評(píng)論告訴我，讓我也學(xué)習(xí)學(xué)習(xí)。