【Day01】0基础微信小程序入门，微信小程序入门与实战-全新版

文章目录

今日学习目标小程序简介1.小程序与常规网页开发的区别2.体验小程序

第一个小程序1. 第一个小程序- 注册2. 第一个小程序- 安装开发者工具3. 第一个小程序- 创建小程序项目

小程序代码组织1. 小程序代码组织- 项目结构2. 小程序代码组织- JSON 文件3. 小程序代码组织- WXML 模板4. 小程序代码组织- JS 逻辑交互

小程序托管环境1. 概述2. 通信模型3. 执行机制4. 组件5. API

协调工作及发布1.协作2.会员管理3.小程序版本4.线上发布

总结

不要错过并穿越

今日学习目标

如何创建小程序项目

了解小程序的基本结构，

小程序页面结构

小程序中常用组件的使用，

如何协同开发和发布小程序。

小程序简介

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

执行环境不同。小程序运行在微信环境，网页运行在浏览器环境。

开发模式不同： Web开发模式：浏览器+代码编辑器。小程序标准开发模式：申请小程序开发账号，安装小程序开发者工具，创建并配置小程序项目。

丰富的API：小程序虽然无法调用DOM、BOM API，但可以使用微信环境提供的各种API，例如定位、扫码、支付等。

2. 体验小程序

用手机扫描二维码。这是官方的例子

微信小程序提供组件、扩展、接口、云开发四大功能。

第一个小程序

1.第一个小程序-注册

https://mp.weixin.qq.com/

点击网址- 立即注册- 右上角小程序- 继续注册

输入您的帐户信息，启用电子邮件并注册您的信息。

注：主题类型选择个人，输入个人主题信息，使用管理员微信帐号扫描下方二维码，点击继续。注册后，您将被重定向到此页面，其中提供了一些有关小程序管理的背景信息。

获取小程序AppID:

会在以后的开发中用到

2.第一个小程序-安装开发者工具

是官方推荐的小程序开发工具，主要特点有：

快速创建小程序项目、查看编辑代码、调试小程序功能、预览和发布小程序

VSCode 已弃用

我们建议下载稳定版本。下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

下载完成后，点击下一步开始安装，等待安装完成。您可能需要手动配置环境变量，但这非常简单。

当你打开开发者工具时，页面如下所示：这说明安装成功了。

使用微信扫描上方二维码即可登录。我成功扫码如下：

现在您可以开发

还有外观和代理设置：

3.第一个小程序-创建小程序项目

小程序-新项目

完成后，单击新建

这将创建一个新项目

如何查看效果： 1、点击编译器顶部的编译按钮，在编译器左侧查看效果。 2.点击“编译”旁边的“预览”，用手机微信扫描二维码。看看效果。

主界面的五个组成部分：

帮助- 开发者文档的定位

设置-常规设置可以设置代理的快捷键

工具- npm 构建后可用。

详细信息- 有关项目的一些基本信息

我们推荐使用iPhone 6/7/8作为机型，比例改为85%

小程序代码构成

1.小程序代码构成-项目结构

基本结构：

Pages文件夹：存放所有小程序页面

utils文件夹：存放类似工具的模块，比如格式化时的自定义模块。

app.js : 小程序项目入口文件

app.json : 小程序项目的全局配置文件

app.wxss : 小程序项目的全局样式文件

project.config.json : 项目配置文件

sitemap.json : 用于配置是否允许小成熙及其页面被微信索引。

小程序页面组成：

所有小程序页面都存储在pages目录中，并驻留在单独的文件夹中。

每个页面由四个基本文件组成：

-.js文件：存储页面数据和事件处理函数的脚本文件

-.json文件：配置当前页面配置文件、窗口外观、性能等。

-.wxml文件：页面模板结构文件

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

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

2. 小程序代码构成-JSON文件

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

当前演示的app.json 配置如下：

project.config.json 文件是您设置个人设置的位置，您对本地高级设置中的选项所做的任何更改都会反映在该文件中。

注意，拿到别人的项目时，需要更改appid。如果不改的话会报很多错误。

在sitemap.json文件中配置是否允许小程序页面微信索引。微信现在可以在小程序内进行搜索，这与PC上网页的SEO效果类似。

控制台默认开启微信索引提示。将project.config.json 设置中的checkSiteMap 更改为false。没有手动完成它的选项。

.json 文件位于单独的文件夹中，允许您配置此页面窗口的外观。此页面上的配置项会覆盖app.json 中窗口中的相同配置项。

将背景颜色更改为绿色

创建新的小程序页面：只需在app.json – Pages 中添加并保存页面的存储路径，然后使用小程序开发者工具自动创建相应的页面文件。

更改项目的主页：要更改项目的主页，只需调整app.json 中的页面顺序（页码）即可。小程序将排名第一的页面呈现为项目的主页。

\’页\’: [

\’页面/列表/列表\’,

\’页面/索引/索引\’,

“页面/日志/日志”

],

3. 小程序代码构成-WXML模板

