小程序：事件概念-事件对象

16_miniapp/day-3/code/miniapp-comp/.eslintrc.js

@@ -0,0 +1,31 @@
+/*
+ * Eslint config file
+ * Documentation: https://eslint.org/docs/user-guide/configuring/
+ * Install the Eslint extension before using this feature.
+ */
+module.exports = {
+  env: {
+    es6: true,
+    browser: true,
+    node: true,
+  },
+  ecmaFeatures: {
+    modules: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  globals: {
+    wx: true,
+    App: true,
+    Page: true,
+    getCurrentPages: true,
+    getApp: true,
+    Component: true,
+    requirePlugin: true,
+    requireMiniProgram: true,
+  },
+  // extends: 'eslint:recommended',
+  rules: {},
+}

16_miniapp/day-3/code/miniapp-comp/app.js

@@ -0,0 +1,19 @@
+// app.js
+App({
+  onLaunch() {
+    // 展示本地存储能力
+    const logs = wx.getStorageSync('logs') || []
+    logs.unshift(Date.now())
+    wx.setStorageSync('logs', logs)
+
+    // 登录
+    wx.login({
+      success: res => {
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+      }
+    })
+  },
+  globalData: {
+    userInfo: null
+  }
+})

16_miniapp/day-3/code/miniapp-comp/app.json

@@ -0,0 +1,18 @@
+{
+  "pages": [
+    "pages/learn-icon/learn-icon",
+    "pages/learn-lb/learn-lb",
+    "pages/learn-sv/learn-sv",
+    "pages/index/index",
+    "pages/logs/logs"
+   
+  ],
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "Weixin",
+    "navigationBarTextStyle": "black"
+  },
+  "style": "v2",
+  "sitemapLocation": "sitemap.json"
+}

16_miniapp/day-3/code/miniapp-comp/app.wxss

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

16_miniapp/day-3/code/miniapp-comp/pages/index/index.js

@@ -0,0 +1,14 @@
+// index.js
+// 获取应用实例
+const app = getApp()
+
+Page({
+  data: {
+    
+  },
+  
+  onLoad() {
+   
+  },
+  
+})

16_miniapp/day-3/code/miniapp-comp/pages/index/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

16_miniapp/day-3/code/miniapp-comp/pages/index/index.wxml

@@ -0,0 +1,5 @@
+<!--index.wxml-->
+<view class="container" id="v">
+ <text>hello, 小程序。</text>
+ <view>嵌套使用view组件</view>
+</view>

16_miniapp/day-3/code/miniapp-comp/pages/index/index.wxss

@@ -0,0 +1,19 @@
+/**index.wxss**/
+.userinfo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #aaa;
+}
+
+.userinfo-avatar {
+  overflow: hidden;
+  width: 128rpx;
+  height: 128rpx;
+  margin: 20rpx;
+  border-radius: 50%;
+}
+
+.usermotto {
+  margin-top: 200px;
+}

16_miniapp/day-3/code/miniapp-comp/pages/learn-icon/learn-icon.js

@@ -0,0 +1,60 @@
+// pages/learn-icon/learn-icon.js
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    colors: ['#4EEE94', '#43CD80'],
+    types: [
+      "success",
+      "success_no_circle",
+      "info",
+      "warn",
+      "waiting",
+      "cancel",
+      "download",
+      "search",
+      "clear",
+    ],
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {},
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {},
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {},
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {},
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {},
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {},
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {},
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {},
+});

16_miniapp/day-3/code/miniapp-comp/pages/learn-icon/learn-icon.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

16_miniapp/day-3/code/miniapp-comp/pages/learn-icon/learn-icon.wxml

@@ -0,0 +1,10 @@
+<!--pages/learn-icon/learn-icon.wxml-->
+<text>pages/learn-icon/learn-icon.wxml</text>
+
+<view wx:for="{{types}}" wx:key="*this" style="padding: 10px;">
+  <icon type="{{item}}" size="23" color="{{colors[index % 2]}}"></icon>
+</view>
+
+<view class="weui-cell weui-cell_input">
+  <input class="weui-input" type="number" placeholder="这是一个数字输入框" />
+</view>

