微信小程序框架(二)-全面详解（学习总结---从入门到深化）

Bertha 。 2023-09-23 18:21 79阅读 0赞

## **目录** ##

组件\_基础视图

容器 view

文本 text

图片 image

组件\_滑块视图容器

基本实现

Swiper常用属性说明

组件\_滚动视图区域

水平滚动

垂直滚动

常用属性

组件\_icon

图标使用

字体图标属性

组件\_progress

基本进度条

属性说明

组件\_表单

登录页面

组件\_button

按钮属性

type 属性说明

size 属性说明

组件\_输入框

实现基本输入框

输入框属性

type 属性详解

confirm-type 属性详解

组件\_picker

普通选择器

多列选择器

时间选择器

日期选择器

省市区选择器

组件\_slider

基本实现

常用属性

组件\_表单其他常用组件

复选框 checkbox

radio

label

switch

属性列表

textarea

组件\_navigator

组件\_audio

组件\_video

组件\_camera

组件\_map

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

# 组件\_基础视图 #

![9b7d795559f84f23a31391377a3adcc3.png][]

> 小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页 开发相比有很大的相似性。但是二者还是多少有些许区别的，例如：小程序提供了一系列的视图组件代替 **html** 中的标签
> 
> ![4f0342061db04c4eb5777520fe67c1e0.png][]

## 容器 view ##

> 视图容器，用来承载视图块，类似 **div** 的功能，所以要写在 **wxml** 视 图文件之中
> 
> 我们在项目中增加一个页面 **views** ，并指定为默认页面
> 
>     
>     <view>视图1</view>
>     <view>视图2</view>
> 
> **view** 是块级元素

## 文本 text ##

> 文本，承载页面文本信息，类似 **span** 的功能
> 
>     <text>文本1</text>
>     <text>文本2</text>
> 
> **text** 是行内元素
> 
> ![fbba0e5e2cec4d179e6636bbd63d512d.png][]

## 图片 image ##

> 图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式
> 
> ![15a93ed04e2d40af8bd0699fca4cb006.png][]
> 
>     <image src="../../images/1.webp"></image>
> 
> ![c46f8bef178e41e687a83c8de708b404.png][]
> 
> **mode属性说明**
> 
> ![ada652831d224e398988c6586a659c73.png][]
> 
>     <image src="../../images/1.webp" mode="heightFix"></image>
> 
> 1. 在小程序中，显示文本信息应该使用的组件是：**text**

#  #

# 组件\_滑块视图容器 #

![f7b78f8b81c946bb818c657be37c6825.png][]

滑块视图容器（焦点轮播图）

### 基本实现 ###

> 我们增加一个全新的页面 **swiper** 来实现轮播图效果
> 
>     
>     <view>
>         <swiper>
>             <swiper-item>
>                 <image src="../../images/1.png"></image>
>             </swiper-item>
>             <swiper-item>
>                 <image src="../../images/2.jpg"></image>
>             </swiper-item>
>             <swiper-item>
>                 <image src="../../images/3.jpg"></image>
>             </swiper-item>
>         </swiper>
>     </view>
> 
> 为了更美观，可以让图片宽度充满全屏,并保持图片不变形
> 
>     
>     <view>
>         <swiper class="swiper">
>             <swiper-item>
>                 <image mode="widthFix" src="../../images/1.png"></image>
>             </swiper-item>
>             <swiper-item>
>                 <image mode="widthFix" src="../../images/2.jpg"></image>
>             </swiper-item>
>             <swiper-item>
>                 <image mode="widthFix" src="../../images/3.jpg"></image>
>             </swiper-item>
>         </swiper>
>     </view>
> 
> 同时设置图片样式充满全屏，因为图片默认大小：宽度320px、高度240px
> 
>     /* swiper.wxss */
>     image{
>         width: 100%;
>     }

### Swiper常用属性说明 ###

![ddeffb84361b409d9a88d602337a9d85.png][]

