[移动开发] 小程序代码的构成

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 小程序代码的构成 -> 正文阅读

[移动开发]小程序代码的构成

文章目录

小程序代码的构成

项目的基本组成结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JvsyF0eH-1643895696582)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20220203175142790.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LkQHNOu4-1643895696583)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20220203175240298.png)]

小程序页面的组成部分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iTFWnjJa-1643895696583)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20220203175423679.png)]

JSON配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dgosa7HK-1643895696583)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20220203195733178.png)]

新建一个小程序页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dOCKNxwO-1643895696584)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20220203200018422.png)]

注意，要写两遍，第一遍代表在pages下有一个目录，第二个代表目录下的项目文件。

设置页面为项目首页

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cagpWJS8-1643895696584)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20220203200216161.png)]

WXML模板

小程序的标签语言，作用同网页的HTML。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yb4lVYr6-1643895696585)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20220203200513243.png)]

WXSS

样式语言，作用同CSS。

JS 逻辑交互，函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kbum7ZnA-1643895696585)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20220203200944652.png)]

宿主环境

什么是宿主环境

程序的宿主环境指的是：程序运行当时的依赖环境（常见的有安卓系统、ios系统）。

小程序的宿主环境是手机微信（放之四海皆准）。

小程序包含的宿主环境（手机微信提供给小程序可访问的内容）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dk0WoW9I-1643895696586)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20220203201531815.png)]

通信模型

通信主体（谁和谁之间需要通信）

渲染层和逻辑层。

WXML模板和WXSS样式工作在渲染层（用于渲染小程序页面）

JS脚本工作在逻辑层（负责逻辑交互功能）
通信模型

分为以下两部分：
1. 渲染层和逻辑层的通信（页面函数需要用到页面元素）
2. 逻辑层和第三方服务器的通信（对服务器发起请求）

运行机制

json -> wxml、wxss -> .js

小程序启动的过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O87mNPSo-1643895696587)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20220203202701410.png)]

页面渲染的过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2IVfpODy-1643895696587)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20220203202737948.png)]

组件-搭建出漂亮的页面结构

常用的有以下几类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IjYlXnNl-1643895696588)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20220203202914898.png)]

视图容器

view

类似html的div，块级元素
scroll-view：可滚动的视图区域（内容滚动，view不动），实现滚动列表效果
swiper swiper-item：轮播图组件和轮播图item组件。

view组件的基本使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ed32NsD-1643895696589)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20220203204107593.png)]

scroll-view组件的基本使用

允许滚动的方向

在scroll组件中加入 scroll-x 或者 scroll-y。
希望竖直方向滚动时，必须给这个组件定高。

swiper swiper-item组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9LMc9iWc-1643895696589)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20220203205938052.png)]

有些坑：

swiper-item中尽量再加一级view。之后wxss先用子代顺序选择题找到这个item，再往下写。

swiper组件的常用属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LY1uWt6n-1643895696590)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20220203210419581.png)]

text组件和rich-text组件的基本使用

text组件

类似span。

通过text组件的 selectable 属性，实现长按选中的功能（例如长按手机号，自动选中手机号，其原因是手机号被放在text组件中，text组件设置了 selectable属性。）

注意：只有text组件有selectable属性，即如果想要对一串文本附加长按选中功能，则应放在text组件中。

rich-text组件

rich-text组件的nodes属性可以赋值字符串，该字符串会被解析为html字符串，并渲染到页面上。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vSxuLacW-1643895696590)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20220203211229696.png)]

当服务器返回html字符串，则用rich-text的nodes属性渲染到页面上。

其他常用组件

button

按钮组件[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aWrTv3MW-1643895696591)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20220203211928164.png)]

三种属性：