[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<