<view>
        <swiper
        class="swiper"
        indicator-dots
        indicator-color="#fff"
        indicator-active-color="#f00"
        autoplay
        interval="5000"
        duration="1000"
        circular
        vertical
        >
            <swiper-item>
                <image mode="widthFix" src="../../images/1.png"></image>
            </swiper-item>
            <swiper-item>
                <image mode="widthFix" src="../../images/2.jpg"></image>
            </swiper-item>
            <swiper-item>
                <image mode="widthFix" src="../../images/3.jpg"></image>
            </swiper-item>
        </swiper>
    </view>

**属性值来源于逻辑文件**

> 我们可以在逻辑文件 swiper.js 中动态配置属性值
> 
>     // news.js
>     Page({
>         data: {
>             swiperOptions:{
>                 indicatorDots:true,
>                 indicatorColor:"#fff",
>                 indicatorActiveColor:"#f00",
>                 autoplay:true,
>                 interval:5000,
>                 duration:1000,
>                 circular:true,
>                 vertical:true
>            }
>        }
>     })
> 
>     
>     <view>
>        <swiper
>         class="swiper"
>         indicator-dots="{
>         { swiperOptions.indicatorDots }}"
>         indicator-color="{
>         { swiperOptions.indicatorColor }}"
>         indicator-active-color="{
>         { swiperOptions.indicatorActiveColor }}"
>         autoplay="{
>         { swiperOptions.autoplay }}"
>         interval="{
>         { swiperOptions.interval }}"
>         duration="{
>         { swiperOptions.duration }}"
>         circular="{
>         { swiperOptions.circular }}"
>         vertical="{
>         { swiperOptions.vertical }}"
>         >
>             <swiper-item>
>                <image mode="widthFix" src="../../images/1.png"></image>
>             </swiper-item>
>             <swiper-item>
>                 <image mode="widthFix" src="../../images/2.jpg"></image>
>             </swiper-item>
>             <swiper-item>
>                 <image mode="widthFix" src="../../images/3.jpg"></image>
>             </swiper-item>
>         </swiper>
>     </view>
> 
> 1. 在小程序中，下列那个属性可以设置滑块视图容器自动滚动：**autoplay**

# 组件\_滚动视图区域 #

![06e5884ee76a4e748038a11e14c6cdaa.png][]

可滚动视图区域。可实现容器内元素水平和垂直方向滚动

## 水平滚动 ##

给容器设置 **scroll-x** ，可实现水平滚动

<view>
        <scroll-view class="scroll-view_H" scroll-x="true">
            <view class="scroll-view-item demo-text-1"></view>
            <view class="scroll-view-item demo-text-2"></view>
            <view class="scroll-view-item demo-text-3"></view>
        </scroll-view>
    </view>

当然要配合样式实现

/* scroll.wxss */
    .scroll-view_H{
        /* 规定容器内元素不进行换行 */
        white-space: nowrap;
    }
    .scroll-view-item {
        display: inline-block;
        width: 100%;
        height: 300rpx;
    }
    .demo-text-1{
        background-color: red;
    }
    .demo-text-2{
        background-color: green;
    }
    .demo-text-3{
        background-color: blue;
    }

## 垂直滚动 ##

给容器设置 **scroll-y** ，可实现垂直滚动

<view>
        <scroll-view class="scroll-view_V" scroll-y="true">
            <view class="scroll-view-item demo-text-1"></view>
            <view class="scroll-view-item demo-text-2"></view>
            <view class="scroll-view-item demo-text-3"></view>
        </scroll-view>
    </view>

当然要配合样式实现

/* scroll.wxss */
    .scroll-view-item {
        width: 100%;
        height: 300rpx;
    }
    .demo-text-1{
        background-color: red;
    }
    .demo-text-2{
      background-color: green;
    }
    .demo-text-3{
        background-color: blue;
    }
    .scroll-view_V{
        height: 300rpx;
    }

## 常用属性 ##

![18779397b5c04d398aa2ec06f8dea337.png][]

> 1. 在小程序中，下列那个属性可以设置滚动视图容器垂直方向滚动：**scroll-y**

# 组件\_icon #

![08e1329623324a24a792ddb46d0bc6b1.png][]

