微信小程序笔记

配置

所有的配置都可以在官方文档中得到很好的解答。https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

app.json配置

app.json一般在微信开发者工具中配置（这样有提示），其中有比较重要的键值对

键名	简述	备注
pages	用来存放页面，其第一个子键值对代表初始看到的页面	页面文件直接写名字不要加后缀
window	用来配置总标题栏
tabBar	用来设置底部切换按钮

注意小程序的各种配置路径不要使用"./"

页面配置

index.json，页面配置可以使不同的页面有不同的总标题栏样式

其中"usingComponents":"路径",为不同的页面文件使用不同的组件

sitemap 配置

设置小程序能否被搜索、索引

条件

for循环

for循环默认值时可以省略：wx:for-item="item" wx:for-index="index"

可以和block标签（占位不显示为标签，直接暴露内容）配合使用

if判断

wx:if , wx:elif , wx:else 作为判断标签显隐。

频繁调用用hidden属性控制显隐较好，但是这里hidden与dispaly不能同时使用，否则hidden会被注释

事件绑定

事件需要关键字bind

不要使用箭头函数，会改变this指向

微信小程序不能直接传参，只有默认传事件和通过属性传

rpx

宽度统一为750rpx，对照iphone6的750px（真实像素宽度为325）

标签

view

相当于div

text

相当于span

image

对图片格式有要求，有内置属性值定义图片显示方式

swiper

轮播图，需要和swiper-item配合使用，也有许多内置属性可以直接进行轮播控制

navigator

导航标签，页面内跳转，可以通过属性配置跳转、回退等

rich-text

可以将字符串解析为真正的html标签使用（不能使用id来标识，可以使用class等），变量配合生成html。

button

按钮，可以通过属性配置调用特定功能（客服、授权设置、转发、获取信息等，这是button的开放能力，有些必须真机调试）

icon

有封装好的字体图标，通过属性控制

radio

单选框，一般和它的父亲radio-group一起使用

checkbox

复选框，同样一般和radio-group一起使用

solt

插槽，父组件中调用子组件时，父组件中的子组件包含的内容会替换掉插槽。

还有其他很多标签这里介绍的多是对比html5有特殊用法的

组件

properties：用来接收父传的值【父传子，通过属性传】，用的时候直接当成data中的数据使用即可，注意子元素接收的是个对象，要在type配置传的类型（不可省略），而value是默认值（可省略）

data：用来定义内部变量

observers：监听器

methods：方法

生命周期函数：created（初始化，此时不能用setData）、attached（渲染前）、ready（渲染后）、moved（组件节点移动）、detached（组件节点被移除）

【子传父】触发父组件中的自定义事件进行传参，this.triggerEvent("父组件自定义事件名称",{要传递的数据})，父组件自定义事件格式——bind:父组件自定义事件名称

page文件调用组件时需要在页面的json中配置组件

应用生命周期

onLaunch：第一次启动时

onShow：切换到小程序时（包括开启）

onHide：隐藏小程序时

onError：报错时

onPageNotFound：应用第一次启动时，找不到第一个入口页面（属于报错）

页面生命周期

onLoad：初始化

onShow：页面显示

onReady：页面渲染完成

onHide：页面隐藏，如navigator超链接跳转切保留时

onUnload：页面卸载，如navigator超链接跳转且关闭时

onPullDownRefresh：下拉刷新时，可以定义重新发送渲染数据请求

onReachBottom：上拉触底事件，可以定义上拉加载下一页数据

onShareAppMessage：右上角分享

onPageScroll：页面滚动

onResize：页面尺寸发生变化，配置文件中开启横屏竖屏切换时常用

onTabItemTap：只存在tabbar页面，点击自己的tab item时触发

小程序第三方框架

原生框架 MINA

uni-app

腾讯 wepy

美团 mpvue

京东 taro

滴滴 chameleon

推荐增加的目录结构

styles 存放公共样式

components 存放组件

lib 存放第三方库

utils 放自己的工具库

request 接口库