:tada:

README.md

@@ -0,0 +1,60 @@
+# 七彩童年
+
+## 账号
+
+appId: ;
+
+secert: ;(注：secert可以更改);
+
+[登录微信公共平台](https://mp.weixin.qq.com/);
+
+账号：pukaiji@jscnnet.com， 密码：Baron4321;
+
+登录成功后需要管理员扫码便可进行小程序的相关操作(如审核、发布、配置合法域名等);
+
+特别说明：审核过了，需要提交发布才能更新线上的小程序;
+
+## 关于二维码生成规则说明
+
+生成规则详见[微信小程序获取二维码](https://mp.weixin.qq.com/debug/wxadoc/dev/api/qrcode.html)
+
+## 关于代码
+
+代码实现思路
+
+本来打算使用微信自己的底部切换，就是在app.json中配置，缺点：不能自己定义样式，就给否决了，在index页面封装了切换组件，并引入component中的组件，
+也需要引入样式和js,代码当中会有注释。
+utils中httpRequest封装了一下wx.request的请求方法，const主要就是接口地址,APIRequest主要是项目接口调用的方法，utils就是一些公用的方法封装。
+也可以使用美团出的一个框架mpvue，这个暂时没用过，跟vue差不多，vue语法自己可以打包生成小程序代码，项目周期比较紧张，就没用，以后可能会用到。
+
+目录结构如下
+
+```
+├── README.md
+├── app.js      // 小程序逻辑
+├── app.json    // 小程序公共设置
+├── app.wxss    // 小程序公共样式表式
+|
+├── pages   // 所有的页面都在这里
+│   ├── details     //  视频详情页
+│   ├── index       //  首页
+│   ├── setName      // 设置个人信息页面
+|
+├── component   // 所有的组件都在这里
+│   ├── look     //  看的组件
+│   ├── mys      //  我的组件
+│   ├── search      // 搜的组件
+│  
+|——static //静态文件
+|   |——image //图片
+|
+|     
+└── utils					// 公共文件夹
+    ├── APIRequest.js        // 所有的接口请求都在这
+    ├── httpRequest.js        // 重新封装了一下微信请求接口
+    ├── const.js        // 定义了一些常量
+    ├── httputil.js     // 小程序注册登录的代码
+    └── util.js     // 一些公共的方法
+```
+
+代码中方法基本都有注释

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
+  }
+})

app.json

@@ -0,0 +1,13 @@
+{
+  "pages": [
+    "pages/index/index",
+    "pages/details/details",
+    "pages/setName/setName"
+  ],
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#eaeaea",
+    "navigationBarTitleText": "江苏有线七彩童年",
+    "navigationBarTextStyle": "black"
+  }
+}

app.wxss

@@ -0,0 +1,15 @@
+/**app.wxss**/
+page {
+  width: 100%;
+  height: 100%;
+}
+.container {
+  width: 100%;
+  height: 100%;
+  background: #eaeaea;
+  box-sizing: border-box;
+} 
+
+::-webkit-scrollbar {
+  display:none;
+}

component/look/look.js

@@ -0,0 +1,50 @@
+// component/look/look.js
+import httpRequestApi from '../../utils/APIRequest';
+export const lookInit =  (that) => {
+  that.setData({
+    lookData: {
+      nav: ['看动画', '学知识', '育儿经'],
+      lookInd: 0,
+      lookList: [],
+    }
+  })
+  //点击更改数据
+  that.lookChoice = ({ currentTarget }) => {
+    that.data.lookData.lookInd = currentTarget.dataset.index;
+    that.setData({
+      lookData: that.data.lookData
+    })
+    //数据请求
+    that.httpList(detail.current + 1)
+  }
+  //滑动更改数据
+  that.lookSlide = ({ detail }) => {
+    that.data.lookData.lookInd = detail.current;
+    // console.log(detail.current);
+    that.setData({
+      lookData: that.data.lookData
+    })
+    that.httpList(detail.current + 1)
+  }
+  //跳转到详情页
+  that.details = ({ currentTarget }) => {
+    const id = currentTarget.dataset.id;
+    wx.navigateTo({
+      url: '/pages/details/details?id=' + id 
+    })
+  }
+  //请求数据封装
+  that.httpList = (ind) => {
+    httpRequestApi.getCourse({
+      categoryId: ind
+    }).success((res)=>{
+      console.log(res);
+      that.data.lookData.lookList = res.data.data.list;
+      that.setData({
+        lookData: that.data.lookData
+      })
+    })
+  }
+  //初始数据
+  that.httpList(1)
+}

