使用cordova开发webapp(一)
2018-09-18 本文已影响0人
GordonFong
一.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>
登录页页面效果为:
登录页效果图
