微信小程序目录

此文章只是为了让你能清楚微信小程序能做到哪些事情，如想学习到完整的知识，还请移步到微信小程序开发文档以及查阅相关的实例资料。

微信小程序代码结构由四部分组成：具体代码查看微信小程序开发文档
1、json配置
⑴ Json为一个配置文件，即为对象，有如下配置。
⑵ pages为配置的页面，设置页面保存即可自动生成。
⑶ Window为页面窗口表现。
①导航栏的设置。
②窗口颜色的设置
③下拉刷新，上拉加载的设置
⑷ tabBar可设置底部或顶部的tab栏切换页面
⑸ netWordTimeout设置各种网络请求的超时时间
⑹ debug 调试信息在控制台以 info 的形式给出
2、Wxml模板 书写web页面代码
    ⑴ view 类似html中的块元素 如：div
⑵ text  类似html中的行内元素 如：span
⑶ button  和html中的button类似，其中他有默认的样式
⑷ block  其为内联元素，并无实际意义，只是一个包装元素。
⑸ image  图片标签，其中背景图片不支持本地图片
⑹ checkbox 类似html中的复选框
⑺ {{data}}  js文件中定义的data在wxml进行绑定，可进行逻辑运算
⑻ wx:for=”{{list}}”  js文件中定义的list（数组或对象）在wxml中进行循环渲染，
       其渲染结果{{index}}为下标（对象为键），{{item}}为值，如想修改下标或值的名字可以通过wx:for-index和wx:for-item进行修改。在循环是会有wx:key的警告提示，
此时可加上wx:key 来指定列表中项目的唯一的标识符。
⑼ wx:if=”{{show}}”  js文件中定义的show在wxml中进行条件判断，，，如需要频繁切换，改换成hidden效果将更好。
⑽ 通过bindtap绑定点击事件，通过data-name可以给该元素设置一个数据。除点击事件外还有手指触摸事件，动画事件。（具体冒泡事件和非冒泡事件请查看文档）⑾ template组件的声明通过name声明(<template name="first">),调用时通过is调(<template is="first" data=”{{list}}”>其中data的数据为当前js文件的数据，外面声明的组件，在别的页面调用时通过<import src="../../utils/first.wxml" />进行引用)而相对于include引入（include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置） 
3、Wxss样式  设置标签的样式，用法和html的css设置大致一样
⑴ 其使用的单位为rpx（物理像素即屏幕宽度/750,故在移动端相对于web网页而言是 有误差的）
⑵ 在一个wxss文件中引入另外的wxss文件通过@
4000
import进行引入
4、Js逻辑交互
    ⑴ js中几乎都在page（{}）中，定于全局变量以及引进文件
时可在外部定义。
⑵ page({})中data：{}为数据的初始化，周期函数有如下：
① onLoad:页面加载
② onReady:页面初次渲染完成
③ onShow:页面显示
④ onHide:页面隐藏
⑤ onUnload:页面卸载
⑥ onPullDownRefresh:下拉刷新
⑦ onReachBottom:上拉触底
⑧ onPageScroll:页面滚动
⑨ onShareAppMessage:用户转发
⑶ getCurrentPages() 函数用于获取当前页面栈的实例，在onload中获取    不到，需要页面加载之后方可获取到。
⑷ app.js中几乎都在App({})中，此js定义的是全局的变量，通过getApp() 函数可以用来获取到小程序实例，小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行（具体参数请查看
   微信小程序开发文档）
5、wxs模块
⑴ 可以编写在wxml文件中的<wxs>标签内或以.wxs 为后缀名的文件内.
①<wxs>标签 在wxml中引入<wxs src="./../tools.wxs"
module="tools" />
   其中module是.wxs暴露的方法或数据
②.wxs文件  每个模块都有自己独立的作用域，在.wxs文件中引入另 一个.wxs文件，通过require函数。
 
6、自定义组件（具体参照文档加查阅自定义组件相关资料）
⑴ 新建component文件夹存储自定义组件
⑵ js文件是自定义组件的构造器其中properties内定义的属性名类似于小程序常规js中的data，内部方 法使用catchtap进行绑定
⑶ 在wxml中引入自定义组件时，要先在json文件中usingComponents方可在    wxml引用，此时的属性即为自定义绑定的数据名，内部事件绑定通过
  （bind:triggerEvent触发的事件名=“当前文件的事件名”），而正规事件 仍使用bindtap进行绑定，当前js可以通过this.selectComponent(“#app”)获取到组件
⑷ 组件事件，即自定义事件，bind:triggerEvent触发的事件名=“当前文件的事件名”
⑸ behavior的使用需要使用behavior（）构造器，用于组件间的代码共享
⑹ 组件间关系 加入了relations定义段，可以区分目标节点的情况
7、分包加载   可以优化小程序首次启动的加载时间
8、组件
⑴ 视图容器
⑵ 基础内容
⑶ 表单组件
⑷ 导航
⑸ 媒体组件
⑹ 地图
⑺ 画布
⑻ 开放能力
⑼ 客服会话
9、api接口，详情请参考微信小程序api文档
(1) 网络
① 网络请求
② 上传，下载
③ Websocket
     ⑵ 媒体
① 图片
② 录音
③ 录音管理
④ 音频播放控制
⑤ 音乐播放控制
⑥ 背景音频播放管理
⑦ 音频组件控制
⑧ 视频
⑨ 视频组件控制
⑩ 相机组件控制
⑪ 实时音视频
     ⑶ 文件
     ⑷ 数据缓存
     ⑸ 位置
① 获取位置
② 查看位置
③ 地图组件控制
     ⑹ 设备
① 系统信息
② 网络状态
③ 加速度计
④ 罗盘
⑤ 拨打电话
⑥ 扫码
⑦ 剪贴板
⑧ 蓝牙
⑨ iBeacon
⑩ 屏幕亮度
⑪ 用户截屏事件
⑫ 震动
⑬ 手机联系人（增加填写的信息到手机联系人编辑）
⑭ NFC
⑮ Wi-Fi
⑺ 界面
① 交互反馈
② 设置导航条
③ 设置tabBar
④ 设置置顶信息
⑤ 导航
⑥ 动画
⑦ 位置
⑧ 绘图
⑨ 下拉刷新
⑻ WXML节点信息
⑼ 第三方平台
⑽ 开发接口
① 登录
② 授权
③ 用户信息
④ 微信支付
⑤ 模板消息
⑥ 客服消息
⑦ 转发
⑧ 收货地址
⑨ 卡券
⑩ 设置
⑪ 微信运动
⑫ 打开小程序
⑬ 获取发票抬头
⑭ 生物认证
⑮ 附近
     ⑾ 数据
⑿ 调试接口