什么是WXML？它是小程序框架设计的一套标签语言，用于构建小程序页面的结构。它的功能类似于Web开发中的HTML。

什么是WXSS？用于描述WXML组件样式的一组样式语言，类似于Web开发中的CSS。

4. 小程序代码的构成 – JS逻辑交互

小程序JS文件主要分为三大类，分别是：

应用程序.js

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

页面的.js 文件

这是页面的入口文件，页面是通过调用**Page()**函数来创建和运行的。

常规.js 文件

封装公共函数或属性以在页面中使用。

小程序的宿主环境

1. 简介

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

手机微信是一个小程序托管环境。

小程序托管环境包括：通信模型、运行机制、组件、API。

2. 通信模型

小程序通信的主体是渲染层和逻辑层。 WXML和WXSS处于渲染层，JS处于逻辑层。

小程序通信模型分为两部分：逻辑层与渲染层之间的通信，以及逻辑层与第三方服务器之间的通信。一切都由微信客户端传输。

3.运行机制

小程序启动流程：

下载代码包到本地

解析app.json全局配置文件

运行app.js小程序入口文件，调用App()创建小程序实例。

渲染小程序首页

小程序启动完成

页面渲染流程：

加载解析后的页面的.json配置文件，加载页面的.wxml模板和.wxss样式执行页面的.js文件，并调用Page()创建页面实例。

4. 组件

由宿主环境提供

类别（9类）：视图容器、基本内容、表单组件、导航组件、媒体组件、地图组件、画布组件、开放功能、辅助功能

常用视图容器类组件：

看法

与div元素类似，这是一个常用于实现页面布局效果的块级元素。

滚动视图

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

刷卡器和刷卡器项目

轮播图表组件和轮播图表项目组件

举个栗子来了解视图的基本用法：

!–pages/list/list.wxml–

查看类=\’container1\’

查看A/查看

查看B/查看

查看C/视图

/看法

/* 页面/list/list.wxss */

.container1视图{

高度： 100 像素；

宽度： 100 像素；

文本对齐：居中；

行高： 100px；

}

.container1 view:nth-child(1){

背景颜色：亮粉色；

}

.container1 view:nth-child(2){

背景颜色：灰色；

}

.container1 view:nth-child(3){

背景颜色：天蓝色；

}

.container1{

显示器： Flex。

justify-content: 周围的空间；

}

举个栗子来了解scrollview的基本用法：

当内容超过一定范围时滚动。

垂直滚动scroll-y，水平滚动scroll-x

!–pages/list/list.wxml–

滚动视图类=\’container1\’滚动-y=\’true\’

查看A/查看

查看B/查看

查看C/视图

/滚动视图

/* 页面/list/list.wxss */

.container1视图{

高度： 100 像素；

宽度： 100 像素；

文本对齐：居中；

行高： 100px；

}

.container1 view:nth-child(1){

背景颜色：亮粉色；

}

.container1 view:nth-child(2){

背景颜色：灰色；

}

.container1 view:nth-child(3){

背景颜色：天蓝色；

}

.container1{

宽度： 100 像素；

高度： 120 像素；

}

可以滚动

一个小栗子了解swiper和swiper item的基本用法

!–pages/list/list.wxml–

刷卡器

swiper-item 类=\’swiper-container\’

视图类=\’项目\’A/视图

/滑动项目

刷卡项目

视图类=\’item\’B/view

/滑动项目

刷卡项目

视图类=\’item\’C/view

/滑动项目

/刷卡器

/* 页面/list/list.wxss */

.container1视图{

高度： 100 像素；

宽度： 100 像素；

文本对齐：居中；

行高： 100 像素；

}

.container1 view:nth-child(1){

背景颜色：亮粉色；

}

.container1 view:nth-child(2){

背景颜色：灰色；

}

.container1 view:nth-child(3){

背景颜色：天蓝色；

}

.container1{

宽度： 100 像素；

高度： 120 像素；

}

.swiper-container{

高度： 150 像素；

}。物品{

高度： 100%；

行高： 150px；

文本对齐：居中；

}

滑动项：nth-child(1) .item{

背景颜色：浅蓝色；

}

滑动项：nth-child(2) .item{

背景颜色： rgb(8, 0, 85);

}

滑动项：nth-child(3) .item{

背景颜色：浅黄色；

}

常用的基本内容组件

句子

类似于span、内联元素的文本组件

富文本

支持将HTML 字符串呈现为WXML 结构的富文本组件

举个栗子了解text的基本用法

文本组件的selectable属性可以实现长按选择文本内容的效果（见实际设备效果）

看法

手机号码支持长按选择效果

可选择文本12121212/文本

/看法

举个栗子了解富文本的基本用法

通过Node Attributes节点，将HTML字符串渲染成相应的UI结构。

richtext 节点=\’h1 style=\’color:red\’title/h1\’/richtext

其他常用组件

按钮

按钮组件可以通过open类型属性调用微信提供的各种功能（客服、转账、获取用户认证、获取用户信息）。

