微信小程序小白开发学习之路———视图与渲染

1.新建一个页面通常要在新页面的.js文件中加入Page方法。

2.实现数据的绑定：双大括号，即{{}}。绑定的数据需要在.js文件Data中声明他的值。

3.按钮点击事件的添加：首先在.wxml文件按钮中添加点击事件bindtap=“btnclick”，随后在.js文件中定义btnclick:function(log){

    console.log("这个按钮被点击了")

}

当点击这个按钮时，就会显示这个按钮被点击。

4.动态改变显示内容：首先，微信小程序数据的绑定是单向的，就是对象的改变会通知视图变化，所以当JS中数据变化时，WXML视图也会有所变化。然后是代码实现：3中已经写明点击事件的添加，所以进一步实现：点击按钮，原被绑定的数据发生变化，并且覆盖掉原来的内容。

btnclick: function (){ /*添加点击事件*/

console.log( "按钮被点击了" )

this .setData({text: "这是一个新的内容" })

}

5.渲染标签

    （1）条件标签：<view wx:if="{{true}}">{{text}}</view>,则text的内容就会被显示出来，如果是false，text的内容就不会被显示出来。<view wx:else="{{true}}">{{text}}</view>也是有if......else........的

    （2）循环标签：<view wx:for={{['aaa','bbb']}}>

                              循环内容。

                              </view>

6.模板的使用

    （1）头模板的引用：

            新建一个目录，取名为：templates，在此目录下新建一个文件：header.wxml。在要引入头模板的页面下编写：

            <include src="../templates/header" />  注：如果不在最后加上“/”，会报错，导致无法显示头模板。

    （2）底部模板的引用：

            当底部模板不止一个时，不适合使用include的引入方式，因为这样并不会显示底部的模板。

            使用import引入方式即可。

            新建新的WXML文件，取名footer，在需要引入模板的页面编写：

            <import src="../templates/footer" />

            <template is ="footer1" />

            在新建的WXML文件中编写：

            <template name="footer1">

             底部模板1

            </template >

            <template name="footer2">

            底部模板2

            </template>

模板总结：include方式是把所有内容复制进来

                import方式是把指定的一部分的内容复制过来

模板的导入导出是在WXML文件中实现的。