技术学习报告

我在团队中负责前端UI界面设计，前端仓库的管理，前端开发实现以及系统测试。

UI界面设计

好的UI设计能让人赏心悦目，在这次的项目中，前端的UI设计主要参考美团，饿了么以及大众点评的点餐界面实现，使用Mockplus作为UI设计工具，以及大量使用了easyicon网站的图标作为改进。

微信小程序

框架

小程序开发框架的框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

小程序代码组成

主体

1、由app.js、app.json、app.wxss三个文件组成，放在根目录

attention
App() 必须在 app.js 中注册，且不能注册多个。
编译后的代码包大小需小于 1MB，否则代码包将上传失败。
每个页面需要手动在app.json中进行注册，否则不能访问。
app.json中pages数组的第一项代表小程序的初始页面，小程序中新增/减少页面，都需要对 pages 数组进行修改。
直接修改 this.data无效，无法改变页面的状态，还会造成数据不一致。
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
不要尝试修改页面栈，会导致路由以及页面状态错误。
tabBar只能配置最少2个、最多5个，tab 按数组的顺序排序。
小程序页面只能同时打开 5 个，如果交互流程较长难以支持。
同时只能存在 5 个url请求。
无法跳转小程序以外的url。
没有cookie。
没有开放加载web页面
没有a标签链接，不可嵌套iframe
没有window变量，但微信提供了wx全局方法集
事件绑定和条件渲染类似Angular，全部写在WXML中

2、app.js 根目录的app.js很有用,因为在它内部注册的变量或方法，都是可以被所有页面获取到。可以监听并处理小程序的生命周期、声明全局变量。其余的.js文 件可以通过var app = getApp() 获取其实例，调用其中定义的方法和变量，但不可以调用生命周期的方法

app.json是小程序的全局配置

pages 配置小程序的组成页面，第一个代表小程序的初始页面 window 设置小程序的状态栏、标题栏、导航条、窗口背景颜色 tabBar 配置小程序tab栏的样式和对应的页面

3、app.wxss 是小程序的公共样式表，可以在其他.wxss文件中直接使用

pages

pages文件夹里是小程序的各个页面，每个界面一般都由.wxml、.wxss、.js、.json四个文件组成，四个文件必须是相同的名字和路径（但是不必与文件夹的名字一致，为了开发方便会和文件夹的命名统一）

1、.js 是页面的脚本代码，通过Page()函数注册页面。可以指定页面的初始数据、生命周期、事件处理等
2、.wxml 是页面的布局文件，只能使用微信定义的组件
3、.wxss 是样式表，需要注意

attention：
1、尺寸单位：rpx 可以根据屏幕的宽带进行自适应
2、样式导入：@import导入外联样式表，如：@import "test.wxss";
3、定义在app.wxss中的全局样式，作用于每个页面。定义在page的.wxss文件只作用于对应的页面，会覆盖app.wxss中相同的选择器
4、.json 是页面的配置文件，只能设置app.json中的window配置内容，会覆盖app.json中window的相同配置项，即使不配置任何东西也需要写{},否则会报错
utils

utils 里面包含一些公共的代码抽取的js文件，作为模块方便使用。模块通过module.exports对外暴露接口 其他地方使用是var utils = require(‘../../utils/util.js’) 进行引用

视图层 WXML

数据流向是单向的，即视图变化不会影响对象状态。

用户触发事件不仅要考虑当前UI元素更新，还会通过当前元素更新其他视图。 所以视图上的数据都必须用过事件传递给对象，只有用户操作视图，才能获取到数据，并更新对象状态 .wxml 中的动态数据都来自Page中的data。数据绑定使用数据绑定使用双大括号将变量包起来，可以作用于内容、组件属性(需要在双引号之内)、控制属性(需要在双引号之内)、关键字(需要在双引号之内)

公共模块的引用

WXML 提供 import 和 include 两种文件引用方式。 import 有作用域的概念，不能多重引用
include 就可以多重引用

事件

名称以 bind 开头的事件不阻止冒泡，名称以 catch 开头的事件冒泡是阻止的。如 bindTap 和 catchTab

在 WXML 中，可以使用 dataset 定义data中的数据，会通过事件传递。它的事件以 data-开头，多个单词以 - 链接，如 data-item

生命周期

App()应用生命周期

用户首次打开小程序，触发 onLaunch（全局只触发一次）。 小程序初始化完成后，触发onShow方法，监听小程序显示。 小程序从前台进入后台，触发 onHide方法。 小程序从后台进入前台显示，触发 onShow方法。 小程序后台运行一定时间，或系统资源占用过高，会被销毁。 小程序出错，触发onError

Page页面生命周期

小程序注册完成后，加载页面，触发onLoad方法。 页面载入后触发onShow方法，显示页面。 首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。 当小程序后台运行或跳转到其他页面时，触发onHide方法。 当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload

//index.js
Page({
  onLoad: function(options) {
    //页面加载-----(一个页面只会调用一次)
  },
  onReady: function() {
    //页面渲染-----(一个页面只会调用一次)
  },
  onShow: function() {
    //页面显示-----(每次打开页面都会调用一次)
  },
  onHide: function() {
    //页面隐藏-----(当navigateTo或底部tab切换时调用)
  },
  onUnload: function() {
    //页面卸载-----(当redirectTo或navigateBack的时候调用)
  },
})
应用生命周期影响页面生命周期

小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。 当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。 当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法。

如何正确使用页面跳转

小程序最多只能有五个页面同时存在，意思是在不关闭页面的情况，最多新开五个页面，页面深度为5（因为开发的过程出现页面不跳转的情况，再次特地的写明）

对于可逆操作，使用wx.navigateTo,比如从首页跳转到二级页面，从二级页面返回是不需要重新渲染首页 对于不可逆操作，使用wx.redirectTo,比如用户登录成功后，关闭登录页面，不能返回到登录界面。 对于一些介绍性等不常用页面wx.redirectTo或wx.navigatrBack 不要在首页使用wx.redirectTo，这样会导致应用无法返回首页

页面栈

页面栈以栈（先进后出）的形式维护页面与页面之间的关系 小程序提供了getCurrentPages()函数获取页面栈，第一个元素为首页，最后一个元素为当前页面 使用wx.navigateTo每新开一个页面，页面栈大小加1,直到页面栈大小为5为止 假如使用wx.navigateTo从四级页面跳转到二级页面，此时会在页面栈顶添加一个与二级页面初始状态一样的界面，但两个页面状态是独立的。页面栈大小会加1，如果页面栈大小为5，则wx.navigateTo无效

wx.navigateTo会增加页面栈大小，直到页面栈大小为5
wx.redirectTo不会增加页面栈大小
wx.navigateBack会减少页面栈大小，直到页面栈大小为1

个人感受

在项目刚成立的时候打算前端用Android作为开发的，期间也做了一些界面，比如整个程序的首页和点餐页，之后由于扫码的依赖包zxing由于种种原因（比如“长城”）无法解决扫码问题，经过半个月的尝试后改用小程序开发。小程序开发可以说是第一次做，基本上是一边看官方的开发文档一边写，不过因为比较简单，且我也学过一点WEB开发的知识，所以在磕磕碰碰中完成了本次项目。
上面的总结包含了许许多多本人踩过的坑，比如小程序对于服务器访问使用POST方法访问，如果链接是http链接但是访问不到，会自动帮你更改为https安全链接，且访问方法默认为GET，又比如说wx.navigateTo页面栈最大为5，之前一直使用wx.navigateTo跳转，超过五层页面一直跳转不了的问题。
总之感觉小程序的开发的确是很方便，确实适合线下实体店的轻量级程序开发。