小程序

16.小程序/components/header/header.js

@@ -0,0 +1,24 @@
+// components/header/header.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

16.小程序/components/header/header.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

16.小程序/components/header/header.wxml

@@ -0,0 +1,6 @@
+<!--components/header/header.wxml-->
+<view>
+  <view class="head">
+    头部模版
+  </view>
+</view>

16.小程序/components/header/header.wxss

@@ -0,0 +1,10 @@
+/* components/header/header.wxss */
+.head {
+  width: 100vw;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #f00;
+  background-color: #ff0;
+}

16.小程序/pages/home/home.js

@@ -25,7 +25,32 @@ Page({
     },
     week:6
   },
-
+  showMain() {
+    console.log("你好")
+    wx.showToast({
+      title: 'hi',
+    })
+  },
+  showMsg() {
+    wx.showToast({
+      title: 'Msg',
+    })
+  },
+  showWord1() {
+    console.log("红色")
+  },
+  showWord2(event) {
+    console.log("黄色",event)
+  },
+  changePart1() {
+    console.log(1)
+  },
+  changePart2() {
+    console.log(2)
+  },
+  changePart3() {
+    console.log(3)
+  },
   /**
    * 生命周期函数--监听页面加载
    */

16.小程序/pages/home/home.json

@@ -1,5 +1,7 @@
 {
-  "usingComponents": {},
+  "usingComponents": {
+    "header1":"../../components/header/header"
+  },
   "enablePullDownRefresh": true,
   "navigationBarTitleText": "首页"
 }

16.小程序/pages/home/home.wxml

@@ -1,5 +1,6 @@
 <view>
-<view>首页</view>
+  <header1></header1>
+  <view>首页</view>
   <!-- 循环渲染 -->
   <view wx:for="{{arr}}" wx:for-item="item" wx:key="index">
     {{index+1}}--我叫{{item.name}}--今年{{item.age}}岁
@@ -10,4 +11,19 @@
   <view wx:if="{{week <= 3}}">这周才刚刚开始</view>
   <view wx:elif="{{week <= 5}}">这周快结束了</view>
   <view wx:else="{{week >= 6}}">放假不积极</view>
+  <button bind:tap="showMain">按钮</button>
+  <button catch:tap="showMsg">按钮1</button>
+  <!-- <button v-bind:click="showMain">按钮</button> -->
+  <input class="inp" type="text" />
+  <!-- 引用 -->
+  <template name="hi">
+    <view>今天星期{{week}}</view>
+  </template>
+  <!-- bind 与 catch -->
+  <view class="box" bind:tap="showWord1">
+    <view class="box1" bind:tap="showWord2"></view>
+  </view>
+    <input type="text" bindinput="changePart1" bind:tap="changePart2"  bindconfirm="changePart3" />
+
+    
 </view>

16.小程序/pages/home/home.wxss

@@ -1 +1,21 @@
-/* pages/home/home.wxss */
+/* pages/home/home.wxss */
+/* 引用外部样式 */
+@import './test.wxss';
+.inp {
+  width: 100rpx;
+  height: 100rpx;
+  border: 2px solid #f00;
+}
+/* view {
+  color: purple;
+} */
+.box {
+  width: 500rpx;
+  height: 500rpx;
+  background: #f00;
+}
+.box1 {
+  width: 300rpx;
+  height: 300rpx;
+  background: #ff0;
+}

16.小程序/pages/home/test.wxss

@@ -0,0 +1,3 @@
+view {
+  color: purple;
+}

16.小程序/pages/list/list.wxml

@@ -1,2 +1,6 @@
 <!--pages/list/list.wxml-->
-<text>pages/list/list.wxml</text>
+<text>pages/list/list.wxml</text>
+<!-- 引入 -->
+<!-- <import src="../home/home"/>
+<template is="hi" data="{{week:'二'}}" /> -->
+<!-- <include src="../home/home"></include> -->