逻辑层js文件 微信小程序前端进行了层次划分,分为逻辑层和视图层.逻辑层实现对数据的加工和处理.与HTML页面相似,逻辑层使用JavaScript编写.逻辑层将数据处理后发送至视图层,同时接受视图层的反馈,官方在JavaScript的基础上进行了一些封装和修改,主要有以下: 提供了App和Page方法,用来进行程序和页面的注册. 提供了丰富的API,如扫一扫.支付等微信功能. 每个页面有独立的作用域,并提供模块化能力. 由于框架并非运行在浏览器中,所以JavaScript在Web中的一些能力无法…

1.微信小程序的样式设置统一在每一页的.wxss的样式文件中,所有的样式设置代码统一写入这个文件中: 2.样式主要是通过.wxml里面控件的“class”属性来调用,此处调用会有几个细节要注意: 1)样式表中用 .style{ } "."和属性名称的格式表示: 2)选择器 .weui-cells:before { }(在view组件之前插入) .weui-cells:after { }(在view组件之后插入) 3)wxml文件中可以用连续的“class”属性名称的添加给组件添加多个属…

一. 视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 1.1. 数据绑定 1.1.1. 普通写法 <view> {{ message }} </view> Page({ data: { message: 'Hello MINA!' } }) 1.1.2. 组件属性 简直和上面没区别啊 <view id="item-{{id}}"> </view> P…

事件 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, dataset, touches. 事件的使用方式 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数. <view id="tapTest" data-hi="WeChat" bin…

数据绑定 在逻辑层设置数据例如: Page({ data: { message: 'Hello MINA!' } })//设置了一个属性,名称是message 值为Hello MINA! 在视图显示数据    显示时使用双大括号将 名称扩起来  解析数据  {{name}}例如: <view> {{ message }} </view> 组建属性 <view id="item-{{id}}"> </view> //动态id Page({…

view 视图容器 例如: <view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp" style="flex-direction:row;"> <view class="flex-item bc_green"&…

视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 类似前端HTML 一.数据绑定 普通语法 test.wxml <view>{{ msg }}</view> # 类似Vue插值表达式 渲染test.js文件中Page中data对象中对应变量的值 test.js Page({ data: { msg: 'Hello WeChat!' } }) 组件属性 <view id="item…

引用 WXML 提供两种文件引用方式import和include. import import可以在该文件中使用目标文件定义的template,如: 在 item.wxml 中定义了一个叫item的template: <!-- item.wxml --> <template name="item"> <text>{{text}}</text> </template> 在 index.wxml 中引用了 item.wxml,就可…

定义模板 使用name属性,作为模板的名字.然后在<template/>内定义代码片段,如: <!-- index: int msg: string time: string --> <template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </vie…

wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件. 默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } }) 使用 wx:for-i…