备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2023-01-11 132
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 小程序的主要开发语言是 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
前端开发
容器
小程序
关键词：
微信小程序学习
微信学习
微信框架
微信小程序框架
微信小程序入门
童小纯
目录
相关文章
jerrywangsap
|
1月前
|
小程序 Devops 开发工具
支付宝小程序入门学习之一：如何创建支付宝小程序并在手机上预览
支付宝小程序入门学习之一：如何创建支付宝小程序并在手机上预览
jerrywangsap
30 0
开心工作室_kaic
|
1月前
|
存储 小程序 JavaScript
基于微信小程序的移动学习平台的设计与实现_kaic
基于微信小程序的移动学习平台的设计与实现_kaic
开心工作室_kaic
55 1
小蜗牛耶
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的英语学习交流平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的英语学习交流平台的详细设计和实现
小蜗牛耶
21 2
小蜗牛耶
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的移动学习平台的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的移动学习平台的详细设计和实现
小蜗牛耶
31 1
daotianmi
|
1月前
|
小程序 JavaScript
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-，但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传，如果是多图上传的话file就是数组了
daotianmi
33 2
肥晨
|
1月前
|
小程序 前端开发 JavaScript
微信小程序MINA框架
微信小程序MINA框架
肥晨
53 0
低代码布道师
|
1月前
|
小程序 JavaScript 容器
微信小程序入门学习02-TDesign中的自定义组件
微信小程序入门学习02-TDesign中的自定义组件
低代码布道师
41 0
桃李春风一杯酒
|
13天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录，强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端（网络、页面跳转、用户输入、逻辑异常）和后端（数据库、API、业务逻辑）方面；日志记录则关注关键操作和异常情况的追踪。实践中，前端可利用try-catch处理异常，后端借助日志框架记录异常，同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作，以优化异常处理与日志记录流程。
桃李春风一杯酒
29 0
桃李春风一杯酒
|
13天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录，而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中，开发者可利用微信登录获取用户信息，集成第三方登录，以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性，以保障小程序的安全运行和良好体验。通过这些方法，开发者能有效掌握小程序全栈开发技术。
桃李春风一杯酒
35 0
桃李春风一杯酒
|
13天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略，包括前端的资源和渲染优化，如图片压缩、虚拟DOM、代码分割；后端的数据库和API优化，如索引创建、缓存使用、RESTful API设计；以及服务器的负载均衡和CDN加速。通过这些方法，开发者可提升小程序性能，优化用户体验，增强商业价值。
桃李春风一杯酒
45 1

热门文章

最新文章

  • 1
    小程序全栈开发中的跨域问题及其解决方案
  • 2
    小程序全栈开发中的多端适配与响应式布局
  • 3
    小程序全栈开发：前端与后端的完美结合
  • 4
    小程序全栈开发中的RESTful API设计
  • 5
    基于SpringBoot+Vue+uniapp微信小程序的微信阅读小程序的详细设计和实现
  • 6
    H5和小程序有什么区别
  • 7
    【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
  • 8
    微信小程序如何刷新当前页面
  • 9
    微信小程序全栈开发之性能优化策略
  • 10
    【微信小程序】之自定义三宫格一行展示row-grid（简单数据看板）
  • 1
    【微信小程序】-- 表单组件 - picker 实现日期选择器（五十三）
    59
  • 2
    【微信小程序】TypeError: Cannot read property ‘get‘ of undefined & Error: MiniProgramError
    83
  • 3
    【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果（五十二）
    46
  • 4
    【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果（五十一）
    48
  • 5
    【微信小程序】-- uni-app 项目创建 & 目录结构讲解（四十九）
    54
  • 6
    【微信小程序】-- 配置uni-app的开发环境（四十八）
    37
  • 7
    【微信小程序】-- npm包总结 --- 基础篇完结（四十七）
    38
  • 8
    【微信小程序】-- 案例 - 自定义 tabBar（四十六）
    49
  • 9
    【微信小程序】-- 分包 - 独立分包 & 分包预下载（四十五）
    34
  • 10
    【微信小程序】-- 分包（四十四）
    27

    • 相关课程

    更多
  • IoT小程序框架课程
  • 高级应用技能进阶
  • 物联网开发 - Linux驱动开发实操演练
  • Java Spring Boot 2.6.0开发实战-1024程序员节创造营公益课
  • 面向运维的 python 脚本速成-1024程序员节创造营公益课
  • PHP进阶教程 - 由浅入深掌握面向对象开发 - 第二阶段

    • 相关电子书

    更多
  • 微信移动客户端-数据存储优化实践
  • 微信广告引擎与播放节奏算法实践
  • 微信H5视频播放器在海量业务下的实践

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 1分钟SAE部署PHP商城小程序
  • 搭建微信小程序（AMD 8代）
  • 搭建微信小程序
  • 语言入门-1：环境构建
  • 前端开发基础2：VS Code和Edge的联动开发
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）