微信小程序入门

一、小程序是什么

二、小程序特点

    1、一次开发，多端兼容

    2、拥有离线能力

    3、优美的操作体验

三、开发工具

    目前最主要开发工具有两款，微信自带的微信web开发者工具

    和sublimetext

    

四、项目目录结构

    打开软件，创建项目方式和其他开发软件一样，注意的是创建项目时需要填写一个AppID，这个没有的话可以直接点无AppId

 创建完成项目是以下目录结构

   

1、Pages目录下存储的是小程序的页面，其中每一个页面使用一个文件夹

     文件夹中包含有js，wxml，wxss三个文件，跟web工程差不多，其中wxml

     表示微信小程序的布局结构文件(相当于html)，wxss表示微信小程序的样

    式文件 (相当于css)

2、utils文件夹存储的是当前小程序所使用的一些工具集合

3、app.js : 系统的方法处理文件，主要处理程序的声明周期的一些方法；

 例如：程序刚开始运行时事件处理等

4、app.json : 系统全局配置文件，设置导航头的颜色，字体大小，下面有

没有tabbar 等功能，具体页面的配置在页面的json文件中单独修改

5、app.wxss : 全局的界面美化代码    

五、小程序页面生命周期

      需要配置在js文件中

     

Page({

data:{//页面数据

},

onLoad:function(options){//监听页面加载

},

onReady:function(){//页面加载成功

},

onShow:function(){//页面显示

},

onHide:function(){//页面隐藏

},

onUnload:function(){//页面卸载

},

onPullDownRefresh:function(){//监听页面下拉刷新

},

onReachBottom:function(){//页面上拉触底

}

})

除了这些方法之外，小程序也允许我们使用自定义函数

六、小程序数据绑定

小程序是一个视图层和逻辑层双向数据绑定的框架设计

那么也就是在逻辑层的数据会自动显示到视图层，反之亦然

如：我们新建一个页面demo01，在下面创建js，wxml，wxss三个文件

需要注意的是，这个页面必须在app.json中的pages里面进行配置，而且

配置在顶端，那么他就会首先加载出来

在app.js全局文件中添加如下数据

在demo01.js中添加数据如下

页面结构

界面显示

七、小程序中分支语句和循环语句写法

分支语句

js:定义数据

wxml:结构文件判断数据并显示

界面显示结果:

循环语句

js：数据文件

  wxml:wxml:结构文件遍历数据并显示

界面显示结果

注意:在结构文件中index表示的是下标，item表示集合中每一个项

    小程序基础就介绍到这，最后打个广告，有想学习Java，web，云计算，UI，PHP等课程的童鞋请记得联系我哦...