小程序开发学习-小白逐步学习更新中

男娘i 2023-02-18 03:05 28阅读 0赞

一、环境部署

1.申请一个AppID

在网址：[https://mp.weixin.qq.com/][https_mp.weixin.qq.com]，点击截图中红色圈住部分

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

2.进入页面后，下滑到底端，点击前往注册

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1][]

3.注册之后，登录小程序后台 ：[https://mp.weixin.qq.com/wxamp/home/guide?lang=zh\_CN&token=668029433][https_mp.weixin.qq.com_wxamp_home_guide_lang_zh_CN_token_668029433]，我们可以在菜单 “开发”-“开发设置” 看到小程序的AppID了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2][]

4.下载微信开发者工具，用上面同一个微信号登录开发者工具

5.打开开发者工具，点击新建小程序，输入AppID

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 4][]

6.新建后，创建云服务openid

官方文档：[https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html][https_developers.weixin.qq.com_miniprogram_dev_wxcloud_basis_getting-started.html]

在开发者工具工具栏左侧，点击 “云开发” 按钮

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 5][]

点击开通按钮，然后按照提示进行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 6][]

注：AppID 首次开通云环境后，需等待大约 10 分钟方可正常使用云 API，在此期间官方后台服务正在做准备服务，如尝试在小程序中调用云 API 则会报 cloud init error：\{ errMsg: "invalid scope" \} 的错误

7.新建云函数： “云开发”控制台内

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 7][]

8.找到云开发的环境ID

点击云开发控制台窗口里的设置图标，在环境变量的标签页找到环境名称和环境ID。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 8][]

当云开发服务开通后，我们可以在小程序源代码cloudfunctions文件夹名看到你的环境名称。如果在cloudfunctions文件夹名显示的不是环境名称，而是“未指定环境”，可以鼠标右键该文件夹，选择“更多设置”，然后再点击“设置”小图标，选择环境并确定。

9.指定小程序的云开发环境

打开开发者工具中打开源代码文件夹miniprogram里的app.js，在 env: 'my-env-id'处改成你的环境ID

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 9][]

10.微信小程序云开发获取openid报错

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 10][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 11][]

按照提示右键目录，问题成功解决

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 12][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 13][]

二、做底部导航栏

1.pages文件夹下新建文件夹home

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 14][]

2.新建文件夹home下面新建页面index，输入index后回车，自动生成文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 15][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 16][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 17][]

3.修改app.json文件

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

新增任何页面都需要在app.json文件的"pages":\[\]内添加路径

然后需要写导航栏

"tabBar": {
        "list": [{
          "pagePath": "pages/home/index",
          "text": "首页"
        }, {
          "pagePath": "pages/index/index",
          "text": "设置"
        }]
      },

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 18][]

4.简单的导航栏就完成啦

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 19][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 20][]

三、页面的简单开发

官网学习链接：[https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html\#WXML-%E6%A8%A1%E6%9D%BF][https_developers.weixin.qq.com_miniprogram_dev_framework_quickstart_code.html_WXML-_E6_A8_A1_E6_9D_BF]

在小程序中WXML 充当的就是类似 HTML 的角色

和 HTML 非常相似，WXML 由标签、属性等等构成。

1.标签名字

HTML的标签是:div, p, span等

小程序的 WXML 用的标签是 :view, button, text

2.wx:if 这样的属性以及 \{ \{ \}\} 这样的表达式

网页中我们通常会通过 JS 操作 DOM

小程序的框架也是用到了这个思路，如果你需要把一个 Hello World 的字符串显示在界面上。

WXML 是这么写 :

在 JS 文件里边声明 clickMe 方法来响应这次点击操作：

Page({
      clickMe: function() {
        this.setData({ msg: "Hello World" })
      }
    })

通过 \{ \{ \}\} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

3.WXSS 样式:[https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html][https_developers.weixin.qq.com_miniprogram_dev_framework_view_wxss.html]

相当于我们的css文件

新增了尺寸单位 rpx

WXSS 仅支持部分 CSS 选择器

四、引入本地图片

1.微信开发工具 打开项目

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 21][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 22][]

