Uni-App 微信项目练习首页列表含界面传参 新手教程（一）

Uni-App 微信项目练习首页列表含界面传参 新手教程（一）

UNI-APP是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。语法和微信小程序几乎是一样的，如果你懂小程序那么对UNI来说你上手很快，放过来你理解了uni也可以算入门小程序了。本篇文章主要是从一个零基础的角度去介绍这个仿微信的一个练习项目，毕竟枫瑞对vue和js也是零基础。哈哈

0x0 了解下uni的目录结构

┌─components uni-app组件目录 │ └─comp-a.vue 可复用的a组件 ├─hybrid 存放本地网页的目录，详见 ├─platforms 存放各平台专用页面的目录，详见 ├─pages 业务页面文件存放的目录 │ ├─index │ │ └─index.vue index页面 │ └─list │ └─list.vue list页面 ├─static 存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此 ├─main.js Vue初始化入口文件 ├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期 ├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见 └─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见

0x1 创建一个新的项目

0x2 页面配置

在pages.json中 pages下构建我们的首页，发现 ，通讯录，我们，以及聊天窗口界面，界面构造结束后tabBar中建立底部导航，页面路由号后我们也得在apges目录下建立相对于的页面，不然报错哈！其中tabBar-list数据组中iconPath是默认的图标，selectedIconPath是点击之后的图标

{ "pages": [ //pages数组中第一项表示应用启动页，参考：[url=https://uniapp.dcloud.io/collocation/pages]https://uniapp.dcloud.io/collocation/pages[/url] { "path": "pages/index/index", "style": { "navigationBarTitleText": "微信" } }, { "path": "pages/maillist/maillist", "style": { "navigationBarTitleText": "通讯录" } },{ "path": "pages/find/find", "style": { "navigationBarTitleText": "发现" } },{ "path": "pages/my/my", "style": { "navigationBarTitleText": "我的" } },{ "path": "pages/chat/chat", "style": { "navigationBarTitleText": "聊天内容" } } ], "tabBar": { "color": "#7a7e83", "selectedColor": "#14cc2d", "backgroundColor": "#efefef", "borderStyle":"white", "list": [{ "pagePath": "pages/index/index", "text": "消息", "iconPath": "static/xiaoxi.png", "selectedIconPath": "static/xiaoxi_h.png" }, { "pagePath": "pages/maillist/maillist", "text": "通讯录", "iconPath": "static/tongxun.png", "selectedIconPath": "static/tongxun_h.png" },{ "pagePath": "pages/find/find", "text": "发现", "iconPath": "static/faxian.png", "selectedIconPath": "static/faxian_h.png" },{ "pagePath": "pages/my/my", "text": "我的", "iconPath": "static/my.png", "selectedIconPath": "static/my_h.png" }] }, "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#efefef", "backgroundColor": "#efefef" } }

0x3 修改模板

我们去官方dome下寻找合适模板（dome目录：pages/template/media-list/media-list），直接全部复制过去。然后预览在菜单选择运行，可以选择运行到小程序，模拟器，但是建议运行到谷歌浏览器。随后在自己找一些头像和底部导航图标，资源会打包在资源中

运行后如下图，把不要的删除了，比如图片中红色部分哈！删除后我们在复制几个模拟的数据，让列表多一点

删除不必要代码后，我们需要添加一个东西那就是微信消息右侧的时间，在title的右边添加一个time属性

添加号后在return中添加数据，微信头像可以在img中修改路径

{ title: "吟枫瑞", time:"早上 10:07", content: "UNI-APP模仿微信UI项目练习哈哈哈", img: "../../static/fengrui.jpg" }

那这样我们的一个首页就出来了 效果图

因为想把页面跳转带我们的头像，名字消息等参数讲的详细一点，但是怕这篇文章过长，于是分开写