Menu

3.2. 基础页面结构

基本结构

这一节我们来创建 larabbs-weapp 的基本结构。

Tabbar

参考一下一般 APP 或者小程序的设计,例如美团:

file

底部需要有 Tabbar 作为不同功能的主入口,我们首先设计两个 Tabbar 入口,首页我的

增加我的页面

上一节中已经介绍了 WePY 的目录结构,先不用深入理解每个目录,实践当中你会有更深入的理解,首先需要记住的是:

  • 源码都需要放在 src 目录中;
  • src/app.wpy 是项目的入口文件,相关的配置都会放在这个文件中;
  • src/pages 目录中存放小程序的每个页面。

file

项目中已经存在了首页的文件 src/pages/index.wpy,现在我们来创建 我的 页面,并配置 Tabbar:

$ cd ~/Code/larabbs-...

本文章首发在 Laravel China 社区

为了保证课程的高品质,我们需要对课程进行收费。付费后 才能观看剩余内容。 购买

上一篇 下一篇
讨论数量: 15

jollyson
建立了文件 user.wpy 报错空文件?
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
hooook
wepy 编译之后 改变文件 貌似没有监听到呢?
0 个点赞 | 4 个回复 | 问答 | 课程版本 5.5
Fykex
atom 下 wepy 代码高亮
5 个点赞 | 1 个回复 | 分享 | 课程版本 5.5
soypablo
putixin
Sublime3 下没有插件?
0 个点赞 | 3 个回复 | 问答 | 课程版本 5.5
Carlgao
phpstorm 下 wpy 高亮?
1 个点赞 | 0 个回复 | 问答 | 课程版本 5.5
郝合心
选中按钮的色号
0 个点赞 | 0 个回复 | 分享 | 课程版本 5.5
echofree313
每次修改代码后都要手动 wepy build --watch 才生效
0 个点赞 | 2 个回复 | 问答 | 课程版本 5.5
wulijieone
你们运行 NPM run eslint 都没有报错吗?
3 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
Innocence6
NPM run eslint 报错?
0 个点赞 | 5 个回复 | 问答 | 课程版本 5.5
vanman
微信开发工具报错 appLaunch with an already exist webviewId 51
0 个点赞 | 1 个回复 | 问答 | 课程版本 5.5
Golang
NPM run eslint 报错
0 个点赞 | 4 个回复 | 问答 | 课程版本 5.5
taodaykiu
本地安装 wepy 失败
0 个点赞 | 6 个回复 | 问答 | 课程版本 5.5
Promisehp
选中后没有选中色?
0 个点赞 | 4 个回复 | 问答 | 课程版本 5.5
刻意练习,每日精进。
14
点赞
4869
浏览
15
讨论
贡献者