【创业24小时】2022年2月11日
06-18
雷锋网出版社：这篇文章是关于程序员作者博卡君的。
雷锋网已获得作者授权发布。
未经授权禁止转载！微信应用号（小程序，应用号的新名称）终于来了！目前还处于内测阶段，微信只邀请了部分企业参与内测。
大家一定关心申请账户的最终形式会是什么样子？如何将服务号改造成小程序？我们暂时用一个简单的第三方工具的例子来演示一下开发过程。
该公司的项目是保密的，不能共享代码或屏幕截图。
博卡君一边加班一边偷偷给大家写教程。
感谢 Rolodex 团队提供了执行此手术的服务号码。
OK，为了让大家尽快看到这个教程，博卡君注定要熬夜了！今晚开始更新，希望明天一早发布第一篇教程！录音开始！看看需要多少天才能完成转变！前言 在开始开发应用账号之前，我们先来看看官方的小程序教程！以下内容来自微信官方小程序开发指南。
本文档将带您一步一步创建微信小程序，您可以在手机上体验小程序的实际效果。
该小程序的首页会显示欢迎信息和当前用户的微信头像。
点击头像即可在新打开的页面查看当前小程序的启动日志。
1.获取微信小程序的AppID。
首先，我们需要有一个帐户。
如果您可以看到此文档，则我们应该已邀请您并为您创建了一个帐户。
请注意，服务帐号或订阅帐号的AppID不能直接使用。
使用提供的账号登录，您可以在网站“设置”-“开发者设置”中查看微信小程序的AppID。
注：如果我们注册时没有使用绑定的管理员微信号，请在手机上尝试使用此小程序。
那么我们还需要操作“绑定开发者”。
即在“用户身份-开发者”模块中，绑定体验小程序所需的微信ID。
本教程默认使用管理员微信号注册账号和体验。
2、创建项目需要使用开发者工具完成小程序创建和代码编辑。
开发者工具安装完成后，打开并使用微信扫描二维码登录。
选择创建“项目”，填写上面获取到的AppID，设置一个本地项目名称（不是小程序名称），如“我的” First Project”，选择本地文件夹作为代码存放目录，点击“New Project”即可。
为了方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹为空文件夹，开发者工具会提示是否需要创建快速启动项目。
选择“是”，开发者工具会帮我们在开发目录下生成一个简单的demo。
项目创建成功后，我们可以点击项目进入，看到完整的开发者工具界面。
点击左侧导航。
我们可以在“编辑”中查看和编辑我们的代码，并在“调试”中测试代码。
模拟小程序在微信客户端的效果。
在“项目”中，您可以将其发送到手机上预览实际效果。
3. 编写代码并点击开发者工具左侧导航中的“编辑”。
我们可以看到这个项目已经初始化并包含一些简单的代码文件。
最关键、最本质的是app.js、app.json和app.wxss。
其中.js后缀是脚本文件，.json后缀是配置文件，.wxss后缀是样式表文件。
微信小程序会读取这些文件并生成小程序实例。
下面我们简单了解一下这三个文件的作用，方便从头开始修改和开发自己的微信小程序。
app.js是小程序的脚本代码。
我们可以监控和处理小程序的生命周期函数，并在这个文件中声明全局变量。
调用MINA提供的丰富的API，例如本例中的同步存储、同步读取本地数据。
//app.jsApp({ onLaunch: function () { // 调用API从本地缓存获取数据 var log = 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" && c b(that .globalData.userInfo) ??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? globalData 在这个文件中，我们可以配置小程序由哪些页面组成，配置小程序窗口背景颜色，配置导航栏样式，配置默认标题，注意不能加注释。
添加到此文件中。
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": " WeChat", "navigationBarTextStyle":"black" }}app.wxss 是整个小程序的通用样式表。
我们可以直接在页面组件的class属性上使用app.wxss中声明的样式规则。
/**app.wxss**/.container { 高度: %;显示：柔性；弹性方向：列；对齐项目：居中； justify-content：空间之间；填充：rpx 0；框大小：边框-box;}4。
创建页面 在本教程中，我们有两个页面，索引页面和日志页面，分别是欢迎页面和小程序启动日志显示页面。
它们都在页面目录中。
微信小程序中每个页面的【路径+页面名称】需要写在app.json的pages中，pages中的第一个页面就是小程序的首页。
每个小程序页面由同一路径下四个不同的同名后缀文件组成，如：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: {} }, // 事件处理 function bindViewTap: function() { wx.navigateTo ( { url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this // 调用应用实例方法获取全局数据 app.getUserInfo(function (userInfo ){????????? // 更新数据?????? that.setData({????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????index.wxss??????????? ?列对齐；} .userinfo-avatar { 宽度：rpx；高度：rpx；边距：20rpx； } .userinfo-nickname { color: #aaa;} .usermotto { margin- top: px;} 页面的样式表是可选的 当存在页面样式表时，页面样式表中的样式规则将层叠在页面样式表中。
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: { 日志: [] }, onLoad: function () { this.setData({ 日志: (wx.getStorageSync(' log') || []).map(function (log) { return util.formatTime(new Date(log)) }) }) }}) 运行结果如下： 5、选择左侧菜单栏移动预览开发者工具“项目”，点击“预览”，扫描二维码即可在微信客户端体验。
目前预览和上传功能尚未开放，需要等待微信下次官方更新。
可以看到，微信官方提供的开发指南非常简单，很多细节、代码和功能都没有清晰地展示出来，现在是博卡君展现实力的时候了！开发教程正式开始！第一章：准备 做好准备很重要。
开发微信应用账号需要提前从微信官网（weixin.qq.com）下载开发者工具。
1.下载最新的微信开发者工具。
打开后，你会看到这样的界面： 2. 点击“New web+”项目，出现如下界面： 3. 请注意本页各内容的AppID：按照官方说明填写。
Appname：项目最外层文件夹的名称。
如果将其命名为“ABC”，则后续所有项目内容都将保存在“/ABC/...”目录中。
本地开发目录：项目本地存放的目录。
注意：再次强调，如果您与团队成员一起开发此项目，建议您使用相同的目录名和本地目录，以保证协作开发的统一。
如果您之前有过项目，导入过程与上面类似，不再赘述。
4、所有准备工作完成后，点击“新建项目”按钮，在弹出的框中点击“确定”。
5、如上图所示，此时微信开发者工具已经自动为您构建了一个初始的演示项目，其中包含了微信应用项目所需的基本内容和框架结构。
点击项目名称（图中的“卡片”）进入项目，可以看到整个项目的基本结构： 第二章：项目结构 微信目前拥有非常庞大的用户群。
微信公众号推出后，大家都知道它的受欢迎程度，正如你所看到的，它也带动了h5的快速发展。
随着公众号业务的需求越来越复杂，申请号的到来恰逢其时。
阅读一两遍文档后，我们团队发现它为开发者提供的方式也在发生全面的变化，从操作DOM到操作数据。
基于微信提供的桥接工具，公众号实现了很多h5应用难以实现的功能，有点类似于混合开发。
与混合开发不同的是，微信的开放接口更加严谨，结构上必须使用它为我们提供的组件。
这里无法使用外部框架和插件，因此开发人员与操作 DOM 完全分离，开发思维发生了很大变化。
工欲善其事，必先利其器。
了解其核心功能，首先了解其整个运行流程非常重要。
生命周期： 在index.js中： 在开发者工具控制台可以看到： 在首页控制台可以看到顺序是App Launch-->App Show-->onload-->onShow-->onReady。
首先是整个app的启动和显示。
可以在app.js中配置app的启动，然后是各个页面的加载、显示等。
可以想象，这里可以处理很多事情，比如装箱子等等。
路由：路由一直是项目开发的核心点。
其实微信这里很少介绍路由。
可以看到微信在路由方面封装得很好，还提供了三种跳转方式。
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”。
“文本”是页面标题，也可以删除。
去掉后就只显示图标了。
如果只删除其中一个，该位置就会被占用。
注意：微信的底部菜单最多支持五列（五个图标），因此在设计微信应用的 UI 和基本结构时，必须提前考虑菜单栏的布局。
顺便说一句：我们的团队目前有两组人从事设计，三组人同时从事编码。
根据微信给出的设计指导，设计师绘制样图，我们根据样图编写UI部分，这样效率更高。
相对较高，不需要等待UI完全绘制完成。
双方可以同步！ 5、根据上面的代码规则，我准备好了示例项目的基本结构供大家参考： 6、“Json”文件配置完成后，“card_course”的基本结构如上图所示。
任何不需要的子集都可以使用暂时删除丢失的子集，您将需要主动创建它们。
删除子集时，记得检查“app.json”中的相关内容是否也被删除。
注意：我个人建议在新建“wxml”文件时，也一起创建对应的“js”和“wxss”文件，因为微信应用号的配置特点是，当解析一个“wxml”文件时，就会在同一个目录下找到“js”和“wxss”同名文件，所以需要及时在“app.json”中预先配置“js”文件。
编写“wxml”时，按照微信应用号提供的接口编码即可。
大多数都是以前的“div”，但我们现在用的是“view”。
当需要使用其他子集时，可以根据微信提供的接口进行选择。
使用“class”名称来设置样式，“id”名称在这里基本没有用处。
主要操作数据，而不是“dom”。
7、以上是示例项目主页的“wxml”编码。
从图中可以看出，实现一个页面的代码量非常少。
8.“Wxss”文件是导入的样式文件。
您也可以直接在其中编写样式。
示例中使用的是引入方法： 9.修改代码并刷新后，可以看到没有背景的“view”标签直接变成了粉色。
注意：修改“wxml”和“wxss”下的内容后，可以直接用F5刷新查看效果。
如果修改了“js”，需要点击重启按钮才能看到效果。
10.另外，公共样式可以直接在“app.wxss”中引用。
11、“app.json”文件的“page”中需要预先配置“Js”文件。
为了理清项目结构，我在示例项目中与“index”主页同级目录下创建了另外四个页面文件，如下： 经过上述步骤，案例中的五个底部菜单全部配置完毕。
雷锋网注：本文由博卡君授权雷锋网发表。
如需转载，请联系原文作者并注明作者及出处。
内容不得删除。
版权声明：本文内容由互联网用户自发贡献，本站不拥有所有权，不承担相关法律责任。如果发现本站有涉嫌抄袭的内容，欢迎发送邮件 举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
标签：
相关文章
06-18
06-17
06-17
06-18
06-18
06-18
最新文章
Android旗舰之王的过去与未来
智能手表不被开发、AR眼镜被推迟，Meta的产品经历了一波三折
为什么Cybertruck是特斯拉史上最难造的车？
更新鸿蒙3后，文杰允许你在车里做PPT了
新起亚K3试驾体验：追求“性价比”，韩系汽车仍不想放弃
阿维塔15登场！汽车配备了增程动力，理想情况下会迎来新的对手吗？
马斯克宣布创建 ChatGPT 竞争对手！ OpenAI的CEO给他泼了冷水， GPT-5可能会发生巨大变化
骁龙无处不在，是平台也是生态