微信小程序快速开发指南

认识开发工具

“工欲善其事，必先利其器。”

之所以先从开发工具开始介绍，是为了先提起开发者的兴趣，话不多说，直接上整体图：

上图为微信开发者工具的主体页面。可以看到，整体来说还是区域性很强，黑白的搭配让它看起来还是挺高大上的😀，对开发者还算友好。

分区域介绍：

1.主选项卡区。就像其他的开发工具一样，这里提供：-

• 项目管理：新建项目、导入项目、关闭项目等。常用。
• 文件管理：保存、新建一些文件，但不常用，一般在4区左栏文件显示框的地方右键进行新文件的建立。
  编辑：主要是对4区中右边代码框的地方进行一些操作，例如代码的一些编辑、一些代码片段的查询等。
• 工具：提供一些基本功能，如编译代码、前后台切换、代码管理等。代码管理功能比较实用，方便开发者管理自己的代码。
• 界面：可以选择2、3、4等区域是否显示。
• 设置：设置开发工具自己的一些特点，如外观、快捷键、通用设置等。
• 帮助：链接微信小程序开发社区和微信小程序开发文档。没什么API是看了开发文档后不会的，如果不会，看两遍！
• 微信开发者工具：退出工具、更新版本之类的

2.工具栏：也就是主选项卡区功能的快捷调用。

• 比如左边的图标：模拟器（3区）、编辑器（4区）、调试区（5区），绿色的表示已显示，点击就会让对应的区域关闭显示。
• 还提供了编译，这里说一下，编译这个平时也不用怎么点，一般编完代码，CTRL+S保存后，工具会自动编译，并且有错误的话会显示在5区。
• 用的最多的应该就是预览，其实它就是生成一个二维码，开发者用微信扫一扫这个二维码就可以使用刚刚编写的小程序了，但处于开发版，也就是只有开发者自己能使用，主要让开发者在真机上感受小程序是否达到自己想要的效果。
• 真机调试用于还原真机上的调试台，主要用于观察一些运行的反馈。
• 切后台、清缓存、版本管理的功能就像它们的名字一样直接。
• 上传，将代码上传到微信平台的服务器，也就是用于将开发版小程序转为体验版，进而成为发布版，如果进入这一步，那么证明你的小程序已经写好了。
• 详情，告诉开发者正在开发的项目的基本情况：大小、本地存储位置、小程序状态、项目接入的权限等。

3.模拟器：
利用上述的预览功能之前，你可以在这个区域中实现看到开发者刚刚给小程序添加的效果，建议随时开启，这样有助于反馈代码的正确与否。模拟器还可以选择，图中使用的是iPhone5，开发者可以自己选择其他机型，还可模拟网络环境等。

4.编辑区：
左栏是文件树，也就是项目中存在的所有的文件，点击即可进入相应文件进行查看和编辑。右栏是代码编辑区，开发者就在这里编写你的小程序！

5.调试器：
用于看一些调试反馈，比如打印的内容（console)。还可以查看文件系统（Sources）、项目的网络活动(Network)、项目的安全信(Security)、项目中全局数据(AppData)、小程序体验测评（Audits）、模拟器的传感器设置（Sensor）、项目数据存储情况（Storage）、跟踪小程序设备的运行情况（Trace）、小程序的组件管理（Wxml）。

6.页面参数：
提供一些当前页面的参数，如路径、场景值等。

好了，开发工具的介绍到此结束，需要说明的是，这里新建了一个项目作为展示，新建项目后面章节会提及，并且该工具为官方的工具，当然现在也有一些第三方的工具可以编写小程序，并且只做简单介绍，详细内容开发者可自行查询。

微信开发者文档

官方的东西肯定要看啦！先附上地址：开发者文档。想要调用什么API、想要快速了解小程序编写的架构、想要了解小程序还有哪些强大能力，看开发者文档就对咯。首先，先看有哪些内容：

• 指南：此版块涉及到的内容比较全面，对小程序有什么疑问的，几乎都能在这个版块找到答案，也包括上面没有介绍的怎么申请开发者账号、怎么新建一个项目等。对于初学者来说，没有必要全部看完，有问题来查阅就行了，直接上手一个新项目比较直接。
• 框架：里面涉及到小程序的框架的详细介绍，也就是javaScript+WXML+WXSS。以及框架在小程序里面是怎么用代码搭起来的。不知道你新建项目的时候，自动出现的文件里面的那些代码什么意思，可以查看这个模块。
• 组件：属于一种偏前端的应用，当然不能少了相应的组件，组件是什么？就是你看到的小程序上面的那些按钮、单选框、复选框、下拉列表、文本、导航栏、画布、地图等，当然小程序支持自己定义组件。
• API：API也就是小程序能够支持的一些功能接口，也就是微信背后的工作人员写好的一些功能函数封装成一个简单的一句代码，开发者直接在你的小程序中使用就行了。例如，你想使用蓝牙，直接上下面的一系列API：
• 可以说，你大部分都在玩这些API。
• 服务端：虽然小程序偏前端应用，但是考虑到一些开发者会有后台请求，例如商家配送、物流、客服等，如果你也有这样的开发需求可以查看这个模块。同时，这个模块里面提到的一些调用也兼容后面将要提到的云开发。
• 工具：是对前面提到的开发工具的详细介绍，开发者想要深入了解开发工具的可以参考这个模块。也可以从这个模块下载开发工具。
• 云开发：下图是官方的详细说明：其实，就跟上面那个服务端有所联系，开发者适用云开发，便不用担心你的小程序可能会用到服务器之类的问题，微信平台已经以API的形式给你封装好了，你直接调用进行一些后端的交互就行了，这比较适合于有大量数据进行交换、请求外部网络的场合。当然，其他内容开发者可以自行详细了解。
• 扩展能力：这个模块提供小程序的一些高级功能吧，例如一些AI接口、地图接口、OCR接口等，初级搞完之后可以考虑玩一下这些功能。
• 更新日志：记录一些重要的更新，如开发工具的更新、基础库的更新等。

