AI 助理
备案控制台
开发者社区 云原生 文章 正文

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

2024-02-02 132
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序框架(二)-全面详解（学习总结---从入门到深化）


组件_基础视图

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

容器 view

视图容器，用来承载视图块，类似 div 的功能，所以要写在 wxml 视 图文件之中

我们在项目中增加一个页面 views ，并指定为默认页面

<!-- views.wxml -->
<view>视图1</view>
<view>视图2</view>

view 是块级元素

文本 text

文本，承载页面文本信息，类似 span 的功能

<text>文本1</text>
<text>文本2</text>

text 是行内元素

图片 image

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式

<image src="../../images/1.webp"></image>

mode属性说明

<image src="../../images/1.webp" mode="heightFix"></image>

1. 在小程序中，显示文本信息应该使用的组件是：text

组件_滑块视图容器

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

基本实现

我们增加一个全新的页面 swiper 来实现轮播图效果

<!-- swiper.wxml -->
<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>

为了更美观，可以让图片宽度充满全屏,并保持图片不变形

<!-- swiper.wxml -->
<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常用属性说明

<!-- swiper.wxml -->
<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
       }
   }
})
<!-- swiper.wxml -->
<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

组件_滚动视图区域

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

水平滚动

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

<!-- scroll.wxml -->
<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 ，可实现垂直滚动

<!-- scroll.wxml -->
<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;
}

常用属性

<view>
    <!-- 水平滚动 -->
    <scroll-view refresher-enabled scroll-left="50" 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>
    <!-- 垂直滚动 -->
    <scroll-view refresher-enabled scroll-top="50" 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>

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

组件_icon

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

图标使用

<icon type="success"></icon>

字体图标属性

<icon type="success" size="50" color="red"></icon>
<icon type="success_no_circle" size="50"></icon>
<icon type="info" size="50"></icon>
<icon type="warn" size="50"></icon>
<icon type="waiting" size="50"></icon>
<icon type="cancel" size="50"></icon>
<icon type="download" size="50"></icon>
<icon type="search" size="50"></icon>
<icon type="clear" size="50"></icon>

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

组件_progress

基本进度条

<progress percent="20"/>

属性说明

<progress percent="20"/>
<progress percent="20" show-info/>
<progress percent="20" show-info font-size="30"/>
<progress percent="20" show-info font-size="30" stroke-width="20"/>
<progress percent="20" border-radius="5"/>
<progress percent="20" border-radius="5" activeColor="#f00"/>
<progress percent="20" border-radius="5" activeColor="#f00" backgroundColor="#00f"/>
<progress percent="20" border-radius="5"
activeColor="#f00" backgroundColor="#00f" active/>
<progress percent="20" border-radius="5" activeColor="#f00" backgroundColor="#00f"
active duration="90"/>

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

组件_表单

表单，将用户输入的信息提交到服务器

小程序的表单与 html 的表单基本一致

登录页面

创建一个登陆页面 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

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

<button>按钮</button>

按钮属性

type 属性说明

size 属性说明

<button>按钮</button>
<button type="default">按钮</button>
<button type="primary">按钮</button>
<button type="warn">按钮</button>
<button type="primary" size="default">按钮</button>
<button type="primary" size="mini">按钮</button>
<button type="primary" plain>按钮</button>
<button type="primary" disabled>按钮</button>
<button type="primary" loading>按钮</button>
<button type="primary" form-type="submit">按钮</button>

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

组件_输入框

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

实现基本输入框 

<input />

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

input{
    border: 2px solid red;
}

输入框属性

type 属性详解

confirm-type 属性详解

<input />
<input value="测试信息"/>
<input placeholder="请输入用户名"/>
<input placeholder="请输入密码" password/>
<input placeholder="请输入密码" disabled/>
<input placeholder="文本" maxlength="10"/>
<input placeholder="文本" focus/>
<input placeholder="文本" type="text"/>
<input placeholder="文本" type="number"/>
<input placeholder="文本" type="idcard"/>
<input placeholder="文本" type="digit"/>
<input placeholder="文本" type="nickname"/>
<input placeholder="文本" type="text" confirm-type="send"/>
<input placeholder="文本" type="text" confirm-type="search"/>
<input placeholder="文本" type="text" confirm-type="next"/>
<input placeholder="文本" type="text" confirm-type="go"/>
<input placeholder="文本" type="text" confirm-type="done"/>

