高端响应式模板免费下载

响应式网页设计、开放源代码、永久使用、不限域名、不限使用次数

什么是响应式网页设计?

2024年微信小程序说明书模板(通用5篇)

微信小程序说明书模板 第1篇

        WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构

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

        数据绑定使用 Mustache 语法(双大括号)将变量包起来.

Hello World的id=_item-0_

代码示例

特别注意:不要直接写 checked=_false_,其计算结果是一个字符串,转成 boolean 类型后代表真值 

可以在 {{}} 内进行简单的运算,支持的有如下几种方式:

三元运算

算数运算

逻辑判断

字符串运算

 数据路径运算

组合 

 对象

        在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item

        类似 block wx:if,也可以将 wx:for 用在标签上,以渲染一个包含多节点的结构块。例如: 

        如果列表中项目的位置会动态改变或者有新的项目添加到列表中, 并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容,switch 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

        当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

        如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略

        注意事项1:当 wx:for 的值为字符串时,会将字符串解析成字符串数组

        注意事项2:花括号和引号之间如果有空格,将最终被解析成为字符串

        在框架中,使用 wx:if=__ 来判断是否需要渲染该代码块,也可以用 wx:elif 和 wx:else 来添加一个 else 块:

        因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个  标签将多个组件包装起来,并在上边使用 wx:if 控制属性。

注意:  并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

        因为 wx:if 之中的模板也可能包含数据绑定,所以当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。

        同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好

        WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

        使用 name 属性,作为模板的名字。然后在内定义代码片段,如:

        使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:

        is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板:

        WXML 提供两种文件引用方式importinclude。

        import可以在该文件中使用目标文件定义的template,如:在 中定义了一个叫itemtemplate

 import 的作用域

import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。如:C import B,B import A,在 C 中可以使用 B 定义的template,在 B 中可以使用 A 定义的template,但是 C 不能使用 A 定义的template

        include 可以将目标文件除了   外的整个代码引入,相当于是拷贝到 include 位置,如:

微信小程序说明书模板 第2篇

        在 WXML 中,普通的属性的绑定是单向的。例如:

        如果使用 ({ value: 'leaf' }) 来更新 value , 和输入框的中显示的值都会被更新为 leaf ;但如果用户修改了输入框里的值,却不会同时改变  。

        如果需要在用户输入的同时改变  ,需要借助简易双向绑定机制。此时,可以在对应项目之前加入 model: 前缀:

        这样,如果输入框的值被改变了,  也会同时改变。同时, WXML 中所有绑定了 value 的位置也会被一同更新, 数据监听器 也会被正常触发。

微信小程序说明书模板 第3篇

        微信的事件是视图层到逻辑层的通讯方式,可以将用户的行为反馈到逻辑层进行处理,可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息,如 id, dataset, touches。

        注意:个人觉得这个就相当于Qt的信号与槽+事件合体

        除 bind 外,也可以用 catch 来绑定事件。还可以使用 mut-bind 来绑定事件。

        与 bind 不同, catch 会阻止事件向上冒泡。

        一个 mut-bind 触发后,如果事件冒泡到其他节点上,其他节点上的 mut-bind 绑定函数不会被触发,但 bind 绑定函数和 catch 绑定函数依旧会被触发。换而言之,所有 mut-bind 是“互斥”的,只会有其中一个绑定函数被触发。同时,它完全不影响 bind 和 catch 的绑定效果。

        事件分为冒泡事件和非冒泡事件:

WXML的冒泡事件列表:

         注:除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如 form 的submit事件,input 的input事件,scroll-view 的scroll事件,(详见各个组件)

        如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。

BaseEvent 基础事件对象属性列表:

 CustomEvent 自定义事件对象属性列表(继承 BaseEvent):

 TouchEvent 触摸事件对象属性列表(继承 BaseEvent):

特殊事件: canvas 中的触摸事件不可冒泡,所以没有 currentTarget

微信小程序说明书模板 第4篇

       项目里边生成了不同类型的文件:

        JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色

entryPagePath

        指定小程序的默认启动路径(首页),常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填,将默认为 pages 列表的第一项。不支持带页面路径参数

pages

用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对应位置的 .json.js.wxml.wxss 四个文件进行处理。未指定 entryPagePath 时,数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都需要对 pages 数组进行修改。如开发目录为:

则需要在 中写

window

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

tabBar

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

         其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:

        每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配置项会覆盖  的 window 中相同的配置项。完整配置项:微信官方文档-小程序页面配置

        微信现已开放小程序内搜索,开发者可以通过  配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引,完整配置项:微信官方文档-sitemap配置

        整个小程序框架系统分为两部分:WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。        

        响应的数据绑定类似于Qt的信号与槽,在定义视图层时就绑定了逻辑层的函数

微信小程序说明书模板 第5篇

        WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。用来决定 WXML 的组件应该怎么显示。WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比,WXSS 扩展的特性有

        rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = = 1物理像素。

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束

        框架组件上支持使用 style、class 属性来控制组件的样式

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

猜你喜欢