2 - 项目框架、导航

发布时间:2022-07-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了2 - 项目框架、导航脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

创建项目

HBuilder 中打开新建项目 ==》选择项目类型(创建项目名称,确定项目路径) ==》选择项目模板(默认模板) ==》创建即可

 

项目结构

打开main.js  右上角选择预览,启动网页版启动项

pages   ==》index  ==》index.vue(文件目录)

  原生小程序一个页面需要 wxss/wXMl/js/JSON 四个文件,而Uni只需要一个vue文件来写 htML/js/css

static (用于存放静态资,如图片、视频、音频等)

App.vue(和vue框架一样,项目的根组件)

main.js(和vue框架一样,项目的主入口文件)

manifest.json(项目的主配置文件)

  此文件中可以对项目的 名称/版本/图标/启动界面.....做对应配置

pages.json(和小程序框架一样,用于配置项目中所有相关配置的文件)

  例如:全局样式/pages页面path....

uni.scss(Uni的常用样式的相关变量文件)

  在此更改后可以统一配置项目的样式变量

 

例:修改头部文字内容

pages.json文件中找到 navigationBarTITleText属性修改内容

注意:文件内有单独配置(优先级最高)

2 - 项目框架、导航

 

 

pages目录中书写页面代码(文件快捷生成vbase    vuebase简写):

1. 像div、h1 这些标签都是web的标签,无法自动转化成小程序 或 手机端APP,必须使用官方提供的兼容性标签。例如 view、text......开发出来的软件才能适配到app小程序

2. 对于不明白的标签,在HBuilder中选中标签按F1,自动跳转官网的解释说明

3. 创建新页面 ==》在Pages目录右击新建页面 -- 创建文件名称(勾选默认模板)-- 下方的在pages.json中注册默认勾选即可 -- 创建(得到一个文件目录包)

4. 书写代码格式不整齐时,页面右击选择重排代码格式(ctrl+K),自动将代码格式化

5. alt + / 可以弹出代码提示

6. pages.json文件中的先后顺序决定了页面的先后顺序。文件的第一个path,是项目的首页

7. 页面跳转 ==》<navigator url="../detail/detail">跳转详情页</navigator>

                   <button tyPE="default" size="mini" @click="goDetail()">按钮跳转详情页</button>

2 - 项目框架、导航

 

 跳转时携带传参

2 - 项目框架、导航

 

 路由接参(这接收参数的页面中,onLoad事件接收打印参数值并赋值渲染)

2 - 项目框架、导航

 

脚本宝典总结

以上是脚本宝典为你收集整理的2 - 项目框架、导航全部内容,希望文章能够帮你解决2 - 项目框架、导航所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。