图像

图片组件，默认宽度300像素，长度240像素

Navigator（稍后解释，此处省略）

类似于链接的页面导航组件

举个栗子了解按钮组件的基本用法

!–pages/list/list.wxml–

!–type指定按钮的类型，size=\’mini\’按钮的大小，以及普通按钮是否镂空。这三者可以一起使用。

按钮类型=\’主要\’ 主颜色/按钮

按钮类型=\’警告\’ 警告/按钮

按钮尺寸=\’mini\’ 主色/按钮

按钮类型=\’primary\’ 纯色主色/按钮

举个栗子了解图像组件的基本用法

常用的mode属性值有：

Mode 值描述scaleToFill（默认值）缩放模式。缩放图像而不保留纵横比。这将导致图像宽度和高度完全拉伸以填充图像元素。宽高比适合缩放模式。缩放图像，同时保持其纵横比。确保图像的长边完全可见。这意味着图像可以在aspectFill缩放模式下完全显示，该模式保留图像的长宽比并确保只有图像的短边缘完全可见。这意味着图像通常仅在水平或垂直方向上是完整的，在其他方向上会发生剪切。 widthFix 缩放模式，宽度不变，高度自动改变，原图长宽比不改变heightFix 缩放模式，高度不改变，宽度自动改变，原图长宽比不改变。

默认模式是scaleToFill

图像src=\’.\’ 模式=\’aspectFit\’/image

5. API

通过托管环境提供的API，开发者可以轻松调用微信提供的功能，如用户信息检索、本地存储、支付功能等。

分类（3类）

事件监听API

在on 开头，监听触发特定事件，如wx.onWindowResize(function callback) 来监听窗口调整大小事件。

同步API

Sync结束时，可以通过函数的返回值直接获取执行结果。如果执行发生错误，则会抛出异常。例如，wx.setStorageSync(\’key\’,\’value\’) 将内容写入本地存储。

异步API

与jQuery 的$.ajax(options) 函数类似，必须通过成功、失败和完成来接收调用的结果。例如，wx.request()

协调工作和发布

1. 协同工作

在一个项目中，不同岗位、不同角色的员工同时参与设计和开发。

目前，行政管理的需要需要对不同岗位和角色的员工进行权限划分，以便他们能够有效地协作。

项目成员组织架构

小程序开发流程

2.成员管理

会员管理的两个方面

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

项目成员：代表参与小程序开发和运营的成员。

您可以登录小程序管理后台

管理员可以添加和删除项目成员，并设置项目成员角色。

体验会员：代表参与小程序内测体验的会员。

如果您可以使用试用小程序，但不是项目成员，管理员和项目成员可以添加和删除试用成员。

不同项目成员的权限：

开发者权限说明：

开发者权限： 允许您使用小程序开发者工具以及小程序功能的代码开发有经验的权限： 允许您使用小程序的试用版登录权限： 允许您开发小程序，无需管理员审核设置配置： 小程序这允许您登录到管理后台。 扫描服务器域名二维码、消息推送或常规链接打开小程序腾讯云管理权限：云开发设置

如何添加项目和经验成员？

3.小程序版本

开发-测试-正式版

版本阶段描述开发版本使用开发者工具将代码上传到开发版本。开发版本只保留每个人上传的最新代码。要提交代码以供审核，请单击提交以供审核。您可以删除开发版本，而不影响在线版本和审核版本中的代码。对于试用版，可以选择开发版作为试用版，选择试用版。正在审查的版本只能包含正在审查的代码的一份副本。一旦您的审核结果可用，您可以在线发布它们或直接重新提交以供审核，覆盖原始审核版本。在线版本是所有在线用户使用的代码版本。新版本代码发布后，该版本代码将被覆盖更新。

4. 发布上线

脚步：

上传代码

单击工具栏上的上传按钮并输入版本号和项目注释。

小程序管理后台-管理-版本控制-登录您的开发版本即可查看您刚刚上传的版本。

提交评论

对于开发版本列表，点击提交审核按钮，填写相关信息，并发送给腾讯人员审核。

发布

当您收到小程序已通过审核的通知后，点击审核版本列表中的“发布”按钮，即可将“通过审核”的版本发布为“上线版本”。

基于小程序码的促销

优点：风格更具辨识度、视觉冲击力，更清晰地树立您的品牌形象，更有效地推广您的小程序。

5步获取小程序码：

登录小程序管理后台-设置-基本设置-基本信息-下载小程序代码和线下资料

查看运营数据的两种方式：

“小程序后台视图”：在后台侧边栏管理您的统计数据。使用“小程序数据助手”展示：微信搜索该关键词即可

总结

完成课程后，您将需要以下内容：

了解如何创建小程序项目

了解小程序项目的基本结构

您可以查看一个小程序页面由多少部分组成

学习如何使用小程序中的常用组件

了解如何协作开发和发布小程序

请持续更新~

#[Day01] 0 微信小程序基础入门以上有关来源网相关内容仅供参考。相关信息请参见官方公告。