【用法总结】微信小程序开发第一印象

    周末不想看Android相关的技术了，沉不下心，也是看源码实在是挺吃力的，于是偷懒学习了一下微信小程序开发的课程。主要是想了解一下微信小程序的设计思想，完全是兴趣使然，以前一直觉得小程序就是前端的东西，但是学习了下课程，还是存在一些差异的，记录下了解的一些基础知识。
    注：本文提到的小程序，若没有特殊说明，则代表的是微信小程序。

一、开发环境搭建指引

    官方提供了IDE，安装好了然后注册了小程序，主要填写一些小程序的介绍信息，就能够扫码登陆开始开发了。
IDE下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
小程序注册指引（按照上面的介绍step by step就好了）：https://developers.weixin.qq.com/community/business/doc/000200772f81508894e94ec965180d

二、项目不同文件介绍

    小程序的项目结构基本是按照前端最基础架构设计的，界面、逻辑、布局样式分别在不同的源文件中编写，但是和前端不同的是，微信小程序的源文件后缀都是被微信重新定义的。有点像某遥遥领先厂设计的，原本Android系统的Activity重新设计成了XXXAbility，实际上的指责是很类似的，因为实际上完成功能逻辑的架构模型是想通的，这个思想上并没有特别大的变化。

2.1 不同后缀文件的作用

• index.js --> 前端的javascript文件，后缀没有变化，编写功能逻辑，实现动态逻辑的，比如：存储、网络接口请求是这一层完成的（不是指这个文件的指责，而是这一层，因为文件具体还可以按照模块的指责再做拆分、规划。）
• index.wxml --> 对应于前端的.html文件，用于编写网页界面
• index.wxss --> 对应于前端的.css文件，布局样式文件，用于实现网页元素的布局、颜色、样式等视图相关的效果

2.2 基础知识点小结（没有前端开发基础的同学可能需要看，比如我～）

2.2.1 view标签中图片宽度不占满屏幕问题

需要给image标签设置mode="widthFix"属性，并且在wxss文件中指定width=100%，如下所示：
index.wxml:

<!-- class指定wxss中的bg样式 -->
<image mode="widthFix" class="bg" src="../img/86.png"></image>

index.wxss:

.bg {
  <!-- 让图片宽度能够撑满屏幕，不要左右留空隙 -->
  width: 100%;
  <!-- 边框的圆角 -->
  border-radius: 5px;
  <!-- 几个参数的作用分别是：x偏移量 y偏移量 阴影模糊半径 阴影颜色 -->
  box-shadow: 0 0 5px blue;
  <!-- 边框的圆角 -->
  padding-left: 5px;
  <!-- 边框的圆角 -->
  padding-right: 5px;
  /* position: absolute; */
}

2.2.2 点击事件和获取变量

• index.wxml:

<!-- 在html中嵌入点击事件处理， 响应js中的onClick函数 -->
<button bindtap="onClick">点击</button>

<view class="title">
  <!-- 在html中嵌入js变量，对应于index.js中的Page-data-wording变量 -->
  <text>hello {{wording}}</text>
</view>

• index.js:

Page({
  data: {
    wording: 'boy'
  },
  <!-- 点击事件的处理函数 -->
  onClick: function() {
    this.setData({
      wording: "girl"
    })
  }
})