图标组件,其实就是字体图标效果，但是这里所提供的只有最常用的几个

## 图标使用 ##

## 字体图标属性 ##

![f81cea71f7b444eca173fded641c357b.png][]

> 1. 在小程序中，下列那个属性可以设置字体图标为搜索：**search**

# 组件\_progress #

![f77ac4c8360f4b3896cae56ec64c0eda.png][]

## 基本进度条 ##

## 属性说明 ##

![ae2fd2d788cd4f398252a06c990126fc.png][]

> 1. 在小程序中，设置进度条组件的进度条，进度增加的时间是：**duration**

# 组件\_表单 #

![af479aa0c8d54504a2023df3ac5754f8.png][]

> 表单，将用户输入的信息提交到服务器
> 
> 小程序的表单与 html 的表单基本一致

## 登录页面 ##

![ac4e8f4177774a139e9d16c887947306.png][]

> 创建一个登陆页面 **login** ,在 **login.wxml** 中实现基本结构
> 
>     <view class="login">
>         <form>
>             <input placeholder="请输入用户名" />
>             <input placeholder="请输入密码" />
>             <button type="primary">登录</button>
>         </form>
>     </view>
> 
> 为了美观，我们需要在 **login.wxss** 文件中添加样式
> 
>     .login{
>         margin-top: 100rpx;
>     }
>     
>     input{
>         border: 1px solid #999;
>         border-radius: 5px;
>         margin: 10px;
>         padding-left: 10px;
>         height: 70rpx;
>     }
> 
> 1. 在微信小程序中，下列不属于表单元素的是：**image**

# 组件\_button #

![8704c99e65294b18b343b9f2c833ec57.png][]

> 小程序的 **button** 按钮与 **html** 的非常类似，但是小程序的功能要更强大一些
> 
>     <button>按钮</button>

## 按钮属性 ##

![60e9c3ce304a47519b560879b7ed3248.png][]

### type 属性说明 ###

![1fd082ff9503467a80a381e0947c2f9d.png][]

### size 属性说明 ###

![19d6a6e2e4644c22a3f777059285baa3.png][]

> 1. 在微信小程序中，下列那个属性是按钮组件设置镂空属性：**plain**

# 组件\_输入框 #

![701c3a46a5af40f78f36704620382af4.png][]

> 输入框是 **input** , 与 **html** 的输入框类似，但是增加了很多新的功能

## 实现基本输入框 ##

为了展示效果，需要配合样式

input{
        border: 2px solid red;
    }

## 输入框属性 ##

![374960498b0f495e9d200dbb9e95e17c.png][]

### type 属性详解 ###

![a1f1561d9d9e47f98e30b84851fd4940.png][]

### **confirm-type 属性详解** ###

![93d3e5e9f5ec45c6bf49221bad542a1e.png][]

配合样式更美观

input{
        border: 1px solid #999;
        height: 80rpx;
        margin: 10px;
        padding-left: 10px;
    }

> 1. 在微信小程序中，下列那个属性是输入框组件设置键盘右下角按钮的文字：**confirm-type**

# 组件\_picker #

![b41d9467c0814577951a56c454d899a2.png][]

> 从底部弹起的滚动选择器
> 
> 选择器有很多种类，分别是
> 
> ![24509efbef254ca69207dad65d3b0353.png][]

## 普通选择器 ##

> 指定 **mode** 属性为 **selector** ,或者默认不指定 **mode**
> 
>     <view>普通选择器</view>
>     <picker bindchange="bindPickerChange" value="
>     {
>         {index}}" range="{
>         {array}}">
>         <view class="picker">
>            当前选择：{
>         {array[index]}}
>         </view>
>     </picker>
> 
> 选择器展示效果需要配合逻辑
> 
>     Page({
>         data: {
>             array: ['美国', '中国', '巴西', '日本'],
>             index: 0
>        },
>         bindPickerChange(e) {
>             this.setData({
>                 index: e.detail.value
>            })
>        }
>     })

## 多列选择器 ##

