Przeglądaj źródła

小程序:路由

大侠 2 lat temu
rodzic
commit
58b85c72a3

+ 27 - 8
16_miniapp/day-4/code/app.json

@@ -1,14 +1,33 @@
 {
-  "pages":[
+  "pages": [
     "pages/index/index",
-    "pages/logs/logs"
+    "pages/camera/camera",
+    "pages/my/my"
   ],
-  "window":{
-    "backgroundTextStyle":"light",
-    "navigationBarBackgroundColor": "#fff",
-    "navigationBarTitleText": "Weixin",
-    "navigationBarTextStyle":"black"
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarTitleText": "迷你电影",
+    "navigationBarTextStyle": "white",
+    "navigationBarBackgroundColor": "#5ea875"
+  },
+  "tabBar": {
+    "list": [{
+      "pagePath": "pages/index/index",
+      "text": "主页",
+      "iconPath": "images/home_icon.png",
+      "selectedIconPath": "images/home_active_icon.png"
+    }, {
+      "pagePath": "pages/camera/camera",
+      "text": "影院",
+      "iconPath": "images/dianying.png",
+      "selectedIconPath": "images/dianying_active.png"
+    }, {
+      "pagePath": "pages/my/my",
+      "text": "我的",
+      "iconPath": "images/my_icon.png",
+      "selectedIconPath": "images/my_active_icon.png"
+    }]
   },
   "style": "v2",
   "sitemapLocation": "sitemap.json"
-}
+}

BIN
16_miniapp/day-4/code/images/dianying.png


BIN
16_miniapp/day-4/code/images/dianying_active.png


BIN
16_miniapp/day-4/code/images/home_active_icon.png


BIN
16_miniapp/day-4/code/images/home_icon.png


BIN
16_miniapp/day-4/code/images/my_active_icon.png


BIN
16_miniapp/day-4/code/images/my_icon.png


BIN
16_miniapp/day-4/code/images/search_active_icon.png


BIN
16_miniapp/day-4/code/images/search_icon.png


+ 66 - 0
16_miniapp/day-4/code/pages/camera/camera.js

@@ -0,0 +1,66 @@
+// pages/camera/camera.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

+ 4 - 0
16_miniapp/day-4/code/pages/camera/camera.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "迷你影院"
+}

+ 4 - 0
16_miniapp/day-4/code/pages/camera/camera.wxml

@@ -0,0 +1,4 @@
+<!--pages/camera/camera.wxml-->
+<text>pages/camera/camera.wxml</text>
+<navigator url="../index/index" open-type="navigateTo">回到主页-错误</navigator>
+<navigator url="../index/index" open-type="switchTab">回到主页-正确的</navigator>

+ 1 - 0
16_miniapp/day-4/code/pages/camera/camera.wxss

@@ -0,0 +1 @@
+/* pages/camera/camera.wxss */

+ 0 - 18
16_miniapp/day-4/code/pages/logs/logs.js

@@ -1,18 +0,0 @@
-// logs.js
-const util = require('../../utils/util.js')
-
-Page({
-  data: {
-    logs: []
-  },
-  onLoad() {
-    this.setData({
-      logs: (wx.getStorageSync('logs') || []).map(log => {
-        return {
-          date: util.formatTime(new Date(log)),
-          timeStamp: log
-        }
-      })
-    })
-  }
-})

+ 0 - 4
16_miniapp/day-4/code/pages/logs/logs.json

@@ -1,4 +0,0 @@
-{
-  "navigationBarTitleText": "查看启动日志",
-  "usingComponents": {}
-}

+ 0 - 6
16_miniapp/day-4/code/pages/logs/logs.wxml

@@ -1,6 +0,0 @@
-<!--logs.wxml-->
-<view class="container log-list">
-  <block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
-    <text class="log-item">{{index + 1}}. {{log.date}}</text>
-  </block>
-</view>

+ 0 - 8
16_miniapp/day-4/code/pages/logs/logs.wxss

@@ -1,8 +0,0 @@
-.log-list {
-  display: flex;
-  flex-direction: column;
-  padding: 40rpx;
-}
-.log-item {
-  margin: 10rpx;
-}

+ 72 - 0
16_miniapp/day-4/code/pages/my/my.js

@@ -0,0 +1,72 @@
+// pages/my/my.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  gotoCameraPage(){
+    wx.switchTab({
+      url: '../camera/camera',
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

+ 4 - 0
16_miniapp/day-4/code/pages/my/my.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "我的"
+}

+ 3 - 0
16_miniapp/day-4/code/pages/my/my.wxml

@@ -0,0 +1,3 @@
+<!--pages/my/my.wxml-->
+<text>pages/my/my.wxml</text>、
+<button bindtap="gotoCameraPage">回到影院</button>

+ 1 - 0
16_miniapp/day-4/code/pages/my/my.wxss

@@ -0,0 +1 @@
+/* pages/my/my.wxss */

+ 34 - 0
16_miniapp/day-4/test.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      .box {
+        width: 500px;
+        height: 400px;
+        margin: 50px auto;
+      }
+
+      .box .box-item {
+        width: 100px;
+        height: 100px;
+        background-color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="box">
+      <div class="box-item">欧巴</div>
+    </div>
+    <script>
+      document
+        .querySelector('.box-item')
+        .addEventListener('click', function (e) {
+          console.log(e);
+        });
+    </script>
+  </body>
+</html>