AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-01-11 174
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页 开发相比有很大的相似性。

组件_基础视图

2345_image_file_copy_633.jpg

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

2345_image_file_copy_634.jpg

容器 view

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

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

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

view 是块级元素

文本 text

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

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

text 是行内元素

2345_image_file_copy_635.jpg

图片 image

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式2345_image_file_copy_636.jpg

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

2345_image_file_copy_637.jpg

mode属性说明

2345_image_file_copy_638.jpg

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

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

组件_滑块视图容器

2345_image_file_copy_639.jpg 

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

基本实现

我们增加一个全新的页面 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常用属性说明

2345_image_file_copy_640.jpg

<!-- 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

组件_滚动视图区域

2345_image_file_copy_641.jpg

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

水平滚动

给容器设置 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;
}

常用属性

2345_image_file_copy_642.jpg

<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

2345_image_file_copy_643.jpg

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

图标使用

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

字体图标属性

2345_image_file_copy_644.jpg

<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

2345_image_file_copy_645.jpg

基本进度条

<progress percent="20"/>

属性说明

2345_image_file_copy_646.jpg

<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

组件_表单

2345_image_file_copy_647.jpg

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

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

登录页面

2345_image_file_copy_648.jpg

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

文章标签：
JavaScript
前端开发
容器
小程序
关键词：
微信小程序入门
微信小程序学习
微信框架
微信小程序框架
微信小程序框架学习入门深化
童小纯
目录
相关文章
Codelinghu
|
3月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
Codelinghu
77 1
DK方方
|
7天前
|
存储 监控 小程序
TP6+Uni-app框架下，圈子系统小程序的快速上线开发步骤
社交圈子系统多端运营级应用，融合了推荐匹配、语音聊天、IM即时通讯、动态发布、一键约聊、同城交友、附近的人、充值提现、邀请推广等功能，为平台运营提供更多的盈利变现方式。程序源码开源，支持二次开发，根据客户不同应用场景需求，定制个性化解决方案。
DK方方
33 9
熊猫开发V丨ttqq_375425429
|
1天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架，陪玩系统并发性能测试，小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先，通过目标用户分析和竞品分析明确功能需求，如注册登录、预约匹配、实时语音等。技术选型上，前端采用Uni-app支持多端开发，后端选用PHP框架确保稳定性能，数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发，集成WebSocket实现语音聊天。最后，通过功能、性能和用户体验测试，确保系统的稳定性和用户满意度。
熊猫开发V丨ttqq_375425429
28 0
小暖的遇见V丨ttqq_375425429
|
25天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码，uniapp社交兴趣圈子开发，框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制，PHP实现的圈子框架设计及代码编写，以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容，确保平台的安全性、性能和功能完整性。通过详细指导，帮助开发者快速搭建稳定可靠的圈子社交平台。
小暖的遇见V丨ttqq_375425429
201 18
CamilleKing
|
3月前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源，帮助他们快速构建高质量的小程序界面。在选择框架时，需要综合考虑各种因素，以找到最适合项目的解决方案。随着技术的不断进步，UI 框架也将不断发展和创新，为小程序开发带来更多的便利和可能性。
CamilleKing
184 2
Codelinghu
|
3月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
Codelinghu
53 1
杀死一只知更鸟debug
|
4月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航（声明式导航和编程式导航）
这篇文章介绍了微信小程序中页面导航的两种方式：声明式导航和编程式导航，包括如何导航到tabBar页面、非tabBar页面、后退导航，以及如何在导航过程中传递参数和获取传递的参数。
杀死一只知更鸟debug
224 0
微信小程序开发学习之页面导航（声明式导航和编程式导航）
杀死一只知更鸟debug
|
4月前
|
小程序 JavaScript
微信小程序学习之数据绑定，事件绑定，事件传参与数据同步的学习记录
本文介绍了微信小程序中的数据绑定、事件绑定、事件传参与数据同步的基本概念和使用方法，包括如何在data对象中定义数据、使用mustache语法在wxml中渲染数据、绑定和处理事件、事件对象属性、事件传参以及实现输入框与data数据的同步。
杀死一只知更鸟debug
61 0
微信小程序学习之数据绑定，事件绑定，事件传参与数据同步的学习记录
Codelinghu
|
3月前
|
小程序 前端开发 JavaScript
小程序入门之认识view和text组件
小程序入门之认识view和text组件
Codelinghu
115 0
熊猫开发V丨ttqq_375425429
|
2天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序，校园圈子论坛系统功能，校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块，提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发，支持多城市、多学校切换，配备分站式后台管理，确保稳定性和安全性。通过融云IM SDK实现即时通讯功能，增强用户互动与粘性。适用于大学校园、城市及社区圈子，满足多样化需求，提升便捷体验。
熊猫开发V丨ttqq_375425429
40 17

热门文章

最新文章

  • 1
    农历节日倒计时：基于Python的公历与农历日期转换及节日查询小程序
  • 2
    圈子社交app前端+后端源码，uniapp社交兴趣圈子开发，框架php圈子小程序安装搭建
  • 3
    结合圈层营销策略，打造稳定可靠的圈子app系统，圈子小程序！
  • 4
    小程序免费SSL证书获取申请
  • 5
    电竞陪玩系统架构优化设计，陪玩app如何提升系统稳定性，陪玩小程序平台的测试与监控
  • 6
    跑腿小程序系统源码
  • 7
    超详细攻略！uniapp陪玩系统，打包陪玩小程序、H5需要注意什么？
  • 8
    圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里？
  • 9
    轻松搭建婚恋交友系统源码，H5/小程序/APP自动适配，智能匹配恋爱交友平台快速落地
  • 10
    TP6+Uni-app框架下，圈子系统小程序的快速上线开发步骤
  • 1
    微信小程序用户登陆和获取用户信息功能实现
    163
  • 2
    uniapp-微信小程序-上拉和下拉触底刷新
    172
  • 3
    微信小程序和springboot实现微信支付
    296
  • 4
    微信小程序-微信支付
    94
  • 5
    微信小程序调试、断点调试
    246
  • 6
    微信小程序-分包
    83
  • 7
    开发uniapp过程中对app、微信小程序与h5的webview调试
    1317
  • 8
    微信小程序echart图片不显示 问题解决
    87
  • 9
    【DevOps】（五）Jenkins构建给企业微信推送消息
    330
  • 10
    UniApp与微信小程序介绍及区别
    664

    • 相关课程

    更多
  • IoT小程序框架课程
  • PHP进阶教程 - 由浅入深掌握面向对象开发 - 第二阶段
  • 软件供应商进阶管理实操
  • 场景实践- 新手玩转云计算-创建炫酷的简历网页
  • C++ 入门教程开发文档
  • 面向开发者的LLM入门课程

    • 相关电子书

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

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 1分钟SAE部署PHP商城小程序
  • 语言入门-1：环境构建
  • 前端开发基础1：前端开发环境的安装和配置
  • 阿里云IoT小程序应用开发和组件实践
    • 下一篇
    阿里云oss简介和如何对接使用