小程序笔记

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

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

一、常用知识点

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

2、冒泡事件:touchstart touchmove touchcancel touchend tap(在touchend 后触发) longtap(touchend 前触发)在 ;bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

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

4、wx:key 的值以两种形式提供:字符串(代表在 for 循环的 array 中 item 的某个 property)、 *this (代表在 for 循环中的 item 本身)

5、WXML 提供两种文件引用方式importinclude;import可以在该文件中使用目标文件定义的template(仅限目标文件中的),使用data来向模板中传递绑定数据;include可以将目标文件除了<template/>的整个代码引入,相当于是拷贝到include位置,使用:src="item.wxml"

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

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

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

9、

二、细节整理

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

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

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

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

5、iPhone6的分辨率(750x1334)为基准划分的

6、引入样式:@import ‘相对路径’

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

8、模板template中data只能使用变量,模板拥有自己的作用域,只能使用data传入的数据,我们可以对is 属性使用 Mustache 语法,来动态决定具体需要渲染哪个模板,从而实现局部渲染

9、

三、填坑之路

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

2、bug:首次进入页面,如果页面不满一屏时会触发 onReachBottom,手指上拉,会触发多次 onReachBottom ,应为一次上拉,只触发一次;

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

4、页面传值并局部刷新可以考虑用通知(订阅,发布)的形式,见:https://github.com/icindy/WxNotificationCenter
    全部刷新:可以用页面生命周期,结合本地缓存来进行页面间的传值

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

6、

原文地址:https://www.cnblogs.com/zzfy/p/6119589.html