首先用HBuilderX新建建一个uni-app项目

新建一个目录ucenter,该目录下新建两个vue文件ucenter.vue和setting.vue

ucenter.vue

<template>
<view class="container">
<text>{{ name }}的个人中心</text>
<navigator url="../ucenter/setting" hover-class="navigator-hover">
<button type="default">设置</button>
</navigator>
</view>
</template> <script>
export default {
data() {
return {
name: '陶然然'
};
},
onLoad() {},
methods: {}
};
</script> <style>
.container {
width: 95%;
margin: 0 auto;
text-align: center;
}
</style>

setting.vue

<template>
<view class="container">
举世无双
</view>
</template> <script>
</script> <style>
</style>

pages.json中的代码如下

{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
,{
"path" : "pages/ucenter/ucenter",
"style" : {
"navigationBarTitleText": "中心"
}
},
{
"path" : "pages/ucenter/setting",
"style" : {
"navigationBarTitleText": "个人设置"
}
}
],
"tabBar": {
"color": "#000000",
"selectedColor": "#2F85FC",
"backgroundColor": "#FFFFFF",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/book.png",
"selectedIconPath": "static/book_no.png",
"text": "主页"
},
{
"pagePath": "pages/ucenter/ucenter",
"iconPath": "static/write.png",
"selectedIconPath": "static/write_a.png",
"text": "我的"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}

目录结构如下,然后运行到小程序模拟器中的微信开发者工具(前提是你电脑得装有,不然检测不到,其它也一样,可以到运行配置里面点击相应网址去官网下载)



运行结果如下

打包成apk安装到手机

首先要登录,没有帐号可以注册,接着点击运行—原生App-云打包,配置完后点击打包,首次打包,提示说appid不能为空,跳转出基础配置页面,点击云端获取,接下来再次打包就可以顺利完成了





安装到手机的效果如下

github代码

uni-app官网

阿里巴巴矢量图标库

个人网站

uni-app初体验及打包成apk的更多相关文章

  1. Expo大作战(十八)--expo如何发布成独立应用程序,打包成apk或者ipa,发布到对应应用商店

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  2. react-native 打包成apk 文件

    用android studio 打包成apk 文件 js build 执行: react-native bundle --platform android --dev false --entry-fi ...

  3. vue项目利用apicloud打包成apk过程

    最近公司要求我们用apicloud做一个app,正好利用这个机会学习下app的制作过程~ 页面的开发过程跟我们平时开发一样,利用vue把页面全部完成,最后进行npm run build将项目打包. 接 ...

  4. 使用cordova把h5应用打包成apk

    由于h5应用开发不是本例重点,因此直接提供一个最简单的h5应用代码,此应用使用vue-cli框架开发 此h5应用叫vue1,用webstrom打开vue1,进行npm install安装引用 vue1 ...

  5. VUE+Ionic,项目搭建&打包成APK

    安装Vue&创建Vue工程 1.安装Vue CLI: npm install -g vue-cli 2.创建新的Vue项目,创建最后一步会提醒是否使用npm install 自动安装,如果选择 ...

  6. 定位真机运行能用但是打包成apk就不能用的解决方法

    打包apk的SHA1,与key的SHA1(这是多人开发的通病不同电脑共同开发一个app的常见错误之一)不一致.解决方法: 今天虽然离职了,但是今天遇到的是,当我在用高德地图开发的时候,在Android ...

  7. 初级——程序如何打包成apk文件

    将Eclipse Android项目打包成APK文件是本文要介绍的内容,主要是来了解并学习Eclipse Android打包的内容,具体关于Eclipse Android内容的详解来看本文.Eclip ...

  8. Android项目打包成APK文件

    第一步:右键单击该项目选择Export项目 显演示样例如以下界面:选择Exprot Android Application 第二步:输入项目名称,默认的情况下是原始的项目名称 下一步: 点击 Crea ...

  9. 将文件打包成apk

    Android Studio的打包成apk文件 https://blog.csdn.net/woaichimahua/article/details/54427528

随机推荐

  1. UWP 取消GridView、ListView鼠标选中、悬停效果

    因为经常碰到ListView或者ListBox之类的选中.鼠标悬停样式和自己设置的主题颜色不搭,这时就需要改变这些样式了. 而这里我通过ListView来说明,大致思路其实就是重新定义Item的Tem ...

  2. Lerning Entity Framework 6 ------ Inserting, Querying, Updating, and Deleting Data

    Creating Entities First of all, Let's create some entities to have a test. Create a project Add foll ...

  3. 201621123018《Java程序设计》第6周学习报告

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 2. 书面作业 1. clone方法 1.1 在 ...

  4. 12_python_生成器

    一.生成器 python中有三种方式获取生成器 (1)通过生成器函数 (2)通过各种推导式来实现生成器 (3)通过数据的转换也可以获取生成器   1.只要函数中存在了yield,那么这个函数就是一个生 ...

  5. 如何做好错误处理?(PHP篇)

    起因 之前我在封装 PHP 一个类库的时候,如果有遇到错误(例如构造函数传参不合法的话),则直接 die() ,后来发现这种方法很不好,会直接退出程序. 所以我想到给 PHP 上异常捕获的机制了. 错 ...

  6. D01-R语言基础学习

    R语言基础学习——D01 20190410内容纲要: 1.R的下载与安装 2.R包的安装与使用方法 (1)查看已安装的包 (2)查看是否安装过包 (3)安装包 (4)更新包 3.结果的重用 4.R处理 ...

  7. oracle undo redo 解析

    Undo是干嘛用的?          简单理解,就相当于Windows下的回收站.        你对数据执行修改时,数据库会生成undo信息,这样万一你执行的事务或语句由于某种原因失败了,或者如果 ...

  8. 解决 在 WINDOWS 下 同时安装 python2 python3 后 pip 错误

    再之前同时安装 python 后 只需把环境变量PATH 里面改为 PATH=C:\Python36-32\Scripts\;C:\Python36-32\;C:\Python27\;C:\Pytho ...

  9. 【Canal源码分析】client工作过程

    client的工作过程,需要我们自己去编写对应的逻辑,我们目前只能从example写的例子来看.目前examle中提供了两个例子,一个是单机的,一个是集群的cluster,我们后续如果需要进行开发的话 ...

  10. 用SpringSecurity从零搭建pc项目-02

    参照这一篇文章吧,比如你不需要做的那么通用,取其中一部分代码即可. https://www.cnblogs.com/lihaoyang/p/8491792.html