（一）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.com/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.com/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.com/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文件，创建白色箭头所指的控制器对象
181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
