创建项目

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属性修改内容

注意：文件内有单独配置（优先级最高）

 

 

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>

 

 跳转时携带传参

 

 路由接参（这接收参数的页面中，onLoad事件接收打印参数值并赋值渲染）