配合样式更美观

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

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

组件_picker

从底部弹起的滚动选择器

选择器有很多种类，分别是

普通选择器

指定 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

滑动选择器

基本实现

<slider />

常用属性

<slider />
<slider step="20"/>
<slider show-value/>
<slider min="50" max="200" show-value/>
<slider min="50" max="200" show-value disabled/>
<slider show-value value="30"/>
<slider show-value value="30" backgroundColor="red"/>
<slider show-value value="30" backgroundColor="red" activeColor="blue"/>
<slider block-color="red"/>

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

组件_表单其他常用组件

复选框 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

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

<switch />

属性列表

<switch />
<switch checked="true"/>
<switch checked="true" disabled/>
<switch checked="true" type="checkbox"/>
<switch checked="true" color="red"/>

textarea

多行输入框,与 html 多行输入框基本一致

<textarea />

为了可见性，我们需要增加样式

textarea{
    border: 1px solid red;
}

<textarea value="文本内容" />
<textarea placeholder="占位符" />
<textarea maxlength="10" />
<textarea disabled />
<textarea focus />
<textarea auto-height/>

1. 在微信小程序中， textarea 如何实现自动增高：auto-height

组件_navigator

navigator 实现页面之间的跳转

<navigator url="/pages/other/other" >跳转其他页面</navigator>

常用属性说明

<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

音频

<audio src="https://music.163.com/song/media/outer/url?id=1961763339" controls></audio>

属性说明

<audio
    id="myaudio"
    poster="https://p2.music.126.net/6yUleORITEDbvrOLV0Q8A==/5639395138885805.jpg"
    name="妈妈的话"
    author="zyboy忠宇"
    src="https://music.163.com/song/media/outer/url?id=1961763339"
    controls
    loop>
</audio>

切换音乐

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

<audio
    id="{{ audioOptions.id }}"
    poster="{{ audioOptions.poster }}"
    name="{{ audioOptions.name }}"
    author="{{ audioOptions.author }}"
    src="{{ audioOptions.src }}"
    controls="{{ audioOptions.controls }}"
    loop="{{ audioOptions.loop }}">
</audio>
<button type="primary" bindtap="changeMusicHandle">切换</button>
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 src="http://iwenwiki.com/api/livable/livable.mp4"></video>

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

video{
    width: 100%;
}

属性说明

<video
    id="myVideo" src="http://iwenwiki.com/api/livable/livable.mp4"
    duration="100"
    controls
    autoplay
    loop
    muted
    initial-time="10"
    show-mute-btn
    title="制作歌曲"
    danmu-list="{{ danmuList }}"
    danmu-btn
    enable-danmu></video>
    <button type="primary" bindtap="sendDanmuHandle">发送弹幕</button>
// 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

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

<camera style="width: 100%; height: 300px;"></camera>

属性说明

<camera mode="normal" device-position="back" flash="on" style="width: 100%; height:
300px;"></camera>
<button type="primary" bindtap="takePhotoHandle">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>

属性说明

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

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

组件_map

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

温馨提示

腾讯地图：https://lbs.qq.com/product/miniapp/home/

<map latitude="23.099994" longitude="113.324520"></map>

属性说明

<map
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  scale="12"
  min-scale="10"
  max-scale="18"
></map>
// pages/map/map.js
Page({
    data: {
        latitude: 23.099994,
        longitude: 113.324520,
   }
})

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

