微信小程序开发1

本文涉及的产品
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
可观测可视化 Grafana 版,10个用户账号 1个月
简介: 微信小程序开发1

@TOC

一、结构

1.项目结构

在这里插入图片描述

页面结构

在这里插入图片描述

2.语言结构

WXML与HTML区别 :
在这里插入图片描述

WXSS与CSS区别 :
在这里插入图片描述
.Js文件的分类
在这里插入图片描述

3.小程序的通信模型

①他是由渲染层与逻辑层

根据微信客户端进行转发

②逻辑层与服务区

根据微信客户端进行转发

图示:
在这里插入图片描述

4.小程序运行机制

运行机制又分为,小程序的启动过程, 与小程序的页面渲染过程

1.小程序的启动过程

①首先将小程序的代码包下载到本地
②解析app.json的全局配置文件
③调用app.js小程序入口文件, 执行App()函数来创建小程序的实例
④渲染小程序首页
⑤启动完成

2.小程序的渲染过程

①加载页面的.json配置文件
②加载页面的.wxml文件与.wxss样式
③执行页面的.js文件, 调用Page()来创建页面实例
④渲染完成

二、组件

小程组件也是宿主环境提供, 官方把组件分为九大类
视图容器, 基本组件, 表单组件, 导航组件, 媒体组件, map地图组件, canvas画布组建, 开放能力,
无障碍访问

视图容器组件 :

  1. view
    view标签就像div标签, 是一个块标签, 经常用它来布局

  2. scroll-view
    他是滚动视图组件, 经常应用到电商的左侧的筛选框

<scroll-view class="container1" scroll-y>
          <view>A</view>
          <view>B</view>
          <view>C</view>
</scroll-view>

通过拖拉图,可以实现滑动效果
在这里插入图片描述

scoll-view属性:

scroll-y 开启横向的滚动
scroll-x 开启纵向的滚动

注意!!

如果是纵向滚动要给scroll-view 设置一个高度
如果是纵横向滚动要给scroll-view 设置一个宽度
3.swiper,swiper-item
这两个标签用来实现轮播图的效果

  1. swiper,swiper-item
    轮播图通过这两个标签来实现

在这里插入图片描述

wxml:

<swiper class="swiper_container" indicator-dots indicator-color="white" 
indicator-active-color="gray" autopaly interval="1000" circular>
  <swiper-item class="item">
    <view class="item">A</view>
  </swiper-item>
  <swiper-item class="item">
    <view class="item">B</view>
  </swiper-item>
  <swiper-item class="item">
    <view class="item">C</view>
  </swiper-item>
</swiper>

wxss:

.swiper {
  height: 150px;
}

.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item {
  background-color: seashell;
}

swiper-item:nth-child(2) .item {
  background-color: skyblue;
}

swiper-item:nth-child(3) .item {
  background-color: springgreen;
}

swiper属性:

indicator-dots 这是显示下方的小圆点
indicator-color="white" 显示未激活的小圆点颜色
indicator-active-color="gray" 显示已激活的小圆点颜色
autopaly 实现自动切换轮播图 默认是5每秒切换
interval="1000" 自定义1000毫秒切换一次轮播图
circular 这是开启轮播图的衔接, 也就是最后一张衔接第一张

  1. text与rich-text
    这是文本标签
    text就是普通文本标签, rich-text是可以表吸html的ui效果
<view>
  手机号:
  <text selectable>111111111</text>
</view>
<rich-text nodes="<h1 style='color:red'>rich-text标签</h1>"></rich-text>

在这里插入图片描述

rich-text 属性:

nodes=“<h1 style='color:red'>rich-text标签</h1>">
这就是渲染出html的ui效果

注意:
nodes="<h1 style='color:red'>rich-text标签</h1>">,由于外边已经使用了双引号, 所以style里面就得用单引号, 防止混淆

  1. button

    button顾名思义就是按钮组件

    在这里插入图片描述

button属性:

type 这是按钮的属性
size 这是按钮的大小
plain 这是设置按钮是镂空样式

  1. image标签
    image就是放图片的标签, 和html的img很象,有一个src属性来存放图片的地址

在这里插入图片描述
注意: 当不给image标签src图片地址时, image标签有自己固有的大小, 我这里给边image边框颜色更容易看出来,
还有图片的model属性, 是图片的样式, 默认是scaleToFill(图片撑满整个标签),

image属性:

mode: 这是设置图片的裁剪与缩放模式

modescaleToFill(默认值): 不保持图片纵横比, 使得撑满image标签
aspectFit:保持纵横比, 使得图片的长边完全显现出来
aspectFill:保持纵横比, 使得图片的长边完全显现出来, 就是裁剪长边
widthFix:宽度不变,高度变化, 保持纵横比
heightFix: 高度不变, 宽度变化,保持纵横比

相关文章
|
1天前
|
传感器 小程序 搜索推荐
(源码)java开发的一套(智慧校园系统源码、电子班牌、原生小程序开发)多端展示:web端、saas端、家长端、教师端
通过电子班牌设备和智慧校园数据平台的统一管理,在电子班牌上,班牌展示、学生上课刷卡考勤、考勤状况汇总展示,课表展示,考场管理,请假管理,成绩查询,考试优秀标兵展示、校园通知展示,班级文化各片展示等多种化展示。
18 0
(源码)java开发的一套(智慧校园系统源码、电子班牌、原生小程序开发)多端展示:web端、saas端、家长端、教师端
|
7天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的外卖小程序的研究与开发的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的外卖小程序的研究与开发的详细设计和实现
8 0
|
8天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的智慧旅游平台开发微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的智慧旅游平台开发微信小程序的详细设计和实现
25 8
|
8天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的二手交易平台设计与开发附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的二手交易平台设计与开发附带文章和源代码部署视频讲解等
17 0
|
8天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的文化遗产的保护与旅游开发附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的文化遗产的保护与旅游开发附带文章和源代码部署视频讲解等
12 1
|
12天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的校园二手交易平台的设计与开发附带文章和源代码设计说明文档ppt
基于ssm+vue.js+uniapp小程序的校园二手交易平台的设计与开发附带文章和源代码设计说明文档ppt
38 2
|
15天前
|
PHP
PHP公众号开发给用户发微信消息提醒功能
该内容是一个关于如何在时间紧迫的情况下,通过微信客服消息接口实现用户资金到账或成员变动时发送微信通知的项目总结。
23 2
|
16天前
|
JavaScript Java 测试技术
基于微信小程序校园订餐的设计与开发+ssm+vue.js附带文章和源代码设计说明文档ppt
基于微信小程序校园订餐的设计与开发+ssm+vue.js附带文章和源代码设计说明文档ppt
24 1
|
16天前
|
JavaScript Java 测试技术
“村游网”系统的微信小程序开发ssm附带文章和源代码设计说明文档ppt
“村游网”系统的微信小程序开发ssm附带文章和源代码设计说明文档ppt
21 0
|
17天前
|
JavaScript Java 测试技术
智慧旅游平台开发微信小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
智慧旅游平台开发微信小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
25 0