Posted on | In
  • js基础
  • 计算机网络
  • 性能优化
  • 开发技巧
  • 移动端知识
  • 安全性问题

Posted on | In

MVVM其实就是Model-View-ViewModel
ViewModel：MVVM的核心，负责转换Model中的数据对象让数据变得更容易管理和使用，向上与视图层进行双向数据绑定，向下与Model层通过接口请求进行数据交互

avatar

单向绑定：MVVM实际就是在前端页面上，关注于Model的变化，MVVM框架会自动把Model的变化映射到DOM结构上，将Model的属性绑定到DOM节点上
双向绑定：View中直接获得了用Javascript对象表示的Model
avatar

Posted on | In

本篇教程主要关注于原生小程序的开发过程及基本情况介绍（最好先从原生的小程序开始写起，在熟练了小程序的写法之后，再来添加框架来写）

一.项目初始化过程：

直接创建一个空文件夹，通过微信小程序工具的quickstart创建文件，生成文件列表，创建的结果如图1
图1

二.项目基本结构

  1. 项目整体结构
    包含两个文件夹（pages，utils）和四个项目配置文件(app.js,app.json,app.wxss,
    project.config.json)
    图2
    2.pages文件夹
    pages的每一个文件夹都代表小程序里的一个页面，每个页面被分为4个文件，文件名称保持一致，根据文件除后缀不同的内容进行识别
    图3
    （1）文件夹中有四种文件类型
    js ———- JavaScrip文件，和用户交互的内容
    json ——– 项目配置文件，负责窗口颜色等等
    wxml ——- 类似HTML文件，描述页面的结构，通过数据绑定将变量绑定到界面上
    wxss ——- 类似CSS文件，配置页面的样式
    （2）装载过程
    先根据json文件配置成一个界面，定义顶部颜色、文字等内容，然后装载WXML结构和WXSS样式，最后装载js文件，页面渲染完毕后会出现最终的结构
  2. 项目基础配置文件
    app.js：小程序(全局)逻辑
    app.json：小程序(全局)公共设置，决定页面文件的路径、窗口表现、设置网络超时时间、设置底部tab 等
    app.wxss：小程序公共(全局)样式表
    project.config.json：setting、项目名称、appId内容在内的项目配置；做过前端的项目会比较熟悉，类似于package.json文件

三.项目的加载顺序

  1. 项目整体加载
    (1)用户首次打开小程序，触发 onLaunch（全局只触发一次）
    (2)小程序初始化完成后，触发onShow方法，监听小程序显示
    (3)小程序从前台进入后台，触发 onHide方法
    (4)小程序从后台进入前台显示，触发onShow方法
    (5)小程序后台运行一定时间，或系统资源占用过高，会被销毁。
  2. 页面加载顺序
    (1)小程序注册完成后，加载页面，触发onLoad方法。
    (2)页面载入后触发onShow方法，显示页面。
    (3)首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。
    (4)当小程序后台运行或跳转到其他页面时，触发onHide方法。
    (5)当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。
    (6)当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload。同时，应用生命周期会影响到页面生命周期。

四.小程序的逻辑

  1. 从组成一个页面的四个文件，还是从package.config.json文件都可以看出，微信小程序的众多配置和HTMl页面、前端项目都很相似
  2. 小程序的逻辑结构，类似于MVVM的开发模式（React、Vue），JS并不直接操控DOM，JS只需要管理状态即可，再通过一种模版语法来描述状态和界面结构的关系即可
  3. JSBridge下架起上层开发与Native（系统层）的桥梁，使得小程序可通过API使用原生的功能，且部分组件为原生组件实现，从而有良好体验
    JSBridge：各种 Web 页面可以通过 Bridge 调用微信提供的一些原生功能，为用户提供相关的功能。

五.相应的框架和组件库

  1. 组件库
    (1)WeUI： WeUI 是一套同微信原生视觉体验一致的基础样式库,在调用的时候实际只定义了WXSS文件
    (2)iView
    https://weapp.iviewui.com/
    iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称
    (3)ZanUI
    https://cnodejs.org/topic/589d625a5c8036f7019e7a4a
    ZanUI-WeApp结合了微信的视觉规范，为用户提供更加统一的使用感受。 包含 badge、btn、等共计 17 类组件或元素。
  2. 框架选择：
    (1)官方框架MINA：它类似于淘宝Weex、Vue框架
    (2)美团小程序框架mpvue：基于 Vue.js 核心，mpvue 修改了 Vue.js 的runtime和compiler 实现，使其可以运行在小程序环境中
    Github：https://github.com/Meituan-Dianping/mpvue
    官网： http://mpvue.com/
    (3)Tina.js: 轻盈小巧,保留 MINA (微信小程序官方框架) 的大部分 API 设计
    (4)WePY: 让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。
    特点：类Vue开发风格，支持引入NPM包，指出插件等
    Github地址:
    https://github.com/Tencent/wepy
    官网地址：
    https://tencent.github.io/wepy

写在最后：1. 微信小程序的开发很可能会出现一些反应不及时的问题，关闭重新打开是个必要的手段

  1. https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html 微信小程序的API内容是比较齐全的，多看一看

2个小时作业安排:

  1. 通过微信开发者工具的QuickStart创建新工程
  2. 通过设置小程序window属性，设置页面标题为WechatTutorial
  3. 修改index页面如图，如图添加姓名，邮箱，昵称信息，并修改字体颜色和字体大小
  4. 添加cal页面
  5. 在页面中添加2个tabBar,设置选择颜色为蓝色
  6. 设置第一个tabBar为“登陆”，指向index页面
  7. 设置第二个tabBar为“计算器”，指向cal页面
  8. 当小程序退出之后再进入页面，设置显示“小程序重启成功”的提示
    图4

