最全教程：微信小程序开发入门详解

Posted 2023-04-05 江湖梦主

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了最全教程：微信小程序开发入门详解相关的知识，希望对你有一定的参考价值。

笔者由于工作需要，曾经参加过一个微信小程序同 SAP 系统集成的项目，因此从零开始学习了微信小程序的开发知识。这里通过系列文章把自己所学分享出来，希望对相关学习者有所帮助。

步骤1：微信小程序的申请和开发环境的搭建

本步骤主要是微信小程序的注册和开发环境的搭建。

首先我们要在微信官方网站申请一个属于自己的微信小程序：

点击按钮前往注册。注意我们需要使用一个没有注册过微信小程序或者微信公众号的邮箱。我用的是网易邮箱。注册之后，邮箱会收到一封激活邮件。

激活之后，就可以进入小程序主体信息登记页面了。这里需要使用身份证号码和手机验证码进行登记。

登记完毕之后，就可以进入微信开发者工具了。我选择的是小程序项目：

在开发管理->开发设计菜单里，找到我们刚才注册的微信小程序的 ID：抄下来，后面要用。

接下来，在下面这个链接去下载微信开发者工具：

大家可以把它当成是一个集成开发环境(IDE).

安装完毕后启动微信开发者工具，会要求我们指定一个本地项目目录和填写微信小程序的 AppID. 这个 ID 我们前一步已经抄下来了。

直接填进去，勾上建立普通快速启动模板，然后微信开发者工具会自动帮我们创建一个 Hello World 版本的微信小程序资源文件出来。

自动创建好的小程序如下图所示，界面显示就是一个简单的 Hello World 文本。

我们点击上传按钮：

随便维护一个版本号，比如 1.0.0, 然后点击上传。

然后回到小程序管理后台，能看到我们上面通过微信开发者工具上传的 1.0.0 版本的小程序了。我们点击提交审核右边的下拉菜单，选择选为体验版本：

会生成一个体验版的二维码，这时发送给你的朋友，就可以使用这个小程序了。

当您的朋友在手机上扫描该二维码，会看到如下界面：该小程序标注了体验版的提示：

点击前往体验版, 就能看到微信开发者工具自动生成的 Hello World 小程序了。

本文下一步骤会介绍微信小程序的视图设计原理。

步骤2：微信小程序的视图设计
本文以小程序的视图设计为主，就是下图所示 pages/index 目录里的 index.wxml 文件。

我的日常工作是用一个叫做 SAP UI5 的前端框架做前端开发，刚好 SAP UI5 框架也支持创建 xml 格式的视图(UI), 和微信小程序的 wxml非常相似。

做过 JSP 开发的朋友们，可以把 wxml 类比成 JSP 文件。

wxml 源代码：

<!--index.wxml-->
<view class="container">
<view class="userinfo">

<button wx:if="!hasUserInfo && canIUse" open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 获取头像昵称 </button>

<block wx:else>

<image bindtap="bindViewTap" class="userinfo-avatar" src="userInfo.avatarUrl" mode="cover"></image>

<text class="userinfo-nickname">userInfo.nickName</text>

</block>

</view>

<view class="usermotto">

<text class="user-motto">motto</text>

</view>

</view>

下面逐一解释每行代码。

第二行：<view class="container"> 声明了一个视图元素，css 类型为 container. 这个container 类是微信小程序自带的，如果删除，小程序视图位置会乱掉，参考我下面的测试：

所以需要保留。

第三行：<view class="userinfo"> 其中 view 元素可以嵌套，相当于原生 html 里的 div 元素。此处定义了另一个 view 元素，css 类为 userinfo. 这个 css 类不是微信提供的，而是我们自己开发的，位于文件 index.wxss 里：

第四行：

<button wx:if="!hasUserInfo && canIUse" open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 获取头像昵称 </button>

定义了一个按钮，标签为获取头像昵称。

这个按钮仅当表达式 !hasUserInfo && canIUse 为 true 时才显示。

button 是微信小程序框架提供的组件，组件是视图层的基本组成单元，自带一些功能与微信风格的样式。注意这里的 button 标签并不是 HTML 原生的标签。

