微信小程序文档学习笔记

最近学习小程序，记录一下（2018.4.6）

目录结构 1.为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

配置 2.app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等 3.pages数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。（在小程序工具里建好页面文件夹，然后再pages数组里配置好并保存，就可以自动生成页面文件） 4.navigationStyle 只在 app.json 中生效 5.tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

逻辑层 6.由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如 document，window 等。 7.增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。通过 getApp() 获取实例之后，不要私自调用生命周期函数。

转发 8.现在通过调用 *wx.showShareMenu* 并且设置 *withShareTicket* 为 *true* ，当用户将小程序转发到任一群聊之后，可以获取到此次转发的 *shareTicket*，此转发卡片在群聊中被其他用户打开时，可以在App.onLaunch()* 或 App.onShow 获取到另一个 *shareTicket*。这两步获取到的 *shareTicket* 均可通过 wx.getShareInfo() 接口可以获取到相同的转发信息。* 9.只有转发到群聊中打开才可以获取到 shareTickets 返回值，单聊没有 shareTickets

注册程序 10.当小程序初始化完成时，会触发 onLaunch（全局只触发一次） 11.当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台； 当再次进入微信或再次打开小程序，又会从后台进入前台 12.只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

场景值 13.由于Android系统限制，目前还无法获取到按 Home 键退出到桌面，然后从桌面再次进小程序的场景值，对于这种情况，会保留上一次的场景值。

页面栈 14.页面重定向：当前页面出栈，新页面入栈 页面返回：页面不断出栈，直到目标返回页，新页面入栈 Tab 切换：页面全部出栈，只留下新的 Tab 页面 重加载：页面全部出栈，只留下新的页面 15.getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。 16.不要尝试修改页面栈，会导致路由以及页面状态错误。 17.navigateTo, redirectTo 只能打开非 tabBar 页面。 switchTab 只能打开 tabBar 页面。 reLaunch 可以打开任意页面。 18.调用页面路由带的参数可以在目标页面的onLoad中获取。（路由带参可以形如 /pages/life/life?id=1 路径+‘?' + 参数）

事件 19.冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递 20.* key 以*bind*或*catch*开头，然后跟上事件的类型，如*bindtap*、*catchtouchstart*。自基础库版本 1.5.0 起，*bind*和*catch*后可以紧跟一个冒号，其含义不变，如*bind:tap*、、*catch:touchstart*。 21.bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡 22.需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

注册页面 23.onTabItemTap 怎么用？ 24.onLoad,onReady 一个页面只会调用一次，除非被unload onShow 页面每次打开都调用 onHide 在navigateTo跳转或tab跳转时候调用 onUnload 在redirectTo重定向或者navigateBack退回前一个页面的时候调用 25.route 字段可以获取到当前页面的路径。（通过this.route获取) 26.setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。 27.其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。（不需要定义？ 刺激） 28.单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。 29.请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

模块化 30.不同的文件中可以声明相同名字的变量和函数 31.通过全局函数 *getApp()* 可以获取全局的应用实例，如果需要全局的数据可以在 *App()* 中设置 32.exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口 33.小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。

数据绑定 34.数据都要放到双引号里，并用{{}}包括 35.data属性中的对象可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面 36.花括号和引号之间如果有空格，将最终被解析成为字符串 例如

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}">
  {{item}}
</view>

列表渲染 37.使用 wx:for-item 可以指定数组当前元素的变量名， 使用 wx:for-index 可以指定数组当前下标的变量名 38.将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块 39.wx:key 的值以两种形式提供 1)字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。 2)保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字 40.当 wx:for 的值为字符串时，会将字符串解析成字符串数组 条件渲染 41.<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。 42.wx:if 如果为false 则不渲染 hidden 先渲染，如果为false 则隐藏 如果频繁切换，则使用hidden 如果不过多改变，则使用wx:if

模板 43.模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 <wxs /> 模块

引用 44.import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。 45.include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

WXS模块 46.每个 wxs 模块均有一个内置的 module 对象。 47.wxs文件引入方式：

<wxs src="./../tools.wxs" module="tools" />

48.wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。 49.module 属性是当前 <wxs> 标签的模块名。在单个 wxml 文件内，建议其值唯一。有重复模块名则按照先后顺序覆盖（后者覆盖前者）。不同文件之间的 wxs 模块名不会相互覆盖。

WXSS 50.rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。 51.开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 52.使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。(导入外部的UI库)

组件模板 53.在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。 54.在组件定义时的选项中启用多slot支持

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