component/look/look.json

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

component/look/look.wxml

@@ -0,0 +1,21 @@
+<!--component/look/look.wxml-->
+<template name="look">
+    <view class="nav">
+        <block wx:for="{{lookData.nav}}" wx:key="{{index}}">
+            <view class="{{index == lookData.lookInd ? 'slecte-nav' : ''}}" bindtap="lookChoice" data-index="{{index}}">{{item}}</view>
+        </block>
+    </view>
+    <swiper current="{{lookData.lookInd}}" bindchange="lookSlide">
+        <block wx:for="{{lookData.nav}}" wx:key="{{index}}">
+            <swiper-item style="height: auto;">
+                <scroll-view class="scroll-view" scroll-y>
+                    <view class="look-video">
+                        <view class="look-item" wx:for="{{lookData.lookList}}" wx:key="{{index}}" bindtap="details" data-id="{{item.id}}">
+                            <image src="{{item.iconImg}}"></image>
+                        </view>
+                    </view>
+                </scroll-view>
+            </swiper-item>    
+        </block>        
+    </swiper>
+</template>   

component/look/look.wxss

@@ -0,0 +1,45 @@
+/* component/look/look.wxss */
+.nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 36rpx;
+    color: #000;
+    padding: 0 5%;
+    box-sizing: border-box;
+}
+
+.nav view {
+    flex: 1;
+    height: 89rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 89rpx;
+}
+
+.slecte-nav {
+    background: #fff;
+}
+
+swiper {
+    height: 92%;
+}
+
+.look-video {
+    padding: 0 16rpx;
+    box-sizing: border-box;
+}
+
+.look-item {
+    width: 100%;
+    height: 266rpx;
+    margin-top: 27rpx;
+    border-radius: 20rpx;
+    background: red;
+}
+
+.look-item image {
+    width: 100%;
+    height: 100%;
+}

component/mys/mys.js

@@ -0,0 +1,26 @@
+export function myInit(that) {
+  that.setData({
+    myData: {
+      nav: ['我的娃', '收藏', '历史'],
+      myInd: 0
+    }
+  })
+  that.myChoice = ({ currentTarget }) => {
+    that.data.myData.myInd = currentTarget.dataset.index;
+    that.setData({
+      myData: that.data.myData
+    })
+  }
+  that.mySlide = ({detail}) => {
+    that.data.myData.myInd = detail.current;
+    // console.log(detail.current);
+    that.setData({
+      myData: that.data.myData
+    })
+  }
+  that.setName = () => {
+    wx.navigateTo({
+      url: '/pages/setName/setName'
+    })
+  }
+}

component/mys/mys.json

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

component/mys/mys.wxml

@@ -0,0 +1,35 @@
+<!--pages/my/my.wxml-->
+<template name="mys">
+    <view class="nav">
+        <block wx:for="{{myData.nav}}" wx:key="{{index}}">
+            <view class="{{index == myData.myInd ? 'slecte-nav' : ''}}" bindtap="myChoice" data-index="{{index}}">{{item}}</view>
+        </block>
+    </view>
+    <scroll-view class="scroll-view" scroll-y>
+        <swiper current="{{myData.myInd}}" bindchange="mySlide" style="height: 100%;">
+            <swiper-item>
+                <view class="my-information">
+                    <view class="information-item">
+                        <image class="head" src=""></image>
+                        <view class="set-name">
+                            <text class="name">阿杰</text>
+                            <text bindtap="setName">点击修改头像和名字</text>
+                        </view>
+                    </view>
+                    <view class="shaiwa">如何使用电视上的晒娃功能</view>
+                    <view class="mengwa">萌娃相册</view>
+                </view>
+            </swiper-item>
+            <swiper-item>
+                <view class="my-collection">
+                    <view class="collection-item">
+                        收藏
+                    </view>
+                </view>
+            </swiper-item>
+            <swiper-item>
+                历史
+            </swiper-item>
+        </swiper>
+    </scroll-view>
+</template> 

