小程序开发

开发流程：

1. 申请账号
2. 下载安装开发者工具
3. 熟悉默认demo
4. 代码构成：JSON,WXML,WXSS,JS
5. 小程序能力：
-- 启动：微信客户端下载小程序代码-根据配置启动加载app.json中pages的第一个页面--启动后回调执行app.js中App实例的onLaunch。
-- 程序和页面：加载一个页面，首先加载json配置, 在加载wxml,wxss，最后加载js,结合js中的data数据进行渲染，渲染完成后执行onLoad回调。
-- 组件：微信提供的各种样式组件，如：view,swiper,text,input,navigator,image,map,canvas等。
-- API: 提供微信本身能力的一些接口，如：获取微信用户信息，微信支付，获取地理位置，扫一扫等。
注：启动先后顺序为onLaunch(app)-onShow(app)-onLoad(index)-onShow(index)-onReady(index)
onUnload: 返回和redirectTo触发
onHide: navigationTo触发
6. 构思设计/开发/预览/发布/运营

组件：

视图容器：view, swiper, scroll-view, movable-view, cover-view;
基础内容：text, icon, rich-text, progress;
表单组件：input, label, checkbox, radio, button, form, picker, picker-view, slider, switch, textarea;
导航：navigator;
媒体组件：audio, image, video, camera, live-player, live-pusher;
地图：map;
画布：canvas;
开放能力：open-data, web-view;

API:

网络：发起请求、上传下载、WebSocket

媒体：图片、录音、录音管理、音频播放控制、音乐播放控制、背景音频播放管理、音频组件控制、视频、视频组件控制、相机组件控制、实时音视频

文件：文件的获取、存储、打开、删除

数据缓存：缓存的设置、获取、移除、清空

位置：获取位置、查看位置、地图组件控制

设备：系统信息、网络状态、加速度计、罗盘、拨打电话、扫码、剪贴板、蓝牙、iBeacon、屏幕亮度、用户截屏事件、振动、手机联系人、NFC、Wi-Fi

界面：交互反馈、设置导航条、设置tabBar、设置置顶信息、导航、动画、位置、绘图、下拉刷新、WXML节点信息、WXML节点布局相交状态

第三方平台：获取配置信息

开放接口：登陆、授权、用户信息、微信支付、模板消息、客服消息、转发、获取二维码、收货地址、卡卷、设置、微信运动、打开小程序、打开APP、获取发票抬头、生物认证、附近、插件管理

数据：常规分析、自定义分析

更新：版本更新管理

多线程：创建多线程程序

调试接口：打开/关闭调试

 JSON配置：

app.json: 当前小程序全局配置，包括了小程序的所有页面路径，界面表现，网络超时，底部tab等。
project.config.json: 开发者工具的个性化配置文件，修改工具的颜色，编译方式等都会写入这个文件。
page.json: 每个页面的属性配置

  JSON:
  -- json文件不支持注释
  -- json文件使用双引号

WXML模板：

1. 类似HTML,只是打包成了常用的组件
2. 不直接操作DOM，进行了状态管理，即使用了wx:if,{{}}等模板表达式

  WXML:
  -- 数据绑定：通过{{变量名}}绑定到内容或属性
  -- 逻辑语法：三元运算，算数运算，字符串拼接，直接置入（数字，字符串，数组）
  -- 条件列表：wx:if,elif,else | wx:for,wx:for-index,wx:for-item | block标签 | wx:key="property/*this"当标签节点变化时保持原有标签状态随着变化
  -- 模板引用：template | import(只引入template) / include(只引入template之外的)
  -- 共同属性：id, class, style, hidden, data-*, bind*/catch*

WXSS样式：

类似CSS，做了一些修改
-- 新增了尺寸单位：rpx
-- 提供了全局样式，和局部样式
-- WXSS仅支持部分CSS选择器

  WXSS:
  -- 文件组成：项目公共样式，页面样式，其他样式
  -- 样式的引用：@import './test_0_wxss'
  -- 尺寸单位：rpx, 宽度为375物理像素屏幕下1rpx=375/750=0.5px, iphone6:1rpx=0.5px
  -- 内联样式：与web网页一样，但可以使用变量
  -- 选择器：类、id、元素、伪元素（::after,::before）,权重：!important>style>#id>.class>element
  -- 样式库：https://github.com/Tencent/weui-wxss

WXS:

小程序的一套脚本语言

JS交互逻辑：

与用户交互：响应用户点击，获取用户位置等

  JAVASCRIPT:
  -- ECMAScript：ECMAScript+小程序框架+小程序API
  -- 执行环境: ES6,ES5
  -- 模块化: module.export,require
  -- 脚本的执行顺序: app.js,根据app.json中顺序的pages.json
  -- 作用域：文件独立该文件声明的变量只在该文件中有效，全局：使用getApp()获得实例给她赋值，会存在先后顺序，或者直接在app.js中添加全局变量

 其他：

-- backgroundTextStyle: 下拉文字背景色，只支持black/light
-- 在app.json中添加页面，会自动创建wxml等文件