hzuapps#7 hzuapps#730 第七次实验

1614080902227/wx/app.js

@@ -1,39 +1,32 @@
 //app.js
 App({
+
+  /**
+   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
+   */
   onLaunch: function () {
-    // 展示本地存储能力
-    var logs = wx.getStorageSync('logs') || []
-    logs.unshift(Date.now())
-    wx.setStorageSync('logs', logs)
+  },
+
+  /**
+   * 当小程序启动，或从后台进入前台显示，会触发 onShow
+   */
+  onShow: function (options) {
+  },
 
-    // 登录
-    wx.login({
-      success: res => {
-        // 发送 res.code 到后台换取 openId, sessionKey, unionId
-      }
-    })
-    // 获取用户信息
-    wx.getSetting({
-      success: res => {
-        if (res.authSetting['scope.userInfo']) {
-          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
-          wx.getUserInfo({
-            success: res => {
-              // 可以将 res 发送给后台解码出 unionId
-              this.globalData.userInfo = res.userInfo
+  /**
+   * 当小程序从前台进入后台，会触发 onHide
+   */
+  onHide: function () {
+  },
 
-              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
-              // 所以此处加入 callback 以防止这种情况
-              if (this.userInfoReadyCallback) {
-                this.userInfoReadyCallback(res)
-              }
-            }
-          })
-        }
-      }
-    })
+  /**
+   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
+   */
+  onError: function (msg) {
+
   },
-  globalData: {
-    userInfo: null
+
+  appData : {
+    userinfo : null,
   }
-})
+})

1614080902227/wx/app.json

