微信小程序开发的流程和流程是怎样的？微信公众号

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

微信小程序开发的流程和流程是怎样的？微信公众号

小程序是一种无需下载或安装的应用程序。 它实现了让应用触手可及的梦想。 用户可以通过扫描或搜索的方式打开应用程序。 也实现了用完即走的理念。 用户不需要安装太多的应用程序，应用程序随处可见，但无需安装或卸载

特点：无需下载（不是没有下载，而是小程序体积很小，用户无法感知下载过程。打开任何小程序（2MB）），无需卸载。 理念：用完即走（让用户在短时间内完成）。 对于某个操作，用户可以离开小程序，不需要关注小程序本身）入​​口：扫一扫、搜索、群聊…… 1.2小程序的用途

拦截用户流量入口，未来大部分用户的日常应用需求都可以从微信小程序中获取

2.小程序与普通Web开发、APP的区别

不同的运行环境

API不同

App的API由移动操作系统提供

不同的开发模式

App开发模式需要调用IOS的组件库和3.小程序开发流程

参考网站：微信公众平台

注册：在微信公众平台注册小程序。 完成注册后，信息可以同步完善和开发。

小程序信息填写：填写小程序基本信息，包括名称、头像、简介、服务范围等。

开发小程序：完成小程序开发绑定和开发信息配置后，开发可以下载开发工具并参考开发文档来开发和调试小程序

提交审核发布：小程序开发完成后，将代码提交给微信团队审核。 审核通过即可发布（公测期间不能发布）

4. 注册小程序开发账号流程

您需要在微信公众平台注册一个小程序账号

微信公众平台：微信公众号平台

微信公众号实际上分为4类：订阅号（我们平台聊天时指的公众号）、服务号、小程序、企业微信

单击注册按钮

使用浏览器打开微信公众平台网址，点击右上角“立即注册”，进入小程序开发账号注册流程。

选择要注册的账户类型

填写账户信息

邮件激活

单击链接激活您的帐户

选择主体类型

主题注册信息

注册完成 5.获取小程序AppID

相当于微信小程序的“身份证”。 有了AppID，微信客户端就可以确定小程序“身份”，并使用微信提供的高级接口。

6. 微信开发工具 6.1 安装微信开发工具

了解微信开发工具

微信开发工具是官方推荐的小程序开发工具。 其提供的主要功能如下：

下载并安装微信开发工具

6.2 扫描二维码登录微信开发工具

6.3 设置外观和代理

为什么需要代理设置？

6.4 演示创建新小程序的步骤

单击+号创建一个新项目

填写项目信息

6.5小程序预览的两种方式

在模拟器上查看项目效果

在真机上预览项目效果

6.6开发工具主界面五个组成部分

主界面的五个组件从上到下、从左到右分别是

7.小程序项目的构成 7.1小程序目录页面的构成 用于存放所有小程序的页面 utils 用于存放工具类模块（例如：格式化时间的自定义模块） App 的入口文件。 js小程序项目 — main.jsapp.json小程序程序项目的全局配置文件 app.wxss小程序的全局样式文件..json .json 的配置文件用于配置小程序，其页面允许被微信索引 – SEO – 搜索引擎优化

7.2小程序页面组成

vue单文件组件：3部分：,,样式

小程序官方建议所有小程序页面都存放在pages目录下，每个页面存放在单独的文件夹中。

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

.js 文件——页面的脚本文件，存放页面的数据、事件处理函数、生命周期等。 .json 文件——当前页面的配置文件，配置页面的外观、性能等。 .wxml 文件——页面的模板结构文件。 wxss 文件 – 当前页面的样式表文件

7.3 了解小程序中的4种配置文件

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

项目根目录下的app.json配置文件 ★★★★★ 项目根目录下的..json配置文件 项目根目录下的.json配置文件 各页面文件夹下的.json配置文件 ★★★★★

7.4 app.json文件

app.json是当前小程序的全局配置，包括小程序的所有页面路径、窗口外观、界面表现、底部标签等。 Demo项目中的app.json配置内容如下：

我们简单了解一下这四个配置项的作用：

pages：用于记录当前小程序所有页面的路径：全局定义小程序程序所有页面的背景色、文件颜色等 style：全局定义小程序组件使用的样式版本：用于指示 .json 7.5 ..json 文档的位置

..json是项目配置文件，用于记录我们对小程序开发工具所做的个性化配置，例如：

编译相关的配置保存在项目名appid中。 小程序的账号ID保存在7.6.json文件中。

实际开发中，默认使用该文件即可

如果需要配置，则需要根据运行需求配置文件。

