微信小程序基础语法练习

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

mp_01/app.json

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

mp_01/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;
+}

mp_01/pages/index/index.js

@@ -0,0 +1,54 @@
+//index.js
+//获取应用实例
+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
+    })
+  }
+})

mp_01/pages/index/index.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarBackgroundColor": "#00b26a"
+}

mp_01/pages/index/index.wxml

@@ -0,0 +1,13 @@
+<!--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>
+    </block>
+  </view>
+  <view class="usermotto">
+    <text class="user-motto">{{motto}}</text>
+  </view>
+</view>

mp_01/pages/index/index.wxss

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

mp_01/pages/list/list.js

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

mp_01/pages/list/list.json

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

mp_01/pages/list/list.wxml

@@ -0,0 +1,47 @@
+<!--pages/list/list.wxml-->
+
+<!-- scroll-view 组件的基本使用 -->
+<!-- <scroll-view class="container1" scroll-y>
+  <view>A</view>
+  <view>B</view>
+  <view>C</view>
+</scroll-view> -->
+
+<!-- 轮播图的结构 -->
+<!-- <swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="3000" circular>
+	<swiper-item>
+    <view class="item">A</view>
+  </swiper-item>
+	<swiper-item>
+    <view class="item">B</view>
+  </swiper-item>
+	<swiper-item>
+    <view class="item">C</view>
+  </swiper-item>
+</swiper> -->
+
+<!-- 常用的基础内容组件 text 和 rich-text 的用法 -->
+<!-- <view>
+  手机号支持长按选中效果
+  <text selectable>13800005056</text>
+</view>
+
+<rich-text nodes="<h1 style='color: red;'>标题</h1>"></rich-text> -->
+
+<!-- 按钮组件的基本使用 -->
+<!-- 通过 type 属性指定按钮颜色类型 -->
+<!-- <button>普通按钮</button>
+<button type="primary">主色调按钮</button>
+<button type="warn">警告按钮</button> -->
+<!-- size="mini" 小尺寸按钮 -->
+<!-- <button size="mini">普通按钮</button>
+<button type="primary" size="mini">主色调按钮</button>
+<button type="warn" size="mini">警告按钮</button> -->
+<!-- plain 镂空按钮 -->
+<!-- <button size="mini" plain>普通按钮</button>
+<button type="primary" size="mini" plain>主色调按钮</button>
+<button type="warn" size="mini" plain>警告按钮</button> -->
+
+<!-- image 图片组件 -->
+<image></image>
+<image src="/images/1.png" mode="heightFix"></image>

mp_01/pages/list/list.wxss

@@ -0,0 +1,50 @@
+/* pages/list/list.wxss */
+
+/* scroll-view 组件的基本使用 */
+/* .container1 view {
+  width: 100px;
+  height: 100px;
+  text-align: center;
+  line-height: 100px;
+}
+
+.container1 view:nth-child(1) {
+  background-color: lightgreen;
+}
+.container1 view:nth-child(2) {
+  background-color: lightskyblue;
+}
+.container1 view:nth-child(3) {
+  background-color: lightpink;
+}
+
+.container1 {
+  border: 1px solid red;
+  width: 100px;
+  height: 120px;
+} */
+
+/* 轮播图的样式 */
+/* .swiper-container {
+  height: 150px;
+}
+
+.item {
+  height: 100%;
+  line-height: 150px;
+  text-align: center;
+}
+
+swiper-item:nth-child(1) .item {
+  background-color: lightgreen;
+}
+swiper-item:nth-child(2) .item {
+  background-color: lightskyblue;
+}
+swiper-item:nth-child(3) .item {
+  background-color: lightpink;
+} */
+
+image {
+  border: 1px solid red;
+}

mp_01/pages/logs/logs.js

@@ -0,0 +1,15 @@
+//logs.js
+const util = require('../../utils/util.js')
+
+Page({
+  data: {
+    logs: []
+  },
+  onLoad: function () {
+    this.setData({
+      logs: (wx.getStorageSync('logs') || []).map(log => {
+        return util.formatTime(new Date(log))
+      })
+    })
+  }
+})

mp_01/pages/logs/logs.json

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

