hzuapps#84 邱博洪期末作业 开发一个查询王者荣耀小程序

1517060324/20171025/app.js

@@ -0,0 +1,39 @@
+//app.js
+App({
+  onLaunch: function () {
+    // 展示本地存储能力
+    var logs = wx.getStorageSync('logs') || []
+    logs.unshift(Date.now())
+    wx.setStorageSync('logs', logs)
+
+    // 登录
+    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
+
+              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
+              // 所以此处加入 callback 以防止这种情况
+              if (this.userInfoReadyCallback) {
+                this.userInfoReadyCallback(res)
+              }
+            }
+          })
+        }
+      }
+    })
+  },
+  globalData: {
+    userInfo: null
+  }
+})

1517060324/20171025/app.json

@@ -0,0 +1,45 @@
+{
+  "pages":[
+    "pages/comp/scroll",
+    "pages/index/index",
+    "pages/form/form",
+    "pages/test/test",
+    "pages/example/icons/icons",
+    "pages/example/article/article",
+    "pages/example/list/list",
+    "pages/example/grid/grid"
+  ],
+  "window":{
+    "backgroundTextStyle":"light",
+    "navigationBarBackgroundColor": "#4c4c4c",
+    "navigationBarTitleText": "王者荣耀",
+    "navigationBarTextStyle":"whlie"
+  },
+  "tabBar": {
+    "color": "#a9b7b7",
+    "selectedColor": "#1296db",
+    "borderStyle": "white",
+    "backgroundColor":"#4c4c4c",
+    "list": [
+      {
+        "selectedIconPath": "/pages/images/3.png",
+        "iconPath": "/pages/images/33.png",
+        "pagePath": "pages/comp/scroll",
+        "text": "首页"
+      },
+      {
+        "selectedIconPath": "/pages/images/1.png",
+        "iconPath": "/pages/images/11.png",
+        "pagePath": "pages/index/index",
+        "text": "发现"
+      },
+      {
+        "selectedIconPath": "/pages/images/2.png",
+        "iconPath": "/pages/images/22.png",
+        "pagePath": "pages/form/form",
+        "text": "设置"
+      }
+    ]
+  }
+
+}

1517060324/20171025/app.wxss

@@ -0,0 +1,11 @@
+/**app.wxss**/
+@import 'style/weui.wxss';
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0;
+  box-sizing: border-box;
+} 

1517060324/20171025/pages/comp/scroll.js

@@ -0,0 +1,123 @@
+// pages/comp/scroll.js
+var base64 = require("../example/images/base64");
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    isEnd: false,
+    messages: [{
+      name: "王者",
+      last: "您好！"
+    }, {
+        name: "荣耀",
+      last: "您好！"
+    }, {
+        name: "貂蝉",
+      last: "您好！"
+    }, {
+        name: "小学生",
+      last: "您好！"
+    } , {
+        name: "很坑",
+      last: "您好！"
+    }, {
+        name: "邱博洪",
+      last: "您好！"
+    }, {
+        name: "邱博洪",
+      last: "您好！"
+    }, {
+        name: "邱博洪",
+      last: "您好！"
+    }, {
+        name: "邱博洪",
+      last: "您好！"
+    }, {
+        name: "邱博洪",
+      last: "您好！"
+    }, {
+        name: "邱博洪",
+      last: "您好！"
+      }
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.setData({
+      icon20: base64.icon20,
+      icon60: base64.icon60
+    });
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+
+  onEnd: function () {
+    console.log("onEnd")
+    var that = this;
+    var data = that.data;
+    that.setData({
+      isEnd: true /*,
+      messages: data.messages.concat([{
+        name: "Tom",
+        last: "Hello!"
+      }, {
+        name: "john",
+        last: "yes."
+      }]) */
+    });
+
+  }
+})

1517060324/20171025/pages/comp/scroll.json

@@ -0,0 +1 @@
+{}

1517060324/20171025/pages/comp/scroll.wxml

@@ -0,0 +1,27 @@
+<!--pages/comp/scroll.wxml-->
+<scroll-view class="page" bindtouchend='onEnd'>
+    <view class="page__hd">
+        <view class="page__title">王者荣耀</view>
+        <view class="page__desc">King of Glory</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-panel weui-panel_access">
+            <view class="weui-panel__hd"></view>
+            <view class="weui-panel__bd">
+                <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active" wx:for="{{messages}}">
+                    <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
+                        <image class="weui-media-box__thumb" src="/pages/example/images/123.png" />
+                    </view>
+                    <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
+                        <view class="weui-media-box__title">{{index}} {{item.name}}</view>
+                        <view class="weui-media-box__desc">{{item.last}}</view>
+                    </view>
+                </navigator>
+            </view>
+        </view>
+        <view class='weui-loadmore' wx:if="{{isEnd}}">
+          <view class='weui-loading'></view>
+          <view class='weui-loadmore__tips'>正在加载……</view>
+        </view>
+    </view>
+</scroll-view>

1517060324/20171025/pages/comp/scroll.wxss

@@ -0,0 +1 @@
+/* pages/comp/scroll.wxss */

1517060324/20171025/pages/example/actionsheet/actionsheet.js

@@ -0,0 +1,12 @@
+Page({
+    open: function(){
+        wx.showActionSheet({
+            itemList: ['A', 'B', 'C'],
+            success: function(res) {
+                if (!res.cancel) {
+                    console.log(res.tapIndex)
+                }
+            }
+        });
+    }
+});