在微信开发者官网上可以查询组件的 API.

下面这两个属性的含义：

open-type="getUserInfo": 点了这个按钮之后，会自动取当前点击了该按钮的微信用户的明细数据。
bindgetuserinfo="jerry_getUserInfo": 当用户数据成功取回来之后，执行我们自己开发的回调函数jerry_getUserInfo, 该函数定义在小程序index/index.js 里。
第五行到第八行：

<block wx:else>

<image bindtap="bindViewTap" class="userinfo-avatar" src="userInfo.avatarUrl" mode="cover"></image>

<text class="userinfo-nickname">userInfo.nickName</text>

</block>

这里定义了一个 block 区域，有两个 UI 元素组成：image 和 text.

对 image 元素，bindtap="bindViewTap", 意思是一旦点击，执行我们在 index.js 里实现的事件处理函数 bindViewTap.

class="userinfo-avatar": userinfo-avatar 也是我们在 wxss 里自定义的 css 类。
src="userInfo.avatarUrl": 该 image 的 src 属性绑定到数据模型 userInfo 的字段 avatarUrl 上。数据类型 userInfo 是 index.js 里创建的，绑定到当前的视图上。
而另一个文本元素 text 显示的文本绑定到 userInfo.nickName 上。

我们可以直接在手机上打开微信小程序的 console 页面，从而查看当前视图绑定的数据模型 userInfo 的明细，其中 userInfo.nickName 包含的值如下：

这里定义了一个 block 区域，有两个 UI 元素组成：image 和 text.

对 image 元素，bindtap="bindViewTap", 意思是一旦点击，执行我们在 index.js 里实现的事件处理函数 bindViewTap.

我们可以直接在手机上打开微信小程序的 console 页面，从而查看当前视图绑定的数据模型 userInfo 的明细，其中 userInfo.nickName 包含的值如下：

本教程后续文章，我会讲解微信小程序工程里的 index.js 里的代码含义。

开源即时通讯IM框架MobileIMSDK的微信小程序端开发快速入门

一、理论知识准备

您需要对微信小程序开发有所了解：

您需要对WebSocket技术有所了解：

标准WebSocket协议文档、API手册：

1）WebSocket的API手册
2）WebSocket的RFC标准文档

微信小程序中的WebSocket API手册：

1）微信官方WebSocket文档链接

小提示：微信小程序中的WebSocket API跟标准HTML5中的WebSocket接口及用法略有不同，但主要API都能一一对应，相差不大。

二、开发工具准备

1）微信小程序开发工具：

（JackJiang使用的版本号如上图所示，为了方便直接引用工程，建议你也使用此版或较新版本）

2）一站式下载地址：微信官方下载地址点此进入。

3）微信小程序开发工具效果预览：

三、SDK文件用途说明

3.1 文件概览

纯微信标准JS API实现，无任何第3方库依赖：

MobileIMSDK-微信小程序端SDK本身只是JS文件源码的集合，自带的Demo代码只是为了方便随时测试SDK代码，目的主要是用于演示SDK的API调用，Demo代码不属于SDK框架的一部分。

大致的目录说明：

3.2 详细说明

SDK各模块/文件作用说明：

四、主要API接口

4.1 主要API接口概览

所有SDK接口均由 /mobileimsdk/mobileimsdk-client-sdk.js 提供。

以下是主要API接口概览图：

如下图所示：接口设计跟MobileIMSDK的APP版一样，均为高内聚和低侵入式的回调方式传入业务层处理逻辑，无需（也不建议）开发者直接修改SDK级代码。

4.2 主要API接口用途说明

1）IMSDK.isLogined()：

用途：是否已经完成过首次登陆。
说明：用户一旦从自已的应用中完成登陆IM服务器后，本方法就会一直返回true（直到退出登陆IM）。
返回值：boolean，true表示已完成首次成功登陆（即已经成功登陆过IM服务端了，后面掉线时不影响此标识），否则表示尚未连接IM服务器。

2）IMSDK.isOnline()：

用途：是否在线。
说明：表示网络连接是否正常。
返回值：boolean，true表示网络连接正常，否则表示已掉线，本字段只在this._logined=true时有意义（如果都没有登陆到IM服务器，怎么存在在线或掉线的概念呢）。

