一.cordova简介

cordova中文文档

二.安装cordova(win7)

命令行中输入npm install -g cordova
安装后 , 输入cordova -v , 查看cordova版本信息.如图:

cordova版本信息

三.新建cordova项目

1.命令行中切换到你的工作目录下,我的工作目录是E:\fry_work\TestDemo

我的工作目录

2.输入命令,新建cordova项目,本次项目名称为"CordovaDemo"

cordova create CordovaDemo com.app.cordova CordovaDemo

新建cordova项目

3.创建成功后,会在工作目录中自动新建对应的项目文件夹

E:\fry_work\TestDemo\CordovaDemo

cordova的目录结构

4.添加对应的平台(ios , android)

命令行中切换到当前项目下,分别输入cordova platform add ios --save 和 cordova platform add android --save , 完成后,输入cordova platform ls检查当前平台的设置状况.

添加android平台

添加ios平台

查看平台设置情况

四.测试运行新建的cordova项目(android真机运行)

用数据线将手机和电脑连接起来,手机打开调试模式.
在命令行中打开当前项目的目录,输入cordova run android , 回车
将会在手机中看到app自动安装运行.

app的运行结果

五.使用vue实现页面

1.在项目根目录下 , 创建一个vue项目

我的vue项目名叫"vue_web" , 命令行中输入 vue init webpack vue_web ,创建vue项目.

vue_web的目录结构

2.修改vue_web/config目录下的index.js文件

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    //...................********省略
  }

修改为

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../../www/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../../www'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '',
    //...................********省略
  }

修改此处的作用是 : 将vue_web项目打包后的文件放到CordovaDemo项目的www文件夹下.这样运行cordova run android命令时 , 便可在app中看到用vue编写的页面效果.

六.编写App的登录页

此次我选用的UI框架是vant , 亦可使用其他UI框架

1.在vue_web中安装vant , 输入npm install vant -s ,安装完成后 , 可在vue_web/node_modules目录下看到vant文件夹 , 在vue_web/src目录下 , 修改main.js, 引用vant

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

修改为:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vant from 'vant'
import 'vant/lib/vant-css/index.css'

Vue.config.productionTip = false
Vue.use(Vant)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2.在vue_web/src/router目录下 , 修改index.js文件

修改后为:

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    }
  ]
})

将vue_web/src/components目录下的HelloWorld.vue重命名为Login.vue
修改vue_web/src目录下的App.vue文件 , 主要是注释了<img src="./assets/logo.png">和margin-top: 60px;这两行代码
修改后为:

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background-color: #fff;
  /* margin-top: 60px; */
}
</style>

3.实现登录界面

在vue_web中安装axios , 输入npm install axios -s
在vue_web/src/目录下新建servers目录 , 在servers目录中新建index.js文件 , 用来封装一下请求方法.
index.js文件内容如下:

import axios from 'axios';
var baseURL = 'http://your.server.address';//你的服务器地址
const xhr = axios.create({
  baseURL,
  timeout:5000,
});
const postData = ( url, data, needHeader ) => {
  let headers = {};
  if(needHeader){
      headers = {
          token:localStorage.getItem('token')
      }
  }
  return new Promise((resolve,reject)=>{
      xhr({url, data, headers, method:'post'})
      .then(res => {
          resolve(res.data)
      })
      .catch(err => reject(err))
  })
}
const getData = ( url, params, needHeader ) => {
  let headers = {};
  if(needHeader){
      headers = {
          token:localStorage.getItem('token')
      }
  }
  return new Promise((resolve,reject)=>{
      xhr({url, params, headers})
      .then(res => resolve(res.data))
      .catch(err => reject(err))
  })
}
//密码登录
export const loginByPwd = ( reqData ) => {
  const url = '/account/login';
  const data = reqData ;
  return postData(url,data);
}

修改Login.vue文件
修改后为:

<template>
  <div style="background-color:#fff;">
    <van-nav-bar title="登录">
    </van-nav-bar>
    <van-cell-group style="margin-top:200px;">
      <van-field
        v-model="username"
        required
        clearable
        label="账号"
        icon="question"
        placeholder="手机号"
        @click-icon="$toast('请输入手机号')"
      />
      <van-field
        v-model="password"
        type="password"
        label="密码"
        placeholder="请输入密码"
        required
      />
    </van-cell-group>
    <van-button size="large" style="background-color:lightblue;color:#fff;margin-top:50px;" @click="login">登录</van-button>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { loginByPwd } from '../servers'
export default {
  name: 'Login',
  data () {
    return {
      remember_psw:true,//是否记住密码,默认为1
      username:"",//账号
      password:"",//mima
    }
  },
  methods: {
    // 登录
    login(){
      if(this.username == ""){
        Toast.fail('请输入账号');
      }else if(this.password == ""){
        Toast.fail('请输入密码');
      }else{
        loginByPwd({
            login_name:this.username,
            pwd:this.password
        }).then(res => {
            let { code,data,desc } = res;
            if (code === 1) {
                localStorage.setItem('token', data.token);
                localStorage.setItem('title',data.title);
                localStorage.setItem('accountId',data.account_id);
                Toast.success('登录成功');
                //跳转个人中心页
                this.$router.replace('/mine')
            }
        })
      }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

登录页页面效果为:

登录页效果图