1517060324/20171025/pages/example/actionsheet/actionsheet.wxml

@@ -0,0 +1,11 @@
+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">ActionSheet</view>
+        <view class="page__desc">弹出式菜单，采用小程序原生的actionsheet</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-btn-area">
+            <button type="default" bindtap="open">ActionSheet</button>
+        </view>
+    </view>
+</view>

1517060324/20171025/pages/example/actionsheet/actionsheet.wxss

@@ -0,0 +1,3 @@
+page{
+    background-color: #FFFFFF;
+}

1517060324/20171025/pages/example/article/article.js

@@ -0,0 +1 @@
+Page({});

1517060324/20171025/pages/example/article/article.json

@@ -0,0 +1 @@
+{}

1517060324/20171025/pages/example/article/article.wxml

@@ -0,0 +1,30 @@
+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">王者荣耀</view>
+        <view class="page__desc">2015年腾讯天美发行的MOBA手游</view>
+    </view>
+    <view class="page__bd">
+        <view class="weui-article">
+            <view class="weui-article__h1">腾讯游戏</view>
+            <view class="weui-article__section">
+                <view class="weui-article__title">King of Glory</view>
+                <view class="weui-article__section">
+                    <view class="weui-article__h3">2015年11月26日公测</view>
+                    <view class="weui-article__p">
+                        《王者荣耀》是由腾讯游戏开发并运行的一款运营在Android、IOS平台上的MOBA类手游，于2015年11月26日在Android、IOS平台上正式公测，游戏前期使用名称有《英雄战迹》、《王者联盟》。
+                    </view>
+                    <view class="weui-article__p">
+                        <image class="weui-article__img" src="../images/88.jpeg" mode="aspectFit" style="height: 180px" />
+                        <image class="weui-article__img" src="../images/77.jpg" mode="aspectFit" style="height: 180px" />
+                    </view>
+                </view>
+                <view class="weui-article__section">
+                    <view class="weui-article__h3">King of Glory</view>
+                    <view class="weui-article__p">
+                       游戏是类moba手游，游戏中的玩法以竞技对战为主，玩家之间进行1V1、3V3、5V5等多种方式的PVP对战，还可以参加游戏的冒险模式，进行PVE的闯关模式，在满足拥有五个英雄的条件后可以参加游戏的季度排位赛等。
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</view>

1517060324/20171025/pages/example/article/article.wxss

@@ -0,0 +1,6 @@
+page{
+    background-color: #FFFFFF;
+}
+image{
+    margin: 4px 0;
+}

1517060324/20171025/pages/example/badge/badge.js

@@ -0,0 +1 @@
+Page({});

1517060324/20171025/pages/example/badge/badge.wxml

@@ -0,0 +1,54 @@
+<view class="page">
+    <view class="page__hd">
+        <view class="page__title">Badge</view>
+        <view class="page__desc">徽章</view>
+    </view>
+
+    <view class="page__bd">
+        <view class="weui-cells__title">新消息提示跟摘要信息后，统一在列表右侧</view>
+        <view class="weui-cells weui-cells_after-title">
+            <view class="weui-cell weui-cell_access">
+                <view class="weui-cell__bd">单行列表</view>
+                <view class="weui-cell__ft weui-cell__ft_in-access" style="font-size: 0">
+                    <view style="display: inline-block;vertical-align:middle; font-size: 17px;">详细信息</view>
+                    <view class="weui-badge weui-badge_dot" style="margin-left: 5px;margin-right: 5px;"></view>
+                </view>
+            </view>
+        </view>
+
+        <view class="weui-cells__title">未读数红点跟在主题信息后，统一在列表左侧</view>
+        <view class="weui-cells weui-cells_after-title">
+            <view class="weui-cell">
+                <view class="weui-cell__hd" style="position: relative;margin-right: 10px;">
+                    <image src="../images/pic_160.png" style="width: 50px; height: 50px; display: block"/>
+                    <view class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;">8</view>
+                </view>
+                <view class="weui-cell__bd">
+                    <view>联系人名称</view>
+                    <view style="font-size: 13px;color: #888888;">摘要信息</view>
+                </view>
+            </view>
+            <view class="weui-cell weui-cell_access">
+                <view class="weui-cell__bd">
+                    <view style="display: inline-block; vertical-align: middle">单行列表</view>
+                    <view class="weui-badge" style="margin-left: 5px;">8</view>
+                </view>
+                <view class="weui-cell__ft weui-cell__ft_in-access"></view>
+            </view>
+            <view class="weui-cell weui-cell_access">
+                <view class="weui-cell__bd">
+                    <view style="display: inline-block; vertical-align: middle">单行列表</view>
+                    <view class="weui-badge" style="margin-left: 5px;">8</view>
+                </view>
+                <view class="weui-cell__ft weui-cell__ft_in-access">详细信息</view>
+            </view>
+            <view class="weui-cell weui-cell_access">
+                <view class="weui-cell__bd">
+                    <view style="display: inline-block; vertical-align: middle">单行列表</view>
+                    <view class="weui-badge" style="margin-left: 5px;">New</view>
+                </view>
+                <view class="weui-cell__ft weui-cell__ft_in-access"></view>
+            </view>
+        </view>
+    </view>
+</view>

1517060324/20171025/pages/example/button/button.js

@@ -0,0 +1 @@
+Page({});