2024.2.5日总结(小程序开发2)

小程序的宿主环境

宿主环境

宿主环境指的是程序运行所必须的依赖环境。

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

小程序的宿主环境

手机微信是小程序的宿主环境,小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能:微信扫码,微信支付,微信登录,地理位置等

小程序宿主环境包括的内容

通信模型
  • 渲染层和逻辑层之间的通信(由微信客户端进行转发)
  • 逻辑层和第三方服务器之间的通信(由微信客户端进行转发)

通信的主体

小程序中通信的主体是渲染层和逻辑层

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

运行机制

小程序启动过程:

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

页面渲染过程:

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

小程序的组件是由宿主环境提供的:

  • 视图容器

view

普通视图区域

类似于html中的div,块级元素

用来实现页面的布局效果

scroll-view

可滚动的视图区域

常用来实现滚动列表效果

swiper和swiper-item

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

  • 基础内容

text

文本组件

类似于html中的span标签,是一个行内元素

通过text的selectable属性,可以实现长按选中文本内容的效果

rich-text

富文本组件

支持把html字符串渲染为wxml结构

image

image组件的mode属性来制定图片的裁剪和缩放模式,常用的mode属性:

  • 表单组件
  • 导航组件
API

小程序中的API由宿主环境提供。

API有三大类
  • 事件监听API

以on开头,用来监听某些时间的触发

  • 同步API

以Sync结尾的API都是同步API

同步API的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常

  • 异步API

类似于jQuery中的$.ajax(options)函数,需要通过success,failcomplete接收调用的结果

WXML模板语法

事件绑定

常用的事件

 事件对象的属性列表

事件回调触发的时候,会收到一个事件对象event,他的详细属性:

target和currentTarget的区别:

target是触发改时间的源头组件,e.target是内部的按钮组件,currentTarget是当前事件绑定的组件,e.currentTarget是当前的view组件。

wx:if和hidden的对比:

wx:if以动态创建和移除元素的方式,控制元素的展示和隐藏,hidden以切换样式的方式(display: none/block;),控制元素的显示与隐藏。

全局配置-table

backgroundColor: tabBar的背景色

selectedIconPath:选中时的图片路径

borderStyle:tabBar上边框的颜色

iconPath:未选中的图片路径

selectedColor: tab上的文字选中的颜色

color:tab上的文字默认(未选中)颜色

tabBar节点配置项:

每个tab项的配置选项:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/454680.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue全家桶之状态管理Pinia

一、Pinia和Vuex的对比 1.什么是Pinia呢? Pinia(发音为/piːnjʌ/,如英语中的“peenya”)是最接近pia(西班牙语中的菠萝)的词; Pinia开始于大概2019年,最初是作为一个实验为Vue重新…

【ArcGIS微课1000例】0102:面状要素空洞填充

文章目录 一、实验描述二、实验数据三、实验步骤1. 手动补全空洞2. 批量补全空洞四、注意事项一、实验描述 在对地理数据进行编辑时,时常会遇到面数据中存在个别或大量的空洞,考虑实际情况中空洞的数量多少、分布情况,填充空洞区域可以采用逐个填充的方式,也可以采用快速大…

【Django开发】美多商城项目第3篇:用户注册和图片验证码开发(附代码,文档已分享)

本系列文章md笔记(已分享)主要讨论django商城项目开发相关知识。本项目利用Django框架开发一套前后端不分离的商城项目(4.0版本)含代码和文档。功能包括前后端不分离,方便SEO。采用Django Jinja2模板引擎 Vue.js实现…

构建高效直播美颜系统:美颜SDK集成与性能优化指南

如今,美颜技术的广泛应用成为各类直播平台的标配之一。今天,小编将与大家进一步讨论如何构建高效的直播美颜系统,重点关注美颜SDK的集成和性能优化方面。 一、美颜SDK的选择与集成 选择合适的美颜SDK是构建高效直播美颜系统的第一步。不同的…

一台机器上如何部署多个web项目

1、综述 随着计算机硬件水平的不断提高,往往不是一台机器上只部署一个web项目了,而是尽可能多部署几个项目,以用来节省资源,现在我们看看如何一台机器部署多个项目,我们先结合上一篇文章中提到的tomcat架构&#xff0…

美创科技与河南金融信创生态实验室签署战略合作协议

2024年1月31日,由普惠通科技与河南省科学院物理所、北京交通大学、中国金融电子化集团重庆金融认证中心联合发起成立中部地区第一家金融信创生态实验室运营公司(即河南豫科普惠通信创科技有限公司)与杭州美创科技股份有限公司战略合作签约仪式…

windows10忘记密码的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

下载已编译的 OpenCV 包在 Visual Studio 下实现快速配置

自己编译 OpenCV 挺麻烦的,配置需要耗费很长时间,编译也需要很长时间,而且无法保证能全部编译通过。利用 OpenCV 官网提供的已编译的 OpenCV 库可以节省很多时间。下面介绍安装配置方法。 1. OpenCV 官网 地址是:https://opencv…

Gas Hero Coupon NFT 概览与数据分析

作者:stellafootprint.network 编译:mingfootprint.network 数据源:Gas Hero Coupon NFT Collection Dashboard Gas Hero “盖世英雄” 是一个交互式的 Web3 策略游戏,强调社交互动,并与 FSL 生态系统集成&#xff0…

深度学习之循环神经网络进阶

这一讲我们学习如何实现一个循环神经网络的分类器: 我们要解决的问题是名字分类,我们根据名字找到其对应的国家。 上一讲我们介绍了循环神经网络。 我们在处理自然语言的时候我们通常是以上这种方式,我们在处理单词的时候,通常…

Vue3快速上手(一)使用vite创建项目

一、准备 在此之前,你的电脑,需要安装node.js,我这边v18.19.0 wangdymb 2024code % node -v v18.19.0二、创建 执行npm create vuelatest命令即可使用vite创建vue3项目 有的同学可能卡主不动,可能是npm的registry设置的问题 先看下&#x…

【SpringBoot】策略和模板模式的思考与实践

一、应用场景 之所以会将策略和模板模式放在一起,是因为这两种模式用的最多最广泛,而且基本都是联合使用的。在开始之前,先复习一下模式的定义: 模板模式(Template Pattern) 模板模式是在一个抽象类中定…