若依(ruoyi)RuoYiApp版—页面

ruoyiApp中的页面是一个符合vue规范的文件如果你熟悉vue这里将非常快速上手。1.如何新增页面uni-app中的页面默认保存在工程根目录下的pages目录下。每次新建页面均需在pages.json中配置pages列表未在pages.json - pages 中注册的页面uni-app会在编译阶段进行忽略。通过HBuilderX开发 uni-app 项目时在 uni-app 项目上右键“新建页面”HBuilderX会自动在pages.json中完成页面注册开发更方便。同时HBuilderX 还内置了常用的页面模板如图文列表、商品列表等选择这些模板可以大幅提升你的开发效率。新建uni-app页面如下如果我们勾选了上图中的“在pages.json中注册”可以在pages.json中查看刚才的信息。那么我们可以通过浏览器暂时访问这个界面http://localhost:9090/#/pages/chinese/chinese2.页面内容构成uni-app 页面基于 vue 规范。一个页面内有3个根节点标签模板组件区脚本区templateviewclasscontentbuttonclickbuttonClick{{title}}/button/view/templatescriptexportdefault{data(){return{title:Hello world,// 定义绑定在页面上的data数据}},onLoad(){// 页面启动的生命周期这里编写页面加载时的逻辑},methods:{buttonClick:function(){console.log(按钮被点了)},}}/scriptstyle.content{width:750rpx;background-color:white;}/styletemplate模板区template中文名为模板它类似html的标签。但有2个区别html中 script 和 style 是 html 的二级节点。但在 vue 文件中template、script、style这3个是平级关系。html 中写的是 web 标签但 vue 的 template 中写的全都是 vue 组件每个组件支持属性、事件、 vue指令还可以绑定 vue 的 data 数据。在vue2中template 的二级节点只能有一个节点一般是在一个根 view 下继续写页面组件如上示例代码。但在vue3中template可以有多个二级节点省去一个层级如下templateviewtext标题/text/viewscroll-view/scroll-view/template可以在 manifest 中切换使用 Vue2 还是 Vue3。注意uni-app x 中只支持 Vue3。script 脚本区script中编写脚本可以通过lang属性指定脚本语言。在vue和nvue中默认是js可以指定ts。在uvue中仅支持uts不管script的lang属性写成什么都按uts编译。script langts /script在vue的选项式option规范中script下包含 export default {}。除了选项式还有 组合式 写法。页面级的代码大多写在 export default {} 中。写在里面的代码会随着页面关闭而关闭。export default 外的代码写在 export default {} 外面的代码一般有几种情况引入第三方 js/ts 模块引入非 easycom 的组件一般组件推荐使用easycom无需导入注册在 ts/uts 中对 data 进行类型定义定义作用域更大的变量scriptlangtsconstTAB_OFFSET1;// 外层静态变量不会跟随页面关闭而回收importchartsfromcharts.ts;// 导入外部js/ts模块importswiperPagefromswiper-page.vue;//导入非easycom的组件type GroupType{id:number,title:string}// 在ts中为下面data数据的 groupList 定义类型exportdefault{components:{swiperPage},// 注册非easycom组件data(){return{groupList:[{id:1,title:第一组},{id:2,title:第二组},]asGroupType[],// 为数据groupList定义ts类型}},onLoad(){},methods:{}}/scriptstyle样式区style的写法与web的css基本相同。如果页面是nvue或uvue使用原生渲染而不是webview渲染那么它们支持的css是有限的。3.访问页面在上面的描述中我们在浏览器中访问了我们刚才创建的页面实际开发中我们不会通过这种方式访问一般通过页面跳转的方式。这里借助上一篇文章中的student中的index.vue文件写一段跳转的操作。注意不一定非得在这个文件中编写只要跳转方法和跳转路径对就行参考代码如下templateviewclasscontentviewclasstext-areatext这是Student中的index/textbuttonclickgotoChinese跳转到chinese页面/button/view/view/templatescriptexportdefault{onInit(){console.log(student/index页面onInit)},methods:{gotoChinese(){this.$tab.navigateTo(/pages/chinese/chinese)},}}/scriptstyle.content{display:flex;flex-direction:column;align-items:center;justify-content:center;}.text-area{display:flex;justify-content:center;}/style效果如下