uni-app初体验及打包成apk
首先用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不能为空,跳转出基础配置页面,点击云端获取,接下来再次打包就可以顺利完成了
安装到手机的效果如下
uni-app初体验及打包成apk的更多相关文章
- Expo大作战(十八)--expo如何发布成独立应用程序,打包成apk或者ipa,发布到对应应用商店
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- react-native 打包成apk 文件
用android studio 打包成apk 文件 js build 执行: react-native bundle --platform android --dev false --entry-fi ...
- vue项目利用apicloud打包成apk过程
最近公司要求我们用apicloud做一个app,正好利用这个机会学习下app的制作过程~ 页面的开发过程跟我们平时开发一样,利用vue把页面全部完成,最后进行npm run build将项目打包. 接 ...
- 使用cordova把h5应用打包成apk
由于h5应用开发不是本例重点,因此直接提供一个最简单的h5应用代码,此应用使用vue-cli框架开发 此h5应用叫vue1,用webstrom打开vue1,进行npm install安装引用 vue1 ...
- VUE+Ionic,项目搭建&打包成APK
安装Vue&创建Vue工程 1.安装Vue CLI: npm install -g vue-cli 2.创建新的Vue项目,创建最后一步会提醒是否使用npm install 自动安装,如果选择 ...
- 定位真机运行能用但是打包成apk就不能用的解决方法
打包apk的SHA1,与key的SHA1(这是多人开发的通病不同电脑共同开发一个app的常见错误之一)不一致.解决方法: 今天虽然离职了,但是今天遇到的是,当我在用高德地图开发的时候,在Android ...
- 初级——程序如何打包成apk文件
将Eclipse Android项目打包成APK文件是本文要介绍的内容,主要是来了解并学习Eclipse Android打包的内容,具体关于Eclipse Android内容的详解来看本文.Eclip ...
- Android项目打包成APK文件
第一步:右键单击该项目选择Export项目 显演示样例如以下界面:选择Exprot Android Application 第二步:输入项目名称,默认的情况下是原始的项目名称 下一步: 点击 Crea ...
- 将文件打包成apk
Android Studio的打包成apk文件 https://blog.csdn.net/woaichimahua/article/details/54427528
随机推荐
- devexpress gridview 添加按钮
#region 添加按钮事件 private RepositoryItemButtonEdit CreateRepositoryItemButtonEdit(Dictionary<object, ...
- ASP.Net MVC OA项目笔记<四>
1.1.1 EF线程唯一 在数据层中用到了EF的实例,在数据会话层也用到了,所以在一个请求中只能创建一个EF实例(线程内唯一对象),把它封装成工厂类 1.1.2 为了防止相互引用,循环引用,所以这个工 ...
- Android开发教程 - 使用Data Binding(七)使用BindingAdapter简化图片加载
本系列目录 使用Data Binding(一)介绍 使用Data Binding(二)集成与配置 使用Data Binding(三)在Activity中的使用 使用Data Binding(四)在Fr ...
- [NOI2017]蔬菜(贪心)
神仙题啊! 早上开了两个多小时,终于肝出来了,真香 我们考虑从第 \(10^5\) 天开始递推,先生成 \(p=10^5\) 的解,然后逐步推出 \(p-1,...,2,1\) 的解. 那怎么推出 \ ...
- JIRA服务器搭建
JJIRA服务器搭建 http://wiki.csdn.net/display/CSDN/Atlassian CSDN国内代理: http://atlassian.csdn.net/m/btc/atl ...
- odoo开发环境搭建(三):安装odoo依赖的python包
odoo开发环境搭建(三):安装odoo依赖的python包 http://www.cnblogs.com/jlzhou/p/5940815.html
- List集合和Set集合的遍历方法
Set集合遍历方法: 对 set 的遍历 1.迭代遍历: Set<String> set = new HashSet<String>(); Iterator<String ...
- Python:高效计算大文件中的最长行的长度
在操作某个很多进程都要频繁用到的大文件的时候,应该尽早释放文件资源(f.close()) 前2种方法主要用到了列表解析,性能稍差,而最后一种使用的时候生成器表达式,相比列表解析,更省内存 列表解析和生 ...
- 自然语言处理(英文演讲)_2-gram
这里利用2-gram模型来提取一篇英文演讲的初略的主题句子,这里是英文演讲的的链接:http://pythonscraping.com/files/inaugurationSpeech.txt n-g ...
- SQL SERVICE日志收缩
ALTER DATABASE 数据库SET RECOVERY SIMPLE WITH NO_WAIT;ALTER DATABASE 数据库SET RECOVERY SIMPLE; --简单模式DBCC ...