小程序：传记和读写大师

上传图片并获取上方的文字

前言

在开始开发应用程序编号之前，请看一下正式的“ 小程序”教程！ （以下内容来自微信发行的官方“ 小程序”开发指南）

本文档将带您逐步创建微信小程序，您可以在手机上体验小程序的实际效果。此小程序的主页将显示欢迎消息和当前用户的微信化身。单击该头像以在新打开的页面上查看当前小程序启动日志。

1.获取微信小程序的AppID

首先，我们需要有一个帐户。如果您可以看到该文档，我们应该已经为您邀请并创建了一个帐户。请注意，服务帐户或订阅帐户的AppID不能直接使用。使用提供的帐户登录，然后可以在网站的“设置”-“开发人员设置”中查看微信小程序的AppID。

注意：如果我们不使用注册时绑定的管理员微信号码，请在手机上体验小程序。然后，我们还需要操作“绑定开发者”。也就是说，在“用户身份开发人员”模块中，您需要体验绑定上小程序的微信号。本教程的默认注册帐户和使用体验是使用管理员微信号码。

/ ************************************************** ***********************

微信小程序完整的视频教程在线观看地址：

由于视频文件上传到腾讯视频后会自动压缩，因此在线观看的视频不是特别清晰。

如果您需要视频文件的清晰版本，请从以下链接下载该文件：

这套视频教程包含微信小程序开发的基本知识，特别适合学习微信小程序开发入门。请观看并按顺序学习。

这套教程最初售价199元，现在免费赠送。所有内容均由作者记录。

有关课程说明中使用的示例源代码，请遵循微信官方帐户：“微小程序”，并按照提示获取源代码。成功跟踪之后，您也可以直接单击官方帐户中的“视频教程”菜单，以了解有关如何获取支持示例的源代码的更多信息。

获得示例源代码后，请自己尝试，这样学习会更有效。

您也可以扫描下面的QR码以关注官方帐户：

*********************************************** ************************************** /

2.创建项目

我们需要使用开发人员工具来完成小程序创建和代码编辑。

安装开发人员工具后，打开并使用微信进行扫描以登录代码。选择创建“项目”，填写上面获得的AppID，为本地项目设置一个名称（不是小程序名称）（例如“我的第一个项目”），然后选择一个本地文件夹作为代码存储。对于目录，请单击“新建项目”。

为了让初学者了解微信小程序的基本代码结构，在创建过程中，如果所选的本地文件夹为空文件夹，则开发人员工具将提示是否需要创建快速启动项目。选择“是”，开发人员工具将帮助我们在开发目录中生成一个简单的演示。

成功创建项目后，我们可以单击项目进入并查看完整的开发人员工具界面，单击左侧导航，在“编辑”中查看和编辑我们的代码，在“调试”中测试代码并模拟小程序在微信客户端上的效果，您可以将其发送到手机中以预览“项目”中的实际效果。

3.编写代码

在开发人员工具的左侧导航中单击“编辑”，我们可以看到该项目已被初始化并包含一些简单的代码文件。最关键和必不可少的是app.js，app.json和app.wxss。其中.js后缀是脚本文件，.json后缀是配置文件，.wxss后缀是样式表文件。 微信小程序将读取这些文件并生成小程序个实例。

下面我们简要了解这三个文件的功能，这方便从头开始修改和开发我们自己的微信小程序。

app.js是小程序的脚本代码。我们可以监视和处理小程序的生命周期函数，并在此文件中声明全局变量。调用MINA提供的丰富API，例如本示例中的同步存储和同步读取本地数据。

// app.jsApp（{onLaunch：function（）{//调用API从本地缓存中获取数据var logs = wx.getStorageSync（'logs'）|| [] logs.unshift（Date.now（） ）wx.setStorageSync（'logs'，logs）}，getUserInfo：function（cb）{var that = this; if（this.globalData.userInfo）{typeof cb ==“ function” && cb（this.globalData.userInfo） } else {//调用登录界面wx.login（{success：function（）{wx.getUserInfo（{success：function（res）{that.globalData.userInfo = res.userInfo; typeof cb ==“ function” && cb（that.globalData.userInfo）}}}}}）;}}，globalData：{userInfo：null}}）

复制代码

app.json是整个小程序的全局配置。在此文件中，我们可以配置组成小程序的页面，配置小程序的窗口背景色，配置导航栏样式以及配置默认标题。请注意，不能在该文件中添加任何注释。

