uniapp(Hbuilderx)

目录

• 1. 微信开发者工具下载
• 2. 新建项目
  • 2.1. 运行
• 3. 项目结构
  • 3.1. 路由
• 4. 生命周期
  • 4.1. 应用生命周期
    • 4.1.1. onLaunch
    • 4.1.2. onShow
    • 4.1.3. onHide
  • 4.2. 页面生命周期
    • 4.2.1. 执行顺序
    • 4.2.2. onLoad
    • 4.2.3. onReady
    • 4.2.4. onShow
• 5. 文档查找
  • 5.1. 底部栏 tabBar
  • 5.2. pages.json 页面路由
  • 5.3. manifest.json 应用配置
  • 5.4. vite.config.js 插件配置
• 6. 页面跳转
• 7. 常见问题
  • 7.1. 如何不用手动import ref

1. 微信开发者工具下载

2. 新建项目

• 注意点
  如果要打包安卓，需要勾上：
  

2.1. 运行

• 微信小程序
  1： 找到.exe路径，粘贴进去
  

2：打开微信小程序“服务端口”

3. 项目结构

3.1. 路由

在根目录下的 pages.json 下配置

4. 生命周期

4.1. 应用生命周期

• 作用域
  整个页面

4.1.1. onLaunch

• 应用加载启动时

4.1.2. onShow

4.1.3. onHide

• 应用隐藏

4.2. 页面生命周期

• 作用域
  当前页面
• 在 “教程”-》“页面”

4.2.1. 执行顺序

• 不含组件的页面
  onLoad > onShow > onReady

• 含有组件的页面
  onLoad > onShow > onBeforeMount > onReady > onMounted

4.2.2. onLoad

• 作用
  分分表格将id传给详情页面
  

4.2.3. onReady

• 作用
  对dom节点操作用此方法（vue中的dom节点已挂载完成，用于对dom节点进行操作）。
  类似 onMounted

4.2.4. onShow

• 作用
  页面出现在屏幕，就会触发，从a页面返回b时，从微信跳转到支付宝。

5. 文档查找

5.1. 底部栏 tabBar

• 文档位置
  在全局文件-->“page.json”
  

5.2. pages.json 页面路由

• 文档位置
  在教程-->页面
  

5.3. manifest.json 应用配置

• 作用
  配置微信小程序appId等信息的

5.4. vite.config.js 插件配置

• 文档位置
  uniapp --> 全局文件 --> vite.config.js
• 注意点
  只支持vue3项目
• 作用
  用于增加插件，如自动导包，省略 import {ref} from "vue"; 这一行。

6. 页面跳转

• 文档位置
  API--> 页面和路由

• uni.navigateTo
  跳到普通页面（非tabBar页面）
  首页、普通页面都可以

• uni.reLaunch
  跳到tabBar页面，和普通页面

7. 常见问题

7.1. 如何不用手动import ref

• 借助vite.config.js 自动导入插件 'unplugin-auto-import/vite'
• 不显示 import {ref} from "vue"; 也能正常使用ref(true)

1：项目根目录执行命令

// 执行成功根目录下会有 node_modules目录
npm install unplugin-auto-import

2: 项目根目录创建vite.config.js

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'
 
export default defineConfig({
    plugins: [
        uni(),        
        // 自动导入配置 vue和uni-app
        AutoImport({
            imports:[
                // 预设
                'vue',
                'uni-app'                
            ]
        })
    ]    
})

3：注释掉import {ref} from "vue"; ，重新运行项目，F12控制台注意查看是否报错。