作业：
如图完成计算器的基本功能
图5

Posted on | In

项目尝试地址
用webpack对image等文件进行封装

1
import Test from "./test.jpg"

直接使用会报错的，最开始以为是webpack的设置中设置es6的语法模式的问题，索性全部研究一下

1.选择typescript，Typescript作为js的超集，提供了静态数据类型，这是Typescript的核心

Typescript也在跟进JavaScript的规范标准 ECMAScript 提案

2.Typescript的类型声明文件（*.d.ts）,一般放在包目录的types文件夹中

3.babel 是将高级版本的 JavaScript 编译为目标版本的 JavaScript，TypeScript 是将 TypeScript 编译为目标版本的 JavaScript。它们的编译是重叠的

4.typescript的类型保护

1
2
3
4
5
6
7
8
// 类型保护(判断)
if (typeof foo === 'string') {
  // dosomething
}
// 类型保护(判断)
if (foo instanceof String) {
  // dosomething
}

5. typescript的类型检查

一些没有行为只需要类型检查的类型（没有方法的Models），可以使用Typescript声明文件（*.d.ts）

1
2
3
4
5
6
declare namespace Models {
  interface GPS {
    lat: number
    lng: number
  }
}

Posted on | In
  1. 前端以json格式接收实际是接收的json的object对象。
  2. wx.request中，后台的number返回的数据仍是number类型
  3. axios

Posted on | In 
1
一直不是很理解class << self 的用法，参考了介绍单态方法的https://www.devalot.com/articles/2008/09/ruby-singleton内容

Posted on | In

前几天，RoR接收微信小程序上传到后端的文件，在routes.rb中添加路由，把相应路由的post写成了get，结果报错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
ActionController::RoutingError (No route matches [POST] "/photo/upload"):
  
actionpack (5.1.6) lib/action_dispatch/middleware/debug_exceptions.rb:63:in `call'
web-console (3.6.2) lib/web_console/middleware.rb:135:in `call_app'
web-console (3.6.2) lib/web_console/middleware.rb:22:in `block in call'
web-console (3.6.2) lib/web_console/middleware.rb:20:in `catch'
web-console (3.6.2) lib/web_console/middleware.rb:20:in `call'
actionpack (5.1.6) lib/action_dispatch/middleware/show_exceptions.rb:31:in `call'
railties (5.1.6) lib/rails/rack/logger.rb:36:in `call_app'
railties (5.1.6) lib/rails/rack/logger.rb:24:in `block in call'
activesupport (5.1.6) lib/active_support/tagged_logging.rb:69:in `block in tagged'
activesupport (5.1.6) lib/active_support/tagged_logging.rb:26:in `tagged'
activesupport (5.1.6) lib/active_support/tagged_logging.rb:69:in `tagged'
railties (5.1.6) lib/rails/rack/logger.rb:24:in `call'
sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:13:in `call'
actionpack (5.1.6) lib/action_dispatch/middleware/remote_ip.rb:79:in `call'
actionpack (5.1.6) lib/action_dispatch/middleware/request_id.rb:25:in `call'
rack (2.0.5) lib/rack/method_override.rb:22:in `call'
rack (2.0.5) lib/rack/runtime.rb:22:in `call'
activesupport (5.1.6) lib/active_support/cache/strategy/local_cache_middleware.rb:27:in `call'
actionpack (5.1.6) lib/action_dispatch/middleware/executor.rb:12:in `call'
actionpack (5.1.6) lib/action_dispatch/middleware/static.rb:125:in `call'
rack (2.0.5) lib/rack/sendfile.rb:111:in `call'
railties (5.1.6) lib/rails/engine.rb:522:in `call'
puma (3.11.4) lib/puma/configuration.rb:225:in `call'
puma (3.11.4) lib/puma/server.rb:632:in `handle_request'
puma (3.11.4) lib/puma/server.rb:446:in `process_client'
puma (3.11.4) lib/puma/server.rb:306:in `block in run'
puma (3.11.4) lib/puma/thread_pool.rb:120:in `block in spawn_thread'

显示无法找到正确的路由，就很迷醉，最后才发现是post和get类型错误。微信小程序的wx.uploadFile会发起HTTPS POST请求。

HTTPS方法：客户机与服务器之间的请求

  1. GET: 从指定的资源请求数据
    查询字符串（键值对）是在GET请求的URL发送的
  2. POST： 从指定的资源提交要被处理的数据
    查询字符串（键值对）是在POST请求的HTTP消息主体中发送的

Posted on | In

MachineLearningYearning翻译

  1. 开发集和测试集应该有多大

开发集应该尽可能大，才能区分出尝试的不同算法之间的性能差距
测试集规模应该达到对整体系统进行一次高度可信的评估
数据规模越大，开发集和测试集的比例在不断降低，两者规模并非越大越好

  1. 单值评估指标：分类准确率；查准率和查全率的组合不可以。取平均值或者加权平均值是将多个指标合并为一个指标的最常用方法之一。
  2. 优化指标和满意度指标
    在限定的运行时间范围(满意度指标)内，尽可能地将分类器的准确率最大化
  3. 何时修改开发集、测试集和指标
    我通常会要求我的团队在不到一周（一般不会更长）的时间内给出一个初始的开发集、测试集和指标，提出一个不太完美的方案并迅速执行
  4. 注重误差分析：检查被算法误分类的开发集样本的过程，分析造成误差的原因所占的比例，从优先级最高的误差处着手。可能最初正确集标注的时候出错
  5. 考虑将开发集分为人为检查的 Eyeball 开发集和非人为检查的 Blackbox 开发集。如果在 Eyeball 开发集上的性能比在 Blackbox 开发集上好很多，说明你已过拟合 Eyeball 开发集，下一步应该考虑为其获取更多数据。