找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索本站精品资源

首页 教程频道 小程序开发 查看内容

有渔微信小程序系统概述《三》view层及小程序框架概述

作者:模板之家 2018-1-26 11:10 3606人关注

小程序 的view层 MVC 模式这里就不讲了,不懂 MVC 模式的就自己去查阅相关资料。小程序的的 view 层由 WXML 与 WXSS 编写,由组件来进行展示。 view 层将逻辑层的数据反应成界面显示,同时

小程序的view层

MVC模式这里就不讲了,不懂MVC模式的就自己去查阅相关资料。小程序的的view层由WXMLWXSS编写,由组件来进行展示。view层将逻辑层的数据反应成界面显示,同时将界面发生的事件发送给逻辑层。

WXML(WeiXin Markup language)用于描述页面的结构,可以想象成Html文件。

WXSS(WeiXin Style Sheet)用于描述页面的样式,可以想象成Css文件。

组件(Component)是视图的基本组成单元,可以想象成Html中的组件。

下面我们用简单的例子来看看 WXML 具有什么能力:

 

1、测试环境准备

 pages目录里建立viewtest目录,专门用来做view层测试。

 index里添加触发viewtest的相关代码

 index.wxml

修改成:

 index.js

添加下面的代码:
 

bindUserTap: function() {
wx.navigateTo({
url: '../viewtest/viewtest'
})
},

 app.json

viewtest路径加入pages参数里:
 

"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/viewtest/viewtest"
],

 

2、例子

 数据绑定

  1. <!--viewtest.wxml-->
    <view> {{message}} </view>
    
    // viewtest.js
    Page({
    data: {
    message: 'Hello MINA!'
    }
    })
     

 列表渲染
 

<!--viewtest.wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// viewtest.js
Page({


路过

雷人

握手

鲜花

鸡蛋
原作者: 模板之家 来自: 网络收集

全部回复(0)