微信小程序实战-第7章 小程序开发框架

微信小程序实战-第7章 小程序开发框架

7.1.1模块

模块的定义和使用：

定义

module.exports = {
   
   
  welcome: 'welcome'
}

使用

var welcome = require('../utils/welcome.js')
Page({
   
   
  data: {
   
   },
  onLoad: function() {
   
   
      …
   } 
})

7.1.2模板

模板的定义和使用：

定义

<template name="msgItem">
  <view>
    <text> {
   
   {
   
   index}}: {
   
   {
   
   msg}} </text>
    <text> Time: {
   
   {
   
   time}} </text>
  </view>
</template>

使用

<import src="item.wxml" />
Page({
   
   
  data: {
   
   
    item: {
   
   
      index: 0, msg: 'this is a template',
      time: '2019-01-15'}}
})

template组件is属性：

is属性

<template name="odd">…
</template>
<template name="even">…
</template>
<block wx:for="{
   
   {[1, 2, 3, 4, 5]}}">
  <template is="{
   
   {item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

7.1.3自定义组件

component-tag-name.js

Component({
   
   
  properties: {
   
   
    value: {
   
   type: String,value: 'default value',}
  },
  data: {
   
   hello: '欢迎'},	
  methods: {
   
   }
})

component-tag-name.json

{
   
   
  "component": true
}

自定义组件结构和样式：
component-tag-name.wxml

<view class="red" bindtap="onTap"