16_miniapp/day-3/code/miniapp-comp/pages/learn-icon/learn-icon.wxss

@@ -0,0 +1 @@
+/* pages/learn-icon/learn-icon.wxss */

16_miniapp/day-3/code/miniapp-comp/pages/learn-lb/learn-lb.js

@@ -0,0 +1,80 @@
+// pages/learn-lb/learn-lb.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    lb: {
+      indicatorDots: true,
+      indicatorColor: '#F0FFF0',
+      indicatorActiveColor: '#54FF9F',
+      interval: 3000,
+      duration: 500,
+      autoplay: true,
+      vertical: false,
+      circular: true
+    },
+    imgs: [
+      '../../images/4.jpeg',
+      '../../images/5.jpeg',
+      '../../images/6.jpeg'
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

16_miniapp/day-3/code/miniapp-comp/pages/learn-lb/learn-lb.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

16_miniapp/day-3/code/miniapp-comp/pages/learn-lb/learn-lb.wxml

@@ -0,0 +1,21 @@
+<!--pages/learn-lb/learn-lb.wxml-->
+<view>
+<text>轮播图</text>
+<swiper class="lb" indicator-dots indicator-color="green" indicator-active-color="red" autoplay interval="2000" circular duration="300" vertical>
+  <swiper-item>
+    <image src="../../images/4.jpeg"></image>
+  </swiper-item>
+  <swiper-item>
+    <image src="../../images/5.jpeg"></image>
+  </swiper-item>
+  <swiper-item>
+    <image src="../../images/6.jpeg"></image>
+  </swiper-item>
+</swiper>
+<view>动态绑定数据</view>
+<swiper class="lb" indicator-dots="{{lb.indicatorDots}}" indicator-color="{{lb.indicatorColor}}"  indicator-active-color="{{lb.indicatorActiveColor}}" autoplay="{{lb.autoplay}}" interval="{{lb.interval}}" circular="{{lb.circular}}" duration="{{lb.duration}}" vertical="{{lb.vertical}}">
+  <swiper-item wx:for="{{imgs}}" wx:key="*this">
+    <image src="{{item}}"></image>
+  </swiper-item>
+</swiper>
+</view>

16_miniapp/day-3/code/miniapp-comp/pages/learn-lb/learn-lb.wxss

@@ -0,0 +1,9 @@
+/* pages/learn-lb/learn-lb.wxss */
+.lb {
+  height: 400rpx;
+}
+
+.lb image {
+  width: 100%;
+  height: 100%;
+}

16_miniapp/day-3/code/miniapp-comp/pages/learn-sv/learn-sv.js

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

16_miniapp/day-3/code/miniapp-comp/pages/learn-sv/learn-sv.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

16_miniapp/day-3/code/miniapp-comp/pages/learn-sv/learn-sv.wxml

@@ -0,0 +1,20 @@
+<view class="container">
+  <text class="title">横向滚动</text>
+  <scroll-view scroll-x="true" class="hg">
+    <view class="hg-item">A</view>
+    <view class="hg-item">B</view>
+    <view class="hg-item">C</view>
+    <view class="hg-item">D</view>
+  </scroll-view>
+  <text class="title">竖向滚动</text>
+  <scroll-view scroll-y="true" class="sg">
+    <view class="sg-item">A</view>
+    <view class="sg-item">B</view>
+    <view class="sg-item">C</view>
+    <view class="sg-item">D</view>
+  </scroll-view>
+
+  <image src="../../images/4.jpeg"></image>
+  <image src="../../images/5.jpeg" lazy-load="true"></image>
+  <image src="../../images/6.jpeg" show-menu-by-longpress></image>
+</view>

16_miniapp/day-3/code/miniapp-comp/pages/learn-sv/learn-sv.wxss

@@ -0,0 +1,41 @@
+/* pages/learn-sv/learn-sv.wxss */
+.title {
+  font-size: larger;
+  font-weight: 700;
+}
+
+.hg {
+  box-sizing: border-box;
+  height: 300rpx;
+  border: 1px solid red;
+  white-space: nowrap;
+  overflow: hidden;
+
+}
+
+.hg-item {
+  
+  width: 750rpx;
+  height: 100%;
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+}
+
+.sg {
+  box-sizing: border-box;
+  width: 750rpx;
+  height: 300rpx;
+  border: 1px solid blue;
+}
+
+.sg-item {
+  width: 750rpx;
+  height: 300rpx;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

16_miniapp/day-3/code/miniapp-comp/pages/logs/logs.js

@@ -0,0 +1,18 @@
+// 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
+        }
+      })
+    })
+  }
+})

