admin 管理员组

文章数量: 887021

HBuilderX,uni

参考:

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全局的⾃定义事件：.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监听页面滚动，参数为Objectnvue不支持
onNavigationBarButtonTap监听原生标题栏按钮点击事件，参数为ObjectApp、H5
onBackPress监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack；详见app、H5、支付宝小程序
onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件App、H51.6.0
onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H51.6.0
onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H51.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实例销毁之前调用。在这一步，实例仍然完全可用。详见
destroyedVue 实例销毁后调用。调用后，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

本文标签： HBuilderX uni

版权声明：本文标题：HBuilderX,uni 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1698414392h299112.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。