十分钟写一个好玩的app

废话

对于app开发,现在已经不再是只有安卓,ios,才能开发了,一个前端程序员就能轻轻松松搞定一个app,当然方法方式有很多,
例如前几年用的比较多的 react native(react 语法),uniapp(vue,小程序语法),这两年比较火的flutter(dart语言),还有就是各种内嵌H5的app,等等

正文

本篇使用uniapp,实现一个真心话大冒险app,自己手动定义内容,ps: 然后以后面试就可以吹牛逼说我了解混合app开发了,哈哈

准备

1、下载HBuilder 开发工具,前往下载
在这里插入图片描述
2、打开HBuilder X 选择文件–>新建–>项目–>uniapp–>默认模板,点击运行,浏览器,内置浏览器,手机(里面有教程,链接手机,打包app时,会自动安装到手机上),小程序都行,个人选择的是外部chrome浏览器
在这里插入图片描述
3、新建成功,开始开发,大概是下面有三个按钮,真心话,大冒险,设置,先新建几个文件,去随便找几个icon 推荐iconfont 做下面tabBar icon
在这里插入图片描述

page.json 添加tabBar(就是普通小程序开发配置) api

在这里插入图片描述
结果
在这里插入图片描述
4、插件市场找合适插件编写代码(关键字,抽奖,转盘等)
在这里插入图片描述
由于没有看到合适的,这个呢内容多了 他又显示不下,于是自己改吧改吧,转盘只显示名称,在规则说明里对应详情内容

5、添加一个设置,自定义内容
在这里插入图片描述
由于没有服务器,没有接口,数据只能简单的缓存在本地了

6、打包(已安装为例,ios要稍微麻烦一点)
点击发行—>原生app云打包,输入包名,使用公共测试证书
在这里插入图片描述
然后可能会提示,manifest.json 没配置,你就直接点进去
在这里插入图片描述
获取appid 填写包名,当然还可以设置app logo,还能插入广告,消息推送等,感兴趣的自行研究,然后重新点击,发行—>原生app云打包—>打包,等待,打开所在,安装即可
在这里插入图片描述

笔记

1、如果想要app 插件必须支持app才可以,可以再插件详情里看到
2、本篇是支持app 的 也可以打包成小程序等
3、本地localstore缓存要遵循uniapp语法(小程序写法),不能使用h5写法,否则打包之后不生效

apk包已放到个人资源里,免费下载

github

uniapp官网
uniapp

猜你喜欢

转载自blog.csdn.net/weixin_44314258/article/details/115083568