@@ -1,27 +1,35 @@
 {
-  "pages":[
+  "pages": [
     "pages/index/index",
     "pages/logs/logs",
-    "pages/setpage/setpage"
+    "pages/setpage/setpage",
+    "pages/login/login"
   ],
-  "window":{
-    "backgroundTextStyle":"light",
+  "window": {
+    "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
     "navigationBarTitleText": "电子书阅读",
-    "navigationBarTextStyle":"black"
+    "navigationBarTextStyle": "black"
   },
   "tabBar": {
+    "selectedColor": "#1afa29",
     "list": [
       {
         "pagePath": "pages/index/index",
+        "iconPath": "image/zhuye.png",
+        "selectedIconPath": "image/zhuyes.png",
         "text": "主页"
       },
       {
         "pagePath": "pages/logs/logs",
+        "iconPath": "image/shequ.png",
+        "selectedIconPath": "image/shequs.png",
         "text": "社区"
       },
       {
-        "pagePath": "pages/logs/logs",
+        "pagePath": "pages/setpage/setpage",
+        "iconPath": "image/geren.png",
+        "selectedIconPath": "image/gerens.png",
         "text": "个人"
       }
     ]
@@ -34,4 +42,4 @@
   "navigateToMiniProgramAppIdList": [
     "wxe5f52902cf4de896"
   ]
-}
+}

1614080902227/wx/pages/index/index.js

@@ -3,52 +3,79 @@
 const app = getApp()
 
 Page({
+
+  /**
+   * 页面的初始数据
+   */
   data: {
-    motto: 'Hello World',
-    userInfo: {},
-    hasUserInfo: false,
-    canIUse: wx.canIUse('button.open-type.getUserInfo')
-  },
-  //事件处理函数
-  bindViewTap: function() {
-    wx.navigateTo({
-      url: '../logs/logs'
-    })
-  },
-  onLoad: function () {
-    if (app.globalData.userInfo) {
-      this.setData({
-        userInfo: app.globalData.userInfo,
-        hasUserInfo: true
-      })
-    } else if (this.data.canIUse){
-      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
-      // 所以此处加入 callback 以防止这种情况
-      app.userInfoReadyCallback = res => {
-        this.setData({
-          userInfo: res.userInfo,
-          hasUserInfo: true
-        })
-      }
-    } else {
-      // 在没有 open-type=getUserInfo 版本的兼容处理
-      wx.getUserInfo({
-        success: res => {
-          app.globalData.userInfo = res.userInfo
-          this.setData({
-            userInfo: res.userInfo,
-            hasUserInfo: true
-          })
-        }
-      })
-    }
-  },
-  getUserInfo: function(e) {
-    console.log(e)
-    app.globalData.userInfo = e.detail.userInfo
-    this.setData({
-      userInfo: e.detail.userInfo,
-      hasUserInfo: true
-    })
+    imageWidth:0,
+    imgUrls: [
+      'http://img0.pcgames.com.cn/pcgames/1809/19/7223032_1.jpg',
+      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543338932740&di=7be8bb583eca9d84d285a0f98ec8638b&imgtype=0&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2Fd89b47363ca61f00848f63086f4a8a9a.jpeg',
+      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543337618033&di=1f1ea878a88f9129f000ca401fe79065&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3Da24f2299412309f7e73aa516473e20c5%2Ffaedab64034f78f01a33adfe7e310a55b3191c86.jpg',
+      'https://img.52z.com/upload/news/image/20180505/20180505060619_23197.jpg',
+
+    ],
+    indicatorDots : true,
+    autoplay : true,
+    interval : 2000,
+    duration : 500,
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.setData({imageWidth : wx.getSystemInfoSync().windowWidth});
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
   }
 })

1614080902227/wx/pages/index/index.json

@@ -1 +1,6 @@
-{}
+{
+  "backgroundTextStyle": "light",
+  "navigationBarBackgroundColor": "#fff",
+  "navigationBarTitleText": "首页",
+  "navigationBarTextStyle": "black"
+}

1614080902227/wx/pages/index/index.wxml

@@ -1,14 +1,98 @@
 <!--index.wxml-->
-<view class="container">
-  <view class="userinfo">
-    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
-    <block wx:else>
-      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
-      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
+<view style='background:#E6E6E6'>
+  <swiper  indicator-dots="{{indicatorDots}} "
+    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
+    <block wx:for="{{imgUrls}}">
+      <swiper-item>
+        <image src="{{item}}" class="slide-image" style='width :{{imageWidth}}px' height="150"/>
+      </swiper-item>
     </block>
+  </swiper>
+  <view class='type' style='background-color:white'>
+    <button class='button1' style='background-color:#00FFFF'>
+      <text class='text-more'>玄幻奇幻</text>
+    </button>
+    <button class='button1' style='background-color:#F76809'>
+    <text class='text-more'>武侠仙侠</text>
+    </button>
+    <button class='button1' style='background-color:#99AA55'>
+    <text class='text-more'>都市言情</text>
+    </button>
+    <button class='button1' style='background-color:#3C57C4'>
+    <text class='text-more'>女生频道</text>
+    </button>
   </view>
-  <view class="usermotto">
-    <text class="user-motto">{{motto}}</text>
+  <view class='view1'>
+      <view class='view-head'>
+        <text class='text-head'>精品推荐</text>
+        <button class='button-more'>
+          <text class='text-more' >更多</text>
+        </button>
+      </view>
+      <view class='view-content'>
+          <view class='content-item'>
+            <image class='image1' src='http://img.zcool.cn/community/017cdd58fe0278a801214550610e21.jpg'></image>
+            <text class='text-image'>楚留香新传</text>
+          </view>
+          <view class='content-item'>
+           <image class='image1' src='http://hbimg.b0.upaiyun.com/026085b791f9c5f6a0ebaad2b218c22549ab82ec6fee0-HJuMZI_fw658'></image>
+            <text class='text-image'>天煞魔君</text>
+          </view>
+          <view class='content-item'>
+           <image class='image1' src='http://image2.sina.com.cn/gm/ul/2006/1130/U563P115DT20061130151318.jpg'></image>
+            <text class='text-image'>诛仙</text>
+          </view>
+          <view class='content-item'>
+          <image class='image1' src='http://img2.cache.netease.com/game/2015/2/28/20150228110547085db.jpg'></image>
+            <text class='text-image'>大主宰</text>
+          </view>
+          <view class='content-item'>
+           <image class='image1' src='http://img0.100bt.com/dynamic/getImg/force/?width=110&height=144&src=http://img3.a0bi.com/upload/articleResource/20160226/1456478466279.jpg'></image>
+            <text class='text-image'>莽荒纪</text>
+          </view>
+          <view class='content-item'>
+          <image class='image1' src='http://img0.100bt.com/dynamic/getImg/force/?width=110&height=144&src=http://img2.a0bi.com/upload/gw/novel/20151204/4302.jpg'></image>
+            <text class='text-image'>全职法师</text>
+          </view>
+      </view>
+    </view>
+    <view class='view1'>
+      <view class='view-head'>
+        <text class='text-head'>火热新书</text>
+        <button class='button-more'>
+          <text class='text-more' >更多</text>
+        </button>
+      </view>
+      <view class='view-content'>
+         <view class='content-item'>
+            <image class='image2' src='http://img0.100bt.com/dynamic/getImg/force/?width=110&height=144&src=http://img4.a0bi.com/upload/articleResource/20180102/1514878345869.jpg'></image>
+         </view>
+         <view class='view-content-text'>
+            <text class='text-introduce' style='margin-top:12px'>玄阳天尊</text>
+            <text class='text-introduce'>玄幻奇幻 | 环城路飙车</text>
+            <text class='text-introduce2'>“天下悠悠众口何以能尽数堵住，尽是一些道貌岸然的无胆鼠辈，当吾君临天下、主宰四合八荒之时..”</text>
+         </view>
+      </view>
+      <view class='view-content'>
+         <view class='content-item'>
+            <image class='image2' src='http://img0.100bt.com/dynamic/getImg/force/?width=110&height=144&src=http://img4.a0bi.com/upload/articleResource/20180315/1521083585261.jpg'></image>
+         </view>
+         <view class='view-content-text'>
+            <text class='text-introduce' style='margin-top:12px'>鸿武战神</text>
+            <text class='text-introduce'>其它   | 千朽千沉</text>
+            <text class='text-introduce2'>“千年古墓坍塌，情势危急，齐浊皓躲入了古墓中的一口神异棺材中！当他再次醒来时，赫然发现..”</text>
+         </view>
+      </view>
+      <view class='view-content'>
+         <view class='content-item'>
+            <image class='image2' src='http://img0.100bt.com/dynamic/getImg/force/?width=110&height=144&src=http://img4.a0bi.com/upload/articleResource/20180316/1521169532481.jpg'></image>
+         </view>
+         <view class='view-content-text'>
+            <text class='text-introduce' style='margin-top:12px'>血色的青春</text>
+            <text class='text-introduce'>军事    | 寒麟灏</text>
+            <text class='text-introduce2'>“我们愿秉承先烈遗志，为了世界百姓的安宁，抛头颅，撒热血，为我们心中的理想奋斗一生。就算我们..”</text>
+         </view>
+      </view>
   </view>
-
 </view>
+