文章标签：
小程序
容器
定位技术
JavaScript
前端开发
关键词：
微信小程序入门
微信小程序学习
微信框架
微信小程序框架
微信小程序框架学习入门深化
童小纯
目录
相关文章
Codelinghu
|
2月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
Codelinghu
63 1
dufadayang
|
3月前
|
小程序 JavaScript 前端开发
小程序常见的UI框架
小程序常见的UI框架
dufadayang
325 60
CamilleKing
|
2月前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源，帮助他们快速构建高质量的小程序界面。在选择框架时，需要综合考虑各种因素，以找到最适合项目的解决方案。随着技术的不断进步，UI 框架也将不断发展和创新，为小程序开发带来更多的便利和可能性。
CamilleKing
94 2
yuanzhengme
|
4月前
|
移动开发 小程序 JavaScript
开源的微信小程序框架
【8月更文挑战第22天】开源的微信小程序框架
yuanzhengme
226 65
Codelinghu
|
2月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
Codelinghu
48 1
杀死一只知更鸟debug
|
3月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航（声明式导航和编程式导航）
这篇文章介绍了微信小程序中页面导航的两种方式：声明式导航和编程式导航，包括如何导航到tabBar页面、非tabBar页面、后退导航，以及如何在导航过程中传递参数和获取传递的参数。
杀死一只知更鸟debug
186 0
微信小程序开发学习之页面导航（声明式导航和编程式导航）
杀死一只知更鸟debug
|
3月前
|
小程序 JavaScript
微信小程序学习之数据绑定，事件绑定，事件传参与数据同步的学习记录
本文介绍了微信小程序中的数据绑定、事件绑定、事件传参与数据同步的基本概念和使用方法，包括如何在data对象中定义数据、使用mustache语法在wxml中渲染数据、绑定和处理事件、事件对象属性、事件传参以及实现输入框与data数据的同步。
杀死一只知更鸟debug
43 0
微信小程序学习之数据绑定，事件绑定，事件传参与数据同步的学习记录
胡东旭
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件，兼容 H5、小程序和 APP，提供丰富的注释和简洁代码，适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
胡东旭
118 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
Codelinghu
|
2月前
|
小程序 前端开发 JavaScript
小程序入门之认识view和text组件
小程序入门之认识view和text组件
Codelinghu
95 0
热爱技术的小郑
|
4月前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会，分享了学习基础知识、实战项目开发的过程，以及小程序开发的易上手性和开发周期的简短。
热爱技术的小郑
82 0
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会

热门文章

最新文章

  • 1
    微信小程序使用export和import
  • 2
    微信小程序把玩（三十五）Video API
  • 3
    微信小程序 - rpx和px互转，以及系统给的 pixelRatio 值比例不对
  • 4
    Java微信小程序开发_00_资源帖
  • 5
    微信小程序实用工具——渐变色按钮（一）
  • 6
    微信小程序 修改键盘的回车键及监听事件
  • 7
    微信小程序把玩（六）模块化
  • 8
    微信小程序常见的UI框架/组件库总结
  • 9
    PHP+Swoole实现微信小程序客服即时通信聊天功能
  • 10
    【微信小程序4】云数据库：如何把数组一次性写入数据库中
  • 1
    微信小程序用户登陆和获取用户信息功能实现
    139
  • 2
    uniapp-微信小程序-上拉和下拉触底刷新
    156
  • 3
    微信小程序和springboot实现微信支付
    260
  • 4
    微信小程序-微信支付
    81
  • 5
    微信小程序调试、断点调试
    205
  • 6
    微信小程序-分包
    76
  • 7
    开发uniapp过程中对app、微信小程序与h5的webview调试
    1228
  • 8
    微信小程序echart图片不显示 问题解决
    75
  • 9
    【DevOps】（五）Jenkins构建给企业微信推送消息
    295
  • 10
    UniApp与微信小程序介绍及区别
    619

    • 相关课程

    更多
  • IoT小程序框架课程
  • 前端开发框架Bootstrap使用教程
  • 场景实践- 新手玩转云计算-创建炫酷的简历网页
  • 动手学Agent应用开发
  • Java Spring Boot 2.6.0开发实战-1024程序员节创造营公益课
  • 移动Web前端开发

    • 相关电子书

    更多
  • 《云市场-小程序》
  • 数字乡村建设方案
  • mPaaS 小程序新品发布

    • 相关实验场景

    更多
  • SAE 极速部署专属 AI 证件照神器
  • 函数计算入门-HelloWorld应用开发
  • 搭建微信小程序
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 1分钟SAE部署PHP商城小程序
  • 语言入门-1：环境构建
    • 下一篇
    DataWorks售前咨询