微信官方“小程序”开发指南：创建分步指南，完成官方“小程序”教程

terry 2年前 (2023-09-23) 阅读数 68 #移动小程序

！（以下内容来自微信官方公布的“小程序”开发指南）

本文档将一步步指导您创建微信小程序，您可以在手机上体验小程序的真实效果电话。该小程序的首页会显示欢迎信息和当前用户的微信头像。点击头像即可在新打开的页面查看当前小程序启动日志。

1。获取微信小程序AppID

首先我们需要有一个账号。如果您看到此文档，我们应该邀请您并为您创建一个帐户。请注意，服务帐号或订阅帐号的AppID不能直接使用。使用提供的账号登录https://mp.weixin.qq.com，在网站“设置”-“开发者设置”中可以查看微信小程序的AppID。

注意：如果我们注册时没有使用管理员微信号，请尝试手机上的小程序。然后我们还需要运行“Bind Developer”。即在“用户身份-开发者”模块中，链接您试用小程序所需的微信ID。默认情况下，本教程使用微信ID来注册您的帐户和管理体验。

2。创建项目

我们需要使用开发者工具来完成小程序的创建以及代码的编辑。

安装开发者工具后，打开并使用微信扫描二维码登录。选择创建“项目”，填写上面获取到的AppID，设置项目本地名称（不是小程序名称），例如为“我的第一个项目”并选择本地文件夹作为存储代码的目录，只需单击“新建项目”即可。

为了让初学者在创建过程中更容易了解微信小程序的基本代码结构，如果选择的本地文件夹为空，开发者工具会询问是否需要创建一个快速启动项目。选择“是”，开发者工具会帮我们在开发目录下生成一个简单的demo。

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

3。输入代码

单击左侧导航工具栏中的“编辑”供开发人员使用。我们可以看到这个项目已经初始化并包含一些简单的代码文件。最重要最重要的是app.js、app.json和app.wxss。其中，.js是脚本文件，.json是配置文件，.wxss是样式文件。微信小程序读取这些文件并生成小程序实例。

我们简单了解一下这三个文件的作用，方便我们从头开始修改和开发自己的微信小程序。

