笔者由于工作需要，曾经参加过一个微信小程序同 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 里的代码含义。

最全教程：微信小程序开发入门详解相关推荐

【数独】数独游戏-微信小程序开发流程详解
有没有玩过数独游戏呢,听说,它是一个能训练大脑思维的棋盘类游戏,游戏规则很简单,通过小程序来实现很容易,非常适合对数独游戏逻辑感兴趣的同学,选择它开发入门吧. 准备会使用微信开发者工具, 有Java ...
【拼图】拼图游戏-微信小程序开发流程详解
还记得小时候玩过的经典拼图游戏吗,上小学时,在路边摊用买个玩具,是一个正方形盒子形状,里面装的是图片分割成的很多块,还差一块,怎么描述好呢,和魔方玩具差不多,有没有听说叫二维的魔方,这里用小程序把它实 ...
【答题】在线答卷-答题系统的微信小程序开发流程详解
用死记硬背的方法学习的学生,面对桌上堆积成厚厚的书本,是否感觉鸭梨山大呢,想着教育却面临着学习成本不小问题,是否感觉各种不便呢,如果对编程代码有感兴趣,不妨试试做一个自己的在线答题系统,这里可以用微信 ...
【迷宫】地下迷宫游戏-微信小程序开发流程详解
可曾记得,小时候上学路边买的透明铅笔盒,里面内嵌了一个小球,它用重力可从起点滚动到终点,对小朋友来说是感觉有趣的,在这个游戏的基础上,弄一款微信小程序的迷宫探索游戏试试,在不同关卡的迷宫中解开机关与谜 ...
【飞行棋】多人游戏-微信小程序开发流程详解
可曾记得小时候玩过的飞行棋游戏,是90后的都有玩过吧,现在重温一下,这是一个可以二到四个人参与的游戏,通过投骰子走棋,一开始靠运气,后面还靠自己选择,谁抢占先机才能赢,还可以和小伙伴们一起玩,狭路相逢 ...
【跳棋】跳棋游戏-多人游戏-微信小程序开发流程详解
看到跳棋游戏,一个2到6人可一起玩的游戏,于是联想起,自己上小学时候陪同学们玩过的弹珠游戏,是不是跟跳棋游戏很像呢,看了跳棋玩法,有兴趣就研究,这里把跳棋游戏给弄出来了,想知道地图怎么画,对此感兴趣的 ...
【十字绣】传统手艺-微信小程序开发流程详解
还记得小时候看过母亲的十字绣吗,易学易懂,就是用专用的绣线和十字格布,通过平面坐标计找出位置,对照专用的图案进行刺绣,可作出心中所想的画,奈何所需材料成本不小,这里用小程序简单模拟十字绣,喜欢的话可用 ...
微信小程序开发之详解生命周期方法
生命周期是指一个小程序从创建到销毁的一系列过程在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面先来看一张小程序项目结构根目录下面有包含了app.js,app.wxs ...
【国际象棋】棋盘游戏-微信小程序开发流程详解
与中国象棋类似的,还有国际象棋,知道有人爱玩,于是凭着好奇心,网上研究了一下,跟中国象棋有相似之处,玩法是有些许不一样,不知道象棋最早出于谁之手呢,抽空做一做,最终完成,玩一玩看着还不错吧,这里给讲一 ...
标星 2.7w+ 堪称史上最全的微信小程序开发资源汇总
[公众号回复 "1024",免费领取程序员赚钱实操经验] 2017 年 1 月,微信小程序一夜成名. 微信小程序成名后,各大厂开始效仿,相继出现了支付宝.百度.今日头条.QQ.抖音 ...

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

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

最全教程：微信小程序开发入门详解相关推荐

最新文章

热门文章