微信小程序学习笔记(1) -- 基础知识入门

亦凉 2023-02-20 13:58 105阅读 0赞

### 文章目录 ###

*  微信小程序
 *  一、简单了解
 *   *  1.常用api
     *  2.常用ui地址
 *  二、微信小程序应用配置
 *   *  根目录
     *   *  app.json界面外观
         *   *  pages
             *  window
             *  debug:
         *  app.js:
         *   *  
         *  wxss
     *  页面结构
     *   *   *  page.json
     *  标签栏
 *  三、逻辑层与界面层分离架构
 *   *  逻辑层的JavaScript
     *   *   *  演示: getApp
             *  演示 getCurrentPages()
             *  演示符合commonjs规范
             *  演示 wx对象
     *  界面层（数据绑定）
     *   *  数据绑定--元素上绑定
         *  数据绑定--属性上绑定数据
         *  数据绑定--知识补充
         *   *  1.在\{ \{\}\}中写字符串
             *  2.计算变量
             *  3.\{ \{\}\} 可以解决 语法解析 true /fasle 出现bug的问题
         *  列表渲染

# 微信小程序 #

# 一、简单了解 #

## 1.常用api ##

<[https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/\#%E4%BD%93%E9%AA%8C%E5%B0%8F%E7%A8%8B%E5%BA%8F][https_developers.weixin.qq.com_miniprogram_dev_framework_quickstart_E4_BD_93_E9_AA_8C_E5_B0_8F_E7_A8_8B_E5_BA_8F]>

官方示例源码地址：

<[https://github.com/wechat-miniprogram/miniprogram-demo][https_github.com_wechat-miniprogram_miniprogram-demo]>  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 2]

pages每个文件夹就是一个页面:

## 2.常用ui地址 ##

[https://weui.io/\#][https_weui.io]  
![在这里插入图片描述][2020062722471382.png]

# 二、微信小程序应用配置 #

## 根目录 ##

### app.json界面外观 ###

[https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html][https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_app.html]

"backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
     }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 3]

![img][]

#### pages ####

设置页面

#### window ####

设置导航栏，设置下拉刷新

#### debug: ####

debug: true 调试模式

### app.js: ###

//app.js
    var obj = {
      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的方法
    App(obj)

//调用App方法的作用是用来创建应用程序实例对象

//定义应用程序的声明周期事件

####  ####

### wxss ###

写一些样式的文件

## 页面结构 ##

[https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html][https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_page.html]

log.json 覆盖app.json里面的全局外观配置。

#### page.json ####

页面中配置项在当前页面会覆盖 `app.json` 的 `window` 中相同的配置项。文件内容为一个 JSON 对象

> 注意： 只能设置 window的配置，不能设置pages和debug的参数

## 标签栏 ##

在app.json中设置tabBar.

tabBar中list设置2-5个标签

"tabBar": { 
          "list":[{ 
            "pagePath":"pages/index/index",
            "text": "首页"
          },
          { 
            "pagePath": "pages/logs/logs",
            "text": "日志"
          }
          ]     
    }

"tabBar": {
        "color": "#444",
        "SelectedColor": "#219BF3",
        "backgroundColor": "#e0e0e0",
        "borderStyle": "white",
        "position": "bottom",
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath":"images/1.png",
            "selectedIconPath":"images/3.png"
          },
          {
            "pagePath": "pages/logs/logs",
            "text": "日志",
            "iconPath": "images/1.png",
            "selectedIconPath": "images/3.png"
          }
        ]
      },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 4]

# 三、逻辑层与界面层分离架构 #

*  逻辑层:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 5]

*  界面层

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 6]

## 逻辑层的JavaScript ##

> 和普通的js的差别:

1：没有bom和dom

![在这里插入图片描述][20200627225737248.png]  
![在这里插入图片描述][20200627225749961.png]

2：小程序的js有一些额外的成员

*  App 方法 用于定义应用程序实例对象
 *  Page方法 用于定义页面对象
 *  getApp 方法 用于获取全局应用程序对象
 *  getCurrentPges 方法 用来获取当前页面的调用栈（数组，最后一个是当前页面）
 *  wx对象 用来提供核心Api的:
    
    专门的页面介绍:[https://developers.weixin.qq.com/miniprogram/dev/api/][https_developers.weixin.qq.com_miniprogram_dev_api]
    
    //console.log(wx)

1.  小程序的js是支持commonjs规范的:
    
    //const foo = require(’./utils/foo.js’)
    
    //foo.say(‘world’)

#### 演示: getApp ####

app.js中:

定义个foo方法:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 7]

index.js中:直接调用:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 8]

打印结果如下:显示已经调用成功。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 9]

#### 演示 getCurrentPages() ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 11]

#### 演示符合commonjs规范 ####

在utils下建个foo.js

function say(msg){ 
      console.log('Hello' + msg)
    }
    //导出say方法
    module.exports = { 
      say: say
    }

在app.js中调用:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 12]

看下运行效果:

![在这里插入图片描述][20200627225936429.png]

总结就是: 一个export 一个 require

> 不支持export.xxx；只支持module.exports

#### 演示 wx对象 ####

在app.js中

console.log(wx)

效果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 13]

## 界面层（数据绑定） ##

数据绑定

### 数据绑定–元素上绑定 ###

index模块

//index.js
    //获取应用实例
    const app = getApp()
    
    Page({ 
      //为页面提供数据的
      //data就是界面和逻辑之间的桥梁
      data: { 
        message: 'Hello World',
        person:{ 
          name:"小胡"
        }  
      }
    
    })

页面效果:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 14]

