uniapp基础学习笔记

文件-新建-项目

image.png

工具-安装插件

image.png

编译成微信小程序段代码

设置开发者路径,安装微信开发者工具目录

开启服务端口,微信开发者工具中开启

设置-通用设置-安全

image.png

├─pages 业务页面文件存放的目录

│ └─index

│ └─index.vue index页面

├─static 存放应用引用的本地静态资源的目录(注意：静态资源只能存放于此)

├─unpackage 非工程代码，一般存放运行或发行的编译结果

├─index.html H5端页面

├─main.js Vue初始化入口文件

├─App.vue 配置App全局样式、监听应用生命周期

├─pages.json 配置页面路由、导航栏、tabBar等页面类信息

├─manifest.json 配置****appid、应用名称、logo、版本等打包信息

└─uni.scss uni-app内置的常用样式变量

如何查看小程序****APPID

登录小程序平台【mp.weixin.qq.com】->开发->开发设置->开发者ID，即可查到AppID。如下图：

在manifest.json中微信小程序配置ID,就可以在手机查看了

image.png

uni-app 和原生小程序开发区别

开发区别

uni-app 项目每个页面是一个 .vue 文件，数据绑定及事件处理同 Vue.js 规范：

属性绑定 src="{ { url }}" 升级成 :src="url"
事件绑定 bindtap="eventName" 升级成 @tap="eventName"，支持（）传参
支持 Vue 常用指令 v-for、v-if、v-show、v-model 等

其他区别补充

调用接口能力，建议前缀 wx 替换为 uni ，养成好习惯，支持多端开发。
<style> 页面样式不需要写 scoped，小程序是多页面应用，页面样式自动隔离。
生命周期分三部分：应用生命周期(小程序)，页面生命周期(小程序)，组件生命周期(Vue)

image.png

pages页面布局

根节点为 <template>，这个 <template> 下只能且必须有一个根 <view> 组件。

<template>//页面布局
  <view>
  </view>
</template>

<script>//逻辑代码
        export default {//data：template模板中需要使用的数据
          data() {
            return {
            }
          },
       methods:{//methods方法，如按钮点击、屏幕滚动
        }
        }
</script>

<style lang="scss">//CSS渲染

</style>

<template>里面写页面布局,相当于写HTML

<view> 个人感觉与HTML的<div>十分类似

pages.json页面配置全局配置

{
    "pages": [ // 'pages' 数组中的第一项表示应用的启动页面。参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页" // 导航栏标题文本
            }
        },
        {
            "path": "pages/my/my",
            "style": {
                "navigationBarTitleText": "我的"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "white", // 全局设置以将导航栏标题字体颜色更改为'black'或'white'
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#26BB9B", // 全局设置以更改导航栏标题背景颜色
        "backgroundColor": "#F8F8F8"
    },
    "tabBar": {
        "selectedColor": "#26BB9B",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "static/tabs/home_default.png",
                "selectedIconPath": "static/tabs/home_selected.png"
            },
            {
                "pagePath": "pages/my/my",
                "text": "我的",
                "iconPath": "static/tabs/user_default.png",
                "selectedIconPath": "static/tabs/user_selected.png"
            }
        ]
    },
    "condition": { // 模式配置，仅在开发期间生效
        "current": 0, // 当前激活的模式（在'list'数组中的索引）
        "list": [
            {
                "name": "searchCity", // 模式名称
                "path": "pages/index/index", // 启动页面（您要调试的页面） - 必填
                "query": "name=searchCity" // 启动参数，在页面的onLoad函数里面得到。
            }
        ]
    },
    "uniIdRouter": {}
}

condition

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。

注意：在 App 里真机运行可直接打开配置的页面，微信开发者工具里需要手动改变编译模式，如下图：

image.png

index.Vue

不记得属性可以把鼠标悬停在标签可以出现官网链接直接抵达

<template>
        <swiper class="banner" indicator-dots circular autoplay >
                <swiper-item v-for="item in Pictures" :key="item.id">
                        <image @tap="onPoviewImage(item.url)" :src="item.url" ></image>
                </swiper-item>
        </swiper>
</template>

<script>
        export default {
                data() {
                        return {
                                title: 'Hello',
                                //轮播图数据
                                Pictures:[
                                        {id:'1',url:"../../static/img/xixi1.jpg"},
                                        {id:'2',url:"../../static/img/xixi2.jpg"},
                                        {id:'3',url:"../../static/img/xixi3.jpg"}
                                ]
                        }
                },
                methods: {
                        onPoviewImage(url){
                                // console.log(url)
                                uni.previewImage({
                                        urls:this.Pictures.map(v=>v.url),
                                        current:url
                                })
                        }
                }
        }
</script>

<style lang="scss">
        .banner{
                width: 750rpx;
        }
</style>

命令行创建 uni-app 项目

# 通过 git 从 gitee 克隆下载
git clone -b vite-ts https://gitee.com/dcloud/uni-preset-vue.git

常见问题

运行 npx 命令下载失败，请尝试换成手机热点重试
换手机热点依旧失败，请尝试从国内备用地址下载
在 manifest.json 文件添加小程序 AppID 用于真机预览
运行 npx 命令需依赖 NodeJS 环境，Node.js

node.js安装一键式安装

