uni-app实现仿微信前端（一）

1.介绍

最近了解到了uni-app这个框架（用一套代码同时构建多端app，如小程序、安卓APP、H5等），觉得挺有趣的。因为语法就是html\css\js的语法，同时框架很接近vue.js与小程序，碰巧这些都学过，所以决定用uni-app实现一个微信的前端页面作为练习项目。

2.建立项目

使用Hbuilder建立uni-app项目（博主使用版本：X 2.4.2）
模板选择默认模板
如下图：

3.新建四个主页面

点击新建页面，创建出微信的四个页面：消息、通讯录、发现、我

4.搭建导航栏

首先在pages.json中加入tabBar
其中：

pagePath：对应的页面路径
iconPath：默认图标
selectedIconPath：选中时的图标
text：文本

具体查阅uni-app文档
（图标自己寻找哈。。。。推荐使用阿里图标库直接下载，巨方便！！！）

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path" : "pages/book/book","style" : {"navigationBarTitleText": "通讯录"}},{"path": "pages/message/message","style": {"navigationBarTitleText": "墨信"}},{"path" : "pages/find/find","style" : {"navigationBarTitleText": "发现"}},{"path" : "pages/me/me","style" : {"navigationBarTitleText": "我"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/message/message","iconPath": "static/icon/message_no.png","selectedIconPath": "static/icon/message.png","text": "墨信"},{"pagePath": "pages/book/book","iconPath": "static/icon/book_no.png","selectedIconPath": "static/icon/book.png","text": "通讯录"},{"pagePath": "pages/find/find","iconPath": "static/icon/find_no.png","selectedIconPath": "static/icon/find.png","text": "发现"},{"pagePath": "pages/me/me","iconPath": "static/icon/me_no.png","selectedIconPath": "static/icon/me.png","text": "发现"}]}
}

至此、编译、运行到浏览器如下图：

未完待续

uni-app实现仿微信前端（一）相关推荐

uni-app实现仿微信前端（二）
uni-app实现仿微信前端(二) 5. 完善通讯录界面首先观察手机微信= =,不难看出共同点所有的栏目都是左边图片右边描述所以,建立相应的class <view class=" ...
ReactNative聊天APP实战|仿微信聊天/朋友圈/红包界面
项目简介最近一直在研究RN技术,想着找个项目练练手,之前就有使用vue.react技术开发过聊天项目,这次就使用reactNative技术开发个仿微信RN版.是基于 react-native+rea ...
uni app 调用网络打印机_前端工程师 | 原生小程序坑点：uni-app到底好用在哪里？...
要想知道uni-app开发好用在哪里,我们先看看uni-app的官网,下图系统的介绍.框架.组件.api的使用都非常的详细,感兴趣的朋友可以去尝试尝试. 我们进图正题,首先和原生小程序来比较,其次和 ...
Android仿高德地图app,Android仿微信调用第三方地图应用导航（高德、百度、腾讯）...
好久没有写Andorid代码啦!最近刚好要实现一个这个功能,顺便就在博客里分享一下. 实现目标先来一张微信功能截图看看要做什么其实就是有一个目的地,点击目的地的时候弹出可选择的应用进行导航. 大脑 ...
uniapp可以封装组件嘛_uniapp聊天App实例|vue+uniapp仿微信界面|红包|朋友圈
一.功能阐述今天给大家分享的是基于UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消 ...
vue整合uniapp_uni-app仿微信App界面|vue+uniapp聊天室|仿微信朋友圈
项目简介基于uni-app+vue+vuex+uniPop+swiper等技术开发的仿微信聊天室uniapp-chatroom项目,类似vue及小程序api语法使开发更加方便,实现了发送图文消息.表 ...
uniapp 即时通讯_uni-App 仿微信 App 即时通讯|vue+uniapp 聊天
项目介绍基于uni-app+vue+vuex+uniPop+swiper等技术开发仿微信App聊天室实战项目,实现了发送消息.表情(gif动图),图片预览.地图位置.红包.仿微信朋友圈等功能. 项目 ...
uni app和php开发微信登录代码,uniapp如何实现微信授权登录
uniapp实现微信授权登录的方法:首先获取对应的appid和appsecret:然后在uniapp项目的manifest.json中进行APP SDK配置和模块权限配置.最后实现编码. 本教程操作环 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...

uni-app实现仿微信前端（一）

uni-app实现仿微信前端（一）

1.介绍

2.建立项目

3.新建四个主页面

4.搭建导航栏

uni-app实现仿微信前端（一）相关推荐

最新文章

热门文章