[Wondgirl] 入门系列教程《二》视图渲染

组件的使用

1. 

2.新建页面firstPage 

在里面再创建first.js和first.wxml 

在app.json中把我们的页面加载进来:”pages/firstPage/first”,

{
  "pages":[
    "pages/firstPage/first",//把first页面加载进来
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

在我们的页面里面调用page方法:first.js

Page({
  data:{
    // text:"这是一个页面"
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数

  },
  onReady:function(){
    // 页面渲染完成

  },
  onShow:function(){
    // 页面显示

  },
  onHide:function(){
    // 页面隐藏

  },
  onUnload:function(){
    // 页面关闭

  }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

保存所有页面后编译,我们可以看到,我们的页面成功加载出来了 

标签的使用

一.打开官方开发文档

我们找到[表单组件]—button,复制右面选中的示例代码,粘贴到页面的布局first.wxml文件中. 

first.wxml代码:

<!--pages/firstPage/first.wxml-->
<text>这里是文本内容</text>
<button type="default"  hover-class="other-button-hover"> default </button>
<button type="primary" > primary </button>

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

运行效果如下: 

绑定数据:{{数据值}}

1.把first.wxml内容改为

<!--pages/firstPage/first.wxml-->
<text>{{text}}</text>
<button type="default"  hover-class="other-button-hover"> default </button>
<button type="primary" > primary </button>

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

2.在first.js页面给text赋值:text:”这里是内容”

Page({
  data:{
    // text:"这是一个页面"
    text:"这里是内容"
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数

  },
  onReady:function(){
    // 页面渲染完成

  },
  onShow:function(){
    // 页面显示

  },
  onHide:function(){
    // 页面隐藏

  },
  onUnload:function(){
    // 页面关闭

  }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26

运行结果为: 

命令按钮的数据绑定同上:  在first.wxml:

<button type="default"  hover-class="other-button-hover"> {{btnText}} </button>

• 1

• 1

first.js:

btnText:"命令按钮"

• 1

• 1

命令按钮添加点击事件:  bindtap=”btnClick”