小程序开发3

最新推荐文章于 2024-10-14 21:23:12 发布

秦若

最新推荐文章于 2024-10-14 21:23:12 发布

阅读量92

点赞数 2

分类专栏：微信小程序开发基础篇文章标签：微信小程序

本文链接：https://blog.csdn.net/weixin_63621611/article/details/124201001

版权

微信小程序开发基础篇专栏收录该内容

4 篇文章 0 订阅

订阅专栏

微信小程序开发Day3

小程序的宿主环境-宿主环境的简介

1.什么是宿主环境

#宿主环境（ host environment ）指的是程序运行所必须依赖的环境。例如 Android 系统 和 iOS 系统是两个不同的宿主环境。安卓版的微信app是不能在iOS环境下运行的，所以 Android 是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的。

###2.小程序的宿主环境

***手机微信***是小程序的宿主环境：

小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能。

3.小程序宿主环境包含的内容

1.通信模型：
- 1.通信的主体
  - 小程序中通信的主体渲染层和逻辑层，其中：
    - **1.**WXML和WXSS样式在渲染层
    - **2.**JS脚本工作在逻辑层
2.小程序的通信模型

小程序中的通信模型分为两个部分：

1. ** 渲染层和逻辑层**之间的通讯
- 有微信客户端进行转发
2. 逻辑层和第三方服务器之间的通信
- 有微信客户端进行转发

小程序的宿主环境-运行机制

5.小程序启动的过程

1. 把小程序的代码包下载到本地
**2.**解析app.json全局配置文件
**3.**执行app.js小程序入口文件，调用app()创建小程序实例
**4.**渲染小程序首页
5小程序启动完成

6.页面渲染的过程

**1.**加载解析页面的.json配置文件

**2.**加载页面的.wxml模板和wxss样式

**3.**执行页面的.js文件，调用Page()创建页面实例

4页面渲染完成

##小程序的宿主环境-组件

1.小程序中组件的分类
#小程序中的组件也是由宿主环境提供的。
开发者可以基于组件快速搭建出漂亮的页面结构

9.大类：

1. 视图容器

2. 基础内容

3. 表单组件

4. 导航组件

媒体组件
map地图组件
canvas画布组件
开放能力
无障碍访问

2.常用的视图容器类组件

1. view、

普通视图区域
类似于HTML中的div，是一个块级元素
常用来实现页面的布局效果

2.scroll - view

可滚动视图区域
常用来实现滚动列表效果

3.swiper和swiper-item

轮播图容器组件和轮播图item组件

3.view组件的基本使用

#实现如图的flex横向布局效果

<!--pages/scavenger/scavenger.wxml-->
<view class="container1" >
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

/* pages/scavenger/scavenger.wxss */
.container1  view{
width: 100px;
height :100px;
text-align:  center;
line-height: 100px;
}
.container1  view:nth-child(1){
    background-color: lightgreen;
}
.container1  view:nth-child(2){
    background-color: lightskyblue;
}
.container1  view:nth-child(3){
    background-color: lightpink;
}
.container1 {
 display:flex;
 justify-content:space-around ;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XrK92CMN-1650017500005)(\images_\flex横向布局.jpg)]

4.scroll-view组件的基本使用

实现纵向滚动效果(样式文本代码：)结构文本代码：

/* pages/scavenger/scavenger.wxss */
.container1  view{
width: 100px;
height :100px;
text-align:  center;
line-height: 100px;
}
.container1  view:nth-child(1){
    background-color: lightgreen;
}
.container1  view:nth-child(2){
    background-color: lightskyblue;
}
.container1  view:nth-child(3){
    background-color: lightpink;
}
.container1 {
  border: 1px soild red;
  width: 100px;
  height :120px;
}

<!--pages/scavenger/scavenger.wxml-->
# 属性：scroll-y为纵向滚动 scroll-x为横向 
<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>