微信小程序开发

最新推荐文章于 2024-12-26 15:13:43 发布

半自动学习机丶

最新推荐文章于 2024-12-26 15:13:43 发布

阅读量810

点赞数

分类专栏：前端笔记文章标签：微信小程序

本文链接：https://blog.csdn.net/angel_of_hell/article/details/119848531

版权

1 小程序与普通网页开发的区别

(1) 运行环境的不同

网页运行在浏览器汇总,小程序运行在微信环境中

(2) api不同

(3) 开发模式不同

2 小程序代码的构成-项目结构

(1) 目录结构

(2) 页面的组成部分

组件: 一个完整的前端功能的整体,页面(html),功能(script),样式(style)

(3) json配置文件

① app.json

page: 用来记录当前小程序所有页面的路径
windows: 全局定义小程序所有页面的背景色,文字颜色等
style: 全局定义小程序组件所使用的的样式版本(v2表示新版样式)
tabBar: 小程序的tabBar效果的配置
sitemapLocation: 用来指明sitemap.json的位置

② project.config.json(用来记录小程序开发工具所做的个性化配置)

setting: 保存了编译相关的配置(在设置中进行的设置会体现在setting中)
projectname : 保存的是项目名称

appid: 保存的是小程序的账号 ID
checkSiteMap: 控制台sitemap警告

③ sitemap.json

微信现已开放小程序内搜索，效果类似于 PC 网页的 SEO 。 sitemap.json 文件用来配置小程序

页面是否允许微信索引

当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索

关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。

④ 页面.json

小程序中的每一个页面,可以使用.json文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖app.json的window中相同的配置项,不需要写window对象名,直接写

3 新增小程序页面

在app.json -> pages 中新增页面存放路径,小程序开发者工具可帮助我们自动创建对应的页面文件: 'pages/list/list',pages配置项的第一项作为首页显示

4 小程序代码的构成

4.1 WXML模板

(1) WXML和HTML的区别

标签名称不同

HTML(div, span, img, a)
WXML(view, text, image, navigator)

属性节点不同

<a href="#"></a>
<navigator url="/pages/home/home"></navigator>

提供了类似于Vue中的模板语法

数据绑定
列表渲染
条件渲染

4.2 WXSS

新增了rpx尺寸单位

CSS中需要手动进行像素单位换算,例如rem
WXSS在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算

提供了全局的样式和局部的样式

项目根目录中的app.wxss会作用于所有小程序页面
局部页面的wxss会作用域局部

WXSS仅支持部分CSS选择器

.class和#id
element
并集选择器,后代选择器
::after和::before等伪类选择器

4.3 小程序中的js逻辑交互

4.3.1 小程序中js文件的三大类

app.js

是整个小程序项目的入口文件.,通过调用App()函数来启动整个小程序

页面的.js文件

是页面的入口文件,通过调用 Page() 函数来创建并运行页面

普通的.js文件

是普通的功能模块文件，用来封装公共的函数或属性供页面使用

5 小程序的宿主环境

宿主环境指的是程序运行所必须的依赖环境,例如安卓和ios系统是两个不同的宿主环境

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

借助此宿主环境提供的能力,可以完成许多普通网页无法完成的功能

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

5.1.1 通信模型

(1) 通信的主体

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

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

(2) 而所谓的通信模型指的是:

渲染层和逻辑层之间的通信
逻辑层和第三方服务器之间的通信

5.1.2 运行机制

小程序的启动过程:

把小程序的代码包下载到本地
解析app.json全局配置文件
执行app.js小程序入口文件,调用App()创建小程序的实例(一个小程序中,只有一个App对象,可能会有多个实例Page对象,一个页面中会有多个Component实例对象)
渲染小程序首页
小程序启动完成

5.1.3 组件(哪些标签可以使用)

(1) 组件的分类

① 视图容器

② 基础内容

③ 表单组件

④ 导航组件

⑤ 媒体组件

⑥ map 地图组件

⑦ canvas 画布组件

⑧ 开放能力

⑨ 无障碍访问

(2) 常用的视图容器类组件

view

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

scroll - view

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

swiper 和 swiper - item

轮播图容器组件和轮播图 item 组件
常用的属性
- indicator-dots 是否显示面板指示点
- indicator-color 指示点颜色
- indicator-active-color 激活指示点颜色
- autoplay 是否自动切换
- interval 自动切换时间间隔
- circular 是否采用衔接滑动