AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:03:47

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:[Wondgirl] 入门系列教程《二》视图渲染
相关的资讯,希望对您有帮助。

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

组件的使用1.2.新建页面firstPage在里面再创建first.js和first.wxml在app.json中把我们的页面加载进来:”pages/firstPage/first”,{ pages:, window:{ backgroundTextStyle:light, navigationBarBackground ...

组件的使用

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代码:


<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内容改为


<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”

first.wxml:

<button type=default  hover-class=other-button-hover bindtap=btnClick> {{btnText}} button>
  • 1
  • 2
  • 1
  • 2

first.js里添加:

btnClick:function(){
    this.setData({text:内容改变})   
  }
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

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

渲染标签的使用

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

<view wx:if={{false}}> {{text}} view>
  • 1
  • 1

当为true时编译后view显示.

<view wx:if={{true}}> {{text}} view>
  • 1
  • 1

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


<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
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})   
  }
})
  • 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
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 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
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

二.循环标签 for 

也可以在first.js中输入

news:[aaa,bbb,ccc]
  • 1
  • 1

<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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

或 

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


<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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

想要从1开始也可以 

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


<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

index也可以定义

<view wx:for={{news}} wx:for-item=itemx wx:for-index=ix>
{{ix+1}} {{itemx}}
view>
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
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}) 
  }
})

24阅读 | 0评论
你的回应
写文章

7075