微信现已在小程序内开放搜索，效果类似于PC网页上的SEO（搜索引擎优化）。 .json用于配置小程序页面是否允许微信搜索。

当开发允许微信搜索时小程序微信支付开发，微信会通过爬虫索引小程序的页面内容。 当用户的搜索关键词成功匹配页面索引时，小程序的页面就有可能出现在搜索结果中。

注意：索引提示默认启用。 如果需要关闭索引提示，可以在小程序项目配置文件..json中将该字段配置为false。

7.7 页面.json配置文件

小程序中的每个页面都可以使用.json文件来配置该页面的窗口外观。 页面中的配置项会覆盖app.json中的配置项。

7.8 新建小程序页面。 右键点击pages文件，新建一个文件夹——home。 右键单击主文件夹以创建新主目录 - 输入 。 在app.json-->pages中添加页面的存储路径。 小程序开发工具可以帮助我们自动创建相应的页面文件。 要删除或添加pages目录中的页面，需要在app.json文件的pages数组中添加或删除它们。

7.9 设置主页的两种方式。 调整app.json-->pages数组中页面路径的顺序来修改项目的主页。 小程序会将排名**的页面渲染为项目的首页。

在app.json中同级的pages中，配置一个新的node节点，传入需要设置为首页的路径。

7.10 WXML的概念以及它与HTML的区别

什么是 WXML

WXML（）是框架设计的一组标签语言（组件）。 它用于构建小程序页面的结构。 其功能类似于Web开发中的HTML。

WXML 和 HTML 之间的区别

属性节点不同

提供类似Vue的模板语法

7.11 WXSS的概念以及它与CSS的区别

什么是WXSS

WXSS 和 CSS 之间的区别

提供全局样式和局部样式

WXSS仅支持部分CSS选择器

7.12小程序中JS文件三大类

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

小程序中的JS文件分为三类，分别是：

应用程序.js

页面的.js文件

普通 .js 文件

8. 宿主环境 8.1 理解宿主环境的概念

宿主环境是指程序运行所必需的依赖环境，例如：

该系统和IOS系统是两个不同的托管环境。 版微信App无法运行在IOS环境中，因此它是软件的宿主环境。 脱离了宿主环境的软件就没有意义。

8.2小程序托管环境

小程序托管环境

微信是小程序的托管环境，如图：

借助宿主环境提供的能力，小程序可以完成许多普通网页无法完成的功能，例如：微信扫码、微信支付、微信登录、地理定位等。

小程序承载环境内容 8.3小程序传播主体

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

WXML 模板和 WXSS 样式在渲染层工作微信小程序开发的流程和流程是怎样的？微信公众号，JS 脚本在逻辑层工作。

8.4小程序通信模型

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

渲染层和逻辑层之间的通信

逻辑层与第三方服务器之间的通信

8.5 运行机制

小程序启动流程

页面渲染流程

9.小程序中的组件 9.1 了解常用的视图容器组件

小程序中的组件也是由宿主环境提供的。 开发可以基于组件快速构建漂亮的页面结构。 官方将小程序的组件分为9类，分别是：

 ① 视图容器    ② 基础内容   ③ 表单组件   ④ 导航组件  ⑤ 媒体组件
 ⑥ map 地图组件  ⑦  canvas 画布组件  ⑧ 开发能力  ⑨ 无障碍访问

常用视图容器组件

-视图组件

和 -item 组件

9.2 视图组件的基本使用

view和div类似，一般用于布局

实现Flex水平布局效果如图：

<view class="container">
  <view>Aview>
  <view>Bview>
  <view>Cview>
view>

.container {
  display: flex;
  justify-content: space-around;
}
.container view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container view:nth-child(1) {
  background-color: lightgreen;
}
.container view:nth-child(2) {
  background-color: lightskyblue;
}
.container view:nth-child(3) {
  background-color: lightcoral;
}

9.3 -view组件的基本使用

<scroll-view class="container" scroll-y>
  <view>Aview>
  <view>Bview>
  <view>Cview>
scroll-view>

.container {
  width: 100px;
  height: 120px;
}
.container view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container view:nth-child(1) {
  background-color: lightgreen;
}
.container view:nth-child(2) {
  background-color: lightskyblue;
}
.container view:nth-child(3) {
  background-color: lightcoral;
}

9.4 -item 的基本用法

<swiper indicator-dots class="swiper-container">
  
  <swiper-item>
    <view class="item">Aview>
  swiper-item>
  
  <swiper-item>
    <view class="item">Bview>
  swiper-item>
  
  <swiper-item>
    <view class="item">Cview>
  swiper-item>
swiper>

