企业官网建设流程全解析

哈尔滨小程序开发,长沙网站优化推广,网站开发技术方案与设施,昆山公司做网站首页pages.json - pages配置项中的第一个页面就是应用启动后的首页新建页面点击 文件-新建-3.uni-app页面 , 会弹出下面的页面创建对话框#xff0c; 里面有相当多的模板可供选择页面构成uni-app 页面基于 vue 规范。一个页面内#xff0c;有3个根节…首页pages.json - pages配置项中的第一个页面就是应用启动后的首页新建页面点击 文件-新建-3.uni-app页面 , 会弹出下面的页面创建对话框 里面有相当多的模板可供选择页面构成uni-app 页面基于 vue 规范。一个页面内有3个根节点标签模板组件区 templatevue 的 template 中写的全都是 vue 组件每个组件支持属性、事件、 vue 指令还可以绑定 vue 的 data 数据在vue2中template 的二级节点只能有一个节点一般是在一个根 view 下继续写页面组件template view classcontent button clickbuttonClick{{title}}/button /view /template但在vue3中template可以有多个二级节点省去一个层级如下template view text标题/text /view scroll-view /scroll-view /template脚本区 scriptscript中编写脚本可以通过lang属性指定脚本语言。在vue和nvue中默认是js可以指定ts。在uvue中仅支持uts不管script的lang属性写成什么都按uts编译。在vue的选项式option规范中script下包含 export default {}。除了选项式还有 组合式 写法。页面级的代码大多写在 export default {} 中。写在里面的代码会随着页面关闭而关闭写在 export default {} 外面的代码一般有几种情况1.引入第三方 js/ts 模块2.引入非 easycom 的组件一般组件推荐使用easycom无需导入注册3.在 ts/uts 中对 data 进行类型定义4.定义作用域更大的变量script langts const TAB_OFFSET 1; // 外层静态变量不会跟随页面关闭而回收 import charts from charts.ts; // 导入外部js/ts模块 import swiperPage from swiper-page.vue; //导入非easycom的组件 type GroupType { id : number, title : string } // 在ts中为下面data数据的 groupList 定义类型 export default { components: { swiperPage }, // 注册非easycom组件 data() { return { groupList: [ { id: 1, title: 第一组 }, { id: 2, title: 第二组 }, ] as GroupType[], // 为数据groupList定义ts类型 } }, onLoad() {}, methods: {} } /script开发者应谨慎编写 export default {} 外面的代码这里的代码有2个注意事项1.影响应用性能。这部分代码在应用启动时执行而不是页面加载。如果这里的代码写的太复杂会影响应用启动速度占用更多内存。2.不跟随组件、页面关闭而回收。在外层的静态变量不会跟随页面关闭而回收。如果必要你需要手动处理。比如 beforeDestroy 或 destroyed 生命周期进行处理。export default {} 里的内容是页面的主要逻辑代码。包括几部分1.datatemplate模板中需要使用的数据。具体 另见2.页面生命周期如页面加载、隐藏、关闭具体 见下3.methods方法如按钮点击、屏幕滚动template view button clickbuttonClick{{title}}/button /view /template script export default { data() { return { title: 点我, // 定义绑定在页面上的data数据 // 多个data在这里继续定义。逗号分隔 } }, onLoad() { // 页面启动的生命周期这里编写页面加载时的逻辑 }, // 多个页面生命周期监听在这里继续写。逗号分隔 methods: { buttonClick: function () { this.title 被点了 }, // 多个方法在这里继续写。逗号分隔 } } /script样式区 styletemplate view classcontent button clickbuttonClick{{title}}/button /view /template style .content { width: 750rpx; background-color: white; } /styleVue2和Vue32022年11月DCloud 官方发布了 HBuilderX 3.6.0 版本这是一个重要的里程碑。从这个版本开始创建工具升级推出了全新的项目脚手架 create-uni替代之前基于 vue-cli 的方式。create-uni 生成的默认模板就是 Vue 3 版本。IDE 默认设置变更在 HBuilderX 的图形化创建项目界面中“默认模板Vue3” 被放置在了模板列表的第一个位置成为最显眼、最易选的推荐选项。虽然仍保留“默认模板”Vue2供选择但官方引导已明确倾向 Vue 3页面生命周期Vue2的页面生命周期Vue3的页面生命周期页面传值//接收页面 onLoad(){ // 监听事件 uni.$on(login,(usnerinfo){ this.usnerinfo usnerinfo; }) }, onUnload() { // 移除监听事件 uni.$off(login); },// 发送页面 onLoad() { uni.$emit(login, { userinfo:A }); }页面路由​uni-app 有两种页面路由跳转方式使用navigator组件跳转、调用API跳转打开新页面recordedData(){ console.log(5896) uni.navigateTo({ url: ./recorded?nameData this.titleName }) },重定向页面使用uni.navigateTo打开页面的时候A打开BB打开CC又打开A会创建4个不同的页面实例,并不会复用之前的A为控制页面栈的深度避免无限增长此时应使用uni.redirectTo而不是 uni.navigateToBackPage() { if (getCurrentPages().length 2 undefined ! typeof __wxConfig) { let url / __wxConfig.pages[0] return uni.redirectTo({url}) } }切换TAB页uni.switchTab({ url: ../list/list }) console.log(登录成功)页面返回confirm() { if (this.selectListData null || this.selectListData.size 0) { uni.showToast({ title: 您还没选择司机呢, icon: none }) return; } // console.log(JSON.stringify(_this.selectListData)) var item this.selectListData[0]; var pages getCurrentPages(); var currPage pages[pages.length - 1]; //当前页面 var prevPage pages[pages.length - 2]; //上一个页面 prevPage.$vm.driverData item; uni.navigateBack({}); },