想了解一下微信小程序的开发，所以打开了 微信小程序官方指南 边学边进行记录。
简介
小程序主要还是用JavaScript进行开发，需要一定css和js的基础，作为java后端开发，这些忘得都差不多了，但这正是我学习微信小程序的目的。在传统网页开发中，渲染线程和脚本线程是互斥的，如果长时间运行脚本可能导致页面失去响应，但是在小程序中，这俩是分开的，分别在不同线程运行。逻辑层在JSCore中，所以有些库(JQuery、Zepto...)没法用。小程序的开发主要面对两个操作环境：IOS和安卓。还有一个辅助的小程序开发者工具。
准备工作
先去申请个账号：小程序注册
信息填好之后，能看到appID。
下一步就是安装一个 开发工具：开发者工具
把appID填进去就成功配对了。
代码构成
QuickStart之后会发现初始化了一个页面，旁边是项目，项目主要有这四种类型：
- .json后缀，是配置文件。
- .wxml后缀，是模板文件
- .wxss后缀，样式文件
- .js后缀，脚本文件
JSON文件
json主要是做静态配置。
1.app.json 小程序配置
这里面最基础有两个部分，一个pages，一个window。
pages字段：用于描述当前小程序所有页面，为了让微信客户端知晓小程序定义在哪个目录。
window字段：定义小程序所有页面的顶部颜色，文字颜色定义。
然后下方栏可以通过tabBar设置名称和图标。具体在官方文档的框架部分有教学，真的是怕你学不会。
2.project.config.json 工具配置
这个主要是针对个性化的配置，在工具上做的任何配置都会写到里面，重新安装工具或者换电脑的时候，载入到同一个项目的代码包，工具就会恢复到自定的个性化配置。
3.page.json
小程序页面相关配置，这个主要是对应全局，比如在app.json设置全局是蓝色，但是我某个页面主题要红色，这样就可以进行调整。
WXML 模板
web编程是通过Html+Css+js进行组合。html是描述页面结构，css定制页面的形象，js是处理用户交互。那么wxml对应的就是html。点开之后让我想起了vue。。。与传统html不同的是，这边已经给封装好了，常用组件已经被包装起来了。
然后看到的wx:if和wx:else让我想起了EL表达式额。主要思想还是MVVM的渲染和逻辑分离。不让js直接操控dom，js负责状态管理。状态和界面结构之间的关系，通过模板语法去解决就可以了。
我们可以通过{{ }}语法，把在js定义的变量绑定到界面，这叫数据绑定，除了这种简单的，我们可能需要描述稍微复杂的逻辑，比如if/else和for，这里我们就wx:开头的属性来表达。
WXML 样式
这个就对应了CSS。
JS 逻辑交互
官方例子是：比如在wxml里面
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
然后点击button想要显示"Hello"，那么只需要在js文件里面声明clinkMe方法对应就可以。
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})
这就完成了，但是这是对基础的，想要实现中高级的功能要自己慢慢试。。。QuickStart 例子中，在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称，最后通过 setData 把获取到的信息显示到界面上。
网友评论