前言

通过上一篇我们已经完成了注册及开发环境的搭建，今天我们来开发我们的第一个微信小程序
微信小程序开发注册流程

附微信开发工具下载地址：
微信开发工具

方便上一篇没有安装的同学。

运行Hello World

首先打开我们的微信Web开发者工具，然后用自己的微信账号扫码登陆，接着选择小程序就会看到我们接下来的画面：
如图：

这里我们点击小程序/小游戏会出现一个测试appid，接下来点击确定，会进入到我们的开发界面：
如图：

此时点击编译按钮
如图：

现在我们可以在左侧模拟器点击获取头像昵称**，授权后就会出现我们自己的头像和昵称信息
如图：

也可以通过预览和真机调试,点击后只需要扫描二维码即可。

代码构成

如图：我们可以看到四种类型的文件

1 .json 后缀的 JSON 配置文件

2 .wxml 后缀的 WXML 模板文件

3 .wxss 后缀的 WXSS 样式文件

4 .js 后缀的 JS 脚本逻辑文

json配置

我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途。

小程序配置 app.json

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

DEMO里的app.json代码如下：

{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"}
}

我们简单说一下这个配置各个项的含义:

1、pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

2、window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

更多详细属性参见小程序的配置 app.json

工具配置 project.config.json

工具配置就相当于我们对当前的idea进行了界面配置、编译配置等，只不过小程序把这个配置文件写入了工程中，当我们换一台电脑打开同一个工程，你会发现还是原来的味道。避免了有些同学换台电脑就不会编程的痛苦。

我们看一下DEMO里面的工具配置文件：

{"description": "项目配置文件","packOptions": {"ignore": []},"setting": {"urlCheck": true,"es6": true,"postcss": true,"minified": true,"newFeature": true,"autoAudits": false},"compileType": "miniprogram","libVersion": "2.0.4","appid": "wxe7c297ecaaaa0735","projectname": "%E5%B0%8F%E7%A8%8B%E5%BA%8F","debugOptions": {"hidedInDevtools": []},"isGameTourist": false,"condition": {"search": {"current": -1,"list": []},"conversation": {"current": -1,"list": []},"game": {"currentL": -1,"list": []},"miniprogram": {"current": -1,"list": []}}
}

我们简单说一下这个配置各个项的含义:
packOptions 用以配置项目在打包过程中的选项。打包是预览、上传时对项目进行的必须步骤。
setting 项目设置，包括（是否启用 es6 转 es5，上传代码时样式是否自动补全、上传代码时是否自动压缩、是否进行代码保护等）
compileType 编译类型
appid 项目的 appid，只在新建项目时读取
projectname 项目名字，只在新建项目时读取
debugOptions 调试配置选项

更多详细参见开发者工具的配置

页面配置 page.json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

我们来看一下DEMO中的logs.json和index.json

logs.json中重新定义了标题

{"navigationBarTitleText": "查看启动日志"
}

index.json中没有做任何修改，也就是完全使用app.json中的配置信息

{}

其他配置项细节可以参考文档页面配置。

WXML 模板

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。
我们来看一下首页pages/index/index.wxml

<!--index.wxml-->
<view class="container"><view class="userinfo"><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="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>

和 HTML 非常相似，WXML 由标签、属性等等构成。但是也有很多不一样的地方，我们来一一阐述一下：

1、标签名字有点不一样

往往写 HTML 的时候，经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。小程序的将常用的组件封装了起来，用 view, button, text 等等

2、多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

更详细的文档可以参考 WXML

WXSS 样式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

1、新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

2、提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

3、此外 WXSS 仅支持部分 CSS 选择器

/**index.wxss**/
.userinfo {display: flex;flex-direction: column;align-items: center;
}.userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;
}.userinfo-nickname {color: #aaa;
}.usermotto {margin-top: 200px;
}

都是一些常见的属性，看名知意。

更详细的文档可以参考 WXSS 。

JS 交互逻辑

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

<view>{{ msg }}</view> <button bindtap="clickMe">点击我</button>

点击 button 按钮的时候，我们希望把界面上 msg 显示成 “Hello World”，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：

Page({clickMe() {this.setData({msg: 'Hello World'})}
})

响应用户的操作就是这么简单，更详细的事件后续介绍。

此外，小程序还给我们提供了更多丰富的API，用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中，在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称，最后通过 setData 把获取到的信息显示到界面上。
更多详细API后续介绍。

小程序API

扫码关注公众号“伟大程序猿的诞生“，更多干货新鲜文章等着你～

公众号回复“资料获取”，获取更多干货哦～

有问题添加本人微信号“fenghuokeji996” 或扫描博客导航栏本人二维码

微信小程序开发--【Hello World 及代码结构】(二)相关推荐

小程序开发代码_快速学会微信小程序开发，无需懂代码！
现在想要制作自己的小程序的人越来越多,但大多数都不懂任何代码知识,不知该如何制作.其实随着各种第三方开发工具的出现,无需微信小程序开发源代码,小白也能顺利生成一个自己的小程序了.下面我就跟大家说下该如 ...
微信小程序开发尚学堂介绍项目结构组件喧嚷事件模板
一.微信小程序介绍 1. 微信小程序介绍微信小程序,简称小程序,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应用. 说明: 小程 ...
微信小程序开发【一】-- 初识小程序
小程序已经火了很久了,一直想学习小程序,苦于工作比较忙,加班比较多没时间,当然这其实都是理由,很多时候习惯了搬砖,习惯了固定的圈子,很难也不想涉足其他的领域,但是也不能老错过一波又一波新鲜的东西吧. ...
华为云物联网平台微信小程序开发教程2.0【完整详细教程】
一.简介在之前曾发布过一篇文章"华为云物联网平台的微信小程序开发",在最近接到部分用户私信在使用开发过程中出现的问题,例如API访问的"401"现象等问题 ...
微信小程序开发【六】-- wxss详解
系列文章目录微信小程序开发[一]-- 初识小程序传送门微信小程序开发[二]-- 小程序入门传送门微信小程序开发[三]-- 项目结构概述传送门微信小程序开发[四]-- 配置详解传送门微 ...
微信小程序开发之快递服务专栏（快递运力查询、寄快递、取消订单）代码篇
目录 1.工程目录 2.代码 3.结果 6.获取资源这篇文章废话不多,直接上代码 1.工程目录需要改动的文件上图已经标出来了 2.代码 index.js // index.js // 获取应用实 ...
Python+微信小程序开发（二）代码构成和宿主环境
一.小程序代码构成在上一篇文章中,我们通过开发者工具载入模板快速创建了一个QuickStart项目.这个项目里边生成了不同类型的文件: .json 后缀的 JSON 配置文件 .wxml 后缀的 ...
微信小程序开发（2）_data属性
假设我们的环境都做好了,现在我们开始开发自己的小程序首先我们开发出自己的 Hello World 我们要做的事情是当前点击hello World的时候HelloWorld的颜色发生变化: 这个是我们 ...
微信小程序开发之选项卡
选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...
微信小程序开发优秀教程及文章合集第一期
2019独角兽企业重金招聘Python工程师标准>>> 我会不定期的选取一些优质教程,整理成辑,以便大家集中阅读: 新手向!微信小程序开发手记系列: 微信小程序开发手记<一&g ...

微信小程序开发--【Hello World 及代码结构】(二)

前言