admin管理员组文章数量:1655505
(一)vue
使用vue CLI3,mint-ui
babel.config.js
引入mint-ui
module.exports = {
presets: [
'@vue/app',
[
'@babel/preset-env', {
modules: false
}]
],
plugins: [
[
"component",
{
"libraryName": "mint-ui",
"style": true
}
]
]
}
package.json
管理依赖包
{
"name": "vue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^0.19.0",
"core-js": "^2.6.5",
"mint-ui": "^2.2.13",
"font-awesome": "^4.7.0",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.1.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-service": "^3.11.0",
"babel-plugin-component": "^1.1.1",
"compression-webpack-plugin": "^3.1.0",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
vue.config.js
使用代理解决开发时候的跨域问题
let proxyObj = {};
const CompressionPlugin = require("compression-webpack-plugin");
proxyObj['/ws'] = {
ws: true,
target: "ws://localhost:8081"
};
proxyObj['/'] = {
ws: false,
target: 'http://localhost:8081',
changeOrigin: true,
pathRewrite: {
'^/': ''
}
}
module.exports = {
devServer: {
host: 'localhost',
port: 8080,
proxy: proxyObj
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|\.css/,
threshold: 1024,
deleteOriginalAssets: false
})
]
}
}
}
}
index.html 入口,引入app
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>mint-ui</title>
<style>
html body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src\App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
}
</style>
src\main.js,引入mint-ui的js
import Vue from 'vue'
import App from './App'
import router from './router'
import './mint-ui/index.js'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
src\router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
}
]
})
(二)微信小程序
pages:小程序页面,包括js(页面逻辑),wxml(页面结构),wxss(页面样式)和json(页面配置)
app.js:小程序公共逻辑
这个是小程序的脚本代码文件,可以在这个文件上进行监听,并处理小程序的一些生命周期(比如一些全局变量)
在这个app.js文件内,需要使用App()函数,来注册程序。
//app.js
App({
onLaunch: function () {
//当小程序初始化完成时,会触发onLaunch(全局只触发一次)
},
onShow: function () {
//当小程序启动,或从后台进入前台显示,会触发onShow
},
onHide: function () {
//当小程序从前台进入后台,会触发onHide
},
onError: function (msg) {
//当小程序发生脚本错误,或者api调用失败时,会触发onError并带上错误信息
},
other:function(){
//全局函数,可以被项目上的其他js文件调用
},
globalData:{
//全局对象
},
})
app.json:小程序公共配置
- pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
- window字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等。
"window":{
// 导航栏背景颜色
"navigationBarBackgroundColor": "#bc162c",
// 导航栏标题文字内容
"navigationBarTitleText": "初始微信小程序",
// 导航栏标题颜色,仅支持 black/white
"navigationBarTextStyle":"white"
}
tabBar设置小程序的tab最多5个,最少2个
"tabBar": {
// 背景色
"backgroundColor": "#bc162c",
// 背景文字
"color": "#8a8a8a",
// 高亮背景文字
"selectedColor":"#fff",
"list": [
{
"pagePath": "pages/index/index", // 路由页面
"text": "首页", // 路由文字
"iconPath":"images/home1.png", // 默认显示图标必须是图片81*81
"selectedIconPath":"images/home.png" // 高亮显示图标
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath":"images/log1.png",
"selectedIconPath":"images/log.png"
}
]
}
app.wxss:小城市公共样式
(三)安卓
Android studio 开发
.gradle:Gradle编译系统,版本由wrapper指定
.idea:Android Studio IDE所需要的文件
build:代码编译后生成的文件存放的位置
gradle:wapper的jar和配置文件所在的位置
.gitignore:git使用的ignore文件
build.gradle:gradle编译的相关配置文件(相当于Makefile) 里面可以添加相关的依赖
gradle.properties:gradle相关的全局属性设置
gradlew:unix下的gradle wrapper可执行文件
gradlew.bat:windows下的gradle wrapper可执行文件
loca.properties:本地属性设置(key设置,Android sdk位置等属性),这个文件是
不推荐上传到VCS中去的
settings.gradle:和设置相关的gradle脚本
这些事外部文件相关的一些文件的介绍;我们来看app模块里的文件
app模块
这是app模块下的文件结构
build:编译后的文件存在的位置(包括最终生成的apk也在这里面)
libs:依赖的库所在的位置(jar和arr)
src:源代码所在的目录
src/main:主要代码所在的位置(src/androidTest)就是测试代码所在的位置了
src/main/assets:android中附带的一些文件
src/main/java:最重要的,我们的java代码所在的位置
src/main/jniLibs:jni的一些动态库所在的默认位置(.so文件)
src/main/res:android资源文件所在的位置
src/main/AndroidMainfest.xml:AndroidMainfest项目配置文件
build.gradle:和这个项目有关的gradle配置,相当于这个项目的makefile,一些项目的依赖就在这里面;
proguard.pro:代码混淆配置文件;
在Android系统中,有两种操作会引发Activity的启动,一种用户点击应用程序图标时,Launcher会为我们启动应用程序的主Activity;应用程序的默认Activity启动起来后,它又可以在内部通过调用startActvity接口启动新的Activity,依此类推,每一个Activity都可以在内部启动新的Activity。通过这种连锁反应,按需启动Activity,从而完成应用程序的功能。
假设应用程序的默认Activity定义在src/shy/luo/activity/MainActivity.java文件中:
package shy.luo.activity;
import shy.luo.activity.R;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
public class MainActivity extends Activity implements OnClickListener {
private final static String LOG_TAG = "shy.luo.activity.MainActivity";
private Button startButton = null;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
startButton = (Button)findViewById(R.id.button_start);
startButton.setOnClickListener(this);
Log.i(LOG_TAG, "Main Activity Created.");
}
@Override
public void onClick(View v) {
if(v.equals(startButton)) {
Intent intent = new Intent("shy.luo.activity.subactivity");
startActivity(intent);
}
}
}
它的实现很简单,当点击它上面的一个按钮的时候,就会启动另外一个名字为“shy.luo.activity.subactivity”的Actvity。
这里我们可以看到,Android应用程序架构中非常核心的一点:MainActivity不需要知道SubActivity的存在,即它不直接拥有SubActivity的接口,但是它可以通过一个字符串来告诉应用程序框架层,它要启动的Activity的名称是什么,其它的事情就交给应用程序框架层来做,当然,应用程序框架层会根据这个字符串来找到其对应的Activity,然后把它启动起来。这样,就使得Android应用程序中的Activity藕合性很松散,从而使得Android应用程序的模块性程度很高,并且有利于以后程序的维护和更新,对于大型的客户端软件来说,这一点是非常重要的。
当然,应用程序框架能够根据名字来找到相应的Activity,是需要应用程序本身来配合的,这就是要通过应用程序的配置文件AndroidManifest.xml来实现了:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android/apk/res/android"
package="shy.luo.activity"
android:versionCode="1"
android:versionName="1.0">
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".MainActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".SubActivity"
android:label="@string/sub_activity">
<intent-filter>
<action android:name="shy.luo.activity.subactivity"/>
<category android:name="android.intent.category.DEFAULT"/>
</intent-filter>
</activity>
</application>
</manifest>
下面再列出这个应用程序的界面配置文件和字符串文件。
界面配置文件在res/layout目录中,main.xml文件对应MainActivity的界面:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<Button
android:id="@+id/button_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@string/start" >
</Button>
</LinearLayout>
而sub.xml对应SubActivity的界面:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<Button
android:id="@+id/button_finish"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@string/finish" >
</Button>
</LinearLayout>
字符串文件位于res/values/strings.xml文件中:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Activity</string>
<string name="sub_activity">Sub Activity</string>
<string name="start">Start sub-activity</string>
<string name="finish">Finish activity</string>
</resources>
(四)IOS
CocoaPods的使用
我首先新建了一个名为test的项目,放在桌面。然后新建一个文件,命名为:Podfile,文件内容如下:
platform :ios
pod ‘AFNetworking’
pod ‘SDWebImage’, ‘~>3.7’
pod ‘SVProgressHUD’
pod ‘MJExtension’
之后打开终端,进入项目文件夹,输入命令:
pod install
可以看到此时项目目录,项目结构,都产生了变化,我们需要的依赖全部下载并且集成到了项目中(Pods),
接下来可以直接使用刚才安装好的依赖了。
安装好依赖后,不再是双击Test.xcodeproj打开你的项目,应该通过Test.xcworkspace来打开项目。
CocoaPods其他补充:
当你想添加新的依赖,打开Podfile文件进行修改,然后和上面相同的方式,在终端里输入pod install就可以补充安装。
如果不知道该在Podfile写什么来引入你想要的依赖,可以到依赖的github官网去查看。
使用命令pod update可以更新~/.cocoapods目录。
IOS应用的启动
1.先执行main.m里的main函数,main内部会调用UIApplicationMain函数
2.UIApplicationMain函数里面做了什么事情:
1> 创建UIApplication对象
2> 创建UIApplication的delegate对象-----AppDelegate
3> 开启一个消息循环
- 每监听到对应的系统事件时,就会通知AppDelegate
4> 为应用程序创建一个UIWindow对象(继承自UIView),设置为AppDelegate的window属性
5> 加载Info.plist文件,读取最主要storyboard文件的名称
6> 加载最主要的storyboard文件,创建白色箭头所指的控制器对象
版权声明:本文标题:vue手机版,微信小程序,安卓,IOS 开发的比较(1)--主要文件和启动流程 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1729704718a1210617.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论