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 - 项目框架、导航

 

上一篇:uniApp 详解结构 和功能


下一篇:uni-app(七)