[uniapp开发从0开始做一个小程序-01]
[uniapp开发从0开始做一个小程序-01]
本人也算是小程序中的新手,之前费老大劲想要直接从实战项目开始接手,也看了不少教程视频,每每输在简单的起跑线上,不论是环境配置,还是服务器搭建,总有一款实战会让我头都抓掉了也不知道为什么,就这样,每次兴致而来,总是半途而废。为了监督自己,我决定每看完教程做完一个部分之后,就写一个总结博客,以此来警醒自己!坚持每天做一点,30天以内,完成一个小程序的制作。再忙也要坚持,坚持!!!
目录
- 软件安装
- 安装google chorm(相当于模拟器,可以直观的看出效果)
- 安装HbuilderX(开发工具)
- 安装node.js(环境)
- 创建一个简单的uniapp
- 创建uni-app
- 运行结果
软件安装
-
安装google chorm(相当于模拟器,可以直观的看出效果)
第一步:在百度上搜索“chorm”
第二步:进入官方网站,点击下载
第三步:安装谷歌浏览器
第四步:安装成功后会有谷歌浏览器主界面弹出,这时,点击右上角是哪个小圆点,选择设置
第五步:选择搜索引擎,将地址栏中的搜索引擎,从谷歌换成百度,就OK啦辣 -
安装HbuilderX(开发工具)
第一步:在浏览器搜索“hbuilderx”
第二步:在主页选择开发工具第三步:点击“”download
第四步:选择自己电脑的APP开发版
第五步:下载下来后,将压缩包解压
第六步:打开解压后的文件夹 ,选择HBuilderX.exe这个文件,点击一下,再右键,发送到桌面快捷方式
第七步:双击桌面的快加方式,打开开发工具
第八步:第一次打开的话,首先选择自己喜欢的风格,然后项目管理界面是什么都没有的,我是因为之前做过,所以现在有一些文件,那么,开发工具也完成了 -
安装node.js(环境)
第一步:百度搜索“nodejs”,点击第一个第二步:进入首页,下载电脑对应安装包(我的电脑是Windows64位)
第三步:双击下载好的.msi文件,选择自己的安装路径(我的是和下载路径相同),然后一直next就行
第四步:win+R->cmd->node -v,如果有版本号就安装完成
创建一个简单的uniapp
- 打开hbuilderx工具后,文件->新建->项目
- 按顺序选择填写:uni-app->项目名称->项目地址->创建
- 目录结构如下图,一个uni-app项目就建好了
- 运行到浏览器(mac的只能运行到浏览器和小程序模拟器)
- 运行结果:
- windows的也可以运行到手机模拟器或者小程序模拟器,这个网上有很多教程,就不一一例举了
- 好了,到这里我们的小程序雏形就搭建好辣!
终于还是做完了第一次,希望能一直坚持更新到我把这个小程序做完辣!>o<