マイクロ手紙アプレット記事] II。そして、マイクロチャネルビューアプレットをレンダリング

見るとレンダー

プロジェクト準備

1. 新しいプロジェクトを作成しますDEMO2
2. 最初のページに新しいディレクトリを作成します。
3. 新first.wxmlとfirst.jsディレクトリ
   
4. 定義ページ（名前が一致しなければならないことに注意してください、自動的にJSONファイルとWCSSを生成しているかのように一時的に制御しない）app.jsonで
5. コールのページfirst.js（{...}）方法（ページが関数の内部で自動的に生成されるので注意）
   
6. 削除し、first.wxml app.json元のパスにコンテンツを追加してコンパイル
   

使用1.基本的なコンポーネント

1.1ボタンコンポーネント

	<!-- button组件 -->
	<button type="default">DefaultButton</button>
	<button type="primary">PrimaryButton</button>

1.2テキストコンポーネント

	<!-- text组件 -->
	<text>Hello wxApp</text>

1.3ビューコンポーネント

	<!-- view组件 -->
	<view>Hello wxApp</view>

2つの方法ラップwxml

	<!-- \n 或 view  转义 \\ == \   -->
	<text>换行的2种方式 view组件 和 \\n </text>

マイクロチャンネルの文書のより多くの成分を見るhttps://developers.weixin.qq.com/miniprogram/dev/component/button.html

2.データバインディング

2.1動的データをロードします

在first.js中data添加的数据

Page({
  /**
   * 页面的初始数据
   */
  data: { 
    text:"这里是动态加载的数据",
    btnText:"动态加载按钮数据"
  },
  ....
})

在first.wxml中通过{{}}去取值

<!-- 动态加载数据 -->
<view>{{text}}</view>
<!-- 动态加载按钮数据 -->
<button type="primary">{{btnText}}</button>

2.2結合事象

first.js

Page({
  data: { 
    text:"这里是动态加载的数据",
    btnText:"动态加载按钮数据",
    changeText:"这是原来的值"
  },
  // 通过按钮绑定事件调用该方法
  changeText:function(){
    this.setData({ changeText:"这是通过按钮绑定时间修改的值"})
  },
	....
})

first.wxml

<!-- 事件绑定:修改值 -->
<button type="primary" bindtap="changeText">{{btnText}}</button>
<view>{{changeText}}</view>

タグをレンダリング3

3.1 WX：もし

first.js

Page({
  data: { 
    ...
    wxTrue:true,
    wxFalse:false,
    show:true
  },
  // 通过按钮修改渲染标签
  changeShow:function(){
    var flag = this.data.show;
    this.setData({ show: !flag});
  },
  ...
})

first.wxml

<view>--------------渲染标签-------------------</view>
<!-- wx:if -->
<!-- 根据true和false来判断要不要显示内容 -->
<view wx:if="{{true}}">{{text}}</view>  
<view wx:if="{{false}}">{{text}}</view>
<!-- 也可以动态加载-->
<text>\n</text>
<view wx:if="{{wxTrue}}">{{text}}</view>  
<view wx:if="{{wxFalse}}">{{text}}</view>
<text>\n</text>
<!-- 也可以通过事件来修改show的值 -->
<button type="primary" bindtap="changeShow">修改渲染</button>
<view wx:if="{{show}}">{{text}}</view>

3.2 WX：他

<!-- wx:else -->
<view wx:if="{{show}}">{{text}}</view>
<view wx:else >{{text}}</view>

3.3 WX：について

first.js

data: { 
  	...
    news: ['aaa', 'bbb', 'ccc']
  },

first.wxml

<!-- ws:for -->
<view wx:for="{{news}}" wx:for-item="itemxx" wx:for-index="i">
<!-- item是wx定死的可以通过wx:for-item来修改 -->
<!-- {{item}} -->
<!-- index显示第几条 index也可以通过wx:for-index来修改 -->

  {{i}}-{{itemxx}}
</view>

3.3.1ニュースの値を変更

\\ first.js
// 通过按钮修改news
changeNews:function(){
   var newData = this.data.news;
   newData.shift(); //删除第一个
   this.setData({news:newData});// 修改news
},

// first.wxml
<!-- 修改值 -->
<button type="primary" bindtap="changeNews">修改news的值</button>

テンプレートの4.

用途：同じトップとボトムとの複数のページテンプレートを適用することができます。

4.1 <include>の

ページディレクトリの下に新しいテンプレートディレクトリは、header.wxmlとfooter.wxml作成
し、ページの最初の行と最後の行に設定します

4.2 <インポート>配合<テンプレート>

在templates新建一个页面 headfoot.wxml

<template name="header2">
  header ...
</template>

<template name="footer2">
  footer ...
</template>

first.wxml

<import src="../templates/headfoot" />
<template is="header2" />
  <view>...</view>
<template is="footer2"></template>

4.2.1データのインポート