好友
阅读权限25
听众
最后登录1970-1-1
|
原文来自：https://www.frbkw.com/1370/
UNI-APP是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。语法和微信小程序几乎是一样的，如果你懂小程序那么对UNI来说你上手很快，放过来你理解了uni也可以算入门小程序了。本篇文章主要是从一个零基础的角度去介绍这个仿微信的一个练习项目，毕竟枫瑞对vue和js也是零基础。哈哈
0x0 了解下uni的目录结构
[Asm] 纯文本查看 复制代码 ┌─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是点击之后的图标
[Asm] 纯文本查看 复制代码 {
"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 随后在自己找一些头像和底部导航图标，资源会打包在资源中
0x4 我们去官方dome下寻找合适模板（dome目录：pages/template/media-list/media-list），直接全部复制过去。然后预览在菜单选择运行，可以选择运行到小程序，模拟器，但是建议运行到谷歌浏览器
运行后如下图，把不要的删除了，比如图片中红色部分哈！删除后我们在复制几个模拟的数据，让列表多一点
删除不必要代码后，我们需要添加一个东西那就是微信消息右侧的时间，在title的右边添加一个time属性
[Asm] 纯文本查看 复制代码 <view class="uni-media-list-text-top">{{value.title}}<span class="time">{{value.time}}</span></view>
添加号后在return中添加数据，微信头像可以在img中修改路径
[Asm] 纯文本查看 复制代码 {
title: "吟枫瑞",
time:"早上 10:07",
content: "UNI-APP模仿微信UI项目练习哈哈哈",
img: "../../static/fengrui.jpg"
}
那这样我们的一个首页就出来了 效果图
代码演示，因为想把页面跳转带我们的头像，名字消息等参数讲的详细一点，但是怕这篇文章过长，于是分开写，首页代码如下
打包下载地址：链接: https://pan.baidu.com/s/1EOF3dda3UPfG4tTJkNqwwg 提取码: vx26 复制这段内容后打开百度网盘手机App，操作更方便哦
[Asm] 纯文本查看 复制代码 <template>
<view class="page">
<view class="uni-list">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in list" :key="key">
<view class="uni-media-list" @click="goDetail" :data-id="key">
<view class="uni-media-list-logo">
<image v-if="showImg" :src="value.img"></image>
</view>
<view class="uni-media-list-body">
<view class="uni-media-list-text-top">{{value.title}}<span class="time">{{value.time}}</span></view>
<view class="uni-media-list-text-bottom uni-ellipsis">{{value.content}}</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'media-list',
showImg: false,
list: [{
title: "吟枫瑞",
time:"早上 10:07",
content: "UNI-APP模仿微信UI项目练习哈哈哈",
img: "../../static/fengrui.jpg"
},
{
title: "麻花疼",
time:"早上 11:27",
content: "不懂的事就去问，问完了就懂了。英语不好尽管去说",
img: "../../static/tx1.jpg"
},
{
title: "码云",
time:"下午 14:31",
content: "每天反复做的事情造就了我们，然后你会发现，优秀不是一种行为",
img: "../../static/tx2.jpg"
},{
title: "鹏海",
time:"下午 14:31",
content: "能力不在脸上，本事不在嘴上。要踏踏实实做实事",
img: "../../static/tx3.jpg"
},{
title: "李轩昂",
time:"下午 14:31",
content: "做人是一生成败的重要话题，它又与心态有关，凡是在这两点上过不了关的人",
img: "../../static/tx4.jpg"
},{
title: "汪涵雁",
time:"下午 14:31",
content: "人在纷扰的世界里，也许，或绚丽，或平淡；或起伏，或恬静；",
img: "../../static/tx5.jpg"
},{
title: "怀寒",
time:"下午 14:31",
content: "怎样度过人生的低潮期？安静的等待；好好睡觉；锻炼身体",
img: "../../static/tx6.jpg"
},{
title: "张海荣",
time:"下午 14:31",
content: "人若被富人影响，就会有赚钱的欲望。被穷人影响",
img: "../../static/tx7.jpg",
}
]
}
},
onLoad() {
setTimeout(() => {
this.showImg = true;
}, 400)
},
methods: {
},
}
</script>
<style>
.title {
padding: 20upx;
}
.time{
float: right;
color: #939393;
font-size: 12px;
}
.uni-media-list-logo{
width: 55px;
height: 55px;
}
.uni-media-list-logo uni-image{
border-radius: 5px;
}
.uni-media-list-text-top{
font-size: 17px;
}
.uni-media-list-text-bottom{
line-height: 14px;
font-size: 14px;
width: 85%;
}
.uni-media-list-body{
height: 45px;
}
</style>
|
免费评分
-
| 参与人数 1 | 吾爱币 +2 |
热心值 +1 |
收起
理由
|
 苏紫方璇
| + 2 |
+ 1 |
欢迎分析讨论交流，吾爱破解论坛有你更精彩！ |
查看全部评分
|
[复制链接]
发表于 2019-3-22 09:40
|
发表于 2019-3-22 11:11
