APP开发教程

小程序,APP开发教程

HBuilder开发工具下载,安装到电脑上并注册账号,为什么使用HBuilder开发呢?因为简单省时,写好APP后可以直接编译为小程序、H5网站,本站演示模板均是APP编译的H5网站

本文学习如何使用HBuilder开发APP,需对VUE、JS、CSS会用,不论是APP还是小程序简而言之都是用VUE绑定数据,JS处理数据,CSS写页面样式,所以不会的了解之后再来看

下面以开发一个新闻APP(后端接口已写好)为例,研究熟悉之后基本上你可以开发任意类型的APP了:

查看新闻模板 下载模板源码

确定APP功能:1.首页,支持上拉加载更多,下拉刷新功能、轮播图切换;2.新闻详情页,支持关注验证是否登录;3.用户页;4.登录页面;5.注册页面

构建APP步骤:1.搭建APP的框架,即顶部底部导航、所需页面;2.挂载公用方法,如数据请求接口、登录状态同步验证等;3.在各个页面写样式装填数据;

UNIAPP中VUE文件页面固定写法,template标签开头、除文字用text标签,图片引入用 image 标签,输入框用input、textarea标签,按钮用button标签外大多数使用view标签,结束时写上对应的标签,注意template标签之后必须跟一个view标签,内容写在view标签内

1.搭建APP的框架

2.挂载公用方法

上面两个内容完全可以在制作其他APP上复用,不懂也不要紧,复制粘贴即可,看多了自然就懂了,下面的内容涉及到VUE和JS的使用,需要先学习VUE和JS

3.编写首页

4.编写详情页

5.编写用户页

6.编写登录页

7.编写注册页

完成上面步骤,新闻模板APP的前端就制作好了,发行打包成APP【需要在manifest.json配置APP图标等,有可能会提示APPID问题,重新获取一下即可】或小程序或H5即可使用

本篇介绍的都是制作APP小程序常用知识点,特别是搭建框架、挂载公用方法、登录、注册页完全可以直接复用在其他APP上,看完后还是不太懂?没关系,下载模板源码包导入HBuilder按照上述步骤顺序打开反复多看多操作几次就明白了,使用HBuilder开发APP,大部分内容都是官方给的固定写法,需要你自己写的东西并不多,接下来可前往学习后端教程

APP配置参数 官方文档 https://uniapp.dcloud.net.cn/collocation/pages.html

页面跳转 官方文档 https://uniapp.dcloud.net.cn/api/router.html

消息提示框 官方文档 https://uniapp.dcloud.net.cn/api/ui/prompt.html

输入框 官方文档 https://uniapp.dcloud.net.cn/component/input

uni-icons 引入官方图标 文档 https://uniapp.dcloud.net.cn/component/uniui/uni-icons

数据保存本地 官方文档 https://uniapp.dcloud.net.cn/api/storage/storage.html#