Uniapp学习笔记

简介

uniapp 是 DCloud 公司于 2015 年开发的一款基于 vue 的跨端框架，编写一套代码就可以运行到 web、小程序（各种小程序）和 app（Android 和 iOS）端，使得开发一个项目的成本很小，效率很高，方便快捷。

uniapp官网

1. 创建项目

1.通过HBuilderX可视化界面创建：在点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N），选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。具体官网写的很详细
2. 通过vue-cli命令行创建：
使用正式版：

vue create -p dcloudio/uni-preset-vue 项目名称

使用Vue3/Vite版

npx degit dcloudio/uni-preset-vue#vite 项目名称
或ts版本
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称

命令失败的话可以直接下载模板
JS版本 TS版本

2.全局文件

uniapp中比较主要的全局文件是 pages.json管理页面路由 和 manifest.json管理应用配置，

pages.json

{
	"easycom": {
		"autoscan": true,
		//自动按需导入uniapp组件
		"custom": {
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationStyle": "custom",
				"navigationBarTitleText": "首页"
			}
		},
		...
	]
}

manifest.json 配置应用标识，也就是APPID
另外，我用的vue3+ts版本，需要再配置tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
		 "@dcloudio/types",
		      "miniprogram-api-typings",
		      "@uni-helper/uni-app-types",
		      "@uni-helper/uni-ui-types"
	]
  },
   // 校验 uni-app 组件类型
    "vueCompilerOptions": {
      // experimentalRuntimeMode 已废弃，现调整为 nativeTags，请升级 Volar 插件至最新版本
      "nativeTags": ["block", "component", "template", "slot"]
    },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
  }

运行或者打包还是查看package.json文件

"dev:app": "uni -p app",
    "dev:app-android": "uni -p app-android",
    "dev:app-ios": "uni -p app-ios",
    "dev:custom": "uni -p",
    "dev:h5": "uni",
    "dev:h5:ssr": "uni --ssr",
 	...
    "dev:mp-qq": "uni -p mp-qq",
    "dev:mp-toutiao": "uni -p mp-toutiao",
    "dev:mp-weixin": "uni -p mp-weixin",
    "build:app": "uni build -p app",
    "build:app-android": "uni build -p app-android",
    "build:app-ios": "uni build -p app-ios",
    "build:custom": "uni build -p",
    "build:h5": "uni build",
    "build:h5:ssr": "uni build --ssr",
    ...
    "build:mp-qq": "uni build -p mp-qq",
    "build:mp-toutiao": "uni build -p mp-toutiao",
    "build:mp-weixin": "uni build -p mp-weixin",

3、开始编写代码

uniapp其实就是在原生小程序的基础上兼容了vue，可以在一个页面里面写模板，样式和方法，但是模板中的基本元素是view和text