component/mys/mys.wxss

@@ -0,0 +1,106 @@
+/* pages/my/my.wxss */
+.nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 36rpx;
+    color: #000;
+    padding: 0 5%;
+    box-sizing: border-box;
+}
+
+.nav view {
+    flex: 1;
+    height: 89rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 89rpx;
+}
+
+.slecte-nav {
+    background: #fff;
+}
+
+.my-information {
+    padding: 0 16rpx;
+    box-sizing: border-box;
+}
+
+.information-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 266rpx;
+    margin-top: 27rpx;
+    border-radius: 20rpx;
+    background: #fff;
+    padding: 0 25rpx;
+    box-sizing: border-box;
+}
+
+.information-item image {
+    width: 193rpx;
+    height: 193rpx;
+    border-radius: 50%;
+    background: red;
+    margin-right: 55rpx;
+}
+
+.information-item .set-name {
+    display: flex;
+    flex-direction: column;
+}
+
+.information-item .set-name .name {
+    font-size: 40rpx;
+    color: #424242;
+    margin-bottom: 28rpx;
+}
+
+.information-item .set-name text {
+    font-size: 32rpx;
+}
+
+.shaiwa {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 116rpx;
+    margin-top: 27rpx;
+    border-radius: 20rpx;
+    background: #386ca9;
+    padding: 0 25rpx;
+    box-sizing: border-box;
+    color: #fff;
+    font-size: 40rpx;
+    font-weight: 600;
+}
+
+.mengwa {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 116rpx;
+    margin-top: 27rpx;
+    border-radius: 20rpx;
+    background: #fece00;
+    padding: 0 25rpx;
+    box-sizing: border-box;
+    color: #000;
+    font-size: 40rpx;
+    font-weight: 600;
+}
+
+.my-collection {
+    padding: 0 16rpx;
+    box-sizing: border-box;
+}
+
+.collection-item {
+    width: 100%;
+    height: 266rpx;
+    margin-top: 27rpx;
+    border-radius: 20rpx;
+    background: red;
+}

component/search/search.js

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

component/search/search.json

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

component/search/search.wxml

@@ -0,0 +1,16 @@
+<template name="search">
+    <view class="search-container">
+        <view class="search-video">
+            <image class="icon" src="../../static/image/search.png"></image>
+            <input placeholder="输入关键字"/>
+        </view>
+        <scroll-view class="scroll-view" scroll-y>
+            <view class="title">热门搜索</view>
+            <view class="hot-video">
+                <view class="hot-item">
+                    {{item}}
+                </view>
+            </view>
+        </scroll-view>
+    </view>
+</template> 

component/search/search.wxss

@@ -0,0 +1,44 @@
+/* pages/search/search.wxss */
+.search-container {
+    padding: 0 26rpx;
+    box-sizing: border-box;
+}
+
+.search-video {
+    width: 100%;
+    height: 95rpx;
+    background: #fff;
+    border-radius: 95rpx;
+    display: flex;
+    align-items: center;
+    padding-left: 10rpx;
+}
+
+.search-video image {
+    width: 85rpx;
+    height: 85rpx;
+    margin-right: 20rpx;
+}
+
+.search-video input {
+    text-align: center;
+}
+
+.title {
+    text-align: center;
+    color: #959595;
+    margin-top: 46rpx;
+}
+
+.hot-video {
+    padding: 0 16rpx;
+    box-sizing: border-box;
+}
+
+.hot-item {
+    width: 100%;
+    height: 266rpx;
+    margin-top: 27rpx;
+    border-radius: 20rpx;
+    background: red;
+}

pages/details/details.js

