用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 查看内容

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

天下雪 2016-10-23 12:25

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

小程序的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

添加下面的代码:

  1. bindUserTap: function() {
  2. wx.navigateTo({
  3. url: '../viewtest/viewtest'
  4. })
  5. },

 app.json

viewtest路径加入pages参数里:

  1. "pages":[
  2. "pages/index/index",
  3. "pages/logs/logs",
  4. "pages/viewtest/viewtest"
  5. ],

 

2、例子

 数据绑定

  1. <!--viewtest.wxml-->
  2. <view> {{message}} </view>
  3. // viewtest.js
  4. Page({
  5. data: {
  6. message: 'Hello MINA!'
  7. }
  8. })

 

 列表渲染

  1. <!--viewtest.wxml-->
  2. <view wx:for="{{array}}"> {{item}} </view>
  3. // viewtest.js
  4. Page({
  5. 赞赏
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 有渔 来自: 授权地址

相关阅读