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,但生态目前还不是很完善~