浅谈uniapp开发

uniapp是啥

Uniapp 是一个基于 Vue.js 的前端框架，专门用于开发跨平台应用。它由 DCloud 公司开发，旨在帮助开发者通过一套代码实现多端应用，包括 H5、微信小程序、支付宝小程序、百度小程序、字节跳动小程序、QQ 小程序、快应用、App（iOS 和 Android）等。

构建uniapp

下载Hbuilderx，然后选择符合项目需求的模板就搞定啦！

响应式布局

UI图以750px为准就行，css样式单位为rpx，即750px = 750rpx，等价转换

国际化

• 项目根目录的locale目录下配置语言json文件，locale/语言地区代码.json，如：en.json，zh-Hans.json，zh-Hant.json
• 在main.js中引入文件即可

内置语言

• 中文简体
• 中文繁体
• 英语
• 法语
• 西班牙语

新增语言的话只需增加uni-app.xxx(zh-Hans).json 但不需要导入，会自动识别

条件编译

#ifdef  %PLATFORM%.... #endif

if defined 仅在某平台存在

#ifndef %PLATFORM%......#endif

if not defined 除了某平台均存在

两个平台都支持采用||方式

#ifdef H5 || MP-WEIXIN

demo

#endif

 %PLATFORM%常用值

MP-WEIXIN                        微信小程序

APP                                     APP

H5                                        web

接口封装

const request = (options) => {
  const { url, ...args } = options;

  return new Promise((resolve, reject) => {
    try {
      uni.request({
        url,
        header: {
          xxx,
        },
        ...args,
        success(result) {
          // xxx
        },
        fail(error) {
          xxx;
        },
      });
    } catch (e) {
      // xxx
    }
  });
};

跨域配置

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
	plugins: [uni()],
	server: {
		host: "localhost",
		port: 8899,
		proxy: {
			'/api': {
				target: 'xxx',
				changeOrigin: true,
				rewrite: (path) => path.replace(/^\/api/, ''),
			}
		}
	}
})

APP本地打包 - Android版

下载App离线SDK

下载Android Studio

在Huilderx打资源包

在Android Studio导入SDK的helloUniapp项目

uniapp资源包替换apps下的文件夹

更改app下data的dcloud_control.xml文件id跟项目id一致，即跟manifest.json的id一致

 这三个文件包名保持一致

在AndroidManifest.xml中的dcloud_appkey标签上加这段代码，包名改下

<provider
            android:name="io.dcloud.common.util.DCloud_FileProvider"
            android:authorities="包名.dc.fileprovider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/dcloud_file_provider" />
        </provider>

配置个jks文件（证书文件）

点这个操作然后添加信息即可，会根据你提供的信息生成一个证书文件，生成证书后刷新下项目即可看到~

查.jks文件的SHA1/SHA256

keytool -list -v -keystore xx.jks

把信息贴到uniapp应用上 

点进去添加包名/sha1/sha256即可

点击创建生成项目key 

把项目key贴到 AndroidManifest.xml中的dcloud_appkey中的值中就大功告成啦

点击build就打包完成啦 

最后

uniapp就是套了个壳，为了更趋向于原生，有了现在的uniappx，但生态目前还不是很完善~