小程序笔记

本文纯属总结笔记，均来源于网络

官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

1、经常使用知识点

一、框架包含配置(json)、逻辑层(js、API)、视图层(wxml,WXSS,组件)组成；框架的核心是一个响应的数据绑定系统（状态模式-单向数据流，只要对象状态发送变化，就通知页面更新视图元素)。视图上的数据都必须用过事件传递给对象，只有用户操做视图，才能获取到数据，并更新对象状态。 事件是视图层到逻辑层的通信方式。

二、冒泡事件：touchstart touchmove touchcancel touchend tap（在touchend 后触发） longtap（touchend 前触发）在 ;bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定能够阻止冒泡事件向上冒泡。

三、事件对象：type：表明事件的类型;timeStamp:页面打开到触发事件所通过的毫秒数;target:触发事件的源组件[id,tagName,dataset{书写方式： 以data-开头，多个单词由连字符-连接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.target.dataset 中会将连字符转成驼峰elementType}];currentTarget:事件绑定的当前组件;touches:[Touch {pageX, pageY,clientX, clientY}];detail:自定义事件所携带的数据

四、wx:key 的值以两种形式提供：字符串（表明在 for 循环的 array 中 item 的某个 property）、 *this （表明在 for 循环中的 item 自己）

五、WXML 提供两种文件引用方式import和include；import能够在该文件中使用目标文件定义的template（仅限目标文件中的）,使用data来向模板中传递绑定数据；include能够将目标文件除了<template/>的整个代码引入，至关因而拷贝到include位置，使用：src="item.wxml"

六、rpx：能够根据屏幕宽度进行自适应，1rpx=1px/pixelRatio[能够经过api:wx.getSystemInfo({success: function(res) {res.pixelRatio}})来获取], iPhone6 上1rpx = 0.5px = 1物理像素

七、生命周期：
  应用生命周期：用户首次打开小程序，触发 onLaunch（全局只触发一次）=>小程序初始化完成后，触发onShow方法，监听小程序显示（后转前时也触发)
  页面生命周期：onLoad(首次初始化时页面加载,一个页面只会调用一次)=>onShow: 页面显示=>onReady: 页面初次渲染完成(一个页面只会调用一次) onHide: 页面隐藏(当navigateTo或底部tab切换时调用) onUnload: 页面卸载(当redirectTo或navigateBack的时候调用)
  应用与页面：当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法；当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法

八、数据绑定：　　
　WXML 中的动态数据均来自对应 Page 的 data。 Mustache 语法（双大括号）将变量包起来，可做用于内容、组件属性、控制属性、关键字；能够在{{}} 内进行简单的运算，支持三元运算、算数运算、逻辑判断、字符串运算、数据路径运算、组合、对象；也能够用扩展运算符 ... 来将一个对象展开；可是若有存在变量名相同的状况，后边的会覆盖前面。

九、

2、细节整理

一、经常使用快捷键：代码格式化：Shift+Alt+F 代码行缩进：Ctrl+[ 上移动一行：Alt+Up 向上复制一行：Shift+Alt+Down 选中光标当前行：Ctrl+i  选择从光标到行尾：Shift+End 选中全部匹配：Ctrl+Shift+L 打开或者隐藏模拟器：Ctrl + m 关闭当前文件：Ctrl +w

二、小程序默认首页：app.json中pages的第一个页面

三、自动生成默认page:在app.json中pages中添加新page的路径元素后点击Ctrl + S保存后自动生成相应的目录及文件

四、<block/> 并非一个组件，它仅仅是一个包装元素，不会在页面中作任何渲染，只接受控制属性

五、iPhone6的分辨率（750x1334）为基准划分的

六、引入样式：@import ‘相对路径’

七、当 wx:if 的条件值切换时，框架有一个局部渲染的过程

八、模板template中data只能使用变量，模板拥有本身的做用域，只能使用data传入的数据，咱们能够对is 属性使用 Mustache 语法，来动态决定具体须要渲染哪一个模板，从而实现局部渲染

九、

3、填坑之路

一、tabBar不显示：检查app.json中配置的pagePath是否正确

二、bug：首次进入页面，若是页面不满一屏时会触发 onReachBottom，手指上拉，会触发屡次 onReachBottom ，应为一次上拉，只触发一次；

三、样式图片用网络图片或base64格式化下，Base64格式：data:[][;charset=][;base64],

四、页面传值并局部刷新能够考虑用通知（订阅，发布）的形式,见：https://github.com/icindy/WxNotificationCenter
    所有刷新：能够用页面生命周期,结合本地缓存来进行页面间的传值

五、开发者写的全部代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁

六、