> 指定 mode 属性为 multiSelector
> 
>     <view>多列选择器</view>
>     <picker mode="multiSelector" bindchange="bindMultiPickerChange" value="
>     {
>         {multiIndex}}" range="{
>         {multiArray}}">
>         <view class="picker">
>            当前选择：{
>         { multiArray[0] [multiIndex[0]] }}，{
>         { multiArray[1] [multiIndex[1]] }}， 
>                     {
>         {multiArray[2] [multiIndex[2]]}}
>         </view>
>     </picker>
> 
>     Page({
>         data: {
>             multiArray: [['无脊柱动物', '脊柱动物'],
>                ['扁性动物', '线形动物', '环节动物','软体动物', '节肢动物'],
>                ['猪肉绦虫', '吸血虫']
>            ],
>             multiIndex: [0, 0, 0],
>        },
>         bindMultiPickerChange: function (e) {
>             this.setData({
>                 multiIndex: e.detail.value
>            })
>        }
>     })

## 时间选择器 ##

指定 **mode** 属性为 **time**

<view>时间选择器</view>
    <picker mode="time" value="{
       {time}}" start="09:01" end="21:01"
    bindchange="bindTimeChange">
        <view class="picker">
           当前选择: {
       {time}}
        </view>
    </picker>

Page({
        data: {
            time: '12:01'
       },
        bindTimeChange: function (e) {
            console.log('picker发送选择改变，携带值为', e.detail.value)
            this.setData({
                time: e.detail.value
           })
       }
    })

## 日期选择器 ##

指定 **mode** 属性为 **date**

<view>日期选择器</view>
    <picker mode="date" value="{
       {date}}" start="2000-09-01" end="2030-09-01" bindchange="bindDateChange">
        <view class="picker">
           当前选择: {
       {date}}
        </view>
    </picker>

Page({
        data: {
            date: '2030-09-01'
       },
        bindDateChange: function (e) {
            console.log('picker发送选择改变，携带值为', e.detail.value)
            this.setData({
                date: e.detail.value
           })
       }
    })

## 省市区选择器 ##

指定 **mode** 属性为 **region**

<view>省市区选择器</view>
    <picker mode="region" bindchange="bindRegionChange" value="{
       {region}}">
        <view class="picker">
           当前选择：{
       {region[0]}}，{
       {region[1]}}，{
       {region[2]}}
        </view>
    </picker>

Page({
        data: {
            region: ['广东省', '广州市', '海珠区']
       },
        bindRegionChange: function (e) {
            console.log('picker发送选择改变，携带值为', e.detail.value)
            this.setData({
                region: e.detail.value
           })
       }
    })

> 1. 在微信小程序中，实现底部弹起的省市滚动选择器，需要指定 **mode** 的值为：**region**

# 组件\_slider #

![599a785f9c4345468f7a9f123ab6d421.png][]

滑动选择器

## 基本实现 ##

## 常用属性 ##

![24dc9e5add7d4909a2c2a6d36e5559e1.png][]

> 1. 在微信小程序中，滑动选择器中修改滑块颜色的属性是：**block-color**

# 组件\_表单其他常用组件 #

![8f0748a816a740fd921c60ac39e8412a.png][]

![f73ab53aa8f84199902f5e9f62be23fb.png][]

## 复选框 checkbox ##

> 多选项目，与**html**复选框基本一致
> 
>     <checkbox checked="true"/>选中
> 
> **checked** 表示初始状态为选中(true) 或 未选中(false)
> 
> 配合 **checkbox-group** 形成一组
> 
>     <checkbox-group>
>         <checkbox checked="true" />读书
>         <checkbox checked="true" />打游戏
>         <checkbox />听音乐
>     </checkbox-group>

## radio ##

> 单选项目,与 **html**单选框基本一致
> 
>     <radio checked="true"/>选中
> 
> **checked** 表示初始状态为选中(true) 或 未选中(false)
> 
> 配合 **radio-group** 形成一组
> 
>     <radio-group>
>         <radio checked="true"/>选项1
>         <radio checked="false"/>选项2
>         <radio checked="false"/>选项3
>         <radio checked="false"/>选项4
>     </radio-group>

