导图社区微信小程序开发

微信小程序开发

微信小程序开发知识整理，系统地介绍了微信小程序开发的基础知识，帮助开发者更好地理解和掌握小程序开发的要点和流程。

编辑于2024-09-11 15:43:19

前端开发
微信小程序开发

Hirako

他的近期作品查看更多>>

微信小程序开发
微信小程序开发知识整理，系统地介绍了微信小程序开发的基础知识，帮助开发者更好地理解和掌握小程序开发的要点和流程。
SpringFramework
SpringFramework技术的介绍,SpringFramework，通常简称为Spring，是一个开源的企业级Java应用程序框架，由Rod Johnson创建，并于2004年首次发布。Spring Framework的主要目标是简化企业级Java开发，提高开发效率和应用程序的可维护性。
Maven
Maven的特性以及使用部署方法，Maven介绍：Maven是一款为Java项目构建管理、依赖管理的工具（软件），使用Maven可以自动化构建、测试、打包和发布项目，大大提高了开发效率和质量。

微信小程序开发

社区模板帮助中心，点此进入>>

Hirako

他的近期作品查看更多>>

相似推荐
大纲

互联网9大思维
- 30.8k
- 2.2k
- 359
MindMaster
电影院包场服务流程
- 3.6k
- 31
- 5
蔡正兆(Joe Choi)
组织架构-单商户商城webAPP 思维导图。
- 13.8k
- 176
- 15
Kacyun
暮尚正常运转导图
- 7.2k
- 39
宋林鉴
域控上线
- 1.4k
- 10
- 5
jackrao
培训计划思维导图
- 5.8k
- 129
- 3
绿叶
车队管理
- 3.2k
- 78
- 4
嘻嘻哈哈
python思维导图
- 5.1k
- 230
- 8
(*^▽^*)
七夕活动策划
- 3.0k
- 63
- 3
(*^▽^*)
供应链类型
- 2.3k
- 56
- 5
(*^▽^*)

微信小程序开发

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

（1）运行环境不同

（2） API不同

（3）开发模式不同

二、项目结构

（1） pages用来存放所有小程序页面

1||| index

2||| logs

其中每个页面由4个基本文件组成，它们分别是

.js文件:页面的脚本文件，存放页面的数据、事件处理函数等

.json文件：当前页面的配置文件，配置窗口的外观、表现等

.wsml文件：页面的模板结构文件

.wxss文件：当前页面的样式表文件

（2） utils用来存放工具性质的模块

（3） app.js小程序项目的入口文件

（4） app.json小程序项目的全局配置文件

（5） app.wxss小程序项目的全局样式文件

（6） project.config.json项目配置文件

（7） sitemap,json用来配置小程序及其页面是否允许被微信索引

三、小程序的构成

（1） JSON配置文件的作用

JSON是一种数据格式，在实际开发中，JSON总是以配置文件的形式出现。小程序项目也是如此，通过不同的.json配置文件，可以对小程序项目进行不同级别的配置。

（2）小程序项目中的4中JSON配置文件

1||| 项目根目录中的app.json

2||| 项目根目录中的project.config.json

3||| 项目根目录中的sitemap.json配置文件

4||| 每个页面文件夹中的.json配置文件

（3） app.json是当前小程序的全局配置，包括小程序的所有页面路径、窗口外观、界面表现、底部tab等

1||| pages：用来记录当前小程序所有页面路径

2||| window：全局定义小程序所有页面的背景色、文字颜色等

3||| style：全局定义小程序组件所使用的样式版本

（4） project.config.json是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置

1||| setting中保存了编译相关的配置

2||| projectname中保存的是项目名称

3||| appid中保存的是小程序的账号ID

（5） sitemap.json文件：微信现已开放小程序内搜索，效果类似于PC网页的SEO，sitemap.json文件用来配置小程序页面是否允许微信索引，当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面索引匹配时，小程序的页面将可能展示在搜索结果中。

（6）页面的.json文件：小程序中的每一个页面，可以使用.json文件来对本页面的窗口外观进行配置，页面级别的配置项会覆盖（全局）app.json的window中相同的配置项。

（7）新建小程序界面，只需要在app.json中的pages标签下写入新的页面存放路径，小程序开发工具即可自动创建对应的页面文件

（8）修改小程序首页

（9） .js文件

1||| 一个项目仅仅提供界面展示是不够的，在小程序中，我们可以通过.js文件来处理用户的操作，例如响应用户的点击、获取用户的位置等

