微信小程序

  • 小程序需要申请账号，主体可以是企业，也可以是个人，里面有小程序的AppID，配置服务地址(比如localhost)
  • 小程序开发工具，创建工程需要AppID
  • 开发工具包含代码编辑器+调试器+客户端模拟器+版本管理器，基本做到了一站式开发
  • 模拟器只有ios和 nexus，再加上原生组件，真机调试不可少

框架

整个框架像个大杂烩，整体设计并不统一，包含了OO、函数式和面向过程。或许，是为了不同技术栈背景的开发人员都能找到一套适合的开发模式。

  • 样式层上来看，wxss像个css的子集，缺少了一些特性支持
  • 模板wxml来看，Mustache语法，类似ng1.js的语法，数据与视图绑定，但数据流不是双向，不是响应式，而是类似React语法的setData，异步单项数据流
  • 逻辑层js中，Page(Object)类似于Vue1的data设置，逻辑方法写法，同时也包含生命周期函数，可直接访问路由
  • wxs和template可直接在wxml中扩展，分别对应了script和模板引擎，可在多个地方引入调用，虽然提供了组件，但开发并不是组件化
文件结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
- pages 
  - pageA  
    - pageA.js  
    - pageA.wxml  
    - pageA.wxss  
    - pageA.json 
  - pageB  
    - pageB.js  
    - pageB.wxml  
    - pageB.wxss  
    - pageB.json
- app.js
- app.wxss
- app.json

.json 属于配置文件，.wxss 样式文件，.wxml模板，.js(.ts) 逻辑文件

app.json 是全局配置，pages下的页面配置，只有窗口window部分。

属性 描述
pages 页面路径入口列表
window 窗口样式
tabBar 底部tab
networkTimeout 超时时间
debug 是否开启debug，默认关闭
functionalPages 是否启用插件，默认关闭
subpackages 分包结构配置
workers Worker放置目录
requiredBackgroundModes 需要在后台使用的能力，如音乐播放
plugins 使用的插件
preloadRule 分包预下载规则
resizable iPad下是否直接屏幕旋转，默认关闭
navigateToMiniProgramAppIdList 需要跳转的小程序列表
usingComponents 全局自定义组件配置

pages类似于路由，配置页面的入口路径， 例如

1
2
3
4
"pages":[ 
  "pages/pageA/pageA", 
  "pages/pageB/pageB"
  ]

逻辑层
  • App(Object) 注册App, Page(Object) 注册页面
  • data:{}, 初始数据
  • Page.route, 得到当前页面路径
  • Page.prototype.setData(data, function(){}),更新page中的data
  • 生命周期函数，onLoad()：页面加载时触发，onShow()：页面显示时触发，onReady()：页面初次渲染完成是触发，onHide()：页面隐藏时触发，onUnload()：页面卸载时触发
视图层

wxml 类似于html，用于页面结构，数据绑定是Mustache语法，类似于ng1.js。

列表渲染

1
2
3
4
5
// 默认下标为index，默认值为item
// 可以用wx:for-index, wx:for-item 自定义
<view wx:for="{{array}}" wx:for-index="cusIndex" wx:for-item="cusItem">
{{cusItem}}
</view>

条件渲染

1
2
3
<view wx:if="{{condition}}">condition is true</view>
<view wx:elif="{{condition2}}">condition2 is true</view>
<view wx:else>else case</view>

模板 template，有点类似之前的各种模板引擎，比如handlebars,artTemplate，就是定义一段代码片段，方便在多个地方多次调用。

1
2
3
4
5
6
7
8
9
// 定义一个模板，名称为 tmpName
<template name="tmpName">
// wxml code
<text>{{a}}</text>
<text>{{b}}</text>
</template>

// 使用模板tmpName, 传参 data: { obj:{a:1,b:2} }
<template is="tmpName" data="{{...obj}}" />

模板有作用域，只能使用data传参的数据，或模板中导出的模块数据。

