第一章搭建uni-app 记账小程序

前言：
这一季会涉及到的内容

《vue+flutter+.net core +golang+uni-app》
这一季的内容准备用5年的时间来完善，博客是一种学习累计和分享（注: 我只是分享自己的实践过程，并不是教每个人怎么做(不是老师也不是大佬），所以我也会犯错，希望通过交流得到指点，感恩????‍）
要做的东西：
（1）以”记账“为开发例子来学习所有涉及到的东西
使用开发工具
vscode vs2017 hbuilderX

要用到的技术
前端 ：
管理后台用 vue+element+admin(开源框架）写 涉及到的 webpack , Ts, 包括koa2 React 只能写一些入门项目

  后端：
.net core  微服务   （关注国内前辈的文章学习中） 

 Golang   微服务     （发现很多没有写完的文章，接触后系统学习）

.net core 是最近推的最热门的话题，能火一定有它的原因，我找了张善友的公众号 圣洁的公众号 也在学习 微服务 ，跟着微软官网的文档研究。
Golang   微服务   跟着官网文档研究

移动端：

小程序 uni-app(非常优秀的中介器） app（混合开发）flutter

数据库：
  NoSQL(两个基佬）      MySql. SQL

运维部署：
      系统
              Linux    windows2012(主要研究  如何部署  如何错误调试）
 容器 和Nginx  

最后总结 ：
我们先用uni-app来搭建小程序版本的。为什么要先做uni-app这一块？
1.这一块的内容最为简单，我也可以顺着实现思路，把前端的 Vue Vuex React Koa2 Ts 从入门过一遍后面
2.博客园我看相关uni-app 的内容还比较少，所以我打算写一些，希望能帮助uni-app来推广，这确实是国内很优秀的编译器
3.我看网上很多教程，最让我纳闷的是 一些官方文档的教程，他简单处理一下就开始收费了这很不厚道。

学习目录
使用uni-app“快速”搭建一个项目
下载 https://uniapp.dcloud.io/quickstart 直接按照官网的操作一步一步来基本不会出错
安装微信开始工具
安装Hbuilderx
两个东西安装成功后我们先建立一个项目。 名字随便按照自己的想法来

image

在确保你已经安装了 微信小程序开发工具 时选择运行 --选择微信开发者工具
如果看到uni-app 的logo就说明成功了
手机运行调试 百度搜索自己手机如何打开 开发者模式，进入开发者模式，选择USB传输方式为 文件传输 如果HbuilderX 检测到你的手机就说明成功了，让它自己允许按照基座
有的手机如 oppor9s 需要你在手机”设置允许外来设备安装 软件“ 这个按照各自的情况来，现在的HbuilderX 编译器连接手机很少会失败

image

第一步 看管网的文档这个相当的重要

如果你用过vue脚手架来搭建项目那么uni-app的结构你可能会比较好理解，如果没用过我来解释核心的东西

1. components 文件夹 也就是组件的目录，何为组件?(vue组件可以理解为预先定义好的ViewModel类）有什么用？（提高可重用性）
   https://www.jianshu.com/p/0eee4b7f2b06 这里引用简书作者的文章

2.pages 文件夹 也就是我们.net mvc 里面用的视图层
3.static 这个文件夹就是我们用于存放静态资源的 <p style="color:red">注意：微信小程序的背景图片不能直接引用static 文件的图片 必须是 https 网络路径的图片 </p>
4.unpackage 这就是uni-app 帮我们把写好的代码进行转换 ，好达到跨平台的效果，其实就是帮你转换成了 微信小程序 weex 格式的代码 有兴趣可以点开来看看
5.App 这里我们打开可以看到两个 onLaunch onShow onHide 三个函数 表明程序第一次加载执行的地方 ，同时我们也可以注册全局CSS
6.pages.js manifest.js 第一个是页面路由配置js 这里的路由不是vue使用的路由 （uni-app 本身的项目就没有使用 vue 的路由） manifest 也就是我们项目的配置文件 ，比如你小程序的开发ID app的名称 ，和开发版本都可以在这里配置

介绍完过后我们就要开始做我们的第一个“首次加载导航篇” 和登录注册界面

如果在安装有任何问题可以加 q群 301453550 或是简书，博客留言我会定期查看