微信小程序-----宿主环境(组件介绍和代码编写)

这篇具有很好参考价值的文章主要介绍了微信小程序-----宿主环境(组件介绍和代码编写)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 目录

前言

宿主环境简介

1. 什么是宿主环境

​编辑 2.小程序的宿主环境

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

一、通信模型

1. 通信的主体

2. 小程序的通信模型

二、运行机制

1.小程序启动的过程

2.页面渲染的过程

三、组件

常用的视图容器类组件

1.view 组件

2.scroll-view 组件

3. swiper 和 swiper-item 组件

4.text 组件与rich-text 组件

5.button 按钮组件

6.image图片组件

四、小程序 API


前言

        前面我们简单介绍了微信小程序以及怎么去注册创作者账号和编译环境的安装(上一期链接:微信小程序-----账号注册以及开发软件的下载与代码结构介绍-CSDN博客),那这一期我们先简单讲讲微信小程序的宿主环境,其就是微信小程序的运行原理以及代码编写,下面看正文。

宿主环境简介

1. 什么是宿主环境

宿主环境host environment)指的是程序运行所必须的依赖环境。例如:

Android 系统iOS 系统是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的,所以,Android 是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的

 2.小程序的宿主环境

手机微信是小程序的宿主环境,如图所示:

微信小程序-----宿主环境(组件介绍和代码编写),微信小程序,微信小程序,小程序,微信,JavaScript,wxml,wxss

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

微信扫码、微信支付、微信登录、地理定位、etc…

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

通信模型
运行机制
组件
AP

一、通信模型

1. 通信的主体

小程序中通信的主体是渲染层逻辑层,其中:

WXML 模板和 WXSS 样式工作在渲染层
JS 脚本工作在逻辑层

微信小程序-----宿主环境(组件介绍和代码编写),微信小程序,微信小程序,小程序,微信,JavaScript,wxml,wxss

2. 小程序的通信模型

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

渲染层 逻辑层 之间的通信
l 由微信客户端进行转发
逻辑层 第三方服务器 之间的通信
l 由微信客户端进行转发

微信小程序-----宿主环境(组件介绍和代码编写),微信小程序,微信小程序,小程序,微信,JavaScript,wxml,wxss

二、运行机制

1.小程序启动的过程

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

2.页面渲染的过程

加载解析页面的 .json 配置文件
加载页面的 .wxml 模板和 .wxss 样式
执行页面的 .js 文件, 调用 Page() 创建页面实例
页面渲染完成

三、组件

小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类,分别是:

视图容器
基础内容
表单组件
导航组件
媒体组件
map 地图组件
canvas 画布组件
开放能力
无障碍访问

常用的视图容器类组件

view
  • 普通视图区域
  • 类似于 HTML 中的 div,是一个块级元素
  • 常用来实现页面的布局效果
scroll-view
  • 可滚动的视图区域
  • 常用来实现滚动列表效果
swiper swiper-item
  • 轮播图容器组件 和 轮播图 item 组件

1.view 组件

这个组件等效于html的div标签,其性质是一模一样的,我可以当做div去使用就行了。下面看个示例:

<!--pages/end/end.wxml-->
<view class="container">

  <view>i</view>
  <view>d</view>
  <view>w</view>
  
</view>

wxss这里我是用一个简单的弹性布局的示例,实际上我们写wxss的时候可以跟写css一样去写。 

/* pages/end/end.wxss */
.container view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color:rebeccapurple;
}

.container{
  display:flex;
  /* 按x轴为主轴,默认 */
  flex-direction: row;
  /* 设置为所有间隔分均分配,即所有子元素拥有相同的左右(上下)间隔。 */
  justify-content: space-around;
  /* 如果子元素宽度大于父元素宽度进行换行 */
  flex-wrap: wrap;
}

效果如下所示: 

微信小程序-----宿主环境(组件介绍和代码编写),微信小程序,微信小程序,小程序,微信,JavaScript,wxml,wxss 

2.scroll-view 组件

其作用是实现可滚动的视图区域,常用来实现滚动列表效果。下面看个示例:

wxml代码:

<scroll-view class="container" scroll-y>
  <view>1</view>
  <view>2</view>
  <view>3</view>
</scroll-view>

wcss代码: 

/* pages/test/test.wxss */
.container{
  height: 120px;
  width: 100px;
  border: red 2px solid;
}
.container view:nth-child(1){
  background-color: red;
}
.container view:nth-child(2){
  background-color: blueviolet;
}
.container view:nth-child(3){
  background-color: chartreuse;
}
.container view{
  height: 100px;
  width: 100px;
}

 效果图:

微信小程序-----宿主环境(组件介绍和代码编写),微信小程序,微信小程序,小程序,微信,JavaScript,wxml,wxss

