微信小程序学习总结

1. 基础入门

   1. 什么app可以用小程序？
      
       
   2. 小程序开放的API

      •  视图容器：视图(View)、滚动视图、Swiper

      •  基础内容：图标、文本、进度条

      •  表单组件：按钮、表单等等

      •  操作反馈：导航

      •  媒体组建：音频、图片、视频。

      •  地图 画布 文件操作能力

      •  网络：上传下载能力、WebSocket

      •  数据：数据缓存能力

      •  位置：获取位置、查看位置

      •  设备：网络状态、系统信息、重力感应、罗盘

      •  界面：设置导航条、导航、动画、绘图等等

      •  开放接口：登录，包括签名加密，用户信息、微信支付、模板消息

   3. 微信小程序开发文档
      •https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644083132
       
   4. App总体组成
      
      注：红色部分为必须有的文件；灰体部分为可选的文件。
       
   5. App

      •三个文件必须在项目目录

      •app.js (必须) 处理全局逻辑

      •app.json (必选) 公共配置

      •app.wxss (可选) 公共样式表

   6. Page

      •4个文件必须同名

      •xxx.js (必选) 页面逻辑

      •xxx.wxml(必选) 页面视图

      •xxx.wxss (可选) 页面样式表

      •xxx.json (必选) 公共配置

   7. 名词解释

      •xxxx.wxml WXML(WeiXin Markup Language) =~ HTML

      •xxxx.wxss WXSS(WeiXin Style Sheet) =~ CSS

      •微信页面WXML+WXSS =~ HTML/CSS

   8. Page 3个文件之间交互
      
       
   9. index.js和index.wxml交互
      
       
   10. Page函数

       •Page里面data属性

        

       •setData函数进行刷新界面数据

       •不能通过this.data = {text : “hello”}这样来改变

   11. View组件和flexbox弹性盒布局

       1. flex-direction
          •弹性容器的方向:  row | column
          

       2. justify-content
          •弹性项目在主轴main-axis线上的对齐方式: flex-start | flex-end | center | space-between | space-around
          
           

       3. align-Items
          •弹性项目align-items在伸缩容器中的布局情况
          •定义在伸缩容器中
          •flex-start | flex-end | center | stretch
          

       4. flex
          •display : flex
          •flex : 数字

       5. 
          •view缺省是 block布局
          •如果写上display : flex那么缺省是row布局
          •display: flex;
          •flex-direction: row;

   12. 事件交互

2. 常用控件

   1. button按钮控件
   2. icon系统图标
   3. image图片显示

3. 数据绑定

   1. 数据绑定(单项)
      
   2. 数据绑定
      •基本数据绑定
      •条件渲染数据绑定
      •列表渲染数据绑定
      •模板数据绑定
      •事件绑定