微信小程序入门

小程序出来也挺久了，才开始学习，也了解了下其原理及来源

现在前端技术主要有3类

小程序：mvvm架构，js+css3+html以及自带语法糖

React:mvvm架构，es6

flutter:mvvm,DSL主要以dart作为基础编程

uniapp:小程序源头原生公司，前身流应用,mvvm架构，js为主，html+css3

目前在学的是微信小程序，最近多学了几门前端语言，也发现了个学习规律，先了解其结构，目录，文件，基本组成等，然后看看基础语法，然后再找个小项目直接上手开撸，撸完之后，基本的组件已经函数，数据传递，网络请求，json解析等这些就掌握了，剩下的文件操作，组件封装，其他组件的使用，就依葫芦画瓢就行了，简单点说就是熟练度，然后还有调试方式，遇到问题如何解决等等，百度，google，遇到的简单的问题，基本上都有人踩过坑，容易解决，对于入门来说，前端并不难，当然后期如果考虑性能，优化等等，还是需要深入了解其原理，缓存机制，生命周期，内存模型已经对象创建销毁等等,上面是最近学习前端的一点总结吧，可能说的比较简单，实施起来还是靠个人，上面入门简单的前提是，你已经比较熟悉了一门面向对下语言，如java，oc，kotlin等，如果是c，c++转型的话，应该更简单，不过看个人学习能力吧，不过我了解的c端底层工程师很少有转向前端的，跨度有些大，而且前端是个精细活，可能不是适合c端钢铁直男吧，哈哈，纯属个人误解！进入正题，微信小程序入门记录

1.环境配置

每一门技术的开始，就是hello world了，小程序也一样，先把环境搭好，微信小程序的环境搭建比较简单，有一个绑定了手机的微信号，去微信公众官网注册一下，照着流程，然后下载好微信开发者工具即可，这工具不大，也不用配置什么环境变量啥的，即下即用，创建第一个微信小程序，除了hello world还有个头像，这里可以忽略

2.结构

如上，page是用来存放页面的，每个页面一个目录，如index，video，track等，一个页面的目录下有4个文件

js文件，处理逻辑

json文件，配置当前页面主题，颜色，路由跳转等

wxml文件，类似于html或者安卓的xml文件，就是画UI的，由于mvvm结构，在xml中直接调用js的逻辑和wxss的样式

wxss文件，等同于css样式文件，用来处理视图的宽高、颜色，字体大小、边距等

static目录，用来存放资源文件，如图片，音频，视频，svga等

utils目录工具类，等到你的项目文件和界面较多时，有些通用的逻辑处理可以放在这里，这个不多说

然后是app.js文件，这个画重点，这个相当于小程序的入口，不管哪个编程语言，哪类软件都会有个入口的，这个相当于应用层的入口，这里可以配置启动时需要的信息

app.json,路由处理，微笑小程序通过这个json来配置各个界面之间的关联关系，所有需要打开的页面文件都需要在这里进行配置

app.wxss，管理app主题，背景，样式的

3.问题记录

  服务端配置不支持http请求，必须https或者wx.socket,或者修改一个配置如下图箭头，选中不校验合法域名，这样可以使用http请求，就可以用到自己在网上找的http接口来进行网络通信测试了，网络接口数据的话，这里推荐一个网站聚合API，这个网站有挺多免费可用的接口，返回的格式是json的，支持post和get模拟

4.关于布局

 其实做过安卓，对于布局这个概念有一个基本的轮廓和印象了，但是Css3的布局其实和android的xml概念还是相差挺大的，比如在安卓中实现下面的效果，只需要一个简单的Framelayout加一个TextView就可，而css3就麻烦些，需要弄懂几个概念才能实现

上述效果就是一个简单的，文字覆盖在图片上，但是折腾了半天才实现，分2个步骤吧

1.文字“1人”如何放在图片

2.文字如何处于当前这个左下角的位置

 先解决第一个问题，文字放在图片上，在css的模型中，有个position和z-index，这2个属性结合才能属性view的覆盖，这里贴代码吧，对于小白来说比较直接

wxml文件，很简单，下面是一个item的xml，就是一个view包裹了一张图片和一个文字

 <view class="g-content">
    	<image src="{{item.video_cover}}" class="cover" />
      <text class="g-hour">{{item.video_collect_num}}人</text>
    </view>

css文件

.g-content{
  width: 100%;
  height: 200rpx;
  display: flex;
}

.g-hour{
  z-index: 2;
  position: absolute;
  align-self: flex-end;
  color: aliceblue;
}

.cover {
  width: 100%;
  height: 200rpx;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  z-index: 1;
  position: absolute;
}

不用去看g-content，这里只需要关注g-hour的css和cover的css就行，postion一定要设置absolute,否则，滚动的时候，这个图片和文字是固定在屏幕的，不会滚动，position的属性如下图，供参考，z-index这个就是层级的，谁在上面显示，谁的数字就大，试试效果就知道了

第二个问题，文字处于左下角，这个解释起来就更麻烦点了，需要熟悉flex的相关用法才行，这里不多讲，主要是2行代码，

g-conten的display设置flex,然后g-hour设置align-self: flex-end