关于微信:微信小程序开发系列一-开发环境搭建和微信小程序的视图设计与开发

4次阅读

共计 2830 个字符，预计需要花费 8 分钟才能阅读完成。

笔者因为工作须要，已经加入过一个微信小程序同 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 源代码：

<!--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 蕴含的值如下：

第 11 行：<text class="user-motto">{{motto}}</text>
纯文本元素，显示的文本绑定到数据模型 motto 上。这个模型字段 motto 硬编码成 Hello World，所以咱们最初在小程序上看到显示的“Hello World”.

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

正文完