测试安装是否成功，按下【win+R】键，输入cmd，打开cmd窗口

输入：node -v // 显示node.js版本

npm -v // 显示npm版本

image.png

显示版本说明安装成功
环境配置找到安装位置新建两个文件夹node_global和node_cache

image.png

创建完毕后，使用管理员身份打开cmd命令窗口
npm config set prefix "路径\node_global"
npm config set prefix D: node.js\node global
npm config set cache "路径\node cache"
npm config set cache D: node.js\node cache

image.png

配置环境变量
此电脑-单击右键-属性-高级系统设置-环境变量

image.png

image.png

image.png

点击新建
变量名:NODE_PATH
变量值为:node_global路径\node_modules
D:\node.js\node_global\node_modules
在node_global下加一个文件夹node_modules

编辑用户变量中的Path编辑,将node_global路径放在AppData\Roaming\npm上面

image.png

image.png

或者系统变量Path编辑添加;%NODE_PATH%

image.png

测试是否安装成功
npm install express -g//(管理员命令)出现以下说明成功

image.png

下载安装pnpm(pnpm比npm快)
npm install express -g pnpm
刷新环境变量
新开cmd，输入命令提示符

set PATH=C: (刷新环境变量)

必须关闭这个cmd，再新开个cmd，输入

echo %PATH%(重新读取path的配置文件)

此时再直接输入pnpm-v即可成功

image.png

运行 git 命令需依赖 Git 环境，Git 下载地址
下载依赖包下方打开命令行终端

image.png

image.png

编译和运行 uni-app 项目

安装依赖 pnpm install(管理员身份运行否则报错)

右键HBuilderX管理员身份运行,开启终端之后会多一个node_modules文件夹

编译成微信小程序 pnpm dev:mp-weixin会多一个dist文件夹

image.png

导入微信开发者工具

image.png

image.png

提示
编译成 H5 端可运行 pnpm dev:h5 通过浏览器预览项目。

用 VS Code 开发 uni-app 项目

为什么选择 VS Code?

HbuilderX对TS类型支持暂不完善

VSCode对TS 类型支持友好，熟悉的编辑器

用 VS Code 开发配置

项目采用 Vue3 + TS 开发 uni-app 项目，所以需要分别安装 Vue3 + TS 插件和 uni-app 插件。

安装 Vue3 + TS 插件

注意事项

没开发过 Vue3 + TS 项目的小伙伴注意，需要先安装 Vue3 和 TS 的插件，并完成以下配置 👇

安装 Vue Language Features (Volar) ：Vue3 语法提示插件
安装 TypeScript Vue Plugin (Volar) ：Vue3 的 TS 插件
工作区禁用 Vetur 插件(Vue2 插件和 Vue3 插件冲突)
工作区禁用 @builtin typescript 插件（禁用后自动开启 Vue3 的 TS 托管模式）

查看 Vue3 官方文档

需禁用的插件

image.png

安装 uni-app 插件

👉 安装 uni-app 开发插件
- uni-create-view ：快速创建 uni-app 页面,要进入改设置,否则只创建.vue
  
  image.png
  
  image.png
uni-helper ：uni-app 代码提示,Ctrl+I可以唤醒代码提示

image.png

<meta charset="utf-8">
uniapp 小程序扩展：鼠标悬停查文档,出现属性官方文档可以直接到不懂的,不用一个一个找

image.png

新建页面

不设置uni-create-view不会有my的同名文件夹

image.png

👉 TS 类型校验
- 管理员身份快捷图标右键,打开vscode用Ctrl+`打开命令行终端
- 安装类型声明文件 pnpm i -D miniprogram-api-typings @uni-helper/uni-app-types
- package.json中代码

"devDependencies": {
    "@dcloudio/types": "^3.3.2",
    "@dcloudio/uni-automator": "3.0.0-3080720230703001",
    "@dcloudio/uni-cli-shared": "3.0.0-3080720230703001",
    "@dcloudio/uni-stacktracey": "3.0.0-3080720230703001",
    "@dcloudio/vite-plugin-uni": "3.0.0-3080720230703001",
    "@uni-helper/uni-app-types": "^0.5.12",
    "@vue/tsconfig": "^0.1.3",
    "miniprogram-api-typings": "^3.12.1",
    "typescript": "^4.9.4",
    "vite": "4.0.4",
    "vue-tsc": "^1.0.24"
  }

image.png

管理员身份打开Windows PowerShell输入,最后选y,(如果进入终端后报错pnpm不能在系统运行)

image.png

配置 tsconfig.json

// 类型声明文件
     "types": [
      "@dcloudio/types", // uni-app API 类型
      "miniprogram-api-typings", // 原生微信小程序类型
      "@uni-helper/uni-app-types" // uni-app 组件类型
    ]
  },
  "vueCompilerOptions": {
    // 原配置 `experimentalRuntimeMode` 现调整为 `nativeTags`
    "nativeTags": ["block", "component", "template", "slot"]
    // "experimentalRuntimeMode": "runtime-uni-app"  
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

👉 JSON 注释问题
- 设置文件关联，把 manifest.json 和 pages.json 设置为 jsonc
- 其他json不能写注释
  
  image.png
  
  image.png

uniapp基础学习笔记