2.新建个文件夹（放项目的一级或者二级目录都可以），然后把图片拷贝到这个目录下。

3.代码的两种实现方法

一种是：直接在wxml文件下使用图片标签，并且直接写出路径

另一种是：

在wxml文件下使用图片标签

然后在js文件中设置路径

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 23][]

等等，等有时间的时候继续学习并且同步更新博客

五、index.wxml引入另外一个页面

先通过import引入另外一个wxml页面，然后用template组件

（1）index.wxml中template 标签的is属性与template.wxml中template 标签的name属性值相同

（2）index.wxml文件中要通过import标签声明需要使用的模板文件

index.wxml

<import src ="./swiper.wxml"/>
    <view class="container">
      <view class="box">
      　  <view>学习引入另外一个页面</view>
          <template is="swiper"/>
          <view>通过template引入swiper.wxml</view>
          <text>Hello World</text>
          <image src="../images/tree.jpg"></image>
      </view>
    </view>

swiper.wxml

<template name="swiper">
    123哒哒哒哒哒
    </template>

六、引入样式

在index.wxss文件内，引入样式文件，那么这个样式文件就会生效

@import "./swiper.wxss";

七、自定义组件

1.新建json wxml wxss js这四个文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 24][]

2.在swiper.json中进行自定义组件声明,也就是告诉开发者这是一个组件:

{
      "component": true
    }

3.swiper.wxml

<view class="container">
      <view class="testColor">{
       {text}}{
       {innerText}}</view>
    </view>

4.swiper.wxss

.testColor{color:red}

5.注册组件

在自定义组件的js文件中,需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法,如在cpt.js中:

Component({
      properties: {
        // 这里定义了innerText属性，属性值可以在组件使用时指定
        innerText: {
          type: String,
          value: 'default value',
        }
      },
      data: {
        // 这里是一些组件内部数据
        text:"text"
      },
      methods: {
        // 这里是一个自定义方法，将自定义组件的函数都写在这里面
        customMethod: function () {
          console.log('customMethod')
        }
      }
    })

6.使用自定义组件  
在你要用组件的那个页面中引用声明.也就是在index.json文件中：

{
      "navigationBarTitleText": "学习轮播图",
      "usingComponents": {
        "componentName": "./swiper/swiper"
      }
    }

在index.wxml中使用:（注意里面引用的组件名是上面usingComponents内的名字）

<view class="box">
      <view>学习引入另外一个页面</view>
      <componentName inner-text="自定义组件" />
      <image src="../images/tree.jpg"></image>
    </view>

八、审查元素

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 25][]

九、实现轮播图：微信小程序实现轮播图，自定义点击图标切换图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 26][]

swiper.wxml

<view class="container">
      <view class="testColor">{
       {text}}{
       {innerText}}</view>
      <view class="page-body">
        <view class="swiperContainer">
          <swiper indicator-dots="{
       {indicatorDots}}"
            autoplay="{
       {autoplay}}" interval="{
       {interval}}" duration="{
       {duration}}" current="{
       {currentIndex}}">
            <block wx:for="{
       {imgUrls}}" wx:key="*this">
              <swiper-item>
                <image src="{
       {item}}" class="slide-image"/>
              </swiper-item>
            </block>
          </swiper>
          <image src="{
       {preImage}}" class="pre-image" bindtap="preClick"/>
          <image src="{
       {nextImage}}" class="next-image" bindtap="nextClick"/>
        </view>
        <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
          <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_switch">
              <view class="weui-cell__bd">指示点</view>
              <view class="weui-cell__ft">
                <switch checked="{
       {indicatorDots}}" bindchange="changeIndicatorDots" />
              </view>
            </view>
            <view class="weui-cell weui-cell_switch">
              <view class="weui-cell__bd">自动播放</view>
              <view class="weui-cell__ft">
                <switch checked="{
       {autoplay}}" bindchange="changeAutoplay" />
              </view>
            </view>
          </view>
        </view>
        <view class="page-section page-section-spacing">
          <view class="page-section-title">
            <text>幻灯片切换时长(ms)</text>
            <text class="info">{
       {duration}}</text>
          </view>
          <slider bindchange="durationChange" value="{
       {duration}}" min="500" max="2000"/>
          <view class="page-section-title">
            <text>自动播放间隔时长(ms)</text>
            <text class="info">{
       {interval}}</text>
          </view>
          <slider bindchange="intervalChange" value="{
       {interval}}" min="2000" max="10000"/>
        </view>
      </view>
    </view>

