[uniapp开发从0开始做一个小程序-01]

[uniapp开发从0开始做一个小程序-01]

本人也算是小程序中的新手,之前费老大劲想要直接从实战项目开始接手,也看了不少教程视频,每每输在简单的起跑线上,不论是环境配置,还是服务器搭建,总有一款实战会让我头都抓掉了也不知道为什么,就这样,每次兴致而来,总是半途而废。为了监督自己,我决定每看完教程做完一个部分之后,就写一个总结博客,以此来警醒自己!坚持每天做一点,30天以内,完成一个小程序的制作。再忙也要坚持,坚持!!!

目录
  • 软件安装
    • 安装google chorm(相当于模拟器,可以直观的看出效果)
    • 安装HbuilderX(开发工具)
    • 安装node.js(环境)
  • 创建一个简单的uniapp
    • 创建uni-app
    • 运行结果

软件安装

  • 安装google chorm(相当于模拟器,可以直观的看出效果)
    第一步:在百度上搜索“chorm”
    [uniapp开发从0开始做一个小程序-01]
    第二步:进入官方网站,点击下载
    [uniapp开发从0开始做一个小程序-01]
    第三步:安装谷歌浏览器
    [uniapp开发从0开始做一个小程序-01]
    第四步:安装成功后会有谷歌浏览器主界面弹出,这时,点击右上角是哪个小圆点,选择设置[uniapp开发从0开始做一个小程序-01]
    第五步:选择搜索引擎,将地址栏中的搜索引擎,从谷歌换成百度,就OK啦辣[uniapp开发从0开始做一个小程序-01]

  • 安装HbuilderX(开发工具)
    第一步:在浏览器搜索“hbuilderx”[uniapp开发从0开始做一个小程序-01]
    第二步:在主页选择开发工具[uniapp开发从0开始做一个小程序-01]

    第三步:点击“”download[uniapp开发从0开始做一个小程序-01]

    第四步:选择自己电脑的APP开发版[uniapp开发从0开始做一个小程序-01]
    第五步:下载下来后,将压缩包解压[uniapp开发从0开始做一个小程序-01]
    第六步:打开解压后的文件夹 ,选择HBuilderX.exe这个文件,点击一下,再右键,发送到桌面快捷方式
    [uniapp开发从0开始做一个小程序-01]
    第七步:双击桌面的快加方式,打开开发工具
    [uniapp开发从0开始做一个小程序-01]
    第八步:第一次打开的话,首先选择自己喜欢的风格,然后项目管理界面是什么都没有的,我是因为之前做过,所以现在有一些文件,那么,开发工具也完成了
    [uniapp开发从0开始做一个小程序-01]

  • 安装node.js(环境)
    第一步:百度搜索“nodejs”,点击第一个
    [uniapp开发从0开始做一个小程序-01]

    第二步:进入首页,下载电脑对应安装包(我的电脑是Windows64位)
    [uniapp开发从0开始做一个小程序-01]
    第三步:双击下载好的.msi文件,选择自己的安装路径(我的是和下载路径相同),然后一直next就行
    [uniapp开发从0开始做一个小程序-01]
    第四步:win+R->cmd->node -v,如果有版本号就安装完成
    [uniapp开发从0开始做一个小程序-01]
    [uniapp开发从0开始做一个小程序-01]

创建一个简单的uniapp

  • 打开hbuilderx工具后,文件->新建->项目
    [uniapp开发从0开始做一个小程序-01]
  • 按顺序选择填写:uni-app->项目名称->项目地址->创建
    [uniapp开发从0开始做一个小程序-01]
  • 目录结构如下图,一个uni-app项目就建好了
    [uniapp开发从0开始做一个小程序-01]
  • 运行到浏览器(mac的只能运行到浏览器和小程序模拟器)
    [uniapp开发从0开始做一个小程序-01]
  • 运行结果:
    [uniapp开发从0开始做一个小程序-01]
  • windows的也可以运行到手机模拟器或者小程序模拟器,这个网上有很多教程,就不一一例举了
    [uniapp开发从0开始做一个小程序-01]
    [uniapp开发从0开始做一个小程序-01]
  • 好了,到这里我们的小程序雏形就搭建好辣!

终于还是做完了第一次,希望能一直坚持更新到我把这个小程序做完辣!>o<