## label ##

> 用来改进表单组件的可用性,与 **html** 的 **label** 基本一致
> 
>     <label for="menu">
>         <checkbox id="menu" checked="true"/>选中
>     </label>

## switch ##

开关选择器,有着比较美观的展示效果

### 属性列表 ###

![bf435ae84b5645799c1f8b5cb34bc776.png][]

## textarea ##

> 多行输入框,与 **html** 多行输入框基本一致
> 
>     <textarea />
> 
> 为了可见性，我们需要增加样式
> 
>     textarea{
>         border: 1px solid red;
>     }
> 
> ![a6e6ef902edc4516b2c9af395856ae1c.png][]
> 
>     <textarea value="文本内容" />
>     <textarea placeholder="占位符" />
>     <textarea maxlength="10" />
>     <textarea disabled />
>     <textarea focus />
>     <textarea auto-height/>
> 
> 1. 在微信小程序中， **textarea** 如何实现自动增高：**auto-height**

# 组件\_navigator #

![7c0e0e1cbfb8412684b2c97d733cc72e.png][]

> **navigator** 实现页面之间的跳转
> 
>     <navigator url="/pages/other/other" >跳转其他页面</navigator>
> 
> **常用属性说明**
> 
> ![05e8d5ffe126430d91fc515dd216b76c.png][]
> 
>     <navigator url="/pages/other/other" >跳转其他页面</navigator>
>     <navigator url="/pages/slider/slider" open-type="redirect">在当前页打开</navigator>

**扩展：生命周期函数**

> **onUnload** 在之前的讲解中无法测试，现在有了 **navigator** ，我们可以进行测试了
> 
> 在 **navigator** 的属性 **open-type** 设置为 **redirect** 时，我们可以观察输入结果
> 
>     Page({
>         onUnload() {
>             console.log("卸载");
>        }
>     })
> 
> 1. 在微信小程序中， **navigator** 的属性 **open-type="redirect"** 时，作用是：**在当前页打开**

# 组件\_audio #

![9c3589d8cdde4ea6ba9ab81ba98d2ed9.png][]

**音频**

**属性说明**

![f5eb8fb8e2bf4279bcf30824569474b5.png][]

**切换音乐**

通过修改 **audio** 的属性，切换音乐

