微信小程序开发入门

<!--87480574-->微信小程序

首先说下结构吧,看看小程序到底长什么样子

这是一个微信提供的自己的工具,相当于吧,由此也可以看出腾讯的野心并不小啊,左边的就是编辑调试什么的,往右就是一个模拟器,你可以选择各种型或者安卓各种型,在往后这就是目录结构了。

先说一下小程序的代码结构吧,首先他的 至少由这三个文件组成,.,这个是脚本代码,()函数就在这里面实现,可以监听处理小程序的生命周期函数,全局变量。. 文件这个一般都是对程序进行配置的,这里面一般都是放页面组成啊,还有或者其他页面的样式 颜色等。.,这个就是一个 ,样式表,你如果不想在自己的中单独的一些样式,可以直接使用这里的。

然后除了系统提供的,我们要想小程序肯定要创建自己的页面,每个自己的页面都有四个文件. . . ,.。

那这些文件里到底都有些什么呢 ,下面看图:

. 就想成吧,其实就是样式表 什么 这些

这个就是. 没什么太大的作用 就是一些配置信息

这个就比较重要了 . 就是一些监听函数或者自定义函数 和 的注册等

这个就是. 就相当于 看这样子就觉得长得挺像,就负责页面具体长什么样子,由一些控件节点堆成的,里面绑定数据和函数

小程序并不是 ,不是5的界面,是一种类似- 的用和类结构写的接近于原生的

小程序的框架的目标是通过尽可能简单,高效的方式让者可以在微信中具有原生体验的服务

框架提供了自己的视图层描述语言和 ,就类似于 和,以及基于的逻辑层框架,并在视图层和逻辑层间提供了数据传输和事件系统,可以让者方便的聚焦于数据与逻辑之上。

框架的核心是一个响应的数据绑定,这点和的 和-的,等数据绑定响应绑定一样的,框架都是让数据与视图尽可能简单的保持同步,当数据发生改变时,只需要在逻辑层修改数据,视图层就会自动的响应更新。可以通过下面一个例子来看:

//

{{}}

//

= {

}

// 是一个函数,注册一个页面,主要是当前页面的一些方法和数据绑定,接收一个参数,指定页面的初始数据,生命周期函数,事件处理函数,生命周期函数有 页面加载 , 页面显示, 页面展示完成, 页面隐藏, 页面卸载

({

. 小程序的脚本文件 可以在这个文件中处理小程序的生命周期函数,全局变量。调用

. 是对整个小程序的全局配置,可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条的样式,配置默认标题,该文件不可添加任何注释

. 是小程序的公共样式表,我们可以在页面组件的属性上直接使用.中的样式规则

每一个小程序页面都是由4个不同的后缀文件的组成如:. . . .,微信小程序的每一个页面的【路径+页面名】(//)都要写在.文件中的里面,且中的第一个页面是小程序的首页

作用域:在文件中的变量和函数只在该文件中有效,不同文件中可以相同名字的变量和函数,不会相互影响

通过全局函数 ()可以获取全局的应用实例,如果需要全局的数据可以在.的()函数中设置如:

({

}) // .

= ()

. ++ // .

模块化

将一些公共的代码抽离成一个单独的 文件作为一个模块,模块只有通过. 或者才能对外暴露接口,这点很

// .

(){

}

.. =

在需要使用这些模块的文件中,使用()将公共代码引入

= (‘.’)

({

})

() 函数用来注册一个小程序,只能在.中注册,且只能注册一次

在()函数中不要调用(),使用即可拿到实例

不要在的时候调用()这时候还没有生成

通过()获取到小程序的实例后不要私自调用生命周期函数

// .

({

: () {

// .

},

: () {

// .

},

: () {

// .

},

: () {

.()

},

: ' '

})

// .

= ()

.(.)

() 函数用来注册一个页面,接受一个参数,其指定页面的初始数据,生命周期函数,事件处理函数

通常在一个页面的. 下

({

: {

: " ."

},

: () {

// .

},

: () {

// .

},

: () {

// .

},

: () {

// .

},

: () {

// .

},

: () {

// .

},

: () {

// .

},

: () {

// .

},

// .

: () {

.({

: ' .'

})

},

: {

: ''

}

})

初始化数据

初始化数据将作为页面的第一次渲染,将会以 的形式由逻辑层传至渲染层,渲染层可以通过对数据进行绑定

{{}}

{{[0].}}

({

: {

: ' ',

: [{: '1'}, {: '2'}]

}

})

函数用于将数据从逻辑层发送到视图层,同时改变对应的. 的值

直接修改.的值无效,这点有点类似.,无法改变页面的状态,还会造成数据的不一致

. 是页面的结构文件

{{.}}

{{}}

本例中使用了

. 是页面的脚本文件,在这个文件中可以监听并处理页面的生命周期函数,获取小程序实例,并处理数据,响应页面交互事件等

//获取应用实例

= ()

({

: {

: ' ',

: {}

},

//事件处理函数

: () {

.({

: '://../666//'

})

},

: () {

.('')

=

//调用应用实例的方法获取全局数据

.((){

//更新数据

.({

:

})

})

}

})

. 是页面的样式表 采用的是布局

. {

: ;

-: ;

-: ;

}

.- {

: 128;

: 128;

: 20;

-: 50%;

}

.- {

: #;

}

. {

-: 200;

}

当页面有自己的样式表时,会覆盖.中的样式,如果不指定页面的样式表,可以在页面的结构文件中直接使用.中指定的样式规则

. 也是非必要的,当页面有自己的配置文件时会覆盖在.中的相同的配置项,如果没有指定的页面配置文件,则在该页面直接使用. 中的默认配置

逻辑层

小程序的逻辑层是由编写,由于并不是运行在浏览器上,所以在上的一些能力都无法使用,如,等

增加 函数,进行程序和页面的注册

增加 和 方法,分别用来获取当前的实例和当前的页面栈

每个页面有的作用域,并提供模块化能力

者写的所有代码最终会打包成一份代码,在小程序启动的时候运行,直到小程序销毁

数据绑定

中的动态数据均来自对应的

简单绑定 用双大括将变量括起来 如: {{}}

({

})

组件属性 需要在双引之内

({

控制属性 需要在双引之内

({ :{:} })

关键字需要写在双引之间 < =“{{}}”

运算 可在{{}}内进行简单的运算 三元运算 算数运算 逻辑判断 字符串运算 数据路径计算 数组 对象

条件渲染

在框架中可以用 :=“{}” 来判断是否需要渲染该代码块

列表渲染

在组件中使用: 控制属性绑定一个数组,即可使用数组中的各项的数据重复渲染该组件

默认数组的当前项的下标变量名默认为,数组当前项的变量名默认为

({

})

使用:-可以指定数组当前元素的变量名 使用:- 可以指定数组当前下标的变量名

模板

可以在模板中定义代码片段,然后在不同的地方调用

定义模板 使用 属性作为模板的名字

使用属性,需要使用的模板,然后将模板的传入

({

})

属性可以使用双引语法来动态决定具体需要渲染哪个模板

模板拥有自己的作用域,只能使用传入的数据

事件

在组件上绑定一个事件处理函数,如,当用户点击该组件的时候会在该页面对应的中找到对应的事件处理函数

在相应的中定义事件处理函数参数是

({

}

})

© 版权声明
THE END
分享