当前位置:首页 > 业界动态 > 正文

了解微信应用号开发的教程

运行结果如下:

4. 手机预览

开发者工具左侧菜单栏选择“项目”,点击“预览”,扫描二维码即可在微信客户端体验。

目前预览和上传功能尚未开放,需要等待微信下次官方更新。

可以看到,微信官方提供的开发指南非常简单。 很多细节、代码、功能都没有清晰地展示出来,是时候博卡君展现实力了! 开发教程正式开始!

第一章:准备

准备很重要。 开发微信应用账号需要提前从微信官网(weixin.qq.com)下载开发者工具。

1.下载最新的微信开发者工具。 打开后你会看到这样的界面:

2、点击“新建web+”项目,出现如下界面:

3、请关注本页面各项内容——

注意:再次强调,如果您与团队成员一起开发此项目,建议您使用相同的目录名和本地目录,以保证协作开发的统一。 如果您之前有过项目,导入过程与上面类似,不再赘述。

4、所有准备工作完成后,点击“新建项目”按钮,在弹出的框中点击“确定”。

5、如上图所示,此时微信开发者工具已经自动为您构建了一个初始的演示项目,其中包含了微信应用项目所需的基本内容和框架结构。 点击项目名称(图中的“卡片”)进入项目,可以看到整个项目的基本结构:

第 2 章:项目结构

微信目前拥有非常庞大的用户群。 微信推出公众号后,大家都可以看到它的受欢迎程度,这也促进了Html 5的快速发展。随着公众号业务的需求越来越复杂,应用号的到来恰逢其时。

博卡君发现,微信为开发者提供的方式也在发生全面的变化:从操作DOM到操作数据,基于微信提供的桥接工具,很多公众号难以实现的Html 5功能有些相似。 与混合开发不同,微信的开放接口更加严谨,结构必须采用其提供的组件。 这里不能使用外部框架和插件,让开发者完全脱离操作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. 找到项目文件夹并将其导入到编辑器中。 在这里,Bokajun 使用 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”时,按照微信应用号提供的接口编码即可。 大部分都是以前的“div”,现在只是用“view”了。 当需要使用其他子集时,可以根据微信提供的接口进行选择。

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

7、以上是示例项目主页的“wxml”编码。 从图中可以看出,实现一个页面的代码量非常少。

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

9、修改代码并刷新后,可以看到没有背景的“view”标签直接变成了粉色。

注意:修改“wxml”和“wxss”下的内容后,可以直接用F5刷新查看效果。 如果修改了“js”,需要点击重启按钮才能看到效果。

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

11、“app.json”文件的“page”中需要预先配置“Js”文件。 为了理清项目结构,博卡君在示例项目中“index”主页的同级目录下创建了另外四个页面文件,如下:

经过以上步骤,机箱内的五个底部菜单就全部配置完成了。

0
收藏0

最新文章

随机文章

取消
扫码支持支付码