swiper.js

Component({
      properties: {
        // 这里定义了innerText属性，属性值可以在组件使用时指定
        innerText: {
          type: String,
          value: 'default value',
        }
      },
      data: {
        // 这里是一些组件内部数据
        someData: 1,
        text: "text",
        background: ['red', 'green', 'yellow'],
        imgUrls: ["../../images/people.jpg", "../../images/tree.jpg"],
        preImage: "../../images/left.png",
        nextImage: "../../images/right.png",
        currentIndex: 0,//当前所在页面的 index
        indicatorDots: true, //是否显示面板指示点
        autoplay: false, //是否自动切换
        interval: 3000, //自动切换时间间隔,3s
        duration: 1000, //滑动动画时长1s
        circular: true, //是否采用衔接滑动
        vertical: false
      },
      methods: {
        // 是否要指示点
        changeIndicatorDots() {
          this.setData({
            indicatorDots: !this.data.indicatorDots
          })
        },
        // 是否自动轮播
        changeAutoplay() {
          this.setData({
            autoplay: !this.data.autoplay
          })
        },
        // 更改轮播切换时间
        intervalChange(e) {
          this.setData({
            interval: e.detail.value
          })
        },
       // 更改自动播放间隔时长
        durationChange(e) {
          this.setData({
            duration: e.detail.value
          })
        },
        //点击切换到上一张图片
        preClick: function (e) {
          if (this.data.currentIndex > 0) {
            this.setData({
              currentIndex: this.data.currentIndex - 1
            })
          } else {
            this.setData({
              currentIndex: this.data.currentIndex + 1
            })
          }
        },
        //点击切换到下一张图片
        nextClick: function (e) {
          if (this.data.currentIndex >= 1) {
            this.setData({
              currentIndex: 0
            })
          } else {
            this.setData({
              currentIndex: this.data.currentIndex + 1
            })
          }
        }
      }
    })

[https_mp.weixin.qq.com]: https://mp.weixin.qq.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200615162425861.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200615162557449.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[https_mp.weixin.qq.com_wxamp_home_guide_lang_zh_CN_token_668029433]: https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=668029433
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200616135809329.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200618145716763.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200618145841797.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[https_developers.weixin.qq.com_miniprogram_dev_wxcloud_basis_getting-started.html]: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200618150421482.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200618150522226.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200623165138581.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200623165621538.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200623165739889.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200623160643826.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200623160621411.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20200623170052942.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200623170117988.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20200624105221508.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/2020062410542827.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20200624105503898.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20200624105536638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20200624110422625.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/20200624110633508.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 20]: https://img-blog.csdnimg.cn/20200624110651349.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[https_developers.weixin.qq.com_miniprogram_dev_framework_quickstart_code.html_WXML-_E6_A8_A1_E6_9D_BF]: https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXML-%E6%A8%A1%E6%9D%BF
[https_developers.weixin.qq.com_miniprogram_dev_framework_view_wxss.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 21]: https://img-blog.csdnimg.cn/20200624124652304.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 22]: https://img-blog.csdnimg.cn/20200624124733299.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 23]: https://img-blog.csdnimg.cn/20200625164130658.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 24]: https://img-blog.csdnimg.cn/20200811144556457.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 25]: https://img-blog.csdnimg.cn/20200812095935380.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 26]: https://img-blog.csdnimg.cn/2020090114340254.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70