微信小程序——快速学习笔记

1.Configuration配置全解析project.config.json(项目配置文件){//文件说明"description":"项目配置文件",//项目代码配置"setting":{//是否检查url域名安全andTLSversion"urlCheck":false,//是否将项目的es5代码转成es6"es6":true,//是否自动补全css兼容前缀"postcss":true,//是否压缩代码"minified":true,//是否启用新特性"newFeature":true},//编译方式"compileType":"miniprogram",//版本号"libVersion":"1.7.2",//appid"appid":"touristappid",//项目名称"projectname":"haiyangbg",//项目配置"condition":{//搜索关键字"search":{"current":-1,"list":[]},//客服"conversation":{"current":-1,"list":[]},//编译方法"miniprogram":{"current":-1,"list":[]}}}app.json(小程序配置){//项目路由设置(第一项为首页)"pages":["pages/index/index","pages/logs/logs"],//窗口设置“窗户”：{//顶部导航栏的背景色，必须是十六进制颜色值，如"#000000""navigationBarBackgroundColor":"#9ef468",//顶部导航栏显示的文字"navigationBarTitleText":"ComponentDisplay",//NavigationBar文字颜色，仅支持黑/白"navigationBarTextStyle":"black",//下拉背景文字样式，仅支持深/浅"backgroundTextStyle":"light",//drop-下拉背景色，必须为16进制Color值，如"#000000""backgroundColor":"#333",//是否启用下拉刷新"enablePullDownRefresh":true,//距离底部的距离触发触底事件，单位px"onReachBottomDistance":40},//网络请求过期时间，单位毫秒"networkTimeout":{//普通ajax请求"request":20000,//Socket请求"connectSocket":20000,//文件上传"uploadFile":20000,//文件下载"downloadFile":20000},//标签导航栏"tabBar":{//文字颜色"color":"#999",//选中时的文字颜色"selectedColor":"#000",//背景色"backgroundColor":"#fff",//上边框颜色，只支持黑/白"borderStyle":"black",//是否tab导航栏显示在底部或顶部（图片不显示在顶部）"position":"bottom",//导航栏列表项"list":[{//导航到的页面路径"pagePath":“页数/索引ex/index",//标签按钮上的文字"text":"Component",//图片路径"iconPath":"img/com-l.png",//选择后显示的图片"selectedIconPath":"img/com-d.png"},{"pagePath":"pages/logs/logs","text":"API","iconPath":"img/api-l.png","selectedIconPath":"img/api-d.png"}]},//调试信息"debug":true}page.json(单页配置)单页的json是app.json的window字段，加载到本页时，这个配置会覆盖app.json2.生命周期小程序App生命周期onLaunch------当小程序初始化完成后，触发onShow（只调用一次）------1.小程序启动2.从后台进入前台显示，触发onHide------当小程序从前台进入后台，触发onError------1.发生脚本错误2.api调用失败,触发并带错信息单页页面生命周期onLoad------页面加载时触发onShow（只调用一次）------页面显示时触发onReady------第一次渲染完成时，触发onHide（只调用一次）------页面隐藏时，触发onUnload------页面卸载时，详细生命周期分类触发：1.小程序启动：App.onLaunch->App.onShow->registerapp。json页面中的页面（按index排序）->设置app路由为首页路由->首页页面参数深拷贝->初始化首页数据->Page.onLoad->Page.onShow->>Page.onReady2.切换到后台（app和page生命周期重合）：小程序切换到后台->page.onHide->App.onHide->切换回小程序->App.onShow->page.onShow3。跳转页面：old表示上一页，new表示新页面navigateTo跳转->将route设置为目标页面route->old.onHide->初始化页面数据->new.onLoad->new.onShow->new.onReadyredirectTo重定向->设置路由->old.onUnload->初始化数据->new.onLoad->new.onShow->new.onReadynavigateBack页面返回->设置路由->old.onUnload->初始化数据->new.onShowreLaunch重启->设置路由->old.onUnload->初始化数据->new.onLoad->new.onShow->new.onReadyswitchTabTab开关（官方文档截图）3.数据绑定与渲染数据绑定：{{message}}渲染列表渲染：-wx:for="{{message}}"-wx:for-index="idx"（设置索引的变量名，默认索引）-wx:for-item="itemName"（设置每个item的变量名，默认item）渲染块：条件渲染：-wx:if="boolean"-wx:elif="boolean"-wx:else="boolean"==(if-elseif-if)-hidden="boolean"4.模板（template）基本用法（定义代码片段,可以异地调用,使用name属性作为模板名称,调用Attribute时使用is)//源码(需要和被调用的页面在同一个wxml)我是{{name}}//call//jsdataPage({data:{message:{name:'oceanbiscuit'}}})高级用法当时很多页面都需要同一个模板，它需要导入模板，先在pages文件夹下创建template文件夹，在文件夹下创建template.wxml文件//template.wxml我是{{name}}//page.wxml调用//jsdataPage({data:{message:{name:'oceanbiscuit'}}})5.事件事件列表click事件click事件tap长按事件（超过0.35秒）longpresstouch事件touchstarttouchstarttouch开始移动touchmove触摸后中断touchcancel触摸结束touchend动画事件transition被触发transitionend动画开始时触发animationstart迭代结束时触发animationiteration动画完成时触发animationend事件冒泡，事件捕获绑定事件+冒泡：bind+事件名，如bindtap绑定事件+防止冒泡：catch+事件名，如catchtap捕获+冒泡：capture-bind:+事件名，如capture-bind：tap捕获+中断事件+取消冒泡：capture-catch:+事件名称，如capture-catch：tap事件对象BaseEvent(基础事件，所有事件的父类)type(String-事件类型)timeStamp(Integer-事件产生timestamp)target(Object-触发事件的组件的属性)id(String-事件源的id)tagName(String-当前组件的类型)dataset(Object-事件源组件上以数据开头的自定义属性-collection)currentTarget(Object-当前组件的属性)同targetTouchEvent(触摸事件)touches(触摸点停留在屏幕上的信息对象的数组集合)identifier(Number-触摸点的标识符)pageX(Number-distance离文档左上角x轴的距离)pageY(Number离文档左上角y轴的距离)clientX(Number离页面可显示区域x轴的距离)clientY(Number离页面的距离可显示区域y轴)changedTouches(ArraychangedtouchpointsInformationobjectcollection)CustomEvent(customevent)detail(Object-customeventadditionalinformation)6.wxs模块wxs文件是js文件，导入wxs文件就是导入一个js模块（不能使用es6），有两种import方法在wxml中引用，使用标签1.1.module必填，为当前模块1.2的模块名。src可选，指.wxs文件的相对路径（仅当标签为单闭标签或标签内容为空时）1.3.导入示例：自导出：varfoo='oceanbiscuit'module.exports={foo}在wxs中被引用，使用require来引用2.1。示例vartools=require("./tools.wxs")7.wxss样式微信版css，多处添加自适应大小单元（rpx）添加导入外部样式（@import）减少css选择器，只支持类选择器。classid选择器#id标签选择器elementbrotherselectorelement1,element2伪元素选择器只支持两种类型::after::before8。自定义组件使用自定义组件创建自定义组件（类似于page，但需要在json文件中将component字段设置为true）{"component":true}创建组件构造函数（构造函数不是page()，而是就是Component())Component({//组件的外部属性（父组件传递过来的数据）properties:{msg:{type:String,value:'msg',//value时触发的回调父组件的变化observer:()=>{console.log('iamchange')}}},data:{componentData:{}},})使用自定义组件（引用语句必须在json中页面文件优先)//引用优先Declare"usingComponents":{//hybg标签名"hybg":"../component/component"//相对路径}//直接使用，必要时绑定数据slottemplate1.singlesolt```//组件//页面（hybg是上面的组件标签名)pageslot//效果pageslot```2.多个slot```//首先在js的Component中添加optionsin:{//启用多个槽multipleSlots:true},//多个槽需要使用不同的名称来区分/slot>//页面（hybg为上面的组件标签名）first--slotlast--slot//效果first--slotlast--slot```父子组件事件（子组件传值）//pagefatherEvent:function(e){console.log(e.detail)//组件传递的自定义信息//组件tap:function(){varmyEventdetail={a:10}//detail对象，提供给事件监听函数varmyEventOption={}//触发事件的配置选项//bubbles事件bubbles//capturePhase事件有一个捕获阶段//composed可以通过Parent组件边界this.triggerEvent('hybgEvent',myEventDetail,myEventOption)}触发hybgEvent事件