微信小程序学习
因为工作需要，把小程序文档看了一下，这里做一下笔记。
欲善其事，必利其器
微信小程序官方文档: 官方文档
微信小程序的IDE下载链接: 开发者工具下载页面
一.项目搭建
下载好微信 IDE 后打开，新建项目 输入 "项目名称"，"项目目录"，"AppID"，勾选"不使用云服务"。
若没有 AppID 可以去 微信公众平台 注册账号申请即可。
二.项目结构
1.小程序代码构成
- .json 后缀的 JSON 配置文件
- .wxml 后缀的 WXML 模板文件
- .wxss 后缀的 WXSS 样式文件
- .js 后缀的 JS 脚本逻辑文件
接下来我们分别看看这4种文件的作用。
2.JSON 配置
JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。
我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途。
小程序配置 app.json
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。项目里边的 app.json 配置内容如下：
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
}
}
我们简单说一下这个配置各个项的含义:
pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
工具配置 project.config.json
通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。
考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
页面配置 page.json
这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。
如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。
JSON 语法
这里说一下小程序里JSON配置的一些注意事项。
JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。
- 数字，包含浮点数和整数
- 字符串，需要包裹在双引号中
- Bool值，true 或者 false
- 数组，需要包裹在方括号中 []
- 对象，需要包裹在大括号中 {}
- Null
还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。
3.WXML 模板
网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。所以WXML 和 HTML 非常相似。
相同点:
- WXML 就相当于普通 HTML 主要写些页面标签，页面属性等。
不同点：
-
标签名字有点不一样：
往往写 HTML 的时候，经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。换个思路，既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高我们的开发效率。
-
多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。
4.WXSS 样式
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
此外 WXSS 仅支持部分 CSS 选择器
5.JS 逻辑交互
一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。
三.尝试新建页面
因为小程序默认页面是index页面，而我们需要开发的话需要创建自己的默认页面。
1.右键"Pages"目录，点击"新建文件夹"，创建一个名为 login 的文件夹。右键 login 文件夹，点击"新建 Page"，创建页面骨架。如下图：
2.修改根目录下的 app.json,如下图：
将 "pages/login/login" 页面设置为第一行，即默认访问 login 页面,修改 login.wxml 后，点击上方菜单 "编译" 即可看到效果，微信 IDE 集成了谷歌调试器，设备模拟器等调试功能，可以非常清晰的看到页面的变化。
四.小程序UI框架
微信小程序普遍也是基于 UI 框架做二次开发，话不多说，也不讲理论知识了，直接实战接入 UI 框架，小程序有非常多优秀的UI框架:
1.WeUI
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
GitHub 地址：源码地址
效果：演示地址
2.ColorUI
2.Vant Weapp
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。
GitHub 地址：源码地址
开发文档参考：文档地址
7.Lin UI
Lin UI 是由林间有风团队精心打造的一套微信小程序组件库，组件丰富、设计优美，并且拥有完整的商业案例，是您开发微信小程序的不二选择。
总之还有非常多 UI 框架，这里先介绍一下 WeUI的使用：
使用
-
先到GitHub下载项目到本地
-
样式文件可直接引用 dist/style/weui.wxss，或者单独引用 dist/style/widget 下的组件的 wxss，然后在全局 app.wxss 中加入
@import "weui.wxss";
预览
用微信 web 开发者工具打开 dist 目录（请注意，是 dist 目录，不是整个项目）
IDE左上角点击 "项目"，然后点 "导入项目"，选择 WeUI 所在的 dist 目录，导入即可看到下图所示。
在调试窗口点击 "表单" ，选中 "button" ,"普通型"
在下图红框页面路径处右键点击即可看到 "wxml"，"json"，"wxss"，"js" 文件，将对应的文件内容复制到项目里，就完成了按钮的引用。
这里我只引用了一个普通的按钮，所以只需要复制 "wxml" 里的内容即可
<navigator class="weui-btn weui-btn_primary" aria-role="button" url="javascript:">主要操作</navigator>
效果已经出来了！其他的 UI 控件只需要照葫芦画瓢即可！
五.数据绑定 & 方法调用
前面我们在 login.wxml 文件中写的 <text>Hello world!</text> 是静态写在页面上的，而通常我们并不会这样做，我们大多数情况下需要从后台取出数据然后在动态渲染到页面上，接下来我们来动态的渲染数据。
在 login.wxml 文件里加入一个 <view> {{ message }} </view>
数据绑定使用 Mustache 语法（双大括号）将变量包起来。
然后到 login.js 文件 data{} 中将变量赋初值 message: 'Hello world! 这里的数据是动态渲染的~' ，然后点击 "编译" 即可看到效果。
可能有同学不理解，这样做不也是写在代码中的数据跟前面的有什么区别，下面举个例子给大家看看就明白了。
这里我用 Java 封装了一个接口调取有道词典每日一句API的中英文句子作为后台数据。
@RequestMapping(value = "/youdao",produces = {"application/json;charset=UTF-8"})
public Map<String, Object> dailySentence() throws JsonProcessingException {
LocalDate date = LocalDate.now();
String url = "https://dict.youdao.com/infoline?mode=publish&date={date}&update=auto&apiversion=5.0";
String result = restTemplate.getForObject(url,String.class, date);
ObjectMapper mapper = new ObjectMapper();
JsonNode jsonNode = mapper.readTree(result);
String summary = jsonNode.get(date.toString()).get(0).get("summary").asText();
String title = jsonNode.get(date.toString()).get(0).get("title").asText();
HashMap<String, Object> map = new HashMap<>(16);
map.put("china",summary);
map.put("english",title);
return map;
}
PostMan 中请求接口地址，数据如图所示：
login.wxml 增加按钮并添加点击事件：
<view>
<view class="button-sp-area">
<a href="javascript:" class="weui-btn weui-btn_mini weui-btn_primary" bindtap="onclick">获取数据</a>
</view>
<text>china：{{china}} \n</text>
<text>english：{{english}}</text>
</view>
注意：由于小程序后台没去配置域名，所以正常请求是会失败的！开发测试环境下只需要勾选不校验合法域名这个选项即可。
接下来我用小程序的 wx.request 发起 HTTPS 网络请求，调用我本地的接口。
login.js:
data: {
china: '',
english: ''
},
onclick() {
var that = this;
wx.request({
url: 'http://localhost:8080/youdao',
method: 'GET',
header: { 'Content-Type': 'application/json' },
success(res) {
that.setData({
china: res.data.china,
english: res.data.english
})
}
})
},
点击按钮出现效果实现了动态渲染：
这时候也许又有同学说，我的数据需要一打开页面就自动加载而不是手动点击按钮获取，"Talk is cheap. Show me the code."
ok，下面接着展示如何在打开页面时加载数据，首先还是先写接口。这里给大家推荐一个随机生成json数据的网站 json生成，这里我模拟了一组学生数据。
@RequestMapping(value = "/student",produces = {"application/json;charset=UTF-8"})
public String student(){
return "[\n" +
" {\n" +
" \"id\": \"61bc52423ab5e2d358731724\",\n" +
" \"age\": 33,\n" +
" \"name\": \"Delores Rogers\"\n" +
" },\n" +
" {\n" +
" \"id\": \"61bc5242d1d153048d47022c\",\n" +
" \"age\": 40,\n" +
" \"name\": \"Janette Saunders\"\n" +
" },\n" +
" {\n" +
" \"id\": \"61bc5242aa8b73e0af7d50a5\",\n" +
" \"age\": 29,\n" +
" \"name\": \"Estelle Klein\"\n" +
" },\n" +
" {\n" +
" \"id\": \"61bc5242111bb9a26d0f6ca3\",\n" +
" \"age\": 23,\n" +
" \"name\": \"Stewart Cohen\"\n" +
" },\n" +
" {\n" +
" \"id\": \"61bc52423519c25ae8cebe37\",\n" +
" \"age\": 21,\n" +
" \"name\": \"Araceli Porter\"\n" +
" }\n" +
"]";
}
PostMan 请求接口可以正常拿到数据：
我们需要利用 Page的生命周期来完成页面加载渲染数据，大家可以稍微看一下这两篇文章了解一下：
然后我们也可以在 login.js 里面看见骨架生成的生命周期函数
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
login.wxml 如下图所示 使用 wx:for="" 来循环遍历数组中的对象:
<view wx:for="{{array}}">
<text>id:{{item.id}}\n </text>
<text>age:{{item.age}}\n </text>
<text>name:{{item.name}}\n </text>
<view>------------------------------------</view>
</view>
login.js 中新定义一个数组，然后再写一个show()方法调用后台数据
data: {
array:[]
},
show(){
var that = this;
wx.request({
url: 'http://localhost:8080/student',
method: 'GET',
header: { 'Content-Type': 'application/json' },
success(res) {
console.log(res)
that.setData({
array: res.data
})
}
})
},
然后大家可以根据需要选择生命周期函数，这里我选择 onShow()
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.show()
},
点击 "编译"，发现数据随着页面加载而加载，大功告成！
这里其他的 wxml 语法也不一一展示了，大家有需要可以去官方文档了解，基本上照着文档敲几遍就能记住了。 更多语法
六.总结
总的来说微信小程序还算比较简单的，只需要掌握基础的 HTML、CSS、JS 基本上可以大概了解整体的项目结构，加上有非常多优秀的 UI 框架，让后端的程序员也可以做出漂亮的前端界面。后续有更多有用的知识我再补充！
未完待续....
