微信小程序模板应用

定义模板：

<!--定义模板名称，设置参数-->
<template name="plantdetail">
<view class="photo">
<image src="{{image}}"></image>
<text>{{plant_name}}</text>
</view>
<view class="descripe">
<view class="L-title">植物百科</view>
<view class="divLine"></view>
<view class="L-content">{{plant_encyclopedia}}</view>
<view class="space"></view>
<view class="L-title">生长习性</view>
<view class="divLine"></view>
<view class="L-content">{{growth_habits}}</view>
<view class="space"></view>
<view class="L-title">地理分布</view>
<view class="divLine"></view>
<view class="L-content">{{distribution}}</view>
<view class="space"></view>
<view class="L-title">价值</view>
<view class="divLine"></view>
<view class="L-content">{{worth}}</view>
<view class="space"></view>
<view class="L-title">应用</view>
<view class="divLine"></view>
<view class="L-content">{{application}}</view>
<view class="L-title">养护信息</view>
<view class="divLine"></view>
<view class="L-content">{{care_information}}</view>
</view>
</template>

在模板文件的js中定义要用到的数据：

  data: {
    plant_name:"",
    plant_encyclopedia:"",
    distribution:"",
    application:"",
    growth_habits:"",
    worth:"",
    care_information:"",
    image:''

  },

模板调用：
在调用的js中获取数据：

  data: {
    plant_data:{},
    plant_name:"",
    plant_encyclopedia:"",
    distribution:"",
    application:"",
    growth_habits:"",
    worth:"",
    care_information:"",
    image:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log('传输的数据')
    const plantData = JSON.parse(options.plant); // 将字符串转换为对象
    console.log(plantData.growth_habits)
    this.setData({
      plant_data: plantData,
      plant_name: plantData.plant_name,
      plant_encyclopedia: plantData.plant_encyclopedia,
      distribution: plantData.distribution,
      application: plantData.application,
      growth_habits: plantData.growth_habits,
      worth: plantData.worth,
      care_information: plantData.care_information,
      image: plantData.image,
    });
  },
  

前端调用

<view class="background">
  <image src="../../images/background.png" class="background-image" mode="aspectFill"/>
<!--此处调用-->
<import src="../../templates/detail.wxml"></import>
<template is="plantdetail"  
<!--给数据-->
data="{{plant_name:plant_name,image:image,plant_encyclopedia:plant_encyclopedia,growth_habits:growth_habits,distribution:distribution,worth:worth,application:application,care_information:care_information}}">
<view>
  </view>
</template>
</view>