事件绑定的写法同组件的属性，以 key、value 的形式。

  • key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。
  • value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
  • catch事件绑定可以阻止冒泡事件向上冒泡，capture-catch关键字，将中断捕获阶段和取消冒泡阶段
  • 原生组件的事件监听不能使用 bind:eventname 的写法，只支持 bindeventname。原生组件也不支持 catch 和 capture 的事件绑定方式。

引用包括import include两种方式，又是以前的资源模板用法。
import只引入目标中定义的模板，不包含目标文件中import的模板, 引入。
include包含目标文件中除了<template></template> <wxs />外的整个代码块，但会解析模板中的<template is="" />， <include src="" />引入。

wxss 可以看做”wx css”。相比css，增加了尺寸单位rpx。
选择器也有变化，支持class id element和伪类::before,::after， 不支持:hover :nth-child :focus等伪类， 不支持兄弟选择器。

wsx 类似于 <script>，是wxml模板中的脚本。示例：

1
2
3
4
5
6
7
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

  • wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
  • wxs 函数不能作为组件的事件回调。
  • wxs 如果module和exports和data中的数据重名，将会覆盖
  • .wxs文件可以被其他模块require引入

分包加载是将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载，需要在app.json中的subpackages中配置。

字段 说明
root 分包根目录
name 分包别名，分包预下载时可以使用
pages 分包页面路径
independent 是否是独立分包
  • tabBar页面必须在主包app内
  • 分包的根目录必须分开，不能嵌套
  • 分包之间不能相互import require资源

组件

视图容器

提供了外层基本容器View，覆盖容器cover-view，还有常用的轮播图swiper。
更注重block容器，没有行内的grid、flex。

基础内容

仅有9种icon… text相当于span，属于inline， 还有一个有用的progress进度条。

表单组件

包含常用的 button checkbox radio swtich， 还有input textarea， 没有类似table list的组件。
picker包含了单选项select功能，还有级联cascader功能，以及时间 timepicker， 日期datepicker，没有时间范围选择功能。

导航

navigator跳转，可以满足当前小程序的跳转，也可以跳转到其他小程序

媒体、地图、画布

包括 video、image、camera等媒体组件，map、canvas是原生组件。

小程序的组件库不多，但对于手机端还算足够用。封装了使用频次较高的swiper，picker，但资源型组件，比如icon，内容实在太少。此外，还有原生组件的限制，参考https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html 。

配置ts自动编译

  1. 前置，需要npm安装typescript

  2. 在package.json “scripts”中增加ts文件监听指令 “watch”: “tsc -w”

    1
    2
    3
    4
    5
    "scripts": {
    "tsc": "./node_modules/typescript/bin/tsc",
    "compile": "tsc",
    "watch": "tsc -w"
    },

  3. 增加编译模式，入口是page/index/index,参数为指令名称watch

  4. 然后编译模式，切换到新增的编译模式
衍生的框架

wepy https://github.com/Tencent/wepy

腾讯出的框架，小程序组件化框架，15k+star

总结要点:

  • 类Vue开发风格，组件化 es6 es7， wepy-cli
  • 小程序细节优化，如请求列队，事件优化等

缺点：

  • 脏值检测封装setData，上一个这样做的ng1,性能堪忧
  • 类Vue，但开发体验不好
  • 基础组件问题多

mpvue https://github.com/Meituan-Dianping/mpvue

美团开发，基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系， 14.5k+star

  • 相比wepy, 完整的 Vue.js 开发体验
  • 彻底的组件化开发能力
  • H5 代码转换编译成小程序目标代码的能力

缺点：
有且只能使用单文件组件（.vue 组件）的形式进行支持，详细的不支持列表.

  • 不支持 纯-HTML
  • 不支持过滤器
  • 不支持函数
  • 暂不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性
  • Slot（scoped 暂时还没做支持）
  • 动态组件
  • 异步组件
  • inline-template
  • X-Templates
  • keep-alive
  • transition
  • class
  • style