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

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

2023-01-11 262
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 小程序的主要开发语言是 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
前端开发
容器
小程序
关键词：
微信框架
微信小程序入门
微信小程序学习
微信小程序框架
微信小程序框架学习入门深化
童小纯
目录
相关文章
码字猴儿
|
2月前
|
人工智能 小程序 安全
小程序跨平台框架未来的发展趋势是什么？
小程序跨平台框架未来的发展趋势是什么？
码字猴儿
347 128
游客rci3gd3n2dlu2
|
5月前
|
机器人 数据安全/隐私保护 Python
企业微信自动回复软件，企业微信自动回复机器人，python框架分享
企业微信机器人包含完整的消息处理流程，支持文本消息自动回复、事件处理、消息加密解密等功能
游客rci3gd3n2dlu2
505 3
游客4v3gpgavlizks
|
3月前
|
缓存 小程序 前端开发
商城/点餐/家政类小程序源码合集_微信抖音小程序源码开发从入门到精通实战
本文系统讲解如何利用现有源码快速开发商城、点餐、家政类微信/抖音小程序，涵盖环境搭建、核心功能实现、多平台部署与优化，提供完整技术方案。实战导向，助力开发者高效入门与落地。
游客4v3gpgavlizks
334 0
游客rci3gd3n2dlu2
|
5月前
|
JSON 机器人 API
微信机器人自动回复插件，vx自动回复机器人脚本助手，python框架分享
这个微信机器人系统包含三个主要模块：主程序基于itchat实现微信消息监听和自动回复功能
游客rci3gd3n2dlu2
517 2
游客vx6uejvd6s6ck
|
6月前
|
Java API
wxid添加微信好友工具，免费微信wxid转换器二维码，jar实现仅供学习参考
本项目实现微信ID与wxid的转换及二维码生成功能，核心逻辑基于ZXing库完成QR编码，支持文件批量导入导出。
游客vx6uejvd6s6ck
1022 8
游客vx6uejvd6s6ck
|
6月前
|
编解码 Java
wxid加微信好友工具，二维码转换工具，微信号转wxid插件【仅供学习参考】
本工具基于JAVA实现微信ID转换功能，支持wxid、微信号与二维码之间的相互转换。开发中使用ZXing库（版本3.5.1）完成二维码编解码，并设计核心类`WxidConverter`实现关键转换逻辑。
游客vx6uejvd6s6ck
1513 7
游客ib7xsk7hcucuo
|
6月前
微信封号脚本插件，全自动批量投诉工具， vx隔空抓包封号思路【仅供学习参考用途】
这是一款针对微信投诉自动化处理的工具插件，通过模拟点击操作实现批量投诉功能。相比手动投诉，该插件效率更高、成功率更有保障。
游客ib7xsk7hcucuo
2717 0
游客rci3gd3n2dlu2
|
5月前
|
JSON 机器人 数据安全/隐私保护
微信自动聊天机器人， 微信自动回复机器人，python框架分享
这个微信机器人实现包含主程序、配置文件、工具函数和测试脚本四个模块。主程序使用itchat库
游客rci3gd3n2dlu2
274 0
游客vx6uejvd6s6ck
|
6月前
|
存储
微信附近人提取工具，附近人微信号采集，用xposed实现【仅供学习参考】
主Hook模块拦截微信附近人界面，数据结构保存用户信息，数据导出模块实现CSV格式存储，以及Xposed框架入口配置。
游客vx6uejvd6s6ck
358 0

热门文章

最新文章

  • 1
    小程序开发平台有哪些？哪个好
  • 2
    小程序制作平台有哪些？哪个好
  • 3
    基于微信小程序的婚庆摄影系统
  • 4
    基于微信小程序的智慧养老服务系统
  • 5
    小程序canvas使用网络图片真机不显示解决方案----可直接使用案例测试
  • 6
    小程序环境搭建
  • 7
    【uniapp 小程序开发语法篇】资源引入 | 语法介绍 | UTS 语法支持(链接格式)
  • 8
    小程序逆向分析 (二) 跑起来
  • 9
    知识付费小程序注册时类目该如何选择？
  • 10
    uniapp 支付宝小程序 授权登录
  • 1
    基于微信小程序的智慧养老服务系统
    187
  • 2
    基于微信小程序的婚庆摄影系统
    205
  • 3
    基于微信小程序的线上博物馆系统
    172
  • 4
    基于微信小程序的校园外卖订餐配送系统
    389
  • 5
    热门小游戏源码（Python+PHP）下载-微信小程序游戏源码Unity发实战指南​
    1006
  • 6
    微信小程序API集成京东库存，移动端销量暴涨！
    188
  • 7
    微信小程序+淘宝API，无缝购物体验提升复购率！
    269
  • 8
    weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
    952
  • 9
    weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
    279
  • 10
    weixin116大学生就业平台微信小程序+ssm(文档+源码)_kaic
    453

    • 相关课程

    更多
  • IoT小程序框架课程

    • 相关电子书

    更多
  • 《云市场-小程序》
  • 数字乡村建设方案
  • mPaaS 小程序新品发布
    • 下一篇
    基于Python+Vue开发的口腔牙科预约管理系统