@@ -0,0 +1,143 @@
+// pages/details/details.js
+import httpRequestApi from '../../utils/APIRequest';
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    anthologyHide: true,
+    detailsHide: true,
+    hide: true,
+    str: '',
+    summary: '',
+    courseWareList: [],
+    courseId: '',
+    favoritesFlag: false,
+    title: '',
+    iconImg: ''
+  },
+  //点击收藏
+  favorites: function () {
+    this.setData({
+      favoritesFlag: !this.data.favoritesFlag
+    })
+    console.log(this.data.courseId, this.data.title, this.data.iconImg)
+    httpRequestApi.getCourseDetails({
+      targetCode: this.data.courseId,
+      title: this.data.title,
+      iconImg: this.data.iconImg
+    }).success((res)=>{
+      console.log(res);
+
+    })
+    
+  },
+
+  //点击出现选集
+  commentAnthology: function () {
+    this.setData({
+      anthologyHide: !this.data.anthologyHide
+    })
+  },
+
+  //出现详情页
+  commentDetails: function () {
+    this.setData({
+      detailsHide: !this.data.detailsHide
+    })
+  },
+
+  //点击评论
+  pinglun: function () {
+    this.setData({
+      hide: !this.data.hide
+    })
+  },
+  //点击取消
+  no: function () {
+    this.setData({
+      hide: !this.data.hide,
+      str: ''
+    })
+  },
+  //点击确定
+  yes: function () {
+    this.setData({
+      hide: !this.data.hide,
+      str: ''
+    })
+  },   
+  //获取输入值
+  focus: function ({detail}) {
+    this.setData({
+      str: detail.value
+    })
+  }, 
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    const courseId = options.id;
+    httpRequestApi.getCourseDetails(courseId).success((res)=>{
+      console.log(res);
+      const data = res.data.data;
+      this.setData({
+        title: data.course.title,
+        iconImg: data.course.iconImg,
+        courseId,
+        summary: data.course.summary,
+        courseWareList: data.courseWareList
+      })
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/details/details.json

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

pages/details/details.wxml

@@ -0,0 +1,52 @@
+<!--pages/details/details.wxml-->
+<view class="details">
+    <scroll-view class="details-scroll" scroll-y>
+        <view class="details-video">
+            <video id="myVideo" src="http://efunvideo.ai160.com/vs2m/061/06104039/06104039001/06104039001.m3u8" controls page-gesture objectFit="fill"></video>
+        </view>
+        <view class="menu">
+            <view class="menu-item" style="width: 116rpx;" bindtap="favorites">
+                <image src="{{favoritesFlag ? '../../static/image/Collection.png' : '../../static/image/no-Collection.png'}}"></image>
+            </view>
+            <view class="menu-item">
+                <image src="../../static/image/share.png"></image>
+            </view>
+            <view class="menu-item" bindtap="commentAnthology">
+                <image src="../../static/image/Anthology.png"></image>
+            </view>
+            <view class="menu-item" bindtap="commentDetails">
+                <image src="../../static/image/details.png"></image>
+            </view>            
+        </view>
+        <view class="comment">
+            <view class="anthology" hidden="{{anthologyHide}}">
+                <view wx:for="{{courseWareList}}" wx:key="{{index}}"  class="collection">
+                    {{item.sort}}
+                </view>
+            </view>              
+            <view class="comment-details" hidden="{{detailsHide}}">
+               {{summary}}
+            </view>            
+            <view class="pinglun" hidden="{{!hide}}" bindtap="pinglun">点击参与评论</view>
+            <view class="input-box" hidden="{{hide}}">
+                <input placeholder="在这里输入你想说的话" type='text' maxlength="-1" bindinput="focus" value="{{str}}"/>
+                <view class="btn">
+                    <view class="no" bindtap="no">放弃</view>
+                    <view class="yes" bindtap="yes">发送</view>
+                </view>
+            </view>
+            <view class="content-speak">
+                <view class="information-item">
+                    <image class="head" src=""></image>
+                    <view class="name">
+                        <text>阿杰</text>
+                        <text>2018年9月10日</text>
+                    </view>
+                </view>
+                <view class="language">
+                    非常好看的纪录片，推荐给大家
+                </view>
+            </view>
+        </view>
+    </scroll-view>
+</view>

pages/details/details.wxss

@@ -0,0 +1,163 @@
+/* pages/details/details.wxss */
+.details {
+    width: 100%;
+    height: 100%;
+    background: #eaeaea;
+}
+
+.details-scroll {
+    width: 100%;
+    height: 100%;  
+}
+
+.details-video {
+    width: 100%;
+    height: 436rpx;
+}
+
+#myVideo {
+    width: 100%;
+    height: 100%;
+}
+
+.menu {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin-top: 30rpx;
+}
+
+.menu-item {
+    width: 90rpx;
+    height: 120rpx;
+}
+
+.menu-item image{
+    width: 100%;
+    height: 100%;
+}
+
+.comment {
+    padding: 0 16rpx 10rpx 16rpx;
+    box-sizing: border-box;
+}
+
+.pinglun {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 116rpx;
+    margin-top: 27rpx;
+    border-radius: 20rpx;
+    background: #7a7a7a;
+    padding: 0 25rpx;
+    box-sizing: border-box;
+    color: #fff;
+    font-size: 40rpx;
+    font-weight: 600;
+}
+
+.anthology {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    margin-top: 5rpx;
+    box-sizing: border-box;  
+    font-size: 32rpx; 
+    color: #888;
+    font-weight: bold;
+}  
+
+.collection {
+    width: 100rpx;
+    height: 100rpx;
+    background: #fff;
+    text-align: center;
+    line-height: 100rpx;
+    border-radius: 20rpx;
+    margin: 27rpx 0 0 18rpx;
+}
+
+.comment-details {
+    width: 100%;
+    margin-top: 27rpx;
+    border-radius: 20rpx;
+    background: #fff;
+    padding: 23rpx 33rpx;
+    box-sizing: border-box;  
+    font-size: 32rpx; 
+    line-height: 44rpx;
+} 
+
+.input-box {
+    position: relative;
+    width: 100%;
+    height: 320rpx;
+    margin-top: 27rpx;
+    border-radius: 20rpx;
+    background: #fff;
+    padding: 34rpx 0 112rpx 34rpx;
+    box-sizing: border-box;   
+}
+
+.btn {
+    position: absolute;
+    right: 22rpx;
+    bottom: 25rpx;
+    display: flex;
+}
+
+.btn view {
+    width: 153rpx;
+    height: 87rpx;
+    text-align: center;
+    line-height: 87rpx;
+    border-radius: 20rpx;
+    color: #fff;
+    font-size: 32rpx;
+}
+
+.no {
+    background: #cdcdcd;
+    margin-right: 22rpx;
+}
+
+.yes {
+    background: #fe9d00;
+}
+
+.content-speak {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-top: 27rpx;
+    border-radius: 20rpx;
+    background: #fff;
+    padding: 30rpx 34rpx;
+    box-sizing: border-box;
+}
+
+.information-item {
+    display: flex;
+}
+
+.information-item image {
+    width: 92rpx;
+    height: 92rpx;
+    border-radius: 50%;
+    background: red;
+    margin-right: 22rpx;
+}
+
+.information-item .name {
+    display: flex;
+    flex-direction: column;
+    color: #424242;
+    font-size: 32rpx;
+    font-weight:bold;
+}
+
+.language {
+    font-size: 32rpx;
+    margin-top: 10px;
+}

pages/index/index.js

@@ -0,0 +1,45 @@
+//index.js
+//获取应用实例
+const app = getApp()
+import { lookInit } from '../../component/look/look';
+import { myInit } from '../../component/mys/mys';
+import httpRequestApi from '../../utils/APIRequest';
+Page({
+  data: {
+    tab:[
+      {
+        name: '看',
+        templates: 'look',
+        img: '../../static/image/look1.png',
+        selectimg: '../../static/image/look2.png'
+      },  
+      {
+        name: '搜',
+        templates: 'search',
+        img: '../../static/image/sou1.png',
+        selectimg: '../../static/image/sou2.png'
+      },  {
+        name: '我的',
+        templates: 'mys',
+        img: '../../static/image/my1.png',
+        selectimg: '../../static/image/my2.png'
+      }
+    ],
+    ind: 0,
+    templates: 'look',
+  },
+  //tab点击
+  switcher: function({currentTarget}) {
+    let ind = currentTarget.dataset.ind;
+    let templates = this.data.tab[ind].templates;
+    //console.log(this.data[ind])
+    this.setData({
+      ind,
+      templates
+    })
+  },
+  onLoad: function () {
+    lookInit(this);
+    myInit(this);
+  },
+})

pages/index/index.json

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

pages/index/index.wxml

@@ -0,0 +1,26 @@
+<!--index.wxml-->
+<view class="container">
+  <!-- 引入组件 -->
+  <import src="/component/look/look.wxml"/>
+  <import src="/component/search/search.wxml"/> 
+  <import src="/component/mys/mys.wxml"/>  
+  <!--调用组件-->
+  <!--<template is="{{templates}}" data="{{lookData: lookData, searchData: searchData, myData: myData}}"></template>-->
+  <view class="template" wx:if="{{templates == 'look'}}">
+    <template is="{{templates}}" data="{{lookData: lookData}}"></template>
+  </view>
+  <view class="template" wx:elif="{{templates == 'search'}}">
+    <template is="{{templates}}" data="{{searchData: searchData}}"></template>
+  </view>
+  <view class="template" wx:else="{{templates == 'mys'}}">
+    <template is="{{templates}}" data="{{myData: myData}}"></template>
+  </view>
+  <view class="bottom-tab">
+      <block  wx:for="{{tab}}" wx:key="{{index}}">
+      <view class="tabbar {{index == ind ? 'select':' '}}" bindtap="switcher" data-ind="{{index}}">
+          <image src="{{index == ind ? item.selectimg : item.img}}"></image>
+          <text>{{item.name}}</text>
+      </view>
+      </block>            
+  </view>
+</view>

pages/index/index.wxss

@@ -0,0 +1,48 @@
+/**index.wxss**/
+/*看*/
+@import "/component/look/look.wxss";
+/*搜索*/
+@import "/component/search/search.wxss";
+/*我的*/
+@import "/component/mys/mys.wxss";
+.template {
+  height: 100%;
+}
+.scroll-view {
+  height: 100%;
+}
+.bottom-tab {
+  position: fixed;
+  bottom: 28rpx;
+  left: 5%;
+  width: 90%;
+  height: 152rpx;
+  background: #fff;
+  color: #6a6a6a;
+  border-radius: 152rpx;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tabbar {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  font-size: 48rpx;
+  border-radius: 152rpx;
+}
+
+.select {
+  background: #fece00;
+  color: #000;
+}
+
+.bottom-tab image {
+  width: 54rpx;
+  height: 54rpx;
+  margin-right: 20rpx;
+}

pages/setName/setName.js

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

pages/setName/setName.json

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

pages/setName/setName.wxml

@@ -0,0 +1,21 @@
+<!--pages/setName/setName.wxml-->
+<view class="set">
+    <view class="set-head">
+        <image src=""></image>
+        <text>点击头像进行更换</text>
+    </view>
+    <view class="set-message">
+        <view class="set-name">
+            <text> 宝宝名字</text>
+            <input value="阿杰"/>
+        </view>
+        <view class="set-phone">
+            <text>手机号</text>
+            <input value="15600099705"/>
+        </view>        
+    </view>
+    <view class="explain">
+        说明：手机号码用于电视端萌娃相册的建立和查找，非常重要，请如实填写。我们不会对任何第三方透漏您的资料。
+    </view>
+    <view class="preservation">保存</view>
+</view>

pages/setName/setName.wxss

@@ -0,0 +1,86 @@
+/* pages/setName/setName.wxss */
+.set {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: #eaeaea;
+}
+
+.set-head {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 50rpx 0 20rpx 0;
+}
+
+.set-head image {
+    width: 348rpx;
+    height: 348rpx;
+    border-radius: 50%;
+    background: red;
+}
+
+.set-head text {
+    font-size: 32rxp;
+    color: #808080;
+    margin-top: 50rpx;
+}
+
+.set-name,
+.set-phone {
+    width: 100%;
+    padding: 0 37rpx;
+    box-sizing: border-box;
+    display: flex; 
+    align-items: center;
+    margin-top: 50rpx;
+}
+
+.set-name input,
+.set-phone input {
+    width: 75%;
+    height: 110rpx;
+    background: #fff;
+    border-radius: 20rpx;
+    padding-left: 20rpx;
+    box-sizing: border-box;
+}
+
+.set-name input {
+    margin-left: 20rpx;
+}
+
+.set-phone input {
+    margin-left: 55rpx;
+}
+
+.set-name text,
+.set-phone text {
+    font-size: 36rpx;
+    color: #424242;
+}
+
+.explain {
+    width: 100%;
+    padding: 0 37rpx;
+    box-sizing: border-box;
+    margin-top: 67rpx;
+    color: #727272;
+    font-size: 32rpx;
+    line-height: 46rpx;
+}
+
+.preservation {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%);
+    bottom: 30rpx; 
+    width: 247rpx;
+    height: 108rpx;
+    text-align: center;
+    line-height: 108rpx;
+    background: #feb500;
+    color: #fff;
+    font-size: 44rpx;
+    border-radius: 20rpx;
+}

project.config.json

@@ -0,0 +1,39 @@
+{
+	"description": "项目配置文件",
+	"packOptions": {
+		"ignore": []
+	},
+	"setting": {
+		"urlCheck": false,
+		"es6": true,
+		"postcss": true,
+		"minified": true,
+		"newFeature": true
+	},
+	"compileType": "miniprogram",
+	"libVersion": "2.3.0",
+	"appid": "wx5f14c30856bea407",
+	"projectname": "Colorful-childhood",
+	"debugOptions": {
+		"hidedInDevtools": []
+	},
+	"isGameTourist": false,
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"game": {
+			"currentL": -1,
+			"list": []
+		},
+		"miniprogram": {
+			"current": -1,
+			"list": []
+		}
+	}
+}