2||| app.js：是整个小程序项目的入口文件，通过调用App（）函数来启动整个小程序

3||| 页面的.js：是页面的入口文件，通过调用Page（）函数来创建并运行页面

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

四、 WXML模版

（1）概念：WXML（WeiXin Markup Language）是小程序框架设计的一套标准标签语言，用来构建小程序页面结构，类似于网页开发中的HTML

（2） WXML与HTML的区别

1||| 标签名称不同

I. HTML

div，span，img，a

II. WXML

view，text，image，navigator

2||| 属性节点不同

I. HTML

II. WXML

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

I. 数据绑定

II. 列表渲染

III. 条件渲染

五、 WXSS

（1）概念：WXSS（WeiXin Style Sheets）是一套样式语言，用于描述WXML的组件样式，类似于网页开发中的CSS

（2） WXSS和CSS之间的区别

1||| 微信新增了rpx尺寸单位

CSS中需要手动的进行像素单位换算，例如rem

WXSS在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算

2||| 微信提供了全局样式和局部样式

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

局部页面的.wxss样式仅对当前页面生效

3||| WXSS仅支持部分CSS选择器

.class和#id

element

并集选择器、后代选择器

::after和::before等伪类选择器

六、宿主环境

（1）宿主环境（host environment）指的是程序运行所必须的依赖环境

微信就是小程序的宿主环境（小程序依赖于微信运行）

（2）小程序的宿主环境包含

1||| 通信模型

1. 通信的主题：小程序的通信主题是渲染层和逻辑层

I. WXML和WXSS样式工作在渲染层

II. JS脚本工作在逻辑层

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

2||| 运行机制

3||| 组件

4||| API

七、小程序启动的过程

1. 把小程序代码包下载到本地

2. 解析app.json全局配置文件

3. 执行app.js小程序入口文件，调用App（）创建小程序实例

4. 渲染小程序首页

5. 小程序启动完毕

八、小程序页面渲染过程

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

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

3. 执行页面的.js文件，调用page（）创建页面实例

4. 页面渲染完成

九、小程序的宿主环境-组件

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

1||| 视图容器

（1） view

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

（2） scroll-view

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

（3） swiper和swiper-item

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

2||| 基础内容

（1） text

文本组件，类似于HTML中的span标签，是一个行内元素

（2） rich-text

3||| 表单组件

4||| 导航组件

5||| 媒体组件

6||| map地图组件

7||| canvas画布组件

8||| 开放能力

9||| 无障碍访问

十、 view组件的基本使用

swiper属性

1||| indicator-dots：是否显示面板指示点

boolean类型，默认值false

2||| indicator-color：指示点颜色

color类型，默认值rgba（0,0,0,3）

3||| indicator-active-color：当前选中的指示点颜色

color类型，默认值#000000

4||| autoplay：是否自动切换轮播图

boolean，默认值false

5||| interval：自动切换时间间隔

number，默认值5000

6||| circular：是否衔接滑动

boolean，默认值false

十一、 text和rich text用法

1. text属性

1||| selectable：声明组件是否能被选中复制

2. rich-text属性

1||| nodes：将HTML字符串渲染为对应UI结构

十二、其它常用组件

1. button

微信的button比HTML的功能丰富，通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）

1||| type：指定按钮类型，主要有primary（主色调按钮）、warn（警告按钮）

2||| size：指定按钮大小，mini为小按钮，不输入为默认大小

3||| plain镂空按钮

2. image

image默认宽度约300px，高度约240px

1||| src：指定图片路径

2||| border：设置边框

在wxss文件中配置

3||| mode属性

mode用来指定图片的裁剪和缩放样式

（1） scaleToFill：缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素

（2） aspectFit：缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整的将图片显示出来

（3） aspectFill：缩放模式，保持纵横比例缩放图片，只保证图片的短边能完全显示出来。也就是说图片通常只在水平或垂直方向上是完整的，另一个方向将会被截取

（4） widthFix：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

（5） heightFix：缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

3. navigator

小程序中的页面导航组件，类似于HTML的a链接

十三、小程序中的API

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

1. 事件监听API

特点：以on开头，用来监听某些事件的触发

2. 同步API

特点：以Sync结尾的API，同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常。例如：wx.setStorageSync（'key','value'）向本地存储中写入内容

3. 异步API

特点：类似于jQuery中的$.ajax(options)函数，需要通过success、fail、complete接收调用的结果。例如wx.request（）发起网络数据请求，通过success回调函数接收数据