美文网首页
真机操作

真机操作

作者: 六年的承诺 | 来源:发表于2019-03-23 00:52 被阅读0次

作用提供HTML5,微信小程序功能,提供打包
下载雷电模拟器
iconfont.cn的图标官网

1.新建一个项目

first-uni-app.png
2.png

2.pages.json

{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "主页"
}
}, {
"path": "pages/ucenter/ucenter",
"style": {
"navigationBarTitleText": "我的"
}
},
{
"path": "pages/ucenter/discover",
"style": {
"navigationBarTitleText": "发现"
}
}
],
"tabBar": {
"color": "#000000",
"selectedColor": "#2F85FC",
"backgroundColor": "#FFFFFF",
"borderStyle": "black",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/home.png",
"selectedIconPath": "static/home-active.png",
"text": "主页"
},
{
"pagePath": "pages/ucenter/ucenter",
"iconPath": "static/center.png",
"selectedIconPath": "static/center-active.png",
"text": "我的"
},
{
"pagePath": "pages/ucenter/discover",
"iconPath": "static/discover.png",
"selectedIconPath": "static/discover.png",
"text": "发现"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}

ucenter

<template>
<view class="content">
<view>
<text class="title">{{name}}</text>
<navigator url="setting" hover-class="navigator-hover">
<button type="primary">个人设置</button>
</navigator>
</view>
</view>
</template>
<script>
export default {
data() {
return {
name: '我的'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.content {
text-align: center;
height: 400upx;
}
.title {
font-size: 36upx;
color: #8f8f94;
}
</style>

index

<template>
<view class="content">
<view>
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.content {
text-align: center;
height: 400upx;
}
.title {
font-size: 36upx;
color: #8f8f94;
}
</style>

手机运行结果:

Screenshot_2019-03-23-00-48-27-38.png Screenshot_2019-03-23-00-48-30-73.png Screenshot_2019-03-23-00-48-37-75.png

最后小组做了一个微信的界面

相关文章

  • 真机操作

    作用提供HTML5,微信小程序功能,提供打包下载雷电模拟器iconfont.cn的图标官网 1.新建一个项目 2....

  • 16 真机操作

    作用提供HTML5,微信小程序功能,提供打包下载雷电模拟器iconfont.cn的图标官网 1.新建一个项目 2....

  • 获取app包名/包入口(appPackage/appActivi

    只需要四步操作。 在模拟器获取真机中打开app,真机需要连接主机才行,建议用虚拟机。 打开cmd命令, Alt+R...

  • Hadoop集群搭建笔记

    首先配置single node,配置如下: 真机操作系统:OS X EI Capitan 虚拟机:VMware F...

  • iOS 总结

    推送流程 一些概念 1.真机证书- > 让电脑有了使用手机进行某项操作的权力(真机,推送,上线) APP ID:程...

  • 虚拟机中安装Linux系统,开启简书第一篇文章

    简单聊聊虚拟机中安装Linux系统 1、VMware的了解,根据真机操作系统进行虚拟机软件版本选择 2、翻看老徐之...

  • 真机调试

    真机调试 1. 真机调试概念 2. 真机调试的必要 APP发布之前一定要做真机调试!!! 3. 怎样做真机调试? ...

  • 运维概述与Linux系统安装

    一、VMware虚拟机 1、什么是虚拟机 其实虚拟机就是在Windows的真机上创建一个独立的其他操作系统 的运行...

  • 基于Orange的安卓UI自动化学习笔记(六)

    上一篇主要介绍了jenkins:真机换成模拟器,我们将真机换成模拟器,使得操作更简单,进一步完善安卓UI自动化持续...

  • FMDB映射模型和真机可视化操作数据库

    FMDB映射模型和真机可视化操作数据库 1.如何对FMDB映射模型的操作:直接操作模型即可操作数据库 使用FMDa...

网友评论

      本文标题:真机操作

      本文链接:https://www.haomeiwen.com/subject/ossamqtx.html