mp_01/pages/logs/logs.wxml

@@ -0,0 +1,6 @@
+<!--logs.wxml-->
+<view class="container log-list">
+  <block wx:for="{{logs}}" wx:for-item="log">
+    <text class="log-item">{{index + 1}}. {{log}}</text>
+  </block>
+</view>

mp_01/pages/logs/logs.wxss

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

mp_01/project.config.json

@@ -0,0 +1,56 @@
+{
+	"description": "项目配置文件",
+	"packOptions": {
+		"ignore": []
+	},
+	"setting": {
+		"urlCheck": true,
+		"es6": true,
+		"postcss": true,
+		"preloadBackgroundData": false,
+		"minified": true,
+		"newFeature": true,
+		"coverView": true,
+		"autoAudits": false,
+		"showShadowRootInWxmlPanel": true,
+		"scopeDataCheck": false,
+		"checkInvalidKey": true,
+		"checkSiteMap": false,
+		"uploadWithSourceMap": true,
+		"babelSetting": {
+			"ignore": [],
+			"disablePlugins": [],
+			"outputPath": ""
+		},
+		"useCompilerModule": false,
+		"userConfirmedUseCompilerModuleSwitch": false
+	},
+	"compileType": "miniprogram",
+	"libVersion": "2.11.1",
+	"appid": "wx5eda4566d93729d6",
+	"projectname": "mp_01",
+	"debugOptions": {
+		"hidedInDevtools": []
+	},
+	"isGameTourist": false,
+	"simulatorType": "wechat",
+	"simulatorPluginLibVersion": {},
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"game": {
+			"currentL": -1,
+			"list": []
+		},
+		"miniprogram": {
+			"current": -1,
+			"list": []
+		}
+	}
+}

mp_01/sitemap.json

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

mp_01/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
+}

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

mp_02/app.json

@@ -0,0 +1,38 @@
+{
+  "pages": [
+    "pages/home/home",
+    "pages/message/message",
+    "pages/contact/contact",
+    "pages/index/index",
+    "pages/test/test",
+    "pages/logs/logs"
+  ],
+  "window": {
+    "backgroundTextStyle": "dark",
+    "navigationBarBackgroundColor": "#2b4b6b",
+    "navigationBarTitleText": "黑马程序员",
+    "navigationBarTextStyle": "white",
+    "backgroundColor": "#efefef",
+    "onReachBottomDistance": 100
+  },
+  "tabBar": {
+    "list": [{
+      "pagePath": "pages/home/home",
+      "text": "首页",
+      "iconPath": "/images/tabs/home.png",
+      "selectedIconPath": "/images/tabs/home-active.png"
+    },{
+      "pagePath": "pages/message/message",
+      "text": "消息",
+      "iconPath": "/images/tabs/message.png",
+      "selectedIconPath": "/images/tabs/message-active.png"
+    },{
+      "pagePath": "pages/contact/contact",
+      "text": "联系我们",
+      "iconPath": "/images/tabs/contact.png",
+      "selectedIconPath": "/images/tabs/contact-active.png"
+    }]
+  },
+  "style": "v2",
+  "sitemapLocation": "sitemap.json"
+}

mp_02/app.wxss

@@ -0,0 +1,20 @@
+/**app.wxss**/
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0;
+  box-sizing: border-box;
+}
+
+view {
+  padding: 10rpx;
+  margin: 10rpx;
+  background-color: lightskyblue;
+}
+
+view:nth-child(1) {
+  background-color: lightskyblue;
+}

mp_02/common/common.wxss

@@ -0,0 +1,3 @@
+.username {
+  color: red;
+}

mp_02/pages/contact/contact.js

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

mp_02/pages/contact/contact.json

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

mp_02/pages/contact/contact.wxml

@@ -0,0 +1,2 @@
+<!--pages/contact/contact.wxml-->
+<text>pages/contact/contact.wxml</text>

mp_02/pages/contact/contact.wxss

@@ -0,0 +1 @@
+/* pages/contact/contact.wxss */

mp_02/pages/home/home.js

