uinapp 开发app

weixin_47428201

已于 2024-09-08 16:13:16 修改

阅读量424

点赞数 4

分类专栏：知识笔记文章标签：前端 vue.js uni-app

于 2024-09-07 19:48:18 首次发布

本文链接：https://blog.csdn.net/weixin_47428201/article/details/141999780

版权

知识笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

UinApp开发移动应用

前置

小程序和APP和框架选择

小程序因为有微信不用做注册，解决了很大的推广问题，但同时也受限于微信用户。APP开发可独立使用，选择uniapp【支持多平台发布】的，如果有vue基础，学习成本比较低，但如果涉及到一些高性能需求的，例如秒杀等实时性要求较高的需求，则更推荐使用Flutter。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架

开发工具

Hbinder

开发要点

(1)创建项目

选择模板(底部选项卡模板)，选择vue版本2，创建后可以直接运行到浏览器，后续测试也可以选择运行到手机(需要电脑和手机同一个网，手机打开开发者模式授权，用数据线和电脑相连)。

(2)初始化项目结构

建page文件夹放——页面文件【一般一个功能一个文件夹，文件夹下放vue文件】
建static文件夹放——静态资源
manifest.json——配置底部导航栏设定
page.json——导航栏跳转设定
AndroidManifest.xml——安卓权限管理

(3)vue页面基本结构

<template>
  <view>
    ……
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: ''
       ……
    };
  },
  methods: {
    handleLogin() {
    ……
      }
    }
};
</script>

<style scoped>
……
</style>

(4)在线打包(安卓生成本地打包资源apk)

<1>生成安卓证书

安装配置好jre，
在cmd输入，

keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore

设置证书密码，

testalias 是证书别名，可以修改为自己想设置的字符。
test.keystore 是证书文件名称，也可以指定完整文件路径。
36500 表示证书的有效期为100年

<2>HBuilder

选择“发行 -> 原生app-本地打包 -> 生成本地打包资源”，上传证书文件，生成apk文件后，在手机下载安装

(5)拓展：硬件互动(安卓)

<1>启动摄像头【uni.launchCamera】

页面：

<template>
   <view>
     <button @click="takePhoto">拍照</button>
    </view>
</template>

方法：

takePhoto() {
      uni.launchCamera({
        sourceType: ['camera'], // 仅允许从相机拍照
        success: (res) => {
          // res 会包含拍摄照片的信息
          console.log(res);
          const tempFilePaths = res.tempFilePaths;
          this.handleImage(tempFilePaths[0]);
        },
        fail: (err) => {
          console.error('拍照失败', err);
        }
      });
    },
    handleImage(filePath) {      // 可以在这里预览图片、上传图片等      
    uni.previewImage({        
        urls: [filePath]      
        });   
     }

获取权限：

在文件AndroidManifest.xml设置

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>