16_miniapp/day-3/code/miniapp-comp/pages/logs/logs.json

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

16_miniapp/day-3/code/miniapp-comp/pages/logs/logs.wxml

@@ -0,0 +1,6 @@
+<!--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>

16_miniapp/day-3/code/miniapp-comp/pages/logs/logs.wxss

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

16_miniapp/day-3/code/miniapp-comp/project.config.json

@@ -0,0 +1,51 @@
+{
+  "description": "项目配置文件",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "setting": {
+    "bundle": false,
+    "userConfirmedBundleSwitch": false,
+    "urlCheck": true,
+    "scopeDataCheck": false,
+    "coverView": true,
+    "es6": true,
+    "postcss": true,
+    "compileHotReLoad": false,
+    "lazyloadPlaceholderEnable": false,
+    "preloadBackgroundData": false,
+    "minified": true,
+    "autoAudits": false,
+    "newFeature": false,
+    "uglifyFileName": false,
+    "uploadWithSourceMap": true,
+    "useIsolateContext": true,
+    "nodeModules": false,
+    "enhance": true,
+    "useMultiFrameRuntime": true,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "showShadowRootInWxmlPanel": true,
+    "packNpmManually": false,
+    "enableEngineNative": false,
+    "packNpmRelationList": [],
+    "minifyWXSS": true,
+    "showES6CompileOption": false,
+    "minifyWXML": true,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    }
+  },
+  "compileType": "miniprogram",
+  "libVersion": "2.19.4",
+  "appid": "wxb7f9a42f0b768006",
+  "projectname": "miniprogram-92",
+  "condition": {},
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  }
+}

16_miniapp/day-3/code/miniapp-comp/project.private.config.json

@@ -0,0 +1,7 @@
+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "projectname": "miniapp-comp",
+  "setting": {
+    "compileHotReLoad": true
+  }
+}

16_miniapp/day-3/code/miniapp-comp/sitemap.json

@@ -0,0 +1,7 @@
+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}

16_miniapp/day-3/code/miniapp-comp/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
+}

16_miniapp/day-4/code/.eslintrc.js

