finclip开发分享——模板开发

开发过程中我们都会使用到模板（template），可以在模板中定义代码片段，然后我们就可以在不同的地方调用非常方便。

模板的定义

我们会使用name属性作为我们模板的名字。然后我们需要在<template/>中定义代码片段

<template name="artwork-tabs">
    <view class="artwork-tabs">
        <view bindtap="onSwitchTab" class="artwork-tab bg-color-{{item.className}} {{item.active?'artwork-tab-active':''}}" data-brand="{{brandType}}" data-categoryid="{{item.category_id}}" wx:for="{{artworkTabs}}" wx:for-index="tab_index" wx:key="j" style="background:{{item.color}};">
            <view class="artwork-tab-item-title">{{item.category_title}}</view>
            <view class="artwork-tab-item-subtitle">{{item.category_slogan}}</view>
        </view>
    </view>
</template>

如何使用模板呢？

我们会使用is属性来声明需要的使用的模板，然后将模板所需要的data传入到我们定义的模版中

<import src="../../wxParse/wxParse.wxml" />
<view class="faq-container">
    <view class="faq-title font-title">{{title}}</view>
    <template is="wxParse" data="{{wxParseData:article.nodes}}" />
</view>

const WXAPI = require('../../wxapi/main');
var WxParse = require('../../wxParse/wxParse.js');

Page({
    data: {
        title:"",
        nr:""
    },
    onLoad: function(n) {
        var that = this;
        WXAPI.fap(1).then(res => {
            if (res.code == 0) {
                that.setData({
                    title:res.data.title
                })
                
                WxParse.wxParse('article', 'html', res.data.content, that, 5);
            }
        })

    },
    onReady: function() {},
    onShow: function() {},
    onHide: function() {},
    onUnload: function() {},
    onPullDownRefresh: function() {},
    onReachBottom: function() {},
    onShareAppMessage: function() {}
});

模板作用域

需要注意的是模板也有它自己的作用域，我们只能使用data传入的数据以及我的模板中定义文件中定义的 <wxs /> 模块。