正文

最全教程：微信小程序开发入门详解(代码片段)

江湖梦主  江湖梦主  2023-04-05  326

关键词：

笔者由于工作需要，曾经参加过一个微信小程序同 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的微信小程序端开发快速入门

...入门学习笔记系列2）从零开始的微信小程序入门教程3）最全教程：微信小程序开发入门详解您需要对WebSocket技术有所了解：1）新手快速入门：WebSocket简明教程2）WebSocket详解（一）：初步认识WebSocket技术3）WebSocket从入门到精通... 查看详情

微信小程序开发入门教程-小程序账号注册及开通(代码片段)

17年小程序开始公测，经过5年的发展，无论从组件、开发工具、api、生态、社区，都已经发展的非常成熟了。如果17年年初你看小程序，觉得无需安装即用即走还是一个理念的话。站在今天看过去，往往是先提... 查看详情

微信小程序开发入门教程-小程序账号注册及开通(代码片段)

如何入门微信小程序开发(代码片段)

最近微信开发小程序挺火的，自己选择了腾讯云官方推出的相册。先下载：破解版IDE下载地址，以及使用说明：http://download.csdn.net/detail/richard_jason/9660819http://download.csdn.net/detail/richard_jason/9660821这里由于csdn有上传... 查看详情

微信小程序开发入门(代码片段)

目录1.简介微信小程序，英文名WechatMiniProgram是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。优点开发成本低、门槛低、开发周期短用完就关闭，不... 查看详情

微信小程序开发入门篇(代码片段)

✍、目录配套视频教程：B站直达微信小程序🔥地址微信小程序开发入门篇(一)🔥https://blog.csdn.net/Augenstern_QXL/article/details/121489385微信小程序开发入门篇(二)🔥https://blog.csdn.net/Augenstern_QXL/article/details/121620224微信小... 查看详情

微信小程序开发入门教程

　　做任何程序开发要首先找到其官方文档，微信小程序目前还在邀请内测阶段，目前官方放出了部分开发文档，经过笔者一天的查看和尝试，感觉文档并不全面，但是通过这些文档已经能够看出其大概面貌了。闲话不多说，我... 查看详情

《微信小程序开发》页面导航最强详解|如何对小程序页面进行跳转？(代码片段)

《微信小程序开发》页面导航最强详解|如何对小程序页面进行跳转？文章目录《微信小程序开发》页面导航最强详解|如何对小程序页面进行跳转？一、微信小程序导航二、命名式导航与编程式导航对应表三、命名式导航... 查看详情

微信小程序开发入门介绍-布局组件(代码片段)

在小程序开发中比较重要的就是布局了。所谓的布局是依据美工提供的设计稿，按照工具提供的各类组件进行实现。小程序中我们常用的布局组件是view。通过布局组件就可以实现我们想要的效果。布局组件的添加我们还是使... 查看详情

10分钟入门微信小程序开发：从环境搭建到开发出第一个程序。(代码片段)

小程序简介小程序是一种不需要下载安装即可使用的快速应用，它实现了应用“触手可及”的操作；用户扫一扫或搜一下即可打开应用，完全不需要安装，因此小程序不仅可提高的用户的应用体验，也方便应用的传扩散。... 查看详情

微信公众号及小程序开发入门(代码片段)

开发过程中一些对微信公众号和小程序的认识。一、服务号在公众号开发入门一中提到，微信公众号分为订阅号和服务号，其中服务号功能最强，只准企业申请，并且要每年交300元认证费。如果企业想拥有自己的... 查看详情

微信小程序开发后台开发详解,二维码生成，推送消息，微信支付(代码片段)

原文：https://blog.csdn.net/g8433373/article/details/80722001前言微信小程序已经是家喻户晓了，最近和同学一起刚上线了一款应用校园懒人邦,感兴趣的朋友可以搜索一下，一款基于校园最后一百米的概念开发的快递&外卖配... 查看详情

微信小程序开发入门与实战（数据监听）(代码片段)

@作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃 查看详情

微信小程序开发入门与实战（数据监听）(代码片段)

个人微信小程序开发入门教程:注册个人小程序

学习开发微信小程序最最最最重要的就是学习微信小程序官方文档,因为文档可以解决我们在学习过程中遇到的大部分麻烦，所以先附上官方文档链接：https://developers.weixin.qq.com/doc/(目录)一、进入微信公众平台官方网站如下：https... 查看详情

微信小程序开发入门教程-文本组件介绍

学习小程序开发要从哪开始呢？我们是开始顺序学习官方文档么？如果一开始就从头开始读官方文档，恐怕用不了多久你就放弃了。计算机是一门实践科学，我们学习的目的是为了解决现实问题。要么你想在互联... 查看详情

微信小程序开发入门教程-文本组件介绍

微信小程序开发零基础入门(代码片段)

...件1.5.12、icon组件1.5.13、process组件1.5.14、navigator配套视频教程：B站直达1、微信小程序1.1、官方开发者工具百度微信开放社区，选择文档->工具->下载下载完成安装即可打开微信开发者工具，使用微信扫码登录这里... 查看详情