@@ -0,0 +1,31 @@
+/*
+ * Eslint config file
+ * Documentation: https://eslint.org/docs/user-guide/configuring/
+ * Install the Eslint extension before using this feature.
+ */
+module.exports = {
+  env: {
+    es6: true,
+    browser: true,
+    node: true,
+  },
+  ecmaFeatures: {
+    modules: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  globals: {
+    wx: true,
+    App: true,
+    Page: true,
+    getCurrentPages: true,
+    getApp: true,
+    Component: true,
+    requirePlugin: true,
+    requireMiniProgram: true,
+  },
+  // extends: 'eslint:recommended',
+  rules: {},
+}

16_miniapp/day-4/code/app.js

@@ -0,0 +1,19 @@
+// app.js
+App({
+  onLaunch() {
+    // 展示本地存储能力
+    const logs = wx.getStorageSync('logs') || []
+    logs.unshift(Date.now())
+    wx.setStorageSync('logs', logs)
+
+    // 登录
+    wx.login({
+      success: res => {
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+      }
+    })
+  },
+  globalData: {
+    userInfo: null
+  }
+})

16_miniapp/day-4/code/app.json

@@ -0,0 +1,14 @@
+{
+  "pages":[
+    "pages/index/index",
+    "pages/logs/logs"
+  ],
+  "window":{
+    "backgroundTextStyle":"light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "Weixin",
+    "navigationBarTextStyle":"black"
+  },
+  "style": "v2",
+  "sitemapLocation": "sitemap.json"
+}

16_miniapp/day-4/code/app.wxss

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

16_miniapp/day-4/code/pages/index/index.js

@@ -0,0 +1,20 @@
+// index.js
+// 获取应用实例
+const app = getApp();
+
+Page({
+  data: {
+    todolist: [
+      {
+        id: 1, title: '吃饭', done: true
+      },
+      {
+        id: 2, title: '睡觉', done: false
+      }
+    ]
+  },
+  onTap(ev) {
+    console.log("你敢点我？？？");
+    console.log(ev)
+  },
+});

16_miniapp/day-4/code/pages/index/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

16_miniapp/day-4/code/pages/index/index.wxml

@@ -0,0 +1,18 @@
+<!-- <view bindtap="onTap">
+  <view bindtap="onTap">你点我呀</view>
+</view> -->
+
+<view bindtap="onTap">你点我呀</view>
+
+<view class="box">
+  <text class="title">
+    TODOLIST
+  </text>
+
+<!-- 在绑定key值时，默认会自动从item下找某个属性 -->
+  <view wx:for="{{todolist}}" wx:key="id" class="todo-item">
+    <checkbox checked="{{item.done}}"></checkbox>
+    <text style="width: 375rpx; margin: 0 8px;">{{ item.title }}</text>
+    <icon type="cancel" />
+  </view>
+</view>

16_miniapp/day-4/code/pages/index/index.wxss

@@ -0,0 +1,22 @@
+.title {
+  font-size: 24px;
+  font-weight: 800;
+
+  text-align: center;
+
+  color: hotpink
+}
+
+.box {
+  display: flex;
+
+  flex-direction: column;
+
+  justify-content: center;
+  align-items: center;
+}
+
+.todo-item {
+  display: flex;
+  align-items: center;
+}

16_miniapp/day-4/code/pages/logs/logs.js

@@ -0,0 +1,18 @@
+// 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
+        }
+      })
+    })
+  }
+})

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

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

16_miniapp/day-4/code/pages/logs/logs.wxml

@@ -0,0 +1,6 @@
+<!--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>

16_miniapp/day-4/code/pages/logs/logs.wxss

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

16_miniapp/day-4/code/project.config.json

@@ -0,0 +1,51 @@
+{
+  "description": "项目配置文件",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "setting": {
+    "bundle": false,
+    "userConfirmedBundleSwitch": false,
+    "urlCheck": true,
+    "scopeDataCheck": false,
+    "coverView": true,
+    "es6": true,
+    "postcss": true,
+    "compileHotReLoad": false,
+    "lazyloadPlaceholderEnable": false,
+    "preloadBackgroundData": false,
+    "minified": true,
+    "autoAudits": false,
+    "newFeature": false,
+    "uglifyFileName": false,
+    "uploadWithSourceMap": true,
+    "useIsolateContext": true,
+    "nodeModules": false,
+    "enhance": true,
+    "useMultiFrameRuntime": true,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "showShadowRootInWxmlPanel": true,
+    "packNpmManually": false,
+    "enableEngineNative": false,
+    "packNpmRelationList": [],
+    "minifyWXSS": true,
+    "showES6CompileOption": false,
+    "minifyWXML": true,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    }
+  },
+  "compileType": "miniprogram",
+  "libVersion": "2.19.4",
+  "appid": "wxb7f9a42f0b768006",
+  "projectname": "miniprogram-92",
+  "condition": {},
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  }
+}

16_miniapp/day-4/code/project.private.config.json

@@ -0,0 +1,7 @@
+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "projectname": "miniapp",
+  "setting": {
+    "compileHotReLoad": true
+  }
+}

16_miniapp/day-4/code/sitemap.json

@@ -0,0 +1,7 @@
+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}

16_miniapp/day-4/code/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
+}