首页 > 编程语言 >#微信小程序(轮播图以及开发方法)

#微信小程序(轮播图以及开发方法)

时间:2024-03-14 15:36:41浏览次数:25  
标签:welcome 轮播 WXML 微信 绑定 开发方法 手册

1.IDE:微信开发者工具


2.实验:轮播图以及正确的开发方法

(1)有HTML,CSS,javascript基础即可

(2)写界面一定要查看开发手册,这是微信小程序比较好的地方,由于是国内软件有中文开发手册。手册地址,直接搜---->微信小程序----->开发文档。

网址:视图容器 / swiper (qq.com)icon-default.png?t=N7T8https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

(3)WXML中的动态数据全部来自于Pages---->data中 

(4)数据绑定可以使用{{}}。(WXML绑定JS中的数据)

(5)框架中也含有许多WXML以及WXSS使用说明 

(6)像素编辑最好用rpx而不用px,rpx可以适配手机像素,灵活变化


3.记录


4.代码

welcome:"welcome to monitor your cat",     //用于数据绑定示例
<!-- 轮播图 -->
<!-- 激活轮播图小点,设置小店颜色绿色,衔接滑动,自动播放 -->
<view>
  <swiper class="index_swiper" indicator-dots="true" indicator-color="green" circular="true" autoplay="true">    
<!-- 第一张图片 -->
    <swiper-item>
      <image src="../imag/ECY1.png" mode="scaleToFill"/>  <!--相对路径,最好使用网络图片地址-->>
    </swiper-item>
<!-- 第二张图片 -->
    <swiper-item>
      <image src="../imag/ECY2.jpg" mode="scaleToFill"/>
    </swiper-item>
<!-- 第三张图片 -->
    <swiper-item>
      <image src="../imag/ECY3.jpg" mode="scaleToFill"/>
    </swiper-item>
<!-- 第四张图片 -->
    <swiper-item>
      <image src="../imag/ECY4.png" mode="scaleToFill"/>
    </swiper-item>
  </swiper>
</view>

<!-- 数据绑定 -->
<view>
  {{welcome}}
</view>

标签:welcome,轮播,WXML,微信,绑定,开发方法,手册
From: https://blog.csdn.net/byhyf83862547/article/details/136707835

相关文章

  • 微信小程序的手工艺品定制商城溯源交易系统
    管理员通过点击后台管理,进入页面可以获取首页、个人中心、用户管理、商品分类管理、商品信息管理、我的定制管理、我的预约管理、系统管理、订单管理等功能模块,进行相对应操作用户登录到小程序首页可以查看首页、商品信息、工艺品资讯、购物车、我的等内容目 录微信小程序的......
  • 小白学习微信小程序的开发流程和项目架构
    微信小程序的开发流程和项目架构可以分为以下几个步骤:准备工作下载并安装微信开发者工具(微信开发者工具是一个集成了编辑器、调试器、自动编译等功能的开发工具,用于开发和调试小程序)。注册微信开放平台账号,并创建一个小程序。创建小程序项目打开微信开发者工具,点击......
  • 微信小程序开发中的推送消息和通知功能
    推送消息和通知功能在微信小程序开发中是非常常用的功能,可以用于向用户发送重要信息、活动通知等。本文将通过代码案例的方式来详细介绍微信小程序中的推送消息和通知功能。一、推送消息推送消息是指将消息发送给用户手机上的微信客户端,用户可以通过微信客户端接收和查看消息......
  • 微信小程序第三章总结
    3.1、盒子模型盒子模型就是我们在页面设计中经常用到的一种思维模型。在CSS中,一个独立的盒子模型由内容(content)、内边距(padding)、边框(border)、和外边距(margin)4个部分组成,如图:此外,对padding、border、和margin可以进一步细化为上、下、左、右4个部分,在CSS中可以分别进行设置......
  • 蛋糕甜品奶茶订购系统 微信小程序 c7164
    在蛋糕订购小程序的前期,即需求分析阶段,我们对用户的需求进行了详细的描述,并且在需求规范中有详细的描述和阐明。根据系统需求的分析,对蛋糕订购的管理进行了整体的设计。着重对软件模块的设计进行了详细的分析,以达到对系统的需求。重点阐述了系统的划分、接口的确定、各模块间的......
  • 微信小程序(九)模版样式
         ......
  • 基于微信小程序的场地预约系统设计与实现(源码+lw+部署文档+讲解等)
    文章目录前言项目运行截图技术框架后端采用SpringBoot框架前端框架Vue可行性分析系统测试系统测试的目的系统功能测试数据库表设计代码参考数据库脚本为什么选择我?获取源码前言......
  • 基于微信小程序的宠物寄养平台小程序设计与实现(源码+lw+部署文档+讲解等)
    文章目录前言项目运行截图技术框架后端采用SpringBoot框架前端框架Vue可行性分析系统测试系统测试的目的系统功能测试数据库表设计代码参考数据库脚本为什么选择我?获取源码前言......
  • 微信-架构设计师-谈ai
    此文含金量极大)AI搞钱的新路子,架构师快上车!!!架构师 2024-02-2722:00 广东如果问你:2024年,程序员必须掌握哪项技术?AI一定是榜首! 从去年起,AI大模型已是程序员的必备工具——‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 编程提效:编写更快,程序更稳定;代码更优:测试数、BUG对应减少;......
  • Prometheus 同步告警到企业微信机器人
    方法1:一、使用webhook-adapter同步信息到企业微信1.编辑alertmanager.yml文件global:resolve_timeout:5mscrape_interval:15stemplates:-'/data/prometheus/alertmanager/template/*.tmpl'route:group_by:['alertname']group_wait:10sgroup_......