HBuilderX,uni-app

参考:

uni-app官网

一，项目创建，运行

23年-uniapp多端零基础入门到项目实战

二，项目结构

node_modules  ——放置项目的依赖文件

src           ——放置开发的代码文件

pages         ——放置页面文件

static        ——放置静态文件

App.vue       ——页面入口文件

env.d.ts      ——.vue文件的类型说明文件

main.ts       ——程序的入口文件，加载各种公共组件

manifest.json ——5+App拓展文件，打包app时要使用

pages.json    ——全局配置文件，配置页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等等

uni.scss      ——uniapp的默认css样式

.gitignore    ——git忽略文件

index.html    ——项目总的入口文件

package.json  ——项目依赖的描述文件

pnpm-lock.yaml  ——锁定项目的依赖包版本

tsconfig.json   ——TS的语法识别和执行配置文件

vite.config.ts  ——编译工具vite的配置文件

        1，配置导航页面 pages.json

"tabBar": {
    "list": [
         {
            "pagePath": "pages/index/index",
            "text": "⾸⻚"
         },
         {
            "pagePath": "pages/mine/mine",
            "text": "我的"
         }
      ]
}

        

        2 页面跳转

                a,组件式跳转

// 路径传递参数 ?title=hello
<navigator url="/pages/about/index?title=hello" open-type="navigate" hover-class="navigator
hover">
去个⼈中⼼
</navigator>

// 接受参数
onLoad((option)=>{
console.log(option?.title)
})


//在 JavaScript 中，对象后面加上问号 ? 是可选链（Optional Chaining）操作符。
//这个操作符允许你在查询具有多层级的对象时，如果某个中间层级不存在，
//那么整个表达式会立即返回 undefined，而不是抛出一个错误。

                  b，函数式跳转    标签绑定函数   

 uni.navigateTo({
 url:'/pages/404/index?title=hello'
 })

                    

                 c，跳转⽅法(open-type)  说明

• uni.navigateTo()  保留当前⻚⾯，跳转到应⽤内的某个⻚⾯，使⽤ uni.navigateBack 可以返回到原⻚⾯
• uni.redirectTo() 关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯
• uni.reLaunch() 关闭所有⻚⾯，打开到应⽤内的某个⻚⾯
• uni.switchTab() 跳转到 tabBar ⻚⾯，并关闭其他所有⾮ tabBar ⻚⾯
• uni.navigateBack() 关闭当前⻚⾯，返回上⼀⻚⾯或多级⻚⾯。可通过 getCurrentPages() 获取 当前的⻚⾯栈，决定需要返回⼏层

注意

• 实现传参
• uniapp全局的⾃定义事件：https://uniapp.dcloud.net.cn/tutorial/page.html#emit
• 全局状态管理库：pinia、vuex
• navigateTo , redirectTo 只能打开⾮ tabBar ⻚⾯。
• switchTab 只能打开 tabBar ⻚⾯,路径后不能带参数。
• reLaunch 可以打开任意⻚⾯      

         d, 子页面向父页面传数据 详解uni.navigateTo()参数

events  ⻚⾯间通信接⼝，⽤于监听被打开⻚⾯发送到当前⻚⾯的数据。 2.8.9+ 开始⽀

持。

三，生命周期函数

        1 应用生命周期 app.vue

uni-app 支持如下应用生命周期函数：App.vue/App.uvue | uni-app官网

函数名	说明	平台兼容
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发	app-uvue 不支持
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯	app-uvue 不支持
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+ app-uvue 暂不支持）	app-uvue 不支持
onPageNotFound	页面不存在监听函数	app-uvue 不支持
onThemeChange	监听系统主题变化	app-uvue 不支持
onLastPageBackPress	最后一个页面按下Android back键，常用于自定义退出	app-uvue-android 3.9+
onExit	监听应用退出	app-uvue-android 3.9+

        2 页面生命周期

uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数，当以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考：Vue2 组合式 API 使用文档 和 Vue3 组合式 API 使用文档。

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例。
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序、快手小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage	用户点击右上角分享	微信小程序、QQ小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序、京东小程序
onPageScroll	监听页面滚动，参数为Object	nvue不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack；详见	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）	App、H5	1.6.0
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
onAddToFavorites	监听用户点击右上角收藏	微信小程序、QQ小程序	2.8.1+

        3 组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：页面简介 | uni-app官网

函数名	说明	平台差异说明	最低版本
beforeCreate	在实例初始化之前被调用。详见
created	在实例创建完成后被立即调用。详见
beforeMount	在挂载开始之前被调用。详见
mounted	挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

         4 vue.js 原生的生命周期函数

1. beforeCreate()：在实例被创建之初，响应式数据和事件尚未初始化，此时可以执行一些早期初始化操作。
2. created()：在实例创建完成后，响应式数据和事件已经绑定，但 DOM 尚未生成，此时可以进行一些数据的预处理操作。
3. beforeMount()：在模板编译和挂载到 DOM 之前，此时可以执行一些 DOM 操作，比如手动添加事件监听器。
4. mounted()：在模板编译和挂载到 DOM 之后，此时所有的 DOM 元素和组件都已经渲染完毕，可以进行一些需要依赖 DOM 的操作。
5. beforeUpdate()：在组件更新之前，此时可以执行一些数据更新的预处理操作。
6. updated()：在组件更新完成后，此时可以进行一些依赖更新后的 DOM 的操作。
7. beforeDestroy()：在组件销毁之前，此时可以执行一些清理操作，比如移除事件监听器。
8. destroyed()：在组件销毁完成后，此时所有的事件监听器和子组件都已经被移除，可以进行一些最后的清理操作。

四，组件

组件使用的入门教程 | uni-app官网

五，api 

uni-app官网

六，钩子函数

七，微信小程序上线

        1，登录获取appid: 微信公众平台

        2, HBuilderX

        3，微信开发者工具 上传到开发版本

        4，微信公众平台

                a，开发版-选为体验版本（开发者可以扫描手机测试-微信小程序真机测试）

                b，提交审核-审核版本

                c，审核完成-线上版本

八，app打包发布

·        发行->app原生云打包（或者 app本地打包打包）

找到文件所在目录传到手机安装

九，安卓真机调试  app真机测试

        1，HBuilderX下载真机插件

        2，⼿机通过USB链接电脑调试

                ⼿机开启开发者模式，并且打开USB调试

        ⼀般是在设置 ==> 关于⼿机 ==> 版本号连续点击5-7次开启开发者模式 ==> 找到开发者选项

        ==> 打开USB调试

        3，HbuilderX选中要运⾏的项 会在手机上安装app

十，安卓模拟器调试 （运行到夜神模拟器）

【使用hbuilder连接夜神模拟器，进行配置】_hbuilderx连接夜神模拟器-CSDN博客