# mobile

**Repository Path**: viktor028/mobile

## Basic Information

- **Project Name**: mobile
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-11
- **Last Updated**: 2024-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uniapp开发android应用

技术栈 vue2+uView

## 搭建项目框架

1. **使用hBuilderX创建vue2项目**

![1733907755283](./media/1733907755283.png)

![1733907830900](./media/1733907830900.png)

2. **引入uView组件库**

![1733907888038](./media/1733907888038.png)

![1733907910360](./media/1733907910360.png)

3. **配置uView**

   3.1 引入uView主JS库

   在项目根目录中的`main.js`中，引入并使用uView的JS库，注意这两行要放在`import Vue`之后。

   ```js
   // main.js
   import uView from '@/uni_modules/uview-ui'
   Vue.use(uView)
   ```

    3.2 在引入uView的全局SCSS主题文件

   在项目根目录的`uni.scss`中引入此文件。

   ```js
   /* uni.scss */
   @import '@/uni_modules/uview-ui/theme.scss';
   
   ```

   3.3 引入uView基础样式

   在`App.vue`中**首行**的位置引入，注意给style标签加入lang="scss"属性

   ```css
   <style lang="scss">
   	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
   	@import "@/uni_modules/uview-ui/index.scss";
   </style>
   ```

## 项目目录结构

![1733908282415](D:\projects\uniapp_project\SmartCity\SmartCity\media\1733908282415.png)

## android模拟器运行

1. 下载androidStuido

   https://developer.android.google.cn/studio?hl=zh-cn

   ![1733915138049](./media/1733915138049.png)

   

2. 创建模拟器

   ![1733915173086](./media/1733915173086.png)

3. 运行android原生应用程序,gradle下载慢问题

   3.1 **gradle**下载慢解决方案
   替换https\://services.gradle.org/distributions为https\://mirrors.cloud.tencent.com/gradle

   ```json
   distributionBase=GRADLE_USER_HOME
   distributionPath=wrapper/dists
   distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-8.2-bin.zip
   zipStoreBase=GRADLE_USER_HOME
   zipStorePath=wrapper/dists
   ```

   3.2 **gradle依赖**下载慢解决方案
   修改settings.gradle.kts，将对应阿里云镜像仓库添加到google()和mavenCentral()上方，优先从国内源下载，如果没有再去原网站下。

   ```json
   pluginManagement {
    repositories {
        // 使用阿里镜像源
        maven(url = "https://maven.aliyun.com/repository/google")
        maven(url = "https://maven.aliyun.com/repository/central")
        maven(url = "https://maven.aliyun.com/repository/gradle-plugin")
        google()
        mavenCentral()
        gradlePluginPortal()
    }
   }
   dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        // 使用阿里镜像源
        maven(url = "https://maven.aliyun.com/repository/google")
        maven(url = "https://maven.aliyun.com/repository/central")
        google()
        mavenCentral()
    }
   }
   
   rootProject.name = "Demo"
   include(":app")
   
   ```

   3.3 gradle依赖下载加速-groovy版

   ```json
   pluginManagement {
       repositories {
           // 使用阿里镜像源
           maven { url 'https://maven.aliyun.com/repository/google' }
           maven { url 'https://maven.aliyun.com/repository/central' }
           maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
           google()
           mavenCentral()
           gradlePluginPortal()
       }
   }
   dependencyResolutionManagement {
       repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
       repositories {
           // 使用阿里镜像源
           maven { url 'https://maven.aliyun.com/repository/google' }
           maven { url 'https://maven.aliyun.com/repository/central' }
           google()
           mavenCentral()
       }
   }
   
   rootProject.name = "Demo"
   include ':app'
   
   ```

   

## TodoList示例

<img src="./media/1733908379687.png" width="500"/>



