[Wondgirl] 微信小程序(二)视图渲染

转载请注明出处：http://blog.csdn.NET/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"
  }
}

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

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

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

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

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

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

  }
})

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

标签的使用

一.打开官方开发文档

我们找到[表单组件]—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.把first.wxml内容改为

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

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

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

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

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

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

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

  }
})

运行结果为:

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

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

first.js:

btnText:"命令按钮"

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

first.wxml:

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

first.js里添加:

btnClick:function(){
    this.setData({text:"内容改变"})   
  }

运行后你会发现,当你点命令按钮后,text的内容将会更改为:内容改变

渲染标签的使用

一.条件渲染
当为false时编译后view不显示.

<view wx:if="{{false}}"> {{text}} </view>

当为true时编译后view显示.

<view wx:if="{{true}}"> {{text}} </view>

else的使用:当为true时显示带1的view,否则显示带2的view

<!--pages/firstPage/first.wxml-->
<text>{{text}}</text>
<button type="default"  hover-class="other-button-hover" bindtap="btnClick"> {{btnText}} </button>
<button type="primary" > primary </button>
<view wx:if="{{show}}"> {{text}}1 </view>
<view wx:else> {{text}}2 </view>

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

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

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

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

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

  },
  btnClick:function(){
    console.log("show:"+this.data.show);
    this.setData({text:"内容改变",show:!this.data.show})   
  }
})

二.循环标签 for

也可以在first.js中输入

news:['aaa','bbb','ccc']

<!--pages/firstPage/first.wxml-->
<text>{{text}}</text>
<button type="default"  hover-class="other-button-hover" bindtap="btnClick"> {{btnText}} </button>
<button type="primary" > primary </button>
<view wx:if="{{show}}"> {{text}}1 </view>
<view wx:else> {{text}}2 </view>

<view wx:for="{{news}}">
循环内容
</view>

若要显示for循环数组中的值,可以写item.如下图

或

还可以用index来显示是第几条

<!--pages/firstPage/first.wxml-->
<text>{{text}}</text>
<button type="default"  hover-class="other-button-hover" bindtap="btnClick"> {{btnText}} </button>
<button type="primary" > primary </button>
<view wx:if="{{show}}"> {{text}}1 </view>
<view wx:else> {{text}}2 </view>

<view wx:for="{{news}}" wx:for-item="itemx">
{{index}} {{itemx}}
</view>

想要从1开始也可以

动态的更改news的值:每点击一次命令按钮,删除一行数据.

<!--pages/firstPage/first.wxml-->
<text>{{text}}</text>
<button type="default"  hover-class="other-button-hover" bindtap="btnClick"> {{btnText}} </button>
<button type="primary" > primary </button>
<view wx:if="{{show}}"> {{text}}1 </view>
<view wx:else> {{text}}2 </view>

<view wx:for="{{news}}" wx:for-item="itemx">
{{index+1}} {{itemx}}
</view>

index也可以定义

<view wx:for="{{news}}" wx:for-item="itemx" wx:for-index="ix">
{{ix+1}} {{itemx}}
</view>

Page({
  data:{
    // text:"这是一个页面"
    text:"这里是内容",
    btnText:"命令按钮",
    show:true,
    news:['aaa','bbb','ccc']
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数

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

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

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

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

  },
  btnClick:function(){
    console.log("show:"+this.data.show);


    var newsdata = this.data.news;
    newsdata.shift()//删除第一条数据用.shift()

    this.setData({text:"内容改变",show:!this.data.show,news:newsdata}) 
  }
})