从零开始学习了微信小程序的开发知识
发表时间：2023-09-26 08:48:09
文章来源：炫佑科技
浏览次数：208
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
从零开始学习了微信小程序的开发知识
由于工作需要，笔者曾经参与过一个微信小程序与SAP系统集成的项目，因此从零开始学习了微信小程序的开发知识。 在这里我把我通过一系列文章所学到的知识分享给大家，希望对相关学习者有所帮助。
**步：微信小程序小程序及开发环境搭建
这一步主要是微信小程序的注册以及开发环境的搭建。
首先，我们需要在微信官网申请一个自己的微信小程序：
单击按钮继续注册。 注意，我们需要使用未注册微信小程序或微信公众号的邮箱地址。 我用的是网易邮箱。 注册后，您的邮箱中将会收到一封激活邮件。
激活后即可进入小程序主信息注册页面。 这里需要使用身份证号码和手机验证码进行注册。
注册完成后，即可进入微信开发工具。 我选择的是小程序项目：
在开发管理->开发设计菜单中，找到我们刚刚注册的微信小程序的ID：复制下来以后用。
接下来，通过以下链接下载微信开发工具：
您可以将其视为集成开发环境（IDE）。
安装完成后，当我们启动微信开发工具时，会要求我们指定一个本地项目目录从零开始学习了微信小程序的开发知识，并填写微信小程序的AppID。 我们已在上一步中复制了此 ID。
直接填写，勾选创建通用快速启动模板，然后微信开发工具就会自动帮我们创建Hello World版本的微信小程序资源文件。
自动创建的小程序如下图所示，界面显示为简单的Hello World文字。
我们点击上传按钮：
只需维护一个版本号，例如 1.0.0，然后单击“上传”。
然后回到小程序管理后台，就可以看到我们通过上面的微信开发工具上传的1.0.0版本的小程序了。 我们点击 for 右侧的下拉菜单，选择 as Trial ：
将生成试用版的二维码，然后将其发送给您的朋友来使用该小程序。
当你的朋友用手机扫描二维码时，他会看到如下界面：小程序上标有试用版提示：
点击进入试用版，你会看到微信开发工具自动生成的Hello World小程序。
本文下一步将介绍微信小程序的视图设计原理。
第二步：查看微信小程序设计
本文重点介绍小程序的视图设计，即pages/index目录下的index.wxml文件如下所示。
我日常的工作就是使用一个叫SAP UI5的前端框架进行前端开发。 恰巧SAP UI5框架也支持xml格式的视图（UI）的创建，这和微信小程序的wxml很相似。
做过JSP开发朋友可以将wxml比作JSP文件。
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>
每行代码解释如下。
第二行：声明一个css类型的view元素。 本课程自带微信小程序。 如果删除的话，小程序视图位置就会混乱。 请参考我下面的测试：
所以需要保留。
第三行：view元素可以嵌套，相当于原生HTML中的div元素。 这里定义了另一个视图元素，css类是。 这个css类不是微信提供的，而是我们自己开发的，位于index.wxss文件中：
第四行：
获取头像昵称
使用标签“获取头像昵称”定义按钮。
仅当表达式! 时才会显示此按钮 && 是真的。
是微信小程序框架提供的一个组件。 组件是视图层的基本单元，自带一些功能和微信风格的样式。 请注意，此处的标签不是原生 HTML 标签。
您可以在微信开发官网查询该组件的API。
下面两个属性的含义：
open-type=""：点击该按钮后，会自动获取当前点击该按钮的微信用户的详细数据。
=""：当成功获取用户数据后，执行我们自己开发回调函数，该函数定义在小程序index/index.js。
第 5 行至第 8 行：
{{userInfo.nickName}}
这里定义了一个块区域，由两个 UI 元素组成：图像和文本。
对于图像元素，“”表示一旦点击，就会执行我们在index.js中实现的事件处理函数。
class="-": - 这也是我们在wxss中自定义的css类。
src="{{.}}"：图像的src属性与数据模型的字段绑定。 数据类型在index.js 中创建并绑定到当前视图。
并且另一个文本元素 text 显示的文本绑定到 。
我们可以直接在手机上打开微信小程序页面，查看当前视图绑定的数据模型的详细信息，其中包含以下值：
这里定义了一个块区域，由两个 UI 元素组成：图像和文本。
对于图像元素，“”表示一旦点击，就会执行我们在index.js中实现的事件处理函数。
class="-": - 这也是我们在wxss中自定义的css类。
src="{{.}}"：图像的src属性与数据模型的字段绑定。 数据类型在index.js 中创建并绑定到当前视图。
并且另一个文本元素 text 显示的文本绑定到 。
我们可以直接在手机上打开微信小程序页面微信小程序开发教学，查看当前视图绑定的数据模型的详细信息，其中包含以下值：
在本教程接下来的文章中，我将讲解微信小程序项目中index.js中代码的含义。