.swiper-container {
  /* 轮播图容器的高度 */
  height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
  background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
  background-color: lightskyblue;
}
swiper-item:nth-child(3) .item{
  background-color: lightcoral;
}

9.5 组件的公共属性和属性类型及默认值说明

-点

错误的

是否显示面板指示点

-颜色

颜色

RGBA(0, 0, 0, .3)

指针颜色

- 颜色

颜色

#

当前所选指示点的颜色

错误的

是否自动切换

5000

自动切换时间间隔

错误的

是否使用连接滑动

9.6 文本和富文本组件

常用的基本内容组件

富文本组件 (v-html)

文本组件的基本用法

<view>
  手机号支持长按选中效果
  <text selectable>18222222222text>
view>

富文本组件的基本使用

<rich-text nodes=" style='color: red'>rich-text组件</h4>">rich-text>

9.7 按钮组件

其他常用组件

按钮的基本使用

属性名称 类型 默认值 说明

尺寸

按钮尺寸

类型

按钮样式类型

清楚的

错误的

按钮是否空心、背景色是否透明

错误的

是否禁用

错误的

名称是否带有at图标

<view>~~~ 通过 type 指定按钮类型 ~~~view>
<button>默认按钮button>
<button type="primary">主色调按钮button>
<button type="warn">警告按钮button>
<view>~~~ size="mini" 小尺寸按钮 ~~~view>
<button size="mini">默认按钮button>
<button size="mini" type="primary">主色调按钮button>
<button size="mini" type="warn">警告按钮button>
<view>~~~ plain 镂空效果 ~~~view>
<button plain size="mini">默认按钮button>
<button plain size="mini" type="primary">主色调按钮button>
<button plain size="mini" type="warn">警告按钮button>

9.8 图像图片组件

图片组件的基本使用

<image>image>

<image src="/images/ha.jpg">image>

image {
  border: 1px solid red;
}

图片组件的mode属性

图像组件的mode属性用于指定图像的裁剪和缩放模式。 常用的mode属性值如下：

模式值说明

默认值，缩放模式，在不保持长宽比的情况下缩放图像，使图像的宽度和高度完全拉伸以填充图像元素

缩放模式，保持宽高比并缩放图片，使图片的长边能够完整显示。 也就是说，图片可以完整显示。

缩放模式保持图像的长宽比，仅保证图像的短边能够完整显示。 也就是说，图像通常仅在水平或垂直方向上是完整的，而在其他方向上会发生剪切。

缩放模式下，宽度不变，高度自动变化，保持原图长宽比不变。 这里的宽度指的是图像宽度，不再是默认值。

缩放模式下，高度保持不变，宽度自动变化，保持原图像的长宽比不变。 这里的高度指的是图像高度，不再是默认值。

9.9小程序API三大类

小程序中的API由宿主环境提供。 通过这些丰富的微信原生API，可以轻松激活微信提供的能力，比如获取用户信息、本地存储、支付功能等。小程序官方将API分为以下三类：

事件监听API

同步API

异步API

10. 协同工作（成员管理） 10.1 了解权限管理需求、组织架构、开发流程

了解权限管理需求

了解项目成员的组织结构

小程序开发流程

10.2 了解小程序会员管理的两个方面

小程序会员管理体现在管理员对小程序项目会员和体验会员的管理：

项目成员

体验会员

10.3开发权限说明

不同项目成员对应的权限

开发权限说明

10.4 了解如何添加项目成员和试用成员

11.小程序的发布 11.1 了解小程序的版本阶段

在软件开发过程中，根据时间点的不同，会产生不同的软件版本。

小程序版本

审核由微信官方进行，审核周期一般为3至7天。

11.2 了解小程序发布和上线的主要步骤

小程序发布上线总体步骤

一个小程序的发布上线一般需要三个步骤：上传代码-->提交审核-->发布。

上传代码

后台查看上传的版本

登录小程序管理后台-->管理-->版本管理-->开发版本，可以查看您刚刚提交上传的版本。

提交评论

如何提交审核

发布

审核通过后，管理员会在微信上收到小程序审核通过的通知。 此时，在审核版本列表中，点击发布按钮，即可将审核通过的版本发布为线上版本，供所有小程序 用户访问和使用

11.3 基于小程序代码的推广

与普通二维码相比，小程序码的优势如下：

获取小程序代码5步：

登录小程序管理后台-->设置-->基本设置-->基本信息-->小程序代码及离线素材下载

11.4 查看小程序运行数据

小程序后台查看

使用小程序数据助手查看

如果有什么不足的地方，请大家给我一些建议。

未完待续，持续更新！

让我们大家共同进步吧！

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等