微信小程序入门文档

一 基本介绍

微信专门为小程序了一个叫做微信者工具

最新一版的微信者工具,把微信公众的调试工作也集成了进去,可以更换模式。

选择无,即可在没有情况下进行,但是无法预览;

二 基本架构和配置文件

1.小程序架构

小程序主要由两个部分构成,主体部分 ()和各个页面()。

类似于许多框架,主体部分主要用于核心的配置,各个页面主要用于不同业务场景。

,就是小程序的框架。支撑,逻辑层的调用,对数据,,的解析;

,主要是业务层,用于实现界面化操作功能,是程序员使用频率最高的部分。

1.1,主体部分主要由3个文件构成

三个文件分别是.,.,.。

.文件是脚本文件处理一些公共的或者全局的逻辑。比如在这里定义全局变量处理登录逻辑指定首页等。

.文件是小程序的整体配置文件。我们必须要在这个文件中配置小程序是由哪些页面组成的,我们还可以在这个文件中配置整个小程序的统一的窗口 背景色,导航条 样式,默认标题。但是必须注意该文件不可添加任何注释。

.文件是整个小程序的公共样式表。我们可以在小程序子页面组件的 属性上直接使用 . 中的样式规则。也就是说在这个文件里定义的样式在其他任何的子页面中都可以使用。这个也是为了代码的简洁和整体风格的统一。

1.2,页面由4个文件构成

小程序的所有显示的页面都必须以子文件夹的形式存放在文件夹里面,包括首页。项目展示多少个页面,在文件夹下就要新建多少个子文件夹。每个页面的子文件夹,必须包括这四个文件:. , . , . 和 .( 表示文件名)。这四个文件的文件名必须和子文件夹的名字一样。

.文件是当前页面脚本文件,也是业务逻辑的处理文件,当前页面的所有和后端服务器接口的交互,请求数据的逻辑都在这个文件完成,是核心文件,必须创建。

.文件是搭建当前页面元素的文件。负责搭建当前页面的结构和布局,相当于网页中的.文件,这个文件中存放一些类似于 等布局代码,必须创建。

.文件是当前页面的样式文件。负责调整当前页面的样式,元素之间的间距,字体的大小,字体颜色,背景图等,相当于网页中的文件,需要时创建。

.文件是当前页面的配置文件。配置当前页面的窗口背景色,导航条样式,默认标题等。

1).:小程序逻辑,初始化

2). :小程序配置,比如导航、窗口、页面请求跳转等

3).:公共样式配置

主体配置完成之后,就是对应的业务了,也就是者最常操作的页面。小程序页面设计基本上也是遵循 结构进行构建。

1):页面逻辑,相当于控制层();也包括部分的数据()

2):页面结构展示,相当于视图层()

3):页面样式表,纯前端,用于辅助展示

4):页面配置,配置一些页面展示的数据,充当部分的模型()

.

用来注册一个小程序。在小程序启动的时候调用,并创建小程序,直到销毁。在整个小程序的生命周期过程中,它都是存在的。很显然它是单例的,全局的。所以,

1)只能在.中注册一次。

2)在代码的任何地方都可以通过 () 获取这个唯一的小程序单例,

比如 = ();

()的参数是 类型 {} ,指定了小程序的生命周期函数。

函数

监听小程序初始化。

当小程序初始化完成时,会触发 (全局只触发一次)。

函数

监听小程序显示。

当小程序启动,或从后台进入前台显示,会触发。

函数

监听小程序隐藏。

当小程序从前台进入后台,会触发。

所谓前后台的定义,类似于手机上的,比如当不在使用微信时,就进入了后台。

.

接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成

"":[

"//",

"//",

"//"

],

用于设置小程序的状态栏、导航条、标题、窗口背景色。

"":{

"":"",

"":

"#1349",

"": "姓名测算",

"":"#78389"

},

通过 配置项指定 栏的表现,以及 切换时显示的对应页面。

配置数组,只能配置最少2个、最多5个 , 按数组的顺序排序。

"": {

"":

"#78389",

"":

"#133",

"":

"",

"":

"#",

"": [

{

"":

"//",

"": "姓名测算",

"":

"/1.",

"": "/_1."

},

{

"":

"//",

"": "测算历史",

"":

"/2.",

"": "/_2."

}

]

},

可以设置各种网络请求的超时时间。

"": {

"": 0

}

}

三 视图预渲染

组件,小程序者文档

<

="__">-:

<

="-" ="-:;">

<

="- _">1

<

="- _">2

<

="- _">3

<

="__">-:

<

="-" =":300;-:;">

<

="- _">1

<

="- _">2

<

="- _">3

