init

init

Author: Cuieney

app.js

@@ -0,0 +1,30 @@
+//app.js
+App({
+  onLaunch: function () {
+    //调用API从本地缓存中获取数据
+    var logs = wx.getStorageSync('logs') || []
+    logs.unshift(Date.now())
+    wx.setStorageSync('logs', logs)
+  },
+  getUserInfo:function(cb){
+    var that = this
+    if(this.globalData.userInfo){
+      typeof cb == "function" && cb(this.globalData.userInfo)
+    }else{
+      //调用登录接口
+      wx.login({
+        success: function () {
+          wx.getUserInfo({
+            success: function (res) {
+              that.globalData.userInfo = res.userInfo
+              typeof cb == "function" && cb(that.globalData.userInfo)
+            }
+          })
+        }
+      })
+    }
+  },
+  globalData:{
+    userInfo:null
+  }
+})

app.json

@@ -0,0 +1,44 @@
+{
+  "pages":[
+    "pages/index/index",
+    "pages/logs/logs",
+    "pages/category/category",
+    "pages/rank/rank",
+    "pages/detail/detail"
+  ],
+  "window": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "change",
+    "navigationBarBackgroundColor": "#fbf9fe",
+    "backgroundColor": "#fbf9fe"
+  },
+  "tabBar": {
+    "color": "#dddddd",
+    "selectedColor": "#000000",
+    "borderStyle": "white",
+    "backgroundColor": "#ffffff",
+    "list": [{
+      "pagePath": "pages/index/index",
+      "iconPath": "image/[email protected]",
+      "selectedIconPath": "image/[email protected]",
+      "text": "首页"
+    }, {
+      "pagePath": "pages/category/category",
+      "iconPath": "image/[email protected]",
+      "selectedIconPath": "image/[email protected]",
+      "text": "分类"
+    },{
+      "pagePath": "pages/rank/rank",
+      "iconPath": "image/[email protected]",
+      "selectedIconPath": "image/[email protected]",
+      "text": "排行"
+    }]
+  },
+  "networkTimeout": {
+    "request": 10000,
+    "connectSocket": 10000,
+    "uploadFile": 10000,
+    "downloadFile": 10000
+  },
+  "debug": true
+}

app.wxss