55.可以在这个组件的wxml中使用多个slot，以不同的 name 来区分。 使用时，用 slot 属性来将节点插入到不同的slot上。

1)组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。 2)组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。 3)子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。 4)继承样式，如 font 、 color ，会从组件外继承到组件内。 5)除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效 57.组件希望接受外部传入的样式类（类似于 view 组件的 hover-class 属性）。此时可以在 Component 中用 externalClasses 定义段定义若干个外部样式类。

Component构造器 58.properties ，组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段， type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数 59.在 properties 定义段中，属性名采用驼峰写法（propertyName）；在 wxml 中，指定属性值时则对应使用连字符写法（component-tag-name property-name="attr value"），应用于数据绑定时采用驼峰写法（attr="{{propertyName}}"）。 组件事件 60.自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项 behaviors 61.每个 behavior 可以包含一组属性、数据、生命周期函数和方法，组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior 。 behavior 也可以引用其他 behavior 。 62.behavior 需要使用 Behavior() 构造器定义。 63.wx://form-field 代表一个内置 behavior ，它使得这个自定义组件有类似于表单控件的行为。 组件间关系 64.父子组件有相互间的关系，相互间的通信往往比较复杂。此时在组件定义时加入 relations 定义段，可以解决这样的问题（通过relation来告诉组件他的父节点是谁 或者 他的子节点是谁） 65.relations中type选项：目标组件的相对关系，可选的值为 parent 、 child 、 ancestor 、 descendant

插件 66.插件是对一组 js 接口或自定义组件的封装，用于提供给第三方小程序调用。插件必须嵌入在其他小程序中才能被用户使用。

分包加载 67.首页的 TAB 页面必须在 app（主包）内

多线程worker 68.一些异步处理的任务，可以放置于 Worker 中运行，待运行结束后，再把结果返回到小程序主线程。Worker 运行于一个单独的全局上下文与线程中，不能直接调用主线程的方法。 Worker 与主线程之间的数据传输，双方使用 Worker.postMessage() 来发送数据，Worker.onMessage()* 来接收数据，传输的数据并不是直接共享，而是被复制的*。

1） Worker 最大并发数量限制为 1 个，创建下一个前请用 Worker.terminate() 结束当前 Worker 2）Worker 内代码只能 require 指定 Worker 路径内的文件，无法引用其它路径 3）Worker 的入口文件由 wx.createWorker() 时指定，开发者可动态指定 Worker 入口文件 4）Worker 内不支持 *wx* 系列的 API 5）Workers 之间不支持发送消息

兼容 70.可以通过 *wx.getSystemInfo* 或者 *wx.getSystemInfoSync* 获取到小程序的基础库版本号。 也可以通过 wx.canIUse 详情 来判断是否可以在该基础库版本下直接使用对应的API或者组件

运行机制 71.假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。（热启动，打开过，一段时间内再次打开 冷启动，第一次打开，或者销毁后再打开） 72.小程序冷启动时如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。（如果第一次打开，就是直接下载新版本。 如果以前打开过，就先用老包，然后后台异步下载新包，再次冷启动后时替换） 73.（只有销毁后才算真正的关闭小程序，下次打开就时冷启动） 1）小程序没有重启的概念 2）当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁 3）当短时间内（5s）连续收到两次以上收到系统内存告警，会进行小程序的销毁 74.再次打开逻辑 可以设置打开上次的页面， 也可以设置打开直接到首页[about 7 hours ago] 使用wx.reLaunch 打开指定页面 https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html#wxrelaunchobject[about 7 hours ago]

优化建议 75.用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 JS 脚本，再通过执行 JS 脚本的形式传递到两边独立环境。 76.数据到达视图层并不是实时的。 77.常见的setData操作错误 1） 频繁的去 setData 2）每次 setData 都传递大量新数据 3）后台态页面进行 setData 78.建议开发者尽量减少使用大图片资源 79.有必要尽量减少代码包的大小，因为代码包大小直接影响到下载速度，从而影响用户的首次打开体验 80.控制代码包内图片资源。GZIP 对基于文本资源的压缩效果最好，在压缩较大文件时往往可高达 70%-80% 的压缩率，而如果对已经压缩的资源（例如大多数的图片格式）则效果甚微。 81.及时清理没有使用到的代码和资源

发起请求 82.最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String

小问题记录 Q:justify-content: space-evenly真机调试样式出不来? 手机上的截图：

image

工具上的截图：

image

A:移动端内核不兼容

image.png