### 数据绑定–属性上绑定数据 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 15]

/**index.wxss**/
    .hello{ 
      width: 100px;
      height: 100px;
      background-color: pink;
    }

看下效果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 16]

源码地址:

[https://github.com/hufanglei/wx-demo/tree/attr-bind][https_github.com_hufanglei_wx-demo_tree_attr-bind]

数据绑定–属性上绑定数据–拼接数据

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 17]

> 注意: world后面有空格。

/**index.wxss**/
    .hello{ 
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    
    .world  { 
      background-color:yellow;
    }

效果:

![在这里插入图片描述][2020062723010410.png]

### 数据绑定–知识补充 ###

#### 1.在\{ \{\}\}中写字符串 ####

<view class="world {
       { viewClassName }}">
      <text>{
       { 'hello' }}</text>
    </view>

效果(hello不是变量)：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 18]

#### 2.计算变量 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 19]

#### 3.\{ \{\}\} 可以解决 语法解析 true /fasle 出现bug的问题 ####

举例说明:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 20]

不加\{ \{\}\}就会出现问题

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 21]

居然选中了！！

> 解决方式就是： false外面包一层 \{ \{\}\}

### 列表渲染 ###

> 1: 明确页面结构的循环体

> 2：删除多余的重复内容，只保留一个

> 3：在剩下的这个价格wx:for属性，属性值等于要遍历的数据源，数据源是数组

> 4：在这个标签(循环体)内部使用item代表当前被遍历的元素

> 给被遍历的对象定义名称 wx:for-item

> 给遍历的下标(索引) 定义名称 wx:for-index

代码演示:

<view class="container">
    
    <text>{
       {message}}</text>
    <text>{
       {person.name}}</text>
    
    
    <view class="world { { viewClassName }}"></view>
    
    
    <text>{
       { 'hello' }}</text>
    <text>{
       { 111 }}</text>
    <text>{
       { 111 + 999 }}</text>
    <text>{
       { 100 > 50 ? '你对了' : '你错了'}}</text>
    
    <checkbox checked="false">
    </checkbox>
    
    
    
    
        <view wx:for="{ { todos }}" >
          <checkbox checked="{ {item.completed}}"></checkbox>
          <text>{
       {item.name}}</text>    
        </view>  
      如果全局属性中有item这种关键词，可以使用wxlfor-item去给当前遍历数据起别名
        <view wx:for="{ { todos }}" wx:for-item="aaa">
          <checkbox checked="{ {aaa.completed}}"></checkbox>
          <text>{
       {aaa.name}}</text>
        </view>
        
    
    拿序号
        <view wx:for="{ { todos }}" wx:for-item="aaa" >
          <checkbox checked="{ {aaa.completed}}"></checkbox>
          {
       {index}}
          <text>{
       {aaa.name}}</text>
        </view>    
    
    拿序号并起别名
        <view wx:for="{ { todos }}" wx:for-item="aaa" wx:for-index="i" >
          <checkbox checked="{ {aaa.completed}}"></checkbox>
          {
       {i}}
          <text>{
       {aaa.name}}</text>
        </view>    
    
    打印九九乘法表
    <view wx:for="{ {[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
      <view wx:for="{ {[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
      
          <view wx:if="{ {i <= j}}">
              {
       {i}} * {
       {j}} = {
       {i * j}}
          </view>
      </view>
    </view> 
    
    
    
    
    </view>

显示效果如下:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 22]

--------------------

完

[https_developers.weixin.qq.com_miniprogram_dev_framework_quickstart_E4_BD_93_E9_AA_8C_E5_B0_8F_E7_A8_8B_E5_BA_8F]: https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/#%E4%BD%93%E9%AA%8C%E5%B0%8F%E7%A8%8B%E5%BA%8F
[https_github.com_wechat-miniprogram_miniprogram-demo]: https://github.com/wechat-miniprogram/miniprogram-demo
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200627224456775.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200627224518535.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020062722553938.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[https_weui.io]: https://weui.io/#
[2020062722471382.png]: https://img-blog.csdnimg.cn/2020062722471382.png
[https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_app.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200627225620652.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[img]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9yZXMud3gucXEuY29tL3d4ZG9jL2Rpc3QvYXNzZXRzL2ltZy9jb25maWcuMzQ0MzU4YjEuanBn?x-oss-process=image/format,png
[https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_page.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200627225658448.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200627225709514.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200627225719412.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[20200627225737248.png]: https://img-blog.csdnimg.cn/20200627225737248.png
[20200627225749961.png]: https://img-blog.csdnimg.cn/20200627225749961.png
[https_developers.weixin.qq.com_miniprogram_dev_api]: https://developers.weixin.qq.com/miniprogram/dev/api/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200627225811267.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200627225821740.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200627230558824.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/2020062722590189.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200627225911614.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20200627225925388.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[20200627225936429.png]: https://img-blog.csdnimg.cn/20200627225936429.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/2020062722595046.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/2020062723001179.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20200627230022756.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20200627230038328.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[https_github.com_hufanglei_wx-demo_tree_attr-bind]: https://github.com/hufanglei/wx-demo/tree/attr-bind
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20200627230050365.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[2020062723010410.png]: https://img-blog.csdnimg.cn/2020062723010410.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/202006272301148.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/20200627230130126.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 20]: https://img-blog.csdnimg.cn/20200627230145210.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 21]: https://img-blog.csdnimg.cn/20200627230155342.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1_size_16_color_FFFFFF_t_70 22]: https://img-blog.csdnimg.cn/2020062723021874.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzIxMzQ5NjM1,size_16,color_FFFFFF,t_70