@@ -0,0 +1,216 @@
+page {
+  background-color: #fbf9fe;
+  height: 100%;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  justify-content: space-between;
+}
+.page-header {
+  display: flex;
+  font-size: 32rpx;
+  color: #aaa;
+  justify-content: center;
+  margin-top: 50rpx;
+}
+.page-header-text {
+  padding: 20rpx 40rpx;
+  border-bottom: 1px solid #ccc; 
+}
+
+.page-body {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-grow: 1;
+  overflow-x: hidden;
+}
+.page-body-wrapper {
+  margin-top: 100rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+.page-body-wrapper form {
+  width: 100%;
+}
+.page-body-wording {
+  text-align: center;
+  padding: 200rpx 100rpx;
+}
+.page-body-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #fff;
+  margin-bottom: 50rpx;
+  width: 100%;
+  padding: 50rpx 0 150rpx 0;
+}
+.page-body-title {
+  margin-bottom: 100rpx;
+  font-size: 32rpx;
+}
+.page-body-text {
+  font-size: 30rpx;
+  line-height: 26px;
+  color: #ccc;
+}
+.page-body-text-small {
+  font-size: 24rpx;
+  color: #000;
+  margin-bottom: 100rpx;
+}
+.page-body-form {
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: 1px solid #eee;
+}
+.page-body-form-item {
+  display: flex;
+  align-items: center;
+  margin-left: 10rpx;
+  border-bottom: 1px solid #eee;
+  height: 80rpx;
+}
+.page-body-form-key {
+  width: 180rpx;
+}
+.page-body-form-value {
+  flex-grow: 1;
+}
+
+.page-body-form-picker {
+  display: flex;
+  justify-content: space-between;
+  height: 100rpx;
+  align-items: center;
+  font-size: 36rpx;
+  margin-left: 20rpx;
+  padding-right: 20rpx;
+  border-bottom: 1px solid #eee;
+}
+.page-body-form-picker-value {
+  color: #ccc;
+}
+
+.page-body-buttons {
+  width: 100%;
+}
+.page-body-button {
+  margin: 25rpx;
+}
+.page-body-button image {
+  width: 150rpx;
+  height: 150rpx;
+}
+.page-footer {
+  text-align: center;
+  color: #1aad19;
+  font-size: 24rpx;
+  margin: 20rpx 0;
+}
+
+.green{
+    color: #09BB07;
+}
+.red{
+    color: #F76260;
+}
+.blue{
+    color: #10AEFF;
+}
+.yellow{
+    color: #FFBE00;
+}
+.gray{
+    color: #C9C9C9;
+}
+
+.strong{
+    font-weight: bold;
+}
+
+.bc_green{
+    background-color: #09BB07;
+}
+.bc_red{
+    background-color: #F76260;
+}
+.bc_blue{
+    background-color: #10AEFF;
+    
+}
+.bc_yellow{
+    background-color: #FFBE00;
+}
+.bc_gray{
+    background-color: #C9C9C9;
+}
+
+.tc{
+    text-align: center;
+}
+
+.page input{
+    padding: 10px 15px;
+    background-color: #fff;
+}
+checkbox, radio{
+    margin-right: 5px;
+}
+
+.btn-area{
+    padding: 0 15px;
+}
+.btn-area button{
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.page {
+    min-height: 100%;
+    flex: 1;
+    background-color: #FBF9FE;
+    font-size: 16px;
+    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
+    overflow: hidden;
+}
+.page__hd{
+    padding: 40px;
+}
+.page__title{
+    display: block;
+    font-size: 20px;
+}
+.page__desc{
+    margin-top: 5px;
+    font-size: 14px;
+    color: #888888;
+}
+
+.section{
+    margin-bottom: 40px;
+}
+.section_gap{
+    padding: 0 15px;
+}
+.section__title{
+    margin-bottom: 8px;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+.section_gap .section__title{
+    padding-left: 0;
+    padding-right: 0;
+}
+.section__ctn{
+
+}

image/[email protected]

@@ -0,0 +1,41 @@
+{
+    Page({
+      data:{
+        list:[],
+      },
+      onLoad:function(options){
+        // 生命周期函数--监听页面加载
+        var that = this;
+        wx.request( {
+        url: 'https://api.change.so/v1/categories.json',
+        header: {
+            // 'Content-Type': 'application/json'
+        },
+        success: function( res ) {
+          console.log(res);
+          that.setData({
+            list:res.data.categories,
+          });
+        },
+        fail: function( res ) {
+          console.log(res);
+        }
+    });
+      },
+      onPullDownRefresh: function() {
+        // 页面相关事件处理函数--监听用户下拉动作
+
+      },
+      onReachBottom: function() {
+        // 页面上拉触底事件的处理函数
+      },
+      onShareAppMessage: function() {
+        // 用户点击右上角分享
+        return {
+          title: 'title', // 分享标题
+          desc: 'desc', // 分享描述
+          path: 'path' // 分享路径
+        }
+      }
+    })
+}

image/[email protected]

@@ -0,0 +1,3 @@
+{
+    "enablePullDownRefresh": true
+}

image/[email protected]

@@ -0,0 +1,38 @@
+
+<view class="container" style="color:#000;width:100%; height:30%">
+
+ <navigator 
+ style="display: flex;align-items:center; justify-content:center;width: 100%; height:40%;background-size: 100%; background-image: url({{list[0].cover}});"
+ url="../detail/detail?url=https://api.change.so/v1/categories/2/videos.json">
+<view style="display: flex;align-items:center; justify-content:center;width: 100%; height:40%; ">
+      <text class="text">{{list[0].name}}</text>
+</view>
+</navigator>
+<view style="display: flex;flex-direction: row; width:100%; height:30%">
+     <navigator 
+     class="other" style=" background-size: 100%; background-image: url({{list[1].cover}});"
+     url="../detail/detail?url=https://api.change.so/v1/categories/9/videos.json">
+    <text class="text">{{list[1].name}}</text>
+    </navigator>
+
+    <navigator 
+     class="other" style=" background-size: 100%; background-image: url({{list[2].cover}});"
+     url="../detail/detail?url=https://api.change.so/v1/categories/4/videos.json">
+    <text class="text">{{list[2].name}}</text>
+     </navigator>
+</view>
+
+<view style="display: flex;flex-direction: row; width:100%; height:30%;">
+<navigator 
+     class="other" style=" background-size: 100%; background-image: url({{list[3].cover}});"
+     url="../detail/detail?url=https://api.change.so/v1/categories/11/videos.json">
+    <text class="text">{{list[3].name}}</text>
+    </navigator>
+
+    <navigator 
+     class="other" style=" background-size: 100%; background-image: url({{list[4].cover}});"
+     url="../detail/detail?url=https://api.change.so/v1/categories/5/videos.json">
+    <text class="text">{{list[4].name}}</text>
+    </navigator>
+</view>
+</view>