微信小程序

我们现在有了一个空白的微信小程序项目，现在要去一步一步理解小程序里面的东西。下面我们要了解一下小程序的主配置，创建小程序应用，添加小程序上的页面。还要明白 wxml（标签） 与 wxss （样式）。

目的

理解小程序的配置文件，注册小程序，注册页面，页面组件，页面视图还有页面样式。

现在我们就已经准备好，可以在本地去创建一个小程序项目进行设计与开发了。先在本地创建一个存储小程序的目录，然后在小程序开发者工具里面再去创建一个小程序项目，选择小程序所在的目录，输入 AppID，设置一下小程序的名字就可以了。

任务

1. 创建一个空白的小程序项目。

步骤

1. 在本地创建一个空白的目录来存储小程序项目。
2. 打开微信开发者工具，选择 小程序项目。
3. 选择 项目目录，填写小程序的 AppID，再给小程序起个名字，然后 确定。
4. 用你喜欢的编辑器打开小程序所在的目录。

先在电脑上新建一个空白的目录可以存储小程序项目，比如 wxapp-ninghao-dev 。然后打开微信开发者工具，一开始会提示你用微信扫码登录一下，微信帐号应该拥有对小程序项目的开发权限。登录以后，提示选择 小程序项目 或者 公众号网页项目。我们应该选择 小程序项目。

在正式开发小程序之前，还得再去做点配置。去设置一下小程序的基本信息，比如名字，描述，分类等等。如果你需要其他的开发者参与小程序开发，你还得去添加小程序开发者，并且设置他们拥有的权限。小程序里面涉及到的域名也需要去配置一下，比如你想在小程序里请求应用的后端服务，你就需要去把服务用的域名添加到服务器域名配置里面。

任务

1. 配置小程序基本信息
2. 添加开发者（可选）
3. 获取到 AppID 与 AppSecret
4. 配置服务器域名
5. 配置业务域名

填写小程序信息

登录到小程序的管理后台，在首页，小程度发布流程的下面，填写一下小程序信息，小程序名称，小程序头像，小程序介绍，选择服务类目，然后 提交。

微信小程序就是可以在微信内部运行的应用，它是微信公众平台的一部分。你可以根据自己的产品与服务去创建一些小程序，让它们在微信内部传播。用户可以通过小程序查看与使用你提供的服务，可以直接在小程序里面调用微信支付购买你提供的服务。

微信用户相互之间可以很方便的分享小程序，可以把小程序分享到微信群里，用户在微信向下拉动屏幕，屏幕上方就会显示出用户最近使用的小程序。

宁皓网推出的小程序系列课程，可以教会你创建微信小程序。宁皓网现有的课程已经为开发小程序提供了完整的知识框架。你要先了解 HTML，CSS，还有 JavaScript。

界面

小程序里面提供了视图层，你可以去创建应用的界面。它里面使用了自定义的标记语言与样式语言，这些东西跟网页设计用的 HTML 与 CSS 非常相近。界面结构的组织方式与样式的应用几乎是一样的，只不过小程序提供了一些自己的标签组件。所以你想设计与开发小程序的界面，你最好先能解决 HTML 与 CSS，就是可以使用它们去设计与开发一般的能在浏览器上打开的网页。这会对设计小程序的界面非常有帮助。

用 Sketch，简单的把小程序的支付流程图重新做了一遍。原版的小程序支付流程图，点击这里。

角色

• 用户：使用小程序发起支付的人。
• 小程序：微信小程序。
• 应用：我们自己的应用后台，为小程序提供后端服务。
• 微信：微信支付系统。

最近为微信小程序设计与开发一个评论功能，后面会用视频的形式为大家展示出来，先说下大概的思路。评论一般会嵌入到其它内容里面显示，比如一个文章内容主体的下面可以显示一个评论列表，可以添加新的评论。

接口

因为评论内容要嵌入到其它内容里面，也就是用户在某个内容上面提交的评论要属于这个内容，就是评论内容与被评论的内容之间要关联在一起。比如可以在接口里面用 post 属性表示评论所属的内容。评论之间还可以进行回复，一个人留了一条评论，另一个人可以回复这条评论，就是评论与回复之间也应该有个关联，比如在接口里用 parent 表示这条评论回复的是哪条评论。

用户可以在小程序那里选择用微信登录， 在用微信登录之前要把用户的微信帐号与网站帐号绑定在一起，就是在数据库里记录一下用户微信给我们提供的 openid 。绑定的时候可以保存用户的一些其它的信息，比如用户的微信头像，所在城市，省份等等。在小程序上调用 wx.getUserInfo 接口可以获取到微信用户的相关信息。得到以后，把这些信息发送到后端服务接口来处理。

先了解一下用类（Class）的形式去创建一个 WordPress REST 接口，接口可以处理注册新用户的请求。在小程序那里准备一个注册用户用的页面，用户输入，想要注册的用户名，邮件地址，还有密码申请登录，遇到错误会在小程序的页面上显示出来。一切正常，后端接口把用户存储在数据库里，小程序得到服务端的成功提示以后，自动发起登录请求，成功以后会给用户签发 JWT，打开用户的个人档案页面显示相关的信息。新发布的《微信小程序：应用后台__用户注册》介绍了整个过程。

在微信小程序里，用户的相关信息是在后端服务那里保存的。我们可以给用户在小程序上准备一个登录页面，用户输入他的用户名还有密码，可以申请登录。后端服务收到登录请求，验证用户输入的登录信息是否有效，如果有效就给用户签发一个 JSON Web Token，小程序收到签发的 Token 会把它存储在自己的 Storage 里，下回用户再请求需要权限的资源的时候，可以带着签发的这个 Token，服务端那里会验证 Token 的有效性，然后决定是否要执行用户请求的动作。

上面说的就是在小程序上实施基于 JSON Web Token 的身份验证的主要流程。在新发布的《微信小程序：应用后台__身份验证》这个课程里介绍了如何开发实现这种身份验证的功能。后端服务我用了 WordPress，你也可以选择其它框架作为小程序的后端服务，比如 Drupal，Laravel，Rails，Node.js 等等。流程基本都是一样的。

下面用个例子演示在微信小程序里使用 Promise，async，await 这些东西。小程序里有个 wx.authorize 接口可以向用户要些权限，访问用户对应的资源，比如得到用户的位置，获取用户的相关信息等等。wx.getSetting 这个接口可以得到用户的授权配置信息，比如用户是否已经授权我们使用他的用户信息。