@@ -0,0 +1,97 @@
+// pages/home/home.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  // 发起GET数据请求
+  getInfo() {
+    wx.request({
+      url: 'https://www.escook.cn/api/get',
+      method: 'GET',
+      data: {
+        name: 'zs',
+        age: 20
+      },
+      success: (res) => {
+        console.log(res.data)
+      }
+    })
+  },
+
+  // 发起POST请求
+  postInfo() {
+    wx.request({
+      url: 'https://www.escook.cn/api/post',
+      method: "POST",
+      data: {
+        name: 'ls',
+        age: 33
+      },
+      success: (res) => {
+        console.log(res.data)
+      }
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.getInfo()
+    this.postInfo()
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

mp_02/pages/home/home.json

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

mp_02/pages/home/home.wxml

@@ -0,0 +1,3 @@
+<!--pages/home/home.wxml-->
+<button bindtap="getInfo">发起GET请求</button>
+<button bindtap="postInfo">发起POST请求</button>

mp_02/pages/home/home.wxss

@@ -0,0 +1 @@
+/* pages/home/home.wxss */

mp_02/pages/index/index.js

@@ -0,0 +1,106 @@
+//index.js
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    info: 'hello world',
+    imgSrc: 'http://www.itheima.com/images/logo.png',
+    randomNum1: Math.random() * 10,
+    randomNum2: Math.random().toFixed(2),
+    count: 0,
+    msg: '你好，',
+    type: 1,
+    flag: true,
+    arr1: ['苹果', '华为', '小米'],
+    userList: [
+      { id: 1, name: '小红' },
+      { id: 2, name: '小黄' },
+      { id: 3, name: '小白' }
+    ]
+  },
+
+  // 定义按钮的事件处理函数
+  btnTapHandler(e) {
+    console.log(e)
+  },
+
+  // +1 按钮的点击事件处理函数
+  CountChange() {
+    this.setData({
+      count: this.data.count + 1
+    })
+  },
+
+  btnTap2(e) {
+    this.setData({
+      count: this.data.count + e.target.dataset.info
+    })
+  },
+
+  // input 输入框的事件处理函数
+  inputHandler(e) {
+    // console.log(e.detail.value)
+    this.setData({
+      msg: e.detail.value
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

mp_02/pages/index/index.json

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

mp_02/pages/index/index.wxml

@@ -0,0 +1,41 @@
+<!--index.wxml-->
+
+<!-- 数据绑定 -->
+<!-- <view>{{info}}</view>
+<image src="{{imgSrc}}" mode="widthFix"></image>
+<view>{{randomNum1 >=5 ? '数字大于或等于5' : '数字小于5'}}</view>
+<view>{{randomNum2 * 100}}</view> -->
+
+<!-- 事件绑定 -->
+<!-- <button type="primary" bindtap="btnTapHandler">按钮</button>
+<button type="primary" bindtap="CountChange">+1</button>
+<button type="primary" bindtap="btnTap2" data-info="{{2}}">+2</button>
+<input value="{{msg}}" bindinput="inputHandler"></input> -->
+
+<!-- 条件渲染 -->
+<!-- <view wx:if="{{type === 1}}">男</view>
+<view wx:elif="{{type === 2}}">女</view>
+<view wx:else>保密</view> -->
+
+<!-- <block wx:if="{{false}}">
+	<view>view1</view>
+	<view>view2</view>
+</block> -->
+
+<!-- <view hidden="{{!flag}}">条件为 true 的时候隐藏元素，否则显示</view>
+<view wx:if="{{flag}}">这是使用 wx:if 控制的元素</view> -->
+
+<!-- 列表渲染 -->
+<view wx:for="{{arr1}}" wx:key="index">
+	索引是：{{index}}，item 项是：{{item}}
+</view>
+
+<view>~~~~~~</view>
+
+<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
+	索引是：{{idx}}，item 项是：{{itemName}}
+</view>
+
+<view>~~~~~~</view>
+
+<view wx:for="{{userList}}" wx:key="id" class="username">{{item.name}}</view>

mp_02/pages/index/index.wxss

@@ -0,0 +1,34 @@
+/**index.wxss**/
+@import "/common/common.wxss";
+
+view {
+  background-color: lightpink;
+}
+
+.userinfo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.userinfo-avatar {
+  width: 128rpx;
+  height: 128rpx;
+  margin: 20rpx;
+  border-radius: 50%;
+}
+
+.userinfo-nickname {
+  color: #aaa;
+}
+
+.usermotto {
+  margin-top: 200px;
+}
+
+input {
+  border: 1px solid #eee;
+  margin: 5px;
+  padding: 5px;
+  border-radius: 3px;
+}

mp_02/pages/logs/logs.js

@@ -0,0 +1,15 @@
+//logs.js
+const util = require('../../utils/util.js')
+
+Page({
+  data: {
+    logs: []
+  },
+  onLoad: function () {
+    this.setData({
+      logs: (wx.getStorageSync('logs') || []).map(log => {
+        return util.formatTime(new Date(log))
+      })
+    })
+  }
+})

mp_02/pages/logs/logs.json

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

mp_02/pages/logs/logs.wxml

@@ -0,0 +1,6 @@
+<!--logs.wxml-->
+<view class="container log-list">
+  <block wx:for="{{logs}}" wx:for-item="log">
+    <text class="log-item">{{index + 1}}. {{log}}</text>
+  </block>
+</view>

mp_02/pages/logs/logs.wxss

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

mp_02/pages/message/message.js

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

mp_02/pages/message/message.json

@@ -0,0 +1,9 @@
+{
+  "usingComponents": {},
+  "navigationBarBackgroundColor": "#ff0000",
+  "navigationBarTextStyle": "black",
+  "navigationBarTitleText": "消息页面",
+  "backgroundColor": "#ff0000",
+  "backgroundTextStyle": "light",
+  "enablePullDownRefresh": true
+}

mp_02/pages/message/message.wxml

@@ -0,0 +1,2 @@
+<!--pages/message/message.wxml-->
+<text>pages/message/message.wxml</text>

mp_02/pages/message/message.wxss

@@ -0,0 +1 @@
+/* pages/message/message.wxss */

mp_02/pages/test/test.js

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

mp_02/pages/test/test.json

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

mp_02/pages/test/test.wxml

@@ -0,0 +1,3 @@
+<!--pages/test/test.wxml-->
+<view>123</view>
+<view>123</view>

mp_02/pages/test/test.wxss

@@ -0,0 +1,4 @@
+/* pages/test/test.wxss */
+view {
+  color: white;
+}

mp_02/project.config.json

@@ -0,0 +1,56 @@
+{
+	"description": "项目配置文件",
+	"packOptions": {
+		"ignore": []
+	},
+	"setting": {
+		"urlCheck": true,
+		"es6": true,
+		"postcss": true,
+		"preloadBackgroundData": false,
+		"minified": true,
+		"newFeature": true,
+		"coverView": true,
+		"autoAudits": false,
+		"showShadowRootInWxmlPanel": true,
+		"scopeDataCheck": false,
+		"checkInvalidKey": true,
+		"checkSiteMap": true,
+		"uploadWithSourceMap": true,
+		"babelSetting": {
+			"ignore": [],
+			"disablePlugins": [],
+			"outputPath": ""
+		},
+		"useCompilerModule": false,
+		"userConfirmedUseCompilerModuleSwitch": false
+	},
+	"compileType": "miniprogram",
+	"libVersion": "2.11.1",
+	"appid": "wx5eda4566d93729d6",
+	"projectname": "mp_02",
+	"debugOptions": {
+		"hidedInDevtools": []
+	},
+	"isGameTourist": false,
+	"simulatorType": "wechat",
+	"simulatorPluginLibVersion": {},
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"game": {
+			"currentL": -1,
+			"list": []
+		},
+		"miniprogram": {
+			"current": -1,
+			"list": []
+		}
+	}
+}

mp_02/sitemap.json

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

mp_02/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
+}

mp_03/app.js

@@ -0,0 +1,31 @@
+//app.js
+App({
+
+  /**
+   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
+   */
+  onLaunch: function () {
+    // console.log('onLaunch')
+  },
+
+  /**
+   * 当小程序启动，或从后台进入前台显示，会触发 onShow
+   */
+  onShow: function (options) {
+    // console.log('onShow')
+  },
+
+  /**
+   * 当小程序从前台进入后台，会触发 onHide
+   */
+  onHide: function () {
+    // console.log('onHide')
+  },
+
+  /**
+   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
+   */
+  onError: function (msg) {
+    
+  }
+})

mp_03/app.json

@@ -0,0 +1,38 @@
+{
+  "pages": [
+    "pages/home/home",
+    "pages/message/message",
+    "pages/contact/contact",
+    "pages/info/info"
+  ],
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#13A7A0",
+    "navigationBarTitleText": "WeChat",
+    "navigationBarTextStyle": "black"
+  },
+  "tabBar": {
+    "list": [
+      {
+        "pagePath": "pages/home/home",
+        "text": "首页",
+        "iconPath": "/images/tabs/home.png",
+        "selectedIconPath": "/images/tabs/home-active.png"
+      },
+      {
+        "pagePath": "pages/message/message",
+        "text": "消息",
+        "iconPath": "/images/tabs/message.png",
+        "selectedIconPath": "/images/tabs/message-active.png"
+      },
+      {
+        "pagePath": "pages/contact/contact",
+        "text": "联系我们",
+        "iconPath": "/images/tabs/contact.png",
+        "selectedIconPath": "/images/tabs/contact-active.png"
+      }
+    ]
+  },
+  "style": "v2",
+  "sitemapLocation": "sitemap.json"
+}

mp_03/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;
+} 

mp_03/pages/contact/contact.js

@@ -0,0 +1,94 @@
+// pages/contact/contact.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    colorList: [],
+    isloding: false
+  },
+
+  getColors() {
+    this.setData({
+      isloding: true
+    })
+    // 需要展示 loading 效果
+    wx.showLoading({
+      title: '数据加载中...'
+    })
+    wx.request({
+      url: 'https://www.escook.cn/api/color',
+      method: 'get',
+      success: ({ data: res }) => {
+        this.setData({
+          colorList: [...this.data.colorList, ...res.data]
+        })
+      },
+      complete: () => {
+        wx.hideLoading()
+        this.setData({
+          isloding: false
+        })
+      }
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.getColors()
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+    if (this.data.isloding) return
+
+    this.getColors()
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

mp_03/pages/contact/contact.json

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

mp_03/pages/contact/contact.wxml

@@ -0,0 +1 @@
+<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{item}}</view>

mp_03/pages/contact/contact.wxss

@@ -0,0 +1,11 @@
+/* pages/contact/contact.wxss */
+.num-item {
+  border: 1rpx solid #efefef;
+  border-radius: 8rpx;
+  line-height: 200rpx;
+  margin: 15rpx;
+  text-align: center;
+  text-shadow: 0rpx 0rpx 5rpx #fff;
+  box-shadow: 1rpx 1rpx 6rpx #aaa;
+  color: black;
+}

mp_03/pages/home/home.js

@@ -0,0 +1,85 @@
+// pages/home/home.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  // 通过编程式导航跳转到 tabBar 页面
+  gotoMessage() {
+    wx.switchTab({
+      url: '/pages/message/message'
+    })
+  },
+
+  gotoInfo() {
+    wx.navigateTo({
+      url: '/pages/info/info'
+    })
+  },
+
+  gotoInfo2() {
+    wx.navigateTo({
+      url: '/pages/info/info?name=ls&gender=男'
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+    console.log('触发了上拉触底的事件')
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

mp_03/pages/home/home.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "onReachBottomDistance": 150
+}

mp_03/pages/home/home.wxml

@@ -0,0 +1,13 @@
+<!--pages/home/home.wxml-->
+<text>pages/home/home.wxml</text>
+
+<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
+<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>
+
+<button bindtap="gotoMessage">跳转到message页面</button>
+<button bindtap="gotoInfo">跳转到info页面</button>
+
+<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>
+<button bindtap="gotoInfo2">跳转到info页面</button>
+
+<view class="box"></view>

mp_03/pages/home/home.wxss

@@ -0,0 +1,6 @@
+/* pages/home/home.wxss */
+
+.box {
+  height: 2000rpx;
+  background-color: lightblue;
+}

mp_03/pages/info/info.js

@@ -0,0 +1,76 @@
+// pages/info/info.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    // 导航传递过来的参数对象
+    query: {}
+  },
+
+  goBack() {
+    wx.navigateBack({
+      delta: 1
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    console.log(options)
+    this.setData({
+      query: options
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

mp_03/pages/info/info.json

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

mp_03/pages/info/info.wxml

@@ -0,0 +1,4 @@
+<!--pages/info/info.wxml-->
+<text>pages/info/info.wxml</text>
+<navigator open-type="navigateBack">后退</navigator>
+<button bindtap="goBack">后退</button>

mp_03/pages/info/info.wxss

@@ -0,0 +1 @@
+/* pages/info/info.wxss */

mp_03/pages/message/message.js

@@ -0,0 +1,78 @@
+// pages/message/message.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    count: 0,
+    username: 'zs',
+    country: 'CHINA'
+  },
+
+  addCount() {
+    this.setData({
+      count: this.data.count + 1
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+    // console.log('触发了message页面的下拉刷新')
+    this.setData({
+      count: 0
+    })
+    wx.stopPullDownRefresh()
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

mp_03/pages/message/message.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {},
+  "enablePullDownRefresh": true,
+  "backgroundColor": "#efefef",
+  "backgroundTextStyle": "dark"
+}

mp_03/pages/message/message.wxml

@@ -0,0 +1,16 @@
+<!--pages/message/message.wxml-->
+<text>pages/message/message.wxml</text>
+
+<view>count值是：{{count}}</view>
+<button bindtap="addCount">+1</button>
+
+<view>{{m1.toUpper(username)}}</view>
+<view>{{m2.toLower(country)}}</view>
+
+<wxs src="../../utils/tools.wxs" module="m2"></wxs>
+
+<wxs module="m1">
+  module.exports.toUpper = function(str) {
+    return str.toUpperCase()
+  }
+</wxs>

mp_03/pages/message/message.wxss

@@ -0,0 +1 @@
+/* pages/message/message.wxss */

mp_03/project.config.json

@@ -0,0 +1,72 @@
+{
+	"description": "项目配置文件",
+	"packOptions": {
+		"ignore": []
+	},
+	"setting": {
+		"urlCheck": true,
+		"es6": true,
+		"postcss": true,
+		"preloadBackgroundData": false,
+		"minified": true,
+		"newFeature": true,
+		"coverView": true,
+		"autoAudits": false,
+		"showShadowRootInWxmlPanel": true,
+		"scopeDataCheck": false,
+		"checkInvalidKey": true,
+		"checkSiteMap": false,
+		"uploadWithSourceMap": true,
+		"babelSetting": {
+			"ignore": [],
+			"disablePlugins": [],
+			"outputPath": ""
+		},
+		"useCompilerModule": false,
+		"userConfirmedUseCompilerModuleSwitch": false
+	},
+	"compileType": "miniprogram",
+	"libVersion": "2.11.2",
+	"appid": "wx5eda4566d93729d6",
+	"projectname": "mp_03",
+	"debugOptions": {
+		"hidedInDevtools": []
+	},
+	"isGameTourist": false,
+	"simulatorType": "wechat",
+	"simulatorPluginLibVersion": {},
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"plugin": {
+			"current": -1,
+			"list": []
+		},
+		"game": {
+			"currentL": -1,
+			"list": []
+		},
+		"gamePlugin": {
+			"current": -1,
+			"list": []
+		},
+		"miniprogram": {
+			"current": -1,
+			"list": [
+				{
+					"id": -1,
+					"name": "pages/message/message",
+					"pathName": "pages/message/message",
+					"query": "",
+					"scene": null
+				}
+			]
+		}
+	}
+}

mp_03/sitemap.json

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

mp_03/utils/tools.wxs

@@ -0,0 +1,7 @@
+function toLower(str) {
+  return str.toLowerCase()
+}
+
+module.exports = {
+  toLower: toLower
+}

mp_03/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
+}

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

mp_04/app.json

@@ -0,0 +1,44 @@
+{
+  "pages": [
+    "pages/home/home",
+    "pages/message/message",
+    "pages/contact/contact"
+  ],
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#13A7A0",
+    "navigationBarTitleText": "WeChat",
+    "navigationBarTextStyle": "black"
+  },
+  "tabBar": {
+    "list": [
+      {
+        "pagePath": "pages/home/home",
+        "text": "首页",
+        "iconPath": "/images/tabs/home.png",
+        "selectedIconPath": "/images/tabs/home-active.png"
+      },
+      {
+        "pagePath": "pages/message/message",
+        "text": "消息",
+        "iconPath": "/images/tabs/message.png",
+        "selectedIconPath": "/images/tabs/message-active.png"
+      },
+      {
+        "pagePath": "pages/contact/contact",
+        "text": "联系我们",
+        "iconPath": "/images/tabs/contact.png",
+        "selectedIconPath": "/images/tabs/contact-active.png"
+      }
+    ]
+  },
+  "style": "v2",
+  "sitemapLocation": "sitemap.json",
+  "usingComponents": {
+    "my-test1": "/components/test/test",
+    "my-test2": "/components/test2/test2",
+    "my-test3": "/components/test3/test3",
+    "my-test4": "/components/test4/test4",
+    "my-test5": "/components/test5/test5"
+  }
+}

mp_04/app.wxss

@@ -0,0 +1,20 @@
+/**app.wxss**/
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0;
+  box-sizing: border-box;
+}
+
+/* 只有 class 选择器受样式隔离的影响 */
+.g-red-text {
+  color: red;
+}
+
+/* 属性、标签、id 选择器不受样式隔离的影响 */
+/* text {
+  font-size: 25rpx;
+} */

mp_04/behaviors/my-behavior.js

@@ -0,0 +1,7 @@
+module.exports = Behavior({
+  data: {
+    username: 'zs'
+  },
+  properties: {},
+  methods: {}
+})

mp_04/components/test/test.js

@@ -0,0 +1,52 @@
+// components/test/test.js
+Component({
+  options: {
+    styleIsolation: 'shared'
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    // 第一种方式：简化的方式
+    // max: Number
+    // 第二种方式：完整的定义方式
+    max: {
+      type: Number,
+      value: 10
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    count: 0
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 点击事件处理函数
+    addCount() {
+      if (this.data.count >= this.properties.max) return
+      this.setData({
+        count: this.data.count + 1,
+        max: this.properties.max + 1
+      })
+
+      this._showCount()
+    },
+    _showCount() {
+      wx.showToast({
+        title: 'count是' + this.data.count,
+        icon: 'none'
+      })
+    },
+    showInfo() {
+      console.log(this.data)
+      console.log(this.properties)
+      console.log(this.data === this.properties)
+    }
+  }
+})

mp_04/components/test/test.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

mp_04/components/test/test.wxml

@@ -0,0 +1,8 @@
+<!--components/test/test.wxml-->
+<text class="g-red-text">components/test/test.wxml</text>
+
+<view>count的值是：{{count}}</view>
+<button bindtap="addCount">+1</button>
+<button bindtap="showInfo">showInfo</button>
+
+<view>max属性的值是：{{max}}</view>

mp_04/components/test/test.wxss

@@ -0,0 +1,4 @@
+/* components/test/test.wxss */
+.g-red-text {
+  font-weight: bold;
+}

mp_04/components/test2/test2.js

@@ -0,0 +1,41 @@
+// components/test2/test2.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    n1: 0,
+    n2: 0,
+    sum: 0
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    addN1() {
+      this.setData({
+        n1: this.data.n1 + 1
+      })
+    },
+    addN2() {
+      this.setData({
+        n2: this.data.n2 + 1
+      })
+    }
+  },
+  observers: {
+    'n1, n2': function (newN1, newN2) {
+      this.setData({
+        sum: newN1 + newN2
+      })
+    }
+  }
+})

mp_04/components/test2/test2.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

mp_04/components/test2/test2.wxml

@@ -0,0 +1,5 @@
+<!--components/test2/test2.wxml-->
+<view>{{n1}} + {{n2}} = {{sum}}</view>
+
+<button bindtap="addN1">n1+1</button>
+<button bindtap="addN2">n2+1</button>