utils/APIRequest.js

@@ -0,0 +1,31 @@
+import { getInstance } from './httpRequest';
+import { apiUrl } from './const.js';
+//console.log(getInstance().url)
+const httpApiUrl = (str) => {
+    return apiUrl + str;
+}
+
+class httpRequestApi {
+    //课程表首页
+    static getCourse(data) {
+        const url = httpApiUrl('wx/course');
+        return getInstance().url(url).data(data).send();
+    }
+    //获取课程详情
+    static getCourseDetails(id) {
+        const url = httpApiUrl(`wx/course/${id}`);
+        return getInstance().url(url).data().send();
+    }
+    //收藏或者取消
+    static getDetailsFavorites(data) {
+        const url = httpApiUrl('wx/favorites');
+        return getInstance().url(url).data(data).method('POST').send();
+    }
+}
+
+export default httpRequestApi;
+
+
+
+
+

utils/const.js

@@ -0,0 +1,5 @@
+// 常量列表
+module.exports = {
+  // ----正式环境-----
+  apiUrl:"http://cloud.baron.com.cn/"
+}

utils/httpRequest.js

@@ -0,0 +1,49 @@
+export function getInstance() {
+		return {
+			_sucCallback: null,
+			_failCallback: null,
+			_method: 'GET',
+			_data: {},
+			_header: { 'content-type': 'application/json' },
+			_url: '',
+			send: function() {
+				wx.request({
+					url: this._url,
+					data: this._data,
+					method: this._method,
+					header: this._header,
+					success: function(res) {
+						this._sucCallback(res);
+					}.bind(this),
+					fail: function(res) {
+						this._failCallback(res);
+					}.bind(this)
+				});
+				return this;
+			},
+			success: function(callback) {
+				this._sucCallback = callback;
+				return this;
+			},
+			fail: function(callback) {
+				this._failCallback = callback;
+				return this;
+			},
+			url: function(url) {
+				this._url = url;
+				return this;
+			},
+			data: function(data) {
+				this._data = data;
+				return this;
+			},
+			header: function(header) {
+				this._header = header;
+				return this;
+			},
+			method: function(method) {
+				this._method = method;
+				return this;
+			}
+		};
+}

utils/util.js

@@ -0,0 +1,19 @@
+const formatTime = date => {
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const hour = date.getHours()
+  const minute = date.getMinutes()
+  const second = date.getSeconds()
+
+  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
+}
+
+const formatNumber = n => {
+  n = n.toString()
+  return n[1] ? n : '0' + n
+}
+
+module.exports = {
+  formatTime: formatTime
+}