由于工作需要,笔者曾经参与过一个微信小程序与SAP系统集成的项目,所以从零开始学习微信小程序的开发知识。在这里我通过一系列文章分享我所学到的知识,希望对相关的学习者有所帮助。
第一步:微信小程序应用及开发环境搭建
这一步主要是微信小程序的注册和开发环境的搭建。
首先,我们需要在微信官网申请一个自己的微信小程序:
点击按钮注册。请注意,我们需要使用未注册过微信小程序或微信公众号的邮箱地址。我用的是网易邮箱。注册后,您的邮箱会收到一封激活邮件。
激活后,即可进入小程序主体信息的注册页面。这里需要使用身份证号和手机验证码进行注册。
注册后即可进入微信开发者工具。我选择了小程序项目:
在开发管理->开发设计菜单中,找到我们刚刚注册的微信小程序的ID:复制下来以后使用。
接下来,通过以下链接下载微信开发者工具:
您可以将其视为集成开发环境 (IDE)。
安装完成后,启动微信开发者工具,会要求我们指定本地项目目录,填写微信小程序的AppID。我们在上一步中复制了此 ID。
直接填写微信小程序蓝牙开发,勾选创建通用快速启动模板,微信开发者工具会自动为我们创建一个Hello World版本的微信小程序资源文件。
自动创建的小程序如下图所示,界面显示为简单的Hello World文本。
我们点击上传按钮:
只需要维护一个版本号,比如1.0.0,然后点击上传。
然后回到小程序管理后台,可以看到我们通过微信开发者工具上传的1.0.0版小程序。我们点击提交评论我们点击
会生成一个试用版的二维码,然后发送给你的朋友,你就可以使用这个小程序了。
当你的朋友在手机上扫描二维码时 支付宝小程序开发 ,会看到如下界面:小程序标有体验版提示:
点击进入试用版,可以看到微信开发者工具自动生成的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>
每一行代码解释如下。
第二行:声明一个view元素,css类型为container。本容器类自带微信小程序。删除的话小程序的视图位置会乱,参考我下面的测试:
所以需要保存。
第三行:视图元素可以嵌套,相当于原生HTML中的div元素。这里定义了另一个视图元素微信小程序蓝牙开发,css类是userinfo。这个css类不是微信提供的,而是我们自己开发的,位于文件index.wxss中:
第四行:
获取头像昵称
定义一个标记为Get Avatar Nickname的按钮。
这个按钮只在表达式!hasUserInfo && canIUse为真时显示。
按钮是微信小程序框架提供的一个组件。组件是视图层的基本单元,自带一些功能和微信风格的样式。注意这里的按钮标签不是原生的HTML标签。
可以在微信开发者官网查询组件的API。
以下两个属性的含义:
第 5 到 8 行:
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
这定义了一个块区域,它由两个 UI 元素组成:图像和文本。
对于图片元素,bindtap=”bindViewTap”,表示一旦点击,执行我们在index.js中实现的事件处理函数bindViewTap。
另一个文本元素 text 显示的文本绑定到 userInfo.nickName。
我们可以直接在手机端打开微信小程序的控制台页面,查看当前视图绑定的数据模型userInfo的详细信息,其中userInfo.nickName包含以下值:
第 11 行:{{座右铭}}
纯文本元素,显示的文本绑定到数据模型座右铭。这个模型字段座右铭被硬编码为Hello World,所以我们终于在小程序上看到了“Hello World”。
在本教程的后续文章中微信小程序蓝牙开发,我会解释微信小程序项目中index.js中代码的含义。
发现、改变
探知、求新
共享,感恩一路相伴
昱远品牌形象已完成全面升级
点击访问新官网