Page({
        data: {
            audioOptions:{
                id:"myAudio",
                name:"妈妈的话",
                author:"zby忠宇",
                poster:"https://p2.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
               src:"https://music.163.com/song/media/outer/url?id=1961763339",
                controls:true,
                loop:true
           }
       },
        changeMusicHandle(){
            this.setData({
                audioOptions:{
                    id:"myAudio",
                    Page({
        data: {
            audioOptions:{
                id:"myAudio",
                name:"妈妈的话",
                author:"zby忠宇",
                poster:"https://p2.music.126.net/6y-
    UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                src:"https://music.163.com/song/media/outer
    /url?id=1961763339",
                controls:true,
                loop:true
           }
       },
        changeMusicHandle(){
            this.setData({
                audioOptions:{
                    id:"myAudio",
                     name:"时光洪流",
                     author:"程响",
                     poster:"https://p2.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",
                     src:"https://music.163.com/song/media/outer
    /url?id=1868943615",
                    controls:true,
                    loop:true
               }
           })
       }
    })

> 1. 在微信小程序中， **audio** 的属性 **controls** 作用是：**是否显示默认控件**

# 组件\_video #

**视频**

为了美观，我们将视频宽度充满全屏

video{
        width: 100%;
    }

**属性说明**

![efc22d6643634e4fb121f8c7df24a817.png][]

// pages/audio/audio.js
    Page({
        data: {
            danmuList: [{
                text: '第 1s 出现的弹幕',
                color: '#ff0000',
                time: 11
           }]
       },
        onReady() {
            this.videoContext = wx.createVideoContext('myVideo')
       },
        sendDanmuHandle() {
            this.videoContext.sendDanmu({
                text: "真好看",
                color: "#00ff00"
           })
       }
    })

> 1. 在微信小程序中， video 的属性 initial-time 作用是：**指定视频初始播放位置**

# 组件\_camera #

![6a389786e5294db185c15c4a324bc157.png][]

系统相机。扫码二维码功能

**属性说明**

![027582bdc68c437e9ff4ef4ed73a0b74.png][]

**属性说明**

Page({
        data:{
            src:""
       },
        takePhotoHandle() {
            const ctx = wx.createCameraContext()
            ctx.takePhoto({
                quality: 'high',
                success: (res) => {
                    this.setData({
                       src: res.tempImagePath
                   })
               }
           })
       }
    })

> 1. 在微信小程序中， **camera** 的属性 **mode** 作用是：**模式调整，扫码或相机**

# 组件\_map #

![929662893c334341b026902b91319ecf.png][]

地图，小程序地图实现功能相对比基础一些，如果要实现完整的地 图能力，请参考腾讯地图

> **温馨提示**
> 
> 腾讯地图：https://lbs.qq.com/product/miniapp/home/

**属性说明**

![87af6dcf467c49a5a22465144a9a8dbc.png][]

// pages/map/map.js
    Page({
        data: {
            latitude: 23.099994,
            longitude: 113.324520,
       }
    })

> 1. 在微信小程序中， map 的属性 scale 作用是：**缩放级别，取值范围为3-20**

[9b7d795559f84f23a31391377a3adcc3.png]: https://img-blog.csdnimg.cn/9b7d795559f84f23a31391377a3adcc3.png
[4f0342061db04c4eb5777520fe67c1e0.png]: https://img-blog.csdnimg.cn/4f0342061db04c4eb5777520fe67c1e0.png
[fbba0e5e2cec4d179e6636bbd63d512d.png]: https://img-blog.csdnimg.cn/fbba0e5e2cec4d179e6636bbd63d512d.png
[15a93ed04e2d40af8bd0699fca4cb006.png]: https://img-blog.csdnimg.cn/15a93ed04e2d40af8bd0699fca4cb006.png
[c46f8bef178e41e687a83c8de708b404.png]: https://img-blog.csdnimg.cn/c46f8bef178e41e687a83c8de708b404.png
[ada652831d224e398988c6586a659c73.png]: https://img-blog.csdnimg.cn/ada652831d224e398988c6586a659c73.png
[f7b78f8b81c946bb818c657be37c6825.png]: https://img-blog.csdnimg.cn/f7b78f8b81c946bb818c657be37c6825.png
[ddeffb84361b409d9a88d602337a9d85.png]: https://img-blog.csdnimg.cn/ddeffb84361b409d9a88d602337a9d85.png
[06e5884ee76a4e748038a11e14c6cdaa.png]: https://img-blog.csdnimg.cn/06e5884ee76a4e748038a11e14c6cdaa.png
[18779397b5c04d398aa2ec06f8dea337.png]: https://img-blog.csdnimg.cn/18779397b5c04d398aa2ec06f8dea337.png
[08e1329623324a24a792ddb46d0bc6b1.png]: https://img-blog.csdnimg.cn/08e1329623324a24a792ddb46d0bc6b1.png
[f81cea71f7b444eca173fded641c357b.png]: https://img-blog.csdnimg.cn/f81cea71f7b444eca173fded641c357b.png
[f77ac4c8360f4b3896cae56ec64c0eda.png]: https://img-blog.csdnimg.cn/f77ac4c8360f4b3896cae56ec64c0eda.png
[ae2fd2d788cd4f398252a06c990126fc.png]: https://img-blog.csdnimg.cn/ae2fd2d788cd4f398252a06c990126fc.png
[af479aa0c8d54504a2023df3ac5754f8.png]: https://img-blog.csdnimg.cn/af479aa0c8d54504a2023df3ac5754f8.png
[ac4e8f4177774a139e9d16c887947306.png]: https://img-blog.csdnimg.cn/ac4e8f4177774a139e9d16c887947306.png
[8704c99e65294b18b343b9f2c833ec57.png]: https://img-blog.csdnimg.cn/8704c99e65294b18b343b9f2c833ec57.png
[60e9c3ce304a47519b560879b7ed3248.png]: https://img-blog.csdnimg.cn/60e9c3ce304a47519b560879b7ed3248.png
[1fd082ff9503467a80a381e0947c2f9d.png]: https://img-blog.csdnimg.cn/1fd082ff9503467a80a381e0947c2f9d.png
[19d6a6e2e4644c22a3f777059285baa3.png]: https://img-blog.csdnimg.cn/19d6a6e2e4644c22a3f777059285baa3.png
[701c3a46a5af40f78f36704620382af4.png]: https://img-blog.csdnimg.cn/701c3a46a5af40f78f36704620382af4.png
[374960498b0f495e9d200dbb9e95e17c.png]: https://img-blog.csdnimg.cn/374960498b0f495e9d200dbb9e95e17c.png
[a1f1561d9d9e47f98e30b84851fd4940.png]: https://img-blog.csdnimg.cn/a1f1561d9d9e47f98e30b84851fd4940.png
[93d3e5e9f5ec45c6bf49221bad542a1e.png]: https://img-blog.csdnimg.cn/93d3e5e9f5ec45c6bf49221bad542a1e.png
[b41d9467c0814577951a56c454d899a2.png]: https://img-blog.csdnimg.cn/b41d9467c0814577951a56c454d899a2.png
[24509efbef254ca69207dad65d3b0353.png]: https://img-blog.csdnimg.cn/24509efbef254ca69207dad65d3b0353.png
[599a785f9c4345468f7a9f123ab6d421.png]: https://img-blog.csdnimg.cn/599a785f9c4345468f7a9f123ab6d421.png
[24dc9e5add7d4909a2c2a6d36e5559e1.png]: https://img-blog.csdnimg.cn/24dc9e5add7d4909a2c2a6d36e5559e1.png
[8f0748a816a740fd921c60ac39e8412a.png]: https://img-blog.csdnimg.cn/8f0748a816a740fd921c60ac39e8412a.png
[f73ab53aa8f84199902f5e9f62be23fb.png]: https://img-blog.csdnimg.cn/f73ab53aa8f84199902f5e9f62be23fb.png
[bf435ae84b5645799c1f8b5cb34bc776.png]: https://img-blog.csdnimg.cn/bf435ae84b5645799c1f8b5cb34bc776.png
[a6e6ef902edc4516b2c9af395856ae1c.png]: https://img-blog.csdnimg.cn/a6e6ef902edc4516b2c9af395856ae1c.png
[7c0e0e1cbfb8412684b2c97d733cc72e.png]: https://img-blog.csdnimg.cn/7c0e0e1cbfb8412684b2c97d733cc72e.png
[05e8d5ffe126430d91fc515dd216b76c.png]: https://img-blog.csdnimg.cn/05e8d5ffe126430d91fc515dd216b76c.png
[9c3589d8cdde4ea6ba9ab81ba98d2ed9.png]: https://img-blog.csdnimg.cn/9c3589d8cdde4ea6ba9ab81ba98d2ed9.png
[f5eb8fb8e2bf4279bcf30824569474b5.png]: https://img-blog.csdnimg.cn/f5eb8fb8e2bf4279bcf30824569474b5.png
[efc22d6643634e4fb121f8c7df24a817.png]: https://img-blog.csdnimg.cn/efc22d6643634e4fb121f8c7df24a817.png
[6a389786e5294db185c15c4a324bc157.png]: https://img-blog.csdnimg.cn/6a389786e5294db185c15c4a324bc157.png
[027582bdc68c437e9ff4ef4ed73a0b74.png]: https://img-blog.csdnimg.cn/027582bdc68c437e9ff4ef4ed73a0b74.png
[929662893c334341b026902b91319ecf.png]: https://img-blog.csdnimg.cn/929662893c334341b026902b91319ecf.png
[87af6dcf467c49a5a22465144a9a8dbc.png]: https://img-blog.csdnimg.cn/87af6dcf467c49a5a22465144a9a8dbc.png

微信小程序框架(二)-全面详解（学习总结---从入门到深化）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读