< ="" ="{{}}"

="{{}}" ="{{}}"="{{}}"

="" -="--">

四 数据绑定

2.1 数据的绑定

{{ }}

:{

:',!'

}

2.2 事件(小程序是不可以操作的)

{{}}

:(){

.(“按钮被点击了~”)

}

2.3动态修改内容(对于的修改,只能使用 ()

{{}}

{{}}

:{

:“这里是文本”

}

:(){

.(“按钮被点击了~”)

.({:“这是新的内容~”})

}

<

:="{{}}">

2.4 渲染标签

{{}}

或者

{{}}

{{}}

:{

:

}

动态改变这个值

:(){

= ..;

.( “:”+)

.({:“这是改变后的内容…”,:!})

}

{{}}1

{{}}2

2.4 循环

{{}}-{{}}

:{

: [‘’,‘’,‘’]

}

自己定义

{{}}-{{}}

动态修改数组的值

:{

: [‘’,‘’,‘’]

}

:(){

= ..;

.()

.({:})

}

模板

1.例如头部

.

这里是头部

引入

相当于把全部内容过来

2.例如

.

这里是底部1

这里是底部2

引入

就相当于引入部分模块内容

五 生命周期

用户首次打开小程序,触发 (全局只触发一次)。

小程序初始化完成后,触发方法,监听小程序显示。

小程序从前台进入后台,触发 方法。

小程序从后台进入前台显示,触发 方法。

小程序后台运行一定时间,或系统资源占用过高,会被销毁。

示例代码:

()

// .

()

// .

()

// .

()

' '

小程序提供了全局的 ()函数,可以获取到小程序实例。

// .

//

总结:

: 页面加载。

1)一个页面只会调用一次。

2)参数可以获取.和.及

: 页面显示

1)每次打开页面都会调用一次。

: 页面初次渲染完成

1)一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。

2)对界面的设置如.请在之后设置。

: 页面隐藏

1)当或底部切换时调用。

: 页面卸载

1)当或的时候调用。

微信小程序页面跳转三种方式

为了不让用户在使用小程序时造成困扰,微信小程序规定页面路径只能是五层,请尽量避免多层级的交互方式。

页面跳转的话就涉及到了多个页面层级

跳转到新页面

-=""等价于的 . 而.的是需要跳转的应用内非 的页面的路径

保留当前页面,跳转到应用内的某个页面,使用.可以返回到原页面。

在当前页打开

-=""等价于的 . 而.的是需要跳转的应用内非 的页面的路径

切换到首页

-=""等价于的 .而.的是需要跳转到 页面,并关闭其他所有非 页面

七 微信小程序传递数据

1.使用本地缓存的方法保存全局变量,本地缓存是有存储限制的,所以建议手动删除不再需要的缓存数据。

假如在页面保存需要的信息,如下图就可以直接保存键名为的数据。

''

2

'书籍'

85

':///./.'

""

在页面直接可以使用小程序的.并传入要获取到的键值名就可以获取本地缓存的数据。

.

''

2.通过在跳转、重定向等转变页面时候,可以直接通过来传送数据。

在页面传递数据到页面中使用的时候可以直接使用以下数据。

//

'?=1'

//

'?=1&=“标题”'

//

()

.

.

在页面的文件中定义了 函数时,页面可以表示改页面可以转发。可以在函数中设置页面转发的信息。

只有定义了该函数,小程序右上角的菜单中才会有转发按钮

用户点击转发按钮的时候会调用该函数

该函数内需要 一个 ,中包含转发的信息(可自定义转发的内容)

: ( ){

= ;

// 设置菜单中的转发按钮触发转发事件时的转发内容

= {

: "转发的标题", // 默认是小程序的名称(可以写等)

: '///', // 默认是当前页面,必须是以‘/’开头的完整路径

: '', //自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径,支持及,不传入 则使用默认截图。显示图片长宽比是 5:4

: (){

// 转发成功之后的回调

(. == ':'){

}

},

: (){

// 转发失败之后的回调

(. == ': '){

// 用户取消转发

} (. == ':'){

// 转发失败,其中 为详细失败信息

}

},

: (){

// 转发结束之后的回调(转发成不成功都会执行)

}

};

// 来自页面内的按钮的转发

( . == '' ){

= ..;

.( . ); //

通过给 组件设置属性 ,可以在用户点击按钮后触发 事件,如果当前页面没有定义此事件,则点击后无效果。

兼容性写法:

({

: {

: .('.-.')

}

})

分享给好友

:{

: .('.-.'),

}

客服消息

:{

: .('.-. '),

}

2.推荐网站:小程序社区

© 版权声明
THE END
分享