项目实例

说了半天理论，哪能没有实践支撑，下面作者将用自己开发的一个小界面作为实践举例，首先看效果：
先说明一下，这个页面上有两个组件，也就是两个按钮：

开启蓝牙
搜索附近可用设备

首先，文件树里面的文件是这样的：

咱们一个一个文件来看，首先是.wxml文件，组件都放在wxml文件中，添加两个按钮代码如下：

<button  style="width:300px"    class='goodbutton' hover-class="hover" bindtap='kly'>开启蓝牙</button>
<button  style="width:300px" class='goodbutton2' hover-class="hover2" bindtap='sly'>搜索附近可用的设备</button>

其中，button代表按钮组件、style是给按钮设置样式的（该例中设置按钮宽度为300px）、class可以理解为给这个button分一个班（便于后期指定这个组件）、hover代表按钮按下之后、bindtap表示要触发的事件的命名。按钮上面显示的文字直接跟在后面就行了。
其次是WXSS是给按钮添加样式的，跟上面的style一样，但是style里面设置的样式的优先级高于WXSS里面的，就是说如果你在两个里面设置了同样的样式，style里面的样式会覆盖WXSS里面的样式：

.goodbutton { margin-top: 10px;    background-color: rgb(139, 137, 139);     color: white;    border-radius: 98rpx;     background: bg_red;   }/* 按下变颜色 */.hover {     background:  rgb(236, 179, 156);  }

这里的.goodbuttonh和.hover就是刚才分的班，现在利用分到的班名找到他们了，给他们定义样式，就是效果图中的那个样式，比如背景颜色为灰色、字为白色等。其他参数暂不详述。
最后是重点的.js文件：

 kly: function () {   wx.openBluetoothAdapter({      success: function(res) {        wx.showToast({          title: '开启蓝牙成功!',          icon: 'success',          duration: 2000        })      },      fail: function (res) {        wx.showModal({          title: '提示',          content: '请打开手机蓝牙，并再次点击开启蓝牙!',        })      }   })     },

你应该发现了，这个kly就是刚才我们给goodbutton绑定的一个事件，就是说只要我们点击了按钮，小程序就会执行kly里面的内容。也就是初始化蓝牙模块，success后面是指初始化成功后弹出一个提示框，表示开启成功了，同样，fail里面就是初始化失败了会弹出一个提示框，提示该怎么操作。这里需要注意的，因为我们这个按钮是要开启蓝牙，所以我们用到了：

wx.openBluetoothAdapter({
success (res) {
console.log(res)
}
})

这个初始化蓝牙模块的API，看到这里你应该有感觉了吧，就是调用这些API实现你想要的功能，所以才会有上面文档里面的API模块给你参考不同API的用法。所以，你想实现某种功能的时候，直接去查询该调用哪个API，它是怎么调用的，该配置哪些参数就ok了。希望各位举一反三。至于.json文件是外部引入相关组件时使用的，此例没有用到。
至此，一个小小Demo就完成了，其实思路很清晰， 想要的组件WXML里面加、设置的样式WXSS里面加、主要的逻辑事件js里面加，当然，如果开发者想要实现更复杂的应用，学习肯定不止于此。
这里想要补充的是：新建的js文件会是这样：

Page({data: {text: "This is page data."},onLoad: function(options) {// Do some initialize when page load.},onReady: function() {// Do something when page ready.},onShow: function() {// Do something when page show.},onHide: function() {// Do something when page hide.},onUnload: function() {// Do something when page close.},onPullDownRefresh: function() {// Do something when pull down.},onReachBottom: function() {// Do something when page reach bottom.},onShareAppMessage: function () {// return custom share data when user share.},onPageScroll: function() {// Do something when page scroll},onResize: function() {// Do something when page resize},/ Event handler.
kly: function () {   wx.openBluetoothAdapter({      success: function(res) {        wx.showToast({          title: '开启蓝牙成功!',          icon: 'success',          duration: 2000        })      },     fail: function (res) {        wx.showModal({          title: '提示',          content: '请打开手机蓝牙，并再次点击开启蓝牙!',        })      }    })    },})
# data

我们上述的事件kly放在page内，与其他函数并列，如onLoad()之类，如果你看过文档中的指南的话，应该知道，page就是整个页面的生命周期，也就是从进入该页面到离开该页面会触发放在page里面的一些函数，如onLoad（）（加载页面时）、onHide（）（页面隐藏时）之类的。这也是小程序框架的特点。

社区

人多力量大

推荐社区：微信开放社区

说明

本博文是作者个人学习经验分享，仅用于学习和交流，由于本文适用于微信小程序新手入门，所以有些代码和参数没有详细解释，还请读者自行深入了解，当然，有错误的地方请大家理解并指正，创作不易，若转载本文，请附上本文地址：

https://blog.csdn.net/weixin_45895329/article/details/105150873

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！