3. swiper 和 swiper-item 组件

其功能是轮播图容器组件 和 轮播图 item 组件swiper 组件的常用属性

属性

类型

默认值

说明

indicator-dots

boolean

false

是否显示面板指示点

indicator-color

color

rgba(0, 0, 0, .3)

指示点颜色

indicator-active-color

color

#000000

当前选中的指示点颜色

autoplay

boolean

false

是否自动切换

interval

number

5000

自动切换时间间隔

circular

boolean

false

是否采用衔接滑动

下面看个示例:

<!--pages/test/test.wxml-->
<swiper class="container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="2000" circular>
<!-- 1 -->
  <swiper-item>
    <view>1</view>
  </swiper-item>
  <!-- 2 -->
  <swiper-item>
    <view>2</view>
  </swiper-item>
  <!-- 3 -->
  <swiper-item>
    <view>3</view>
  </swiper-item>
</swiper>
.container{
  height: 150px;
}

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

swiper-item:nth-child(1){
  background-color: chartreuse;
}
swiper-item:nth-child(2){
  background-color: chocolate;
}
swiper-item:nth-child(3){
  background-color: darkblue;
}

效果如下所示: 

微信小程序-----宿主环境(组件介绍和代码编写),微信小程序,微信小程序,小程序,微信,JavaScript,wxml,wxss

4.text 组件与rich-text 组件

text
  • 文本组件
  • 类似于 HTML 中的 span 标签,是一个行内元素
rich-text
  • 富文本组件
  • 支持把 HTML 字符串渲染为 WXML 结构

 通过 text 组件的 selectable 属性,实现长按选中文本内容的效果,示例如下:

<view>
  蔡徐坤
  <text selectable>ikun</text>
</view>

微信小程序-----宿主环境(组件介绍和代码编写),微信小程序,微信小程序,小程序,微信,JavaScript,wxml,wxss 

通过 rich-text 组件的 nodes 属性节点,HTML 字符串渲染为对应的 UI 结构

<rich-text nodes="<h1 style='color: red;'>title</h1>"/>

微信小程序-----宿主环境(组件介绍和代码编写),微信小程序,微信小程序,小程序,微信,JavaScript,wxml,wxss 

5.button 按钮组件

功能如下:

  • 按钮组件
  • 功能比 HTML 中的 button 按钮丰富
  • 通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)

示例如下:

 wxml代码

<view> ----------type-------- </view>
<button >普通</button>
<button type="primary">主色调</button>
<button type="warn">警告</button>

<view>--------size="min"缩小------ </view>
<button size="mini">普通</button>
<button type="primary" size="mini">主色调</button>
<button type="warn" size="mini">警告</button>

<view>--------plain镂空------------</view>
<button plain>普通</button>
<button type="primary" plain>主色调</button>
<button type="warn" plain>警告</button>

微信小程序-----宿主环境(组件介绍和代码编写),微信小程序,微信小程序,小程序,微信,JavaScript,wxml,wxss

6.image图片组件

  • 图片组件
  • image 组件默认宽度约 300px、高度约 240px

image 组件的 mode 属性用来指定图片的裁剪缩放模式,常用的 mode 属性值如下:

mode

说明

scaleToFill

(默认值)缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素

aspectFit

缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。

aspectFill

缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。

widthFix

缩放模式,宽度不变,高度自动变化,保持原图宽高比不变

heightFix

缩放模式,高度不变,宽度自动变化,保持原图宽高比不变

下面看个示例:

<image src="/image/ATRI -My Dear Moments- 2024_1_3 19_23_50.png" mode="heightFix" style="border: 2px red solid;"/>

微信小程序-----宿主环境(组件介绍和代码编写),微信小程序,微信小程序,小程序,微信,JavaScript,wxml,wxss

四、小程序 API

小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API,开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地存储、支付功能等。

小程序官方把 API 分为了如下 3 大类:

事件监听 API
l 特点:以 on 开头,用来 监听某些事件的触发
l 举例: wx. onWindowResize (function callback) 监听窗口尺寸变化的事件
同步 API
l 特点 1 :以 Sync 结尾的 API 都是同步 API
l 特点 2 :同步 API 的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
l 举例: wx. setStorageSync ('key', 'value') 向本地存储中写入内容
异步 API
l 特点:类似于 jQuery 中的 $.ajax(options) 函数,需要通过 success fail complete 接收调用的结果
l 举例: wx. request () 发起网络数据请求,通过 success 回调函数接收数据

想要获取更多的学习资源,可以点击以下链接查看。 黑马程序员web前端视频教程从入门到精通Web前端视频教程完整版_Web前端视频教程从入门到精通_黑马程序员 (itheima.com)

 以上就是本期的全部内容了,我们下次见!

