微信小程序目录

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

微信小程序代码结构由四部分组成：具体代码查看微信小程序开发文档

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文件通过@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节点信息

⑼ 第三方平台

⑽ 开发接口

① 登录

② 授权

③ 用户信息

④ 微信支付

⑤ 模板消息

⑥ 客服消息

⑦ 转发

⑧ 收货地址

⑨ 卡券

⑩ 设置

⑪ 微信运动

⑫ 打开小程序

⑬ 获取发票抬头

⑭ 生物认证

⑮ 附近

     ⑾ 数据

⑿ 调试接口