知了堂学习笔记-微信小程序框架

开发者文档:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html

一.文件结构

    小程序包含一个描述整体程序的app和多个描述各自页面的page。

一个小程序主题部分由三个文件组成,必须放在项目的根目录,

如下: 

             app.js                   必填               小程序逻辑

            app.json                必填              小程序公共设置

           app.wxss                 否                 小程序公共样式

 

   一个小程序页面由四个文件组成,

分别是:     

                           js                          必填                   页面逻辑

                       wxml                        必填                   页面结构

                       wxss                        否                       页面样式表

                        json                        否                       页面配置

注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径和文件名

二、配置

       app.json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。

pages

     接受一个数组,每一项都是字符串,来指定小程序有哪些页面组成。每一项代表对应页面

【路径+文件名】信息,数组的第一项小程序的初始页面。小程序中新增/减少页面,都需要对pages数组进行修改。文件名不需要写文件后缀,因为框架会自动去寻找路径下.json,.js,.wxml,.wxss四个文件进行整合。

如开发目录为:

知了堂学习笔记-微信小程序框架

则需要在app.json中写:

知了堂学习笔记-微信小程序框架

 

tabBar

  如果小程序是一个多tab应用(客户端窗口的底部或顶部有tab栏可以切换页面),可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页面。

Tip:

  1.当设置position为top时,将不会显示icon

  2.tabBar中的list是一个数组,只能配置最少2个、最多5个tab(太多图片过小影响用户体验),tab按数组的顺序排序。

属性说明:

知了堂学习笔记-微信小程序框架

其中list接受一个数组,数组中的每一项都是一个对象,其属性值如下:

知了堂学习笔记-微信小程序框架

 

三、页面路由

在小程序中所有页面的路由全部由框架进行管理。

页面栈

框架以栈的形式维护了当前的所有页面。当发生路由切换的时候,页面栈的表现如下: 知了堂学习笔记-微信小程序框架

路由方式

对于路由的触发方式以及页面生命周期函数如下:

知了堂学习笔记-微信小程序框架

注意:打开新页面方式无法路由带有Tab的页面

四、视图层

数据绑定

WXML中的动态数据均来自对应的Page的data。

简单的绑定

数据绑定使用Mustache语法(双大括号)将变量包起来(类似C语言中‘\n‘),可以作用于:

内容

知了堂学习笔记-微信小程序框架

运算

可以在{{}}内进行简单的运算,如

三元运算

知了堂学习笔记-微信小程序框架

 

 五、列表渲染

wx:for

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

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

知了堂学习笔记-微信小程序框架

使用wx:for-item可以指定当前数组当前元素的变量名,

使用wx:for-index可以指定当前下标的变量名:

知了堂学习笔记-微信小程序框架

wx:for也可以嵌套,下边是一个九九乘法表

知了堂学习笔记-微信小程序框架

 六、条件渲染

wx:if

在框架中,使用wx:if="{{condition}}"来判断是否需要渲染该代码块:

知了堂学习笔记-微信小程序框架

也可以用wx:elif和wx:else来添加一个else块:

知了堂学习笔记-微信小程序框架

 七、事件

什么是事件

·事件是视图层到逻辑层的通讯方式。

·事件可以将用户的行为反馈到逻辑层进行处理。

·事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。

·事件对象可以携带额外信息,如id,dataset,touches.

事件的使用方式

·在组件中绑定一个事件处理函数。

如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

知了堂学习笔记-微信小程序框架

·在相应的Page定义中写上相应的事件处理函数,参数是event。

知了堂学习笔记-微信小程序框架

·可以看到log出来的信息大致如下:

知了堂学习笔记-微信小程序框架

八、WXSS

 WXX用来决定WXML的组件应该怎么显示。

尺寸单位

·rpx:可以根据屏幕宽度进行自适应。知了堂学习笔记-微信小程序框架

建议:开发微信小程序时设计师可以用iPhone6作为视觉稿的标准。

注意:在较小的屏幕上不可避免的会用一些毛刺,请在开发时尽量避免这种情况。

选择器

目前支持的选择器有:

知了堂学习笔记-微信小程序框架

全局样式与局部样式

定义在app.wxss中的样式为全局样式,作用于每一个页面。在page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器

 

                                                                                                                                                                  2018/1/22

 

                                                                                              知了堂有温度的大学生众筹学习社区

    

 

  

  

知了堂学习笔记-微信小程序框架

上一篇:超简单实现 微信小程序 选项卡


下一篇:JavaScript中通过arguments对象实现对象的重载