分享一张壁纸:微信小程序-----宿主环境(组件介绍和代码编写),微信小程序,微信小程序,小程序,微信,JavaScript,wxml,wxss文章来源地址https://www.toymoban.com/news/detail-794848.html

到了这里,关于微信小程序-----宿主环境(组件介绍和代码编写)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序宿主环境-组件swiper

    巧识小程序的开发过程学习. 在我们的list.wxml中创建组件   在我们list.wxss创建样式 效果实现轮播图 swiper组件的常用属性 属性indicator-dots:是否显示面板指示点 属性indicator-color:指示点颜色 属性indicator-active-color:指示点激活颜色 属性autoplay:是否自动切换 属性interval:自动切换的

    2024年01月24日
    浏览(39)
  • 小程序宿主环境-组件image

    image image组件的model属性 image组件的model属性用来指定图片的裁剪和缩放模式,常用的model属性如下 scaletofill:(默认缩放模式),不保持原有图片的纵横比,使图片的宽高完全拉伸直至填满image元素 aspectFit 保持图片纵横比不变,使图片完全显示出来 aspectFill:保持纵横比例缩放图片,只保

    2024年01月20日
    浏览(36)
  • 使用 Google 的 zx 库编写切换微信小程序环境的脚本

    微信小程序目前为止还没有提供API或者具体的配置方式,给我们设置环境变量,所以还得自己想办法。 创建一个 shell 脚本——一个由诸如 Bash 或 zsh 之类的 shell 执行的脚本——可以是自动化重复任务的好方法。Node.js 似乎是编写 shell 脚本的理想选择,因为它为我们提供了许

    2024年02月16日
    浏览(40)
  • 微信小程序——常用组件的属性介绍

    text 文本组件 类似于HTML中的span标签,是一个行内元素 rich-text 富文本标签 支持把HTML字符串渲染为WXML结构 text标签的基本使用 通过text组件的selectable属性,实现长按选中文本内容的效果。只有text标签支持长按选中效果,其他的组件是不支持的 结构内容代码: view class=\\\"text-

    2024年02月07日
    浏览(66)
  • 微信小程序基本组件元素介绍(一)

    本系列用于自己便于查找知识点,于此同时也想让其他更多的人了解到微信小程序中各个元素是如何运用的,通过经验分享与知识点记录督促自己学习,废话不多说,直接进入主题。 第一节首先介绍的是微信小程序中wxml部分中最常用的几个组件: 在学习HTML网页制作的过程中

    2024年02月06日
    浏览(39)
  • 使用uniapp编写微信小程序并与原生小程序代码进行融合

    在使用uniapp编写时所使用的语法为VUE,代码编写完成后点击HBuilder X工具窗口:发行编译为小程序,即可自动转换为小程序的代码 解决问题: 编译之后代码会被进行压缩,vue文件会被拆分,其中的变量名也会被替换掉,基本没有可读性,变成这样: 这样的代码基本是不可进行

    2024年02月09日
    浏览(61)
  • 搭建微信小程序环境及项目结构介绍

    访问微信公众平台,将鼠标的光标置于 账号分类 中的 小程序 上, 点击‘ 查看详情 ’ 点击“ 前往注册 ” 下方也可以 点击注册 : 小程序注册页面 : 步骤a :进入 小程序注册页 ,根据指引 填写信息 和 提交相应的资料 ,完成账号申请。 注意: 每个邮箱 仅能申请一个小程

    2024年02月07日
    浏览(47)
  • 【微信小程序 | 实战开发】常用的视图容器类组件介绍和使用(1)

    个人名片: 🐼 作者简介:一名大二在校生,喜欢编程🎋 🐻‍❄️ 个人主页🥇: 小新爱学习. 🐼 个人WeChat:hmmwx53 🕊️ 系列专栏:🖼️ 零基础学Java——小白入门必备 重识C语言——复习回顾

    2024年02月02日
    浏览(53)
  • 微信小程序 配置自定义组件代码按需注入 lazyCodeLoading

    微信小程序 配置自定义组件代码按需注入 lazyCodeLoading 官方网址 在app.json最后一行加上,就可以了。

    2024年02月12日
    浏览(53)
  • 微信小程序共享云开发环境的代码配置

    小程序2022年进行了云开发付费调整,以前一个小程序对应一个云开发环境的奢侈用法不再适合普通开发者,微信小程序提供了云开发共享功能,方便在不同的小程序中共用一个付费环境。 笔者更新时间:2023-05-05,文内API随时可能变动,请以链接对应的小程序官方文档为准

    2024年02月09日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包