/ ** app.json * / {“ pages”：[“ pages / index / index”，“ pages / logs / logs”]，“ window”：{“ backgroundTextStyle”：“ light”，“ navigationBarBackgroundColor” ：“ #fff”，“ navigationBarTitleText”：“微信”，“ navigationBarTextStyle”：“黑色”}}

复制代码

app.wxss是整个小程序的公共样式表。我们可以直接在页面组件的class属性上使用app.wxss中声明的样式规则。

/ ** app.wxss ** /。container {高度：100％;显示：flex;弯曲方向：列;对齐项：中心;对齐内容：间隔;填充：200rpx 0;框-sizing：border-box;}

复制代码

3.创建页面

在本教程中，我们有两个页面，即索引页面和日志页面，即小程序启动日志的欢迎页面和显示页面。它们都在页面目录中。需要将微信小程序中每个页面的[路径+页面名称]写入app.json的页面中，并且页面的第一页是小程序的主页。

每个小程序页面由四个不同的后缀文件组成，它们在同一路径下具有相同的名称，例如index.js，index.wxml，index.wxss，index.json。具有.js后缀的文件是脚本文件，具有.json后缀的文件是配置文件，.wxss后缀的文件是样式表文件，具有.wxml后缀的文件是页面结构文件。

index.wxml是页面的结构文件：

{{userInfo.nickName}} {{motto}}

复制代码

在此示例中，用于构建页面结构，绑定数据和交互式处理功能。

index.js是页面的脚本文件。在此文件中，我们可以监视和处理页面的生命周期功能，获取小程序实例，声明和处理数据以及响应页面交互事件。

// index.js //获取应用程序实例var app = getApp（）Page（{data：{motto：'Hello World'，userInfo：{}}，///事件处理函数bindViewTap：function（）{wx .navigateTo（{url：'../ logs / logs'}）}，onLoad：function（）{console.log（'onLoad'）var that = this //调用应用程序实例的方法以获取全局数据应用程序.getUserInfo（function（userInfo）{//更新数据that.setData（{userInfo：userInfo}}}}}}））

复制代码

index.wxss是页面的样式表：

/ ** index.wxss ** /。userinfo {display：flex; flex-direction：column; align-items：center;}。userinfo-avatar {width：128rpx; height：128rpx; margin：20rpx; border -radius：50％;}。userinfo-nickname {color：#aaa;}。usermotto {margin-top：200px;}

复制代码

页面样式表不是必需的。当存在页面样式表时，页面样式表中的样式规则将与app.wxss中的样式规则重叠。如果不指定页面的样式表，则还可以直接使用页面的结构文件中app.wxss中指定的样式规则。

index.json是页面的配置文件：

不需要页面的配置文件。当页面有配置文件时，页面上的配置项将覆盖app.json窗口中的相同配置项。如果没有指定的页面配置文件，则app.json中的默认配置将直接在此页面上使用。

日志页面结构

{{index + 1}}。 {{log}}

复制代码

日志页面使用控制标签来组织代码，使用wx：for-items绑定日志数据，并循环日志数据以扩展节点

// logs.jsvar util = require（'../../ utils / util.js'）Page（{data：{logs：[]}，onLoad：function（）{this.setData（{ ：（wx.getStorageSync（'logs'）|| []）。map（function（log）{return util.formatTime（new Date（log））}）}））））））））））

：

复制代码

结果如下：

4.移动预览

在开发人员工具的左侧菜单栏中选择“项目”，单击“预览”，然后在扫描代码后即可在微信客户端中体验它。

当前，预览和上传功能尚不可用，您需要等待微信的下一次正式更新。

如您所见，微信给出的官方开发指南仍然非常简单。许多细节，代码和功能没有清晰显示，因此Boka Jun应当展示自己的力量！开发教程已正式开始！

第1章：准备工作

准备很重要。要开发微信申请号，您需要事先从微信的官方网站（）下载开发工具。

1.下载了最新的微信开发人员工具，打开后，您将看到以下界面：

2.单击“新建网络+”项，然后将出现以下屏幕：

3.此页面上的所有内容都需要注意-

注意：同样，如果您和团队成员一起开发项目，建议您使用相同的目录名和本地目录，以确保协作开发的统一性。如果您以前有一个项目，则导入过程与上述内容相似，因此我不再赘述。

4.所有准备工作完成后，单击“新建项目”按钮，将弹出一个弹出框，然后单击“确定”。

5.如上图所示，此刻，微信开发人员工具已自动为您构建了一个初始演示项目，其中包含微信应用程序项目结构所需的基本内容和框架。单击项目名称（图中的“卡片”）进入该项目，您可以看到整个项目的基本结构：

第2章：项目框架

微信当前，用户组非常大。正式帐户启动后，每个人都可以看到它的流行程度，并且还促进了h5的快速发展。随着官方帐户业务的需求变得越来越复杂，应用程序帐户的到来恰到好处。一两次阅读文档后，我们的团队发现，基于微信提供的桥接工具，它向开发人员提供的方式也在经历从操作DOM到操作数据的全面更改，以在公众场合实现大量的h5帐户难以实现的功能类似于混合开发，但不同于混合开发：微信开放的界面更加严格，并且结构必须采用他提供给我们的组件。此处不能使用外部框架和插件。综上所述，开发人员与DOM完全分离开来，开发思想已发生了很大变化。

工人要想做好自己的工作，必须首先磨砺工具。了解其核心功能，首先了解其整个操作过程非常重要。

生命周期：

在index.js中：

在开发人员工具控制台上，您可以看到：

在主页控制台上，您可以看到订单为App Launch-> App Show-> onload-> onShow-> onReady。

首先是整个应用程序的启动和显示，可以在app.js中配置该应用程序的启动，然后输入每个页面的加载显示，依此类推。

您可以想象在这里可以处理很多事情，例如可以执行装载箱之类的事情。

路线：

路由一直是项目开发的核心。实际上，微信很少介绍路由。可以看出微信已经很好地封装在路由中，并且还提供了三种跳转方法。

wx.navigateTo（OBJECT）：保留当前页面，跳至应用程序中的页面，使用wx.navigateBack返回原始页面。

wx.redirectTo（OBJECT）：关闭当前页面并跳转到应用程序中的页面。

wx.navigateBack（）：关闭当前页面并返回上一页。

这三个基本上就足够了。在路由方面，微信被很好地封装。开发人员根本不需要配置路由。通常，许多框架在路由配置中都很麻烦。

组件：

这次微信在组件供应方面也很全面，基本上可以满足项目的需求，因此开发速度非常快，可以在开发前仔细浏览几次，开发效率将达到很好。

其他：

基本上没有任何外部框架和插件，甚至原生js插件也很难使用，因为过去我们的js插件基本上全部以dom形式存在，并且[这次的应用程序编号微信该架构不允许操纵任何dom，即使不支持我们以前使用的动态设置的rem.js。

这次微信还提供了WebSocket，您可以直接使用它进行聊天，并且开发空间很大。

与官方帐户相比，我们发现开发应用程序帐户是组件化，结构化和多样化的。新世界总是充满惊喜，越来越多的复活节彩蛋正等待着大家发现。

现在让我们做一些简单的代码！

1.找到项目文件夹并将其导入到编辑器中。在这里，我使用了Sublime Text编辑器。您可以根据自己的开发习惯选择喜欢的编辑器。

2.接下来，您需要根据自己的项目内容调整项目结构。在示例项目中，“ card_course”目录主要包含“ tabBar”页面和应用程序的一些配置文件。

3.示例项目的“ tabBar”是五个菜单按钮：

4.查找“ app.json”文件以配置这五个菜单。在代码行中找到““ tabBar”“：

您可以根据实际项目要求进行更改，其中：

注意：微信的底部菜单最多支持五列（五个图标），因此在设计微信应用程序的UI和基本结构时，必须事先考虑菜单栏的布局。

5.根据上述代码规则，我准备了示例项目的基本结构供您参考：

6.配置“ Json”文件后，上图显示了“ card_course”的基本结构。可以暂时删除所有不必要的子集，并且需要主动创建丢失的子集。删除子集时，请记住检查是否同时删除了“ app.json”中的相关内容。

注意：我个人建议您创建一个新的“ wxml”文件并一起创建相应的“ js”和“ wxss”文件，因为微信应用程序编号的配置功能是解析为一个“ wxml”文件同时，具有相同文件名的“ js”和“ wxss”文件将同时在同一级别的目录中找到，因此需要在“ app.json”中预先配置“ js”文件及时。

编写“ wxml”时，只需使用微信应用程序编号提供的接口代码，其中大多数是先前的“ p”，但是我们现在可以使用“ view”。当需要其他子集时，可以根据微信提供的界面进行选择。

使用“ class”名称设置样式，而“ id”名称在这里基本上没有用。主要操作数据，不操作“ dom”。

7.上面是示例项目主页的“ wxml”代码。从图中可以看出，实现页面的代码量很小。

8.“ Wxss”文件是导入的样式文件。您也可以直接在其中编写样式。在示例中使用了导入方法：

9.修改代码并刷新一次之后，您可以看到没有背景的“视图”标签直接变成了粉红色。

注意：修改“ wxml”和“ wxss”下的内容后，可以直接使用F5刷新以直接查看效果。如果您修改“ js”，则需要单击重新启动按钮才能看到效果。

10.此外，可以在“ app.wxss”中直接引用公共样式。

1 1.“ Js”文件需要在“ app.json”文件的““ page””中预先配置。为了阐明项目结构，我在示例项目的“索引”主页的同一目录中创建了另外四个页面文件，如下所示：

完成上述步骤后，案例中的五个底部菜单均已配置。

注意：要制作可更新其内容的小程序，仅靠前端开发是不够的，还需要后端开发。后端开发与Web开发基本相同。您可以选择使用任何语言，例如java，php，nodejs等。要注意的一件事是小程序后端服务器必须为https协议，这需要购买云服务器并且已设置了后台服务器到https服务。前提条件是首先购买一台好的服务器和域名。服务器可以选择腾讯云服务器，购买地址如下：

仅使可更新的小程序云服务器是不够的，因为内容是可更新的，因此小程序上实际看到的大多数内容都存储在数据库中，因此我们还需要购买云数据库，也由腾讯云提供。购买地址如下：

关于域名购买，腾讯云也可以提供。购买地址：

微信小程序 微信官方帐户“微小程序”，请扫描以下代码：