3）IMSDK.getLoginInfo()：

用途：返回登陆时提交的登陆信息（用户名、密码/token等）。
说明：格式形如：loginUserId:\'\',loginToken:\'\'，此返回值的内容由调用登陆函数 loginImpl()时传入的内容决定。字段定义详见：PLoginInfo。
返回值：boolean，true表示网络连接正常，否则表示已掉线，本字段只在this._logined=true时有意义（如果都没有登陆到IM服务器，怎么存在在线或掉线的概念呢）。

4）IMSDK.sendData(p, fnSucess, fnFail, fnComplete)：

用途：向某人发送一条消息。
参数p：Protocal 要发送的消息协议包对象，Protocal详情请见“/module/mb_constants.js”下的createCommonData函数说明。
参数fnSuccess ：function 接口调用成功的回调函数，非必填项
参数fnFail ：function 接口调用失败的回调函数，非必填项
参数fnComplete ：function 接口调用结束的回调函数（调用成功、失败都会执行），非必填项
返回值：int 0表示成功，否则表示错误码，错码详见“/module/mb_constants.js”下的MBErrorCode对象属性说明。

5）IMSDK.disconnectSocket()：

用途：客户端主动断开客户端socket连接。
说明：当开发者登陆IM后，需要退出登陆时，调用本函数就对了，本函数相当于登陆函数 loginImpl()的逆操作。

6）IMSDK.setDebugCoreEnable(enable)：

用途：是否开启MobileIMSDK-微信小程序端核心算法层的log输入，方便开发者调试。
参数enable：boolean true表示开启log输出，否则不输出，开发者不调用本函数的话系统默认是false（即不输出log）。

7）IMSDK.setDebugSDKEnable(enable)：

用途：是否开启MobileIMSDK-微信小程序端框架层的log输入，方便开发者调试。
参数enable：boolean true表示开启log输出，否则不输出，开发者不调用本函数的话系统默认是false（即不输出log）。

8）IMSDK.setDebugPingPongEnable(enable)：

用途：是否开启MobileIMSDK-微信小程序端框架层的底层网络WebSocket心跳包的log输出，方便开发者调试。
参数enable：boolean true表示开启log输出，否则不输出，开发者不调用本函数的话系统默认是false（即不输出log）。
注意：必须 setDebugEnable(true) 且 setDebugPingPongEnable(true) 时，心跳log才会真正输出，方便控制。
返回值：true表示开启log输出，否则不输出，开发者不调用本函数的话系统默认是false（即不输出log）。

9）IMSDK.loginImpl(varloginInfo, wsUrl)：

用途：登陆/连接MobileIMSDK服务器时调用的方法。
说明：登陆/连接MobileIMSDK服务器由本函数发起
参数varloginInfo：PLoginInfo 必填项，登陆要提交给Websocket服务器的认证信息，不可为空，对象字段定义见：PLoginInfo
参数wsUrl：string 必填项：要连接的Websocket服务器地址，不可为空，形如：wss://yousite.net:3000/websocket。

10）IMSDK.callback_onIMLog(message, toConsole)：

用途：由开发者设置的回调方法：用于debug的log输出。
推荐用法：开发者可在此回调中按照自已的意图打印MobileIMSDK微信小程序端框架中的log，方便调试时使用。
参数1： String：必填项，字符串类型，表示log内容。
参数2： boolean：选填项，true表示输出到console，否则默认方式(由开发者设置的回调决定)。

11）IMSDK.callback_onIMData(p, options)：

用途：由开发者设置的回调方法：用于收到聊天消息时在UI上展现出来（事件通知于收到IM消息时）。
推荐用法：开发者可在此回调中处理收到的各种IM消息。
参数1： Protocal：详情请见“/module/mb_constants.js”下的Protocal类定义)。

12）IMSDK.callback_onIMAfterLoginSucess()：

用途：由开发者设置的回调方法：客户端的登陆请求被服务端成功认证完成后的回调（事件通知于登陆/认证成功后）。
推荐用法：开发者可在此回调中进行登陆IM服务器成功后的处理。

