微信小程序入门基础（3）缓存实践和Template模板

分手后的思念是犯贱 2021-11-23 08:38 291阅读 0赞

感觉上章没有讲完，这章继续讲，两章配合阅读。

**1.Template模板**

当一块区域需要在多个地方使用的时候，可以把这个区域做成一个模版，在使用的时候调用这个模版即可，这样即减少重复代码的编写，又易于维护，让代码整洁。

模板代码的编写

<template name='postItem'>
      <view class='box'>
        <view class='title-box'>
          <text class='title'>{
       {item.title}}</text>
          <text class='date'>{
       {item.date}}</text>
        </view>
        <image src='{
       {item.imgUrl}}' class='cont-image'></image>
        <text class='content'>{
       {item.content}}</text>
      </view>
    </template>

为了方便管理我们的模版文件，可以在pages文件夹下面，新建一个模版文件，里面存放编写的模版；我们要使用标签template来包裹代码，并且要给其加一个name属性，当然也要编写对应的样式，和正常写样式的方法没有区别。

新建的模版文件里面只能存放模版的wxml和wxss文件，目前小程序的模版文件里面放入其他的文件类型不起作用，不能进行复用，虽然不报错，比如js文件。

template标签只是一种占位符，告诉编译器这个地方是加载模版代码的，当页面编译完成，这个标签就消失，所以要对与模版文件响应事件，我们就需要在加载模版文件的区域，使用一个可以添加事件的标签把其模版文件包裹起来，比如：view / block

<view bindtap=” ....”> template模版代码 </view>

使用模板代码

编写好了模版代码，怎么样在需要加载模版代码的地方使用呢？

首先，模版代码是在其他文件夹中，使用它，就必然要引入该模版文件，  
一般在对应要引入模版文件的文件开头部分引入：

// 在对应的wxml文件中开头引入
    <import  src = '模版wxml文件路径' />
    
    // 在对应的wxss文件中开头引入，注意末尾的分号
    @import '模版wxss文件路径' ；

然后在引入模版文件的wxml文件，适当位置使用

<template is = '模版的名字' data="{
       {要绑定到模版的数据}}"

到此，简单的模版引入和模版数据的绑定就完成，当我们要循环模版的时候，只需要如下，在外面加一层标签即可：

// bolck标签的作用是作用事件到template模版上面
    <block wx:for=" 服务器获取的数据集"  wx:for-item='item' wx:for-index='index' >
        <template  is = '模版的名字'   data="{
       {要绑定到模版的数据，一般是服务器获取的一个数据对象item}}"
    </block>

**2.缓存实践：文章收藏和文章阅读数增加**

**收藏和Toast提示：**

**播放音乐：**

**3.小程序中的block**

block常用于列表循环（如下图所示）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

<import src="post-item/post-item-template.wxml" />
    
    <block wx:for="{
       {posts_key}}" wx:for-item="item">
        
        <view catchtap='onPostTap' data-postID='{
       {item.postId}}'> 
          
          <template is="postItem" data="{
       {...item}}"></template>
        </view>
    </block>
    
    //post-item-template.wxml
    <template name="postItem">
        <view class="post-container">
           
           <view class="post-author-date">
               <image class="post-author" src="{
       {avatar}}"></image>
               <text class="post-date">{
       {date}}</text>
            </view>
               
            <text class="post-title">{
       {title}}</text>
            <image class="post-image" src="{
       {imgSrc}}"></image>
            <text class="post-content">{
       {content}}</text>
                
            <view class="post-like">
                <image class="post-like-image" src="/images/icon/chat.png"></image>
                <text class="post-like-font">{
       {collection}}</text>
                <image class="post-like-image" src="/images/icon/view.png"></image>
                <text class="post-like-font">{
       {reading}}</text>
            </view>
    
        </view>
    </template>

`view和block`两者的区别是，`<view>`是一个组件，会在页面上做渲染；`<block>`不是一个组件，它仅仅是一个包装元素，只接受控制属性，不会在页面中做任何渲染。

参考文章：  
[https://blog.csdn.net/henryhu712/article/details/80464723][https_blog.csdn.net_henryhu712_article_details_80464723]  
[https://www.jianshu.com/p/1ca1787990a9][https_www.jianshu.com_p_1ca1787990a9]

**4.事件驱动和数据优先/数据绑定**

事件驱动思想, 使用事件驱动来实现模块之间传递参数与解耦.比如在A模块发射一个事件，在B模块监听这个事件，中间使用数据来进行传递即可，像这里就是在总模块里面监听子模块里面的音乐播放状态。

数据优先思想，改变UI，只需要改变数据绑定的对应的数据就可以，这点和angular，IOS中的RAC，响应式编程思想类似，数据绑定优势还有，一个数据可以绑定多个事件，这样只需要在JS文件里面写上对应的多个事件即可，不像jQuery一样要获取多个dom元素才能进行多个事件描述，可能利于做单元测试。w

**5.页面关闭状态丢失和全局变量设置g\_isPlayingMusic**

本来以为data里面有isPlayingMusic记录播放状态，页面关闭之后应该有状态啊，后来想了想页面进入时候data中isPlayingMusic是false，没有改变，因为我们在页面改变是通过点击事件改变isPlayingMusic状态，当我们重新进入页面时候只会执行onLoad函数，此时isPlayingMusic状态只能是data中设定的。

所以，当我们页面关闭之后，所有的状态都会恢复到初始状态，不符合音乐播放状态的要求，所以，要一个与页面无关的状态保持，当我页面关闭的时候，这个状态依然保持着变量，而当我的应用程序全部关闭之后，这些所有的状态变量会恢复到默认值，全局变量合适App(\{\})。

参考文章：  
[https://segmentfault.com/a/1190000013298922\#articleHeader2][https_segmentfault.com_a_1190000013298922_articleHeader2]  
[https://segmentfault.com/a/1190000013513917][https_segmentfault.com_a_1190000013513917]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20211122/19cb4a40d2ce4ddbb7f8c54b0d51e881.png
[https_blog.csdn.net_henryhu712_article_details_80464723]: https://blog.csdn.net/henryhu712/article/details/80464723
[https_www.jianshu.com_p_1ca1787990a9]: https://www.jianshu.com/p/1ca1787990a9
[https_segmentfault.com_a_1190000013298922_articleHeader2]: https://segmentfault.com/a/1190000013298922#articleHeader2
[https_segmentfault.com_a_1190000013513917]: https://segmentfault.com/a/1190000013513917