```js
<template>
  <view>
    <view class="m-title">TODO-List</view>
    <!-- 输入框 -->
    <view class="g-wrapper">
      <u-input
        type="text"
        placeholder="请输入内容"
        v-model="inputValue"></u-input>
      <u-button type="primary" class="m-btn" @click="bindAdd">添加</u-button>
    </view>

    <!-- 列表显示 -->
    <view v-for="(item, index) in list" :key="index">
      <text @click="bindDelete(index)">{{ item }}</text>
    </view>
  </view>
</template>
<!-- 
 获取输入框内容，添加到数组显示 
 -->
<script>
export default {
  data() {
    return {
      inputValue: "",
      list: [],
    };
  },
  methods: {
    bindAdd() {
      this.list.push(this.inputValue);
      this.inputValue = "";
    },
    bindDelete(index) {
      this.list.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.g-wrapper {
  display: flex;
}
.m-title {
  font-size: 20px;
}
.m-btn {
  width: 100px;
  margin-left: 5px;
}
</style>
```

## swaper轮播网络初探

<img src="./media/1733908492238.png" width="500"/>

```js
<template>
  <view>
    <!-- 
		  indicator-dots 指示器   
		  autoplay: 自动轮播
		  interval: 轮播间隔时间
		  duration：轮播滑动时间
		-->
    <swiper
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="1000"
      :circular="true">
      <swiper-item v-for="item in bannerList" :key="item.id">
        <view>
          <image
            :src="'http://124.93.196.45:10193' + item.advImg"
            style="height: 200px; width: 100%"></image>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bannerList: [],
    };
  },
  methods: {
    getBanner() {
      const _this = this;
      uni.request({
        url: "http://124.93.196.45:10193/prod-api/api/park/rotation/list",
        success(res) {
          const data = res.data;
          _this.bannerList = data.rows;
        },
      });
    },
  },
  mounted() {
    this.getBanner();
  },
};
</script>

<style></style>

```

## 路由跳转

1. uni.navigateTo()   

保留当前页面，跳转到应用内的某个页面，使用`uni.navigateBack`可以返回到原页面 

```js
//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});

// 在test.vue页面接受参数
export default {
	onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}
```



2. uni.redirectTo()

   关闭当前页面，跳转到应用内的某个页面。 

```
uni.redirectTo({
	url: 'test?id=1'
});
```



3. uni.switchTab

**跳转到 tabBar 页面**，并关闭其他所有非 tabBar 页面。 

```
uni.switchTab({
	url: '/pages/index/index'
});
```

4. uni.navigateTo

关闭当前页面，返回上一页面或多级页面。 

```js
// 此处是B页面
uni.navigateTo({
	url: 'C?id=1'
});
```



## 网络请求



```js
uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    }
}).then(res=>{
    consolel.log(res)
}).catch(err=>{
     consolel.log(err)
})
```




## 打包apk

1. 复制uniapp打包的项目文件到 simpledemo/src/main/assets/apps/

2. 修改appID

    simpledemo/src/main/assets/data

   ```
   <hbuilder>
   <apps>
       <app appid="__UNI__217FF06" appver=""/>
   </apps>
   </hbuilder>
   
   ```

3. 修改appkey

   AndroidManifest.xml

   ```xml
   <?xml version="1.0" encoding="utf-8"?>
   <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.czy.smartedu
   "> 
   
   <meta-data
               android:name="dcloud_appkey"
               android:value="2b55529b7b9becf83eb2db9be8018c3d" />
   ```

4. 修改包名

   ```xml
   <?xml version="1.0" encoding="utf-8"?>
   <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.czy.smartedu
   "> 
   ```

   ```js
   android {
       compileSdkVersion 30
       buildToolsVersion '30.0.3'
       namespace 'com.android.smart'
       defaultConfig {
           applicationId "com.android.smart"
           minSdkVersion 21
           targetSdkVersion 33
           versionCode 1
           versionName "1.0"
           multiDexEnabled true
           compileOptions {
               sourceCompatibility JavaVersion.VERSION_1_8
               targetCompatibility JavaVersion.VERSION_1_8
           }
       }
   ```

5. 签名

6. 项目信息