13）IMSDK.callback_onIMAfterLoginFailed(isReconnect)：

用途：由开发者设置的回调方法：客户端的登陆请求被服务端认证失败后的回调（事件通知于登陆/认证失败后）。
说明：补充说明：登陆/认证失败的原因可能是用户名、密码等不正确等，但具体逻辑由服务端的 callBack_checkAuthToken回调函数去处理。
推荐用法：开发者可在此回调中提示用户登陆IM服务器失败。。
参数1： boolean：true表示是掉线重连后的认证失败（在登陆其间可能用户的密码信息等发生了变更），否则表示首次登陆时的认证失败。

14）IMSDK.callback_onIMReconnectSucess()：

用途：由开发者设置的回调方法：掉线重连成功后的回调（事件通知于掉线重连成功后）。
推荐用法：开发者可在此回调中处理掉线重连成功后的界面状态更新等，比如设置将界面上的“离线”文字更新成“在线”。

15）IMSDK.callback_onIMDisconnected()：

用途：由开发者设置的回调方法：网络连接已断开时的回调（事件通知于与服务器的网络断开后）。
推荐用法：开发者可在此回调中处理掉线时的界面状态更新等，比如设置将界面上的“在线”文字更新成“离线”。

16）IMSDK.callback_onIMPing()：

用途：由开发者设置的回调方法：本地发出心跳包后的回调通知（本回调并非MobileIMSDK-微信小程序端核心逻辑，开发者可以不需要实现！）。
推荐用法：开发者可在此回调中处理底层网络的活动情况。

17）IMSDK.callback_onIMPong()：

用途：由开发者设置的回调方法：收到服务端的心跳包反馈的回调通知（本回调并非MobileIMSDK-微信小程序端核心逻辑，开发者可以不需要实现！）。
推荐用法：开发者可在此回调中处理底层网络的活动情况。

18）IMSDK.callback_onIMShowAlert(alertContent)：

用途：由开发者设置的回调方法：框架层的一些提示信息显示回调（本回调并非MobileIMSDK-微信小程序端核心逻辑，开发者可以不需要实现！）。
说明：开发者不设置的情况下，框架默认将调用wx.showModal()显示提示信息，否则将使用开发者设置的回调——目的主要是给开发者自定义这种信息的UI显示，提升UI体验，别无它用】。
参数1：String：必填项，文本类型，表示提示内容。

19）IMSDK.callback_onIMKickout(kickoutInfo)：

用途：由开发者设置的回调方法：收到服务端的“踢出”指令（本回调并非MobileIMSDK-微信小程序端核心逻辑，开发者可以不需要实现！）。
参数1：PKickoutInfo：非空，详见：PKickoutInfo。

20）IMSDK.callback_onMessagesLost(lostMessages)：

用途：由开发者设置的回调方法：消息未送达的回调事件通知。
发生场景：比如用户刚发完消息但网络已经断掉了的情况下，表现形式如：就像手机qq或微信一样消息气泡边上会出现红色图标以示没有发送成功）。
建议用途：应用层可通过回调中的指纹特征码找到原消息并可以UI上将其标记为“发送失败”以便即时告之用户。
参数1：Array：由框架的QoS算法判定出来的未送达消息列表。

21）IMSDK.callback_onMessagesBeReceived(theFingerPrint)：

用途：由开发者设置的回调方法：消息已被对方收到的回调事件通知。
说明：目前，判定消息被对方收到是有两种可能： - 1) 对方确实是在线并且实时收到了； - 2) 对方不在线或者服务端转发过程中出错了，由服务端进行离线存储成功后的反馈（此种情况严格来讲不能算是“已被收到”，但对于应用层来说，离线存储了的消息原则上就是已送达了的消息：因为用户下次登陆时肯定能通过HTTP协议取到）。
建议用途：应用层可通过回调中的指纹特征码找到原消息并可以UI上将其标记为“发送成功”以便即时告之用户。
参数1：String：已被收到的消息的指纹特征码（唯一ID），应用层可据此ID找到原先已发的消息并可在UI是将其标记为”已送达“或”已读“以便提升用户体验。