app.js 是小程序的脚本代码。在这个文件中，我们可以跟踪和处理小程序生命周期函数并声明全局变量。调用MINA提供的丰富的API，例如本例中的本地数据的同步存储和同步读取。？ "">/ /app.js 应用程序（{ 启动时：

123456789101112131415161718192021222324

() { / / 拨打从本地缓存获取数据的API var logs = wx.getStorageSync('logs']♸ || logs.unshift（日期。现在（））wx.setStorageSync（'日志'，日志）

123456789101112131415161718192021222324 123456789101112131415161718192021222324  getUserInfo：功能 (cb){  var = ❙❙‸ 是 if()这个 .globalData.userInfo }  } else{  //调用登录界面   .  wx .getUserInfo({       ''函数 (res) { that.globalData.userInfo = res.userInfo; cb == “函数” ❙熔点cb（that.globaldata.userinfo）}）;}}）
copycodepapp.json是整个Mini的全局配置程序。在这个文件中我们可以配置小程序由哪些页面组成，配置小程序窗口的背景颜色，配置导航栏的样式以及配置默认标题。请注意，不能向该文件添加任何注释。 ？ "">/ **app.json*/{ "页面"❙❙口 ❙: "页面/索引/索引" ,  "页面/日志/日志" ], ""❙ ‹"" ❓   在左侧菜单栏中选择“项目”开发者工具，点击“预览”扫码在微信客户端试试 目前还无法实现预览和上传功能，需要等待微信官方下次更新。 
 可以看到，微信官方提供的开发指南非常简单。很多细节、代码和功能都没有展示清楚，所以是时候让博卡君大显身手了！开发教程正式开始！ 
第一章：准备
做好准备很重要。创建微信应用账号需要提前从微信官网（weixin.qq.com）下载开发者工具。 
1。下载最新的微信开发者工具。打开后，你会看到这个界面：
2。点击“New Web+”项目，会出现如下界面：
3.本页各种内容注：
AppID：按照官方说明填写。 
Appname：最远的项目文件夹的名称。如果将其命名为“ABC”，则所有其他项目内容都将存储在“/ABC/...”目录中。 
 本地开发目录：本地存放项目的目录。 
注意：如果您是与团队成员一起开发此项目，我们建议您使用相同的目录名和本地目录，以保证共同开发的统一。如果您已经有项目，导入过程与上面类似，我们不再赘述。 
4。一切准备工作完成后，点击“新建项目”按钮，在弹出的窗口中点击“确定”。 
5。如上图所示，目前微信开发者工具已经自动为您创建了一个初始演示项目，其中包含了微信应用项目所需的基本内容和框架结构。点击项目名称（图中“tabs”）即可进入项目，查看整个项目的基本结构： 
第二章：项目结构
微信目前拥有非常庞大的用户群，微信推出公众号未来大家都能看到火爆，也支持h5的快速发展。随着公众号业务的需求越来越复杂，一个申请账户的到来恰到好处。我们团队看了一两遍文档后发现，它提供给开发者的方式也发生了复杂的变化，从操作DOM到操作数据。基于微信提供的桥接工具，实现了很多h5应用公众号难以实现的功能，有点类似于混合开发。与混合开发不同的是，微信的开放接口更加严格，结构上必须使用它为我们提供的组件。这里无法使用外部框架和插件，因此开发人员完全脱离了对 DOM 的控制，开发思维发生了显着变化。 
工欲善其事，必先利其器。首先了解它的基本功能，了解它的整个操作流程是非常重要的。 
生命周期：
在index.js中：
'开发者工具上的控制台可以看到：
在首页的控制台中可以看到顺序是Run the application-- > 显示-->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””：
可以根据当前项目的需要进行更改，其中：
“Color”为字体底部颜色，“selectedColor”为高亮颜色切换到页面，“borderStyle”是切换菜单上方的颜色线条，“backgroundColor”是底部菜单栏的背景颜色。文字描述相当抽象。建议您一一调试，查看效果，加深印象。 
 “列表”中的代码顺序必须是有序的，不能随意更改。 
“pagePath”后面的文件名中有一个隐藏的扩展名“.wxml”。这是微信开发代码的人性化一面——帮助你节省编写代码的时间，而且不需要声明文件扩展名
 ""iconPath"" 是未显示页面的图标路径，这两个路径可以直接是网络图标。 
 ""selectedIconPath"" 是当前显示的高亮图标的路径页面，可以删除，删除后图标默认显示为“iconPath”。
“Text”是页面名称，也可以删除，删除后，出现 图标，如果只删除其中一个，则该位置被占用。
注意：微信底部菜单最多支持五栏（五个图标），因此在设计微信的用户界面和基本结构时，必须提前考虑菜单栏布局。 
5。根据上述代码规则，我为您准备了一个示例项目的基本结构：
6。配置“Json”文件后，“card_course”的基本结构如上图所示。所需的子集可以暂时删除，而丢失的子集则需要主动创建新的子集。删除子集时，请务必检查“app.json”文件中的相关内容是否也已删除。 
注意：我个人建议大家在新建“wxml”文件时，也一起创建对应的“js”和“wxss”文件，因为微信小程序账号的配置功能是，当“wxml”文件解析时，会在同一目录下同时找到同名的“js”文件和“wxss”，所以必须及时在“app.json”中预先配置“js”文件。 
 写“wxml”时，按照微信小程序提供的接口编码即可。大多数都是以前的“p”，但现在我们用“view”。当需要使用其他子集时，可以根据微信提供的接口进行选择。 
 使用名称“class”来设置样式。 “id”这个名字在这里基本上没有用。它主要操作的是数据，而不是“房子”。 
7。以上是示例项目主页的“wxml”代码。从图中可以看出，实现该页面的代码量非常少。 
8。 “Wxss”文件是导入的样式文件。您也可以直接在其中编写样式。该示例使用导入方法：
9。编辑完代码后，刷新一下。我看到没有背景的“视图”标签直接变成了粉红色。 
注：编辑“wxml”和“wxss”下的内容后，可以直接用F5恢复效果。如果编辑“js”，则必须单击重新启动按钮才能看到效果。 
10。另外，公共样式可以直接在“app.wxss”中引用。 
11。 “Js”文件必须预先配置在“app.json”文件的“page”上。为了理清项目结构，在示例项目中，我在主页“index”同级目录下额外创建了四个页面文件，如下： 
经过上述步骤后，所有五个底部菜单在配置的情况下。 。