微信小程序笔记 一.?程序配置?件 1.1全局配置app.json
app.json 是当前?程序的全局配置，包括了?程序的所有??路径、界?表现、?络超时时间、底 部 tab 等。普通快速启动项??边的 app.json 配置

{ "pages":[ "pages/index/index",//微信小程序显示的首页，谁在第一位显示谁 "pages/logs/logs", "pages/demo01/demo01" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, "style": "v2", "sitemapLocation": "sitemap.json" }

字段的含义 ：

1. pages 字段??于描述当前?程序所有??路径，这是为了让微信客?端知道当前你的?程序 ??定义在哪个?录。
   
2. window 字段?定义?程序所有??的顶部背景颜?，?字颜?定义等。
   
3. 完整的配置信息请参考 app.json配置
   

1.2全局window配置

{ "pages":[ "pages/index/index",//微信小程序显示的首页，谁在第一位显示谁 "pages/logs/logs", "pages/demo01/demo01" ], "window":{ "backgroundTextStyle":"dark",//两个值dark/light 默认是light "navigationBarBackgroundColor": "#0094ff",//头部导航栏颜色 "navigationBarTitleText": "我的应用",//标题 "navigationBarTextStyle":"white",//标题颜色，两个值black/white 默认是white "enablePullDownRefresh": true,//是否开启下拉刷新，默认是false "backgroundColor": "#ccc"//下拉刷新时的背景颜色 }, "tabBar": {//tabbar "color": "#999",//未选中的字体颜色 "selectedColor": "#ff2d4a",//选中时字体颜色 "backgroundColor": "#fafafa",//tabbar的背景颜色 "position": "bottom",//tabbar的位置 "borderStyle": "black",//tabbar边框 "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "icons/home.png", "selectedIconPath": "icons/home-o.png" }, { "pagePath": "pages/category/index", "text": "分类", "iconPath": "icons/category.png", "selectedIconPath": "icons/category-o.png" } , { "pagePath": "pages/cart/index", "text": "购物车", "iconPath": "icons/cart.png", "selectedIconPath": "icons/cart-o.png" } , { "pagePath": "pages/user/index", "text": "我的", "iconPath": "icons/my.png", "selectedIconPath": "icons/my-o.png" } ] } "style": "v2", "sitemapLocation": "sitemap.json" }

二.数据绑定

1 2 1 2 {{msg}} {{num}}是否是伪娘:{{isGril}}{{person.name}} {{person.age}} {{person.height}} {{person.weight}}自定义数据 {{1+1 - 3* 2 / 3}}{{'hello' + 'wx'}}{{17+1 == 18 ? '欢迎' : '您未满18岁'}} //注意: 花括号和引号之间如果有空格，将最终被解析成为字符串

2.1循环
wx:for
项的变量名默认为 item wx:for–item 可以指定数组当前元素的变量名
下标变量名默认为 index wx:for–index 可以指定数组当前下标的变量名
wx:key ?来提?数组渲染的性能
wx:key 绑定的值 有如下选择

1. string 类型，表? 循环项中的唯?属性 如

list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]wx:key="id"

2.保留字 *this ，它的意思是 item 本? ，*this 代表的必须是 唯?的字符串和数组。

list:[1,2,3,4,5] wx:key="*this"

索引:{{index}}---值：{{item.name}} 遍历对象 属性：{{key}}---值:{{value}}

2.2 block
渲染?个包含多节点的结构块 block最终不会变成真正的dom元素

{{index}}: {{item}}

2.3 if 条件渲染
在框架中，使? wx:if="{{condition}}" 来判断是否需要渲染该代码块：

条件渲染 显示 隐藏 不显示 不显示 他们都不要，我接盘 ----------

2.4 小程序事件的绑定
小程序绑定事件，通过bind关键字来实现，如 bindtap bindinput bindchange等不同组件支持不同的事件，具体看组件的说明即可

{{num}}+ -// pages/demo03/demo03.js Page({/** * 页面的初始数据 */ data: { num: 0 }, handleInput(e) { console.log(e.detail.value) this.setData({ num: e.detail.value }) }, changeNum(e){ console.log(e) const {operation} = e.target.dataset this.setData({ num:this.data.num + operation }) } })

2.5wxss宽度自适应配置

/* pages/demo04/demo04.wxss */ /* 1.小程序中 不需要主动引入样式文件 2.需要把页面中某些元素的单位 由px改换成rpx 1.设计稿 750px 750 px = 750rpx 1 px = 1 rpx 2.把屏幕宽度改成375px 375px = 750 rpx 1 px = 1 rpx 1rpx = 0.5px 3.存在一个设计稿 款多 414 或者未知page 1.设计稿 page 存在一个元素宽度 100px 2.拿以上的需求 趋势线 不同宽度的页面适配page px = 750px 1px = 750 rpx * 100 / page 100px = 750 rpx * 100/ page 假设设计稿的宽度page等于375px 4. 利用 一个calc属性 注意：1.750和rpx中间不要留空格 2.运算符的两边也不要留空格 */ view{ /* width: 200rpx; */ height: 200rpx; background-color: aqua; font-size: 40rpx; width: calc(750rpx * 100 / 375); }

2.6引入外部样式
通过@import “路径位置”
注意只支持相对路径
代码演示：

/*style文件夹下的common样式*/ view{ color: aqua; font-size: 16px; }/*导入到demo05中的样式中*/@import "../../style/common.wxss"

2.7选择器
特别需要注意的是小程序不支持通配符*因此以下代码无效

*{ margin:0; padding:0; box-sizing:border-box; }

目前的选择器有：

选择器	样例	样例描述
.class	.banner	选择所有拥有class="banner"的组件
#id	#phone	选择拥有id="phone"的组件
element	view	选择所有view组件
element,element	view,checkbox	选择view和checkbox组件
nth-child(n)	view:nth-child(n)	选择某个标签
::after	view::after	在view组件后面插入内容
::before	view::before	在view组件前边插入内容

2.8小程序中使用less
1.原生小程序不支持less,其他基于小程序的框架大体都支持，如wepy mpvue, taro
2.用vscode中的插件easy less
3.在vscode中设置加入以下配置

less.compile": { "outExt":".wxss" }

4.在要编写样式的地?，新建 less ?件，如 index.less ,然后正常编辑即可。

//嵌套写法 view{ text{ width: 20px; } } //定义变量 @color:yellow; text{ color: @color; } //导入外部less文件 @import '../../style/index.less'; view{ color: @themeColor; }

三.小程序常见的组件 重点讲解?程序中常?的布局组件
view, text, rich-text, button, image, navigator, icon, swiper, radio, checkbox 等
3.1 view
代替原来的div标签

点击我试试

3.2 text
1.文本标签
2.只能嵌套text
3.长安文字可以复制（只有该标签有这个功能）
4.可以对空格回车进行编辑

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
decode	Boolean	false	是否解码

我是一个text，我可以被复制   123<

3.3 image

1.image图片标签默认高度320px,240px
2.支持懒加载

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	‘scaleToFill’	图片裁剪，缩放的模式
lazy-load	Boolean	false	图片懒加载

mode有效值：
mode有13种模式，其中4种是缩放模式，9中是裁剪模式

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
缩放	aspectFilt	保持纵横比缩放图片，是图片的长边能完全显示出来
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来
缩放	widthFix	宽度不变，?度?动变化，保持原图宽??不变
缩放	top	不缩放图?，只显?图?的顶部区域
缩放	bottom	不缩放图?，只显?图?的底部区域
缩放	center	不缩放图?，只显?图?的中间区域
缩放	left	不缩放图?，只显?图?的左边区域
缩放	right	不缩放图?，只显?图?的右边区域
缩放	top left	不缩放图?，只显?图?的左上边区域
缩放	top right	不缩放图?，只显?图?的右上边区域
缩放	bottom left	不缩放图?，只显?图?的左下边区域
缩放	bottom right	不缩放图?，只显?图?的右下边区域

3.4 swiper 微信内置轮播图组件
【微信小程序笔记】swiper组件默认的宽是100%,高度是150px

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0,0,0.3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000（毫秒）	自动切换事件间隔
circular	Boolean	false	是否循环轮播

3.4.1swiper 滑块视图容器 3.4.2swiper-item每个滑块 默认宽度和高度都是100%

autoplay="{{true}}" interval="2000" circular indicator-dots="{{true}}" indicator-color="skyblue" indicator-active-color="orange"> > > > wxss文件 /* pages/demo09/demo09.wxss */ image{ width: 100%; } swiper{ width: 100%; height: calc(100vw * 352 / 1125); }

3.5 navigator导航标签

跳转到轮播图页面 跳转到tabbar页面（我是默认值，跳不了哈哈哈） 我是redirect重定向到别的页面 switchTab直接跳转到 tabbar页面 我是relaunch我可以随便跳转

navigator 导航组件 类似于超链接组件

属性名	类型	默认值	说明
target	String	self	在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram
url	String		当前小程序内的跳转连接
open-type	String	navigate	跳转方式

open-type有效值:

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面
redirect	关闭当前页面，跳转到应用内的某个页面,但是不能跳转到tabbar页面
switchTab	跳转到tabbar页面，关闭其他所有非tabbar页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面，可通过getCurrentPages()获取当前的页面栈,决定需要返回几层
exit	退出小程序，target="miniProgram"时生效

3.6 rich-text
富文本标签 类似于vue中的v-html
示例代码

// pages/demo12/demo12.js Page({/** * 页面的初始数据 */ data: { // 1. 标签字符串 最常用 // html:'天猫聚划算天猫国际外卖天猫超市充值中心飞猪旅行领金币拍卖分类' //2.对象数组的方式 html:[ { //1.放一个div标签用name属性来指定 name:'div', //2.标签上有哪些属性，用attrs来指定 attrs:{ //标签上的属性有类名，和样式 class:'my_div', style:'color:red; ' }, //子节点用 children来指定 children:[ { //div里面的子节点p标签 name:"p", //p身上的属性 attrs:{}, children:[ { type:'text', text:'hello' } ] } ] } ] },})

3.6.1nodes属性 nodes属性支持字符串和标签节点数组

属性	说明	类型	必填	备注
name	标签	String	是	支持部分受信任的html节点
attrs	属性	object	否	支持部分受信任的属性，遵循Pascal命名法
children	子节点列表	array	否	结果和nodes一致

文本节点：type=text

属性	说明	类型	必填	备注
text	文本	String	是	支持entities

html:[ { //1.放一个div标签用name属性来指定 name:'div', //2.标签上有哪些属性，用attrs来指定 attrs:{ //标签上的属性有类名，和样式 class:'my_div', style:'color:red; ' }, //子节点用 children来指定 children:[ { //div里面的子节点p标签 name:"p", //p身上的属性 attrs:{}, children:[ { type:'text', text:'hello' } ] } ] } ]

3.7 button 组件

default按钮 mini按钮 primary按钮 warn按钮 warn按钮 透明 primary按钮contact share getPhoneNumber getUserInfo launchApp openSetting feedback

属性	类型	默认值	必填	说明
size	string	default	否	按钮大小
type	string	default	否	按钮的样式类型
plain	boolean	default	否	按钮是否镂空，背景?透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名称前是否带loading图标
form-type	string		否	用于’'组件，点击分别会触发‘’组件的submit/reset事件
open-type	string		否	微信开放能力

size合法值

值	说明
default	默认大小
mini	小尺寸

type的合法值

值	说明
primary	绿色
default	白色
warn	红色

form-type的合法值

值	说明
submit	提交表单
reset	重置表单

open-type的合法值

值	说明
contact	打开客服会话，如果??在会话中点击消息卡?后返回?程序，可以从bindcontact 回调中获得具体信息
share	触发??转发，使?前建议先阅读
getPhoneNumber	获取???机号，可以从bindgetphonenumber回调中获取到??信息，
getUserInfo	获取??信息，可以从bindgetuserinfo回调中获取到??信息
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数
openSetting	打开授权设置?
feedback	打开“意?反馈”??，??可提交反馈内容并上传?志，开发者可以登 录?程序管理后台后进?左侧菜单“客服反馈”??获取到反馈内容

open-type 的 contact的实现流程

1. 将?程序 的 appid 由测试号改为 ??的 appid
   
2. 登录微信?程序官?，添加 客服客服 – 微信微信
   
3. 为了?便演?，?师??准备了两个账号
   
   1. 普通?? A
      
   2. 客服-微信 B
      
4. 就是?
   

3.8 icon

属性	类型	默认值	必填	说明
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search,clear
size	number/string	23	否	icon大小
color	string		否	icon的颜色，同css的color

3.9 radio
可以通过 color属性来修改颜色
需要搭配 radio-group ?起使?

男 女 选中了：{{res}}

3.10 checkbox
可以通过 color属性来修改颜色
需要搭配 checkbox-group ?起使?

{{item.name}} 勾选了：{{fruit}} // pages/demo16/demo16.js Page({/** * 页面的初始数据 */ data: { list:[ { id:0, name:'', value:'apple' },{ id:1, name:'', value:'grape' },{ id:2, name:'', value:'banana' }, ], fruit:[] }, checked(e){ console.log(e) const value = https://www.it610.com/article/e.detail.value this.setData({ fruit:value }) } })

四.自定义组件 4.1创建自定义组件的步骤

• 创建自定义组件文件夹
  类似于页面，一个自定义组件由 json ,wxml ,wxss ,js4个文件组成可以在微信开发者?具中快速创建组件的?件结构
  
• 声明组件 ?先需要在组件的 json ?件中进??定义组件声明
  

  { "component": true }

  
  
• 编辑组件
  同时，还要在组件的 wxml ?件中编写组件模板，在 wxss ?件中加?组件样式slot 表?插槽，类似vue中的slot
  

  {{innerText}} >

  
  在组件的 wxss ?件中编写样式
  注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
  

  /* 这里的样式只应用于这个自定义组件 */ .inner { color: red; }

  
  
• 注册组件
  在组件的 js ?件中，需要使? Component() 来注册组件，并提供组件的属性定义、内部数据和 ?定义?法
  

  // components/Tabs/Tabs.js Component({ /** * 组件的属性列表 */ properties: {},/** * 组件的初始数据 */ data: {},/** * 组件的方法列表 */ methods: {} })

  
  
• 声明引??定义组件
  ?先要在需要引用??的 json ?件中进?引?声明。还要提供对应的组件名和组件路径
  

  // 引用声明 "usingComponents": { // 要使用的组件的名称// 组件的路径 "my-header":"/components/myHeader/myHeader" } }

  
  
• ??中使??定义组件
  

  用来替代slot的

  
  

4.2组件之间的传值
4.2.1父向子组件传值 类似于vue中的父向子组件传值，通过标签属性的方式来传递
子组件接收的形式，在子组件的js文件中的properties接收

• 子组件js文件

// components/Tabs/Tabs.js Component({ /** * 组件的属性列表 */ properties: { //父组件传递过来的List list:{ type:Array, value:[] } },/** * 组件的初始数据 */ data: {}, /* 1 页面.js 文件中 存放事件回调函数的时候 存放在data同层级下！！！ 2 组件.js 文件中 存放事件回调函数的时候 必须要存在在 methods中！！！ */ /** * 组件的方法列表 */ methods: { changeTab(e){ // console.log(e) // 1.获取当前索引 const {index} = e.currentTarget.dataset console.log(index) //2. 获取data中的数组 // 解构对 复杂类型进行结构的时候 复制了一份 变量的引用而已 // 最严谨的做法 重新拷贝一份 数组，再对这个数组的备份进行处理， // let tabs=JSON.parse(JSON.stringify(this.data.tabs)); // 不要直接修改 this.data.数据 // let {tabs}=this.data; // let tabs=this.data; //循环数组 let {list} = this.data list.forEach((item,i) => { if(i === index){ item.isActive = true }else{ item.isActive = false } }); //重新赋值给list this.setData({ list }) } } })

• 子组件wxml文件

{{item.name}} 内容

• 子组件wxss文件

/* components/Tabs/Tabs.wxss */ .tabs_title{ display: flex; padding: 10rpx; } .tabs_item{ display: flex; flex:1; justify-content: center; align-items: center; } .active{ border-bottom: 5px solid red; color: orange; }

• 父组件js文件

// pages/demo17/demo17.js Page({/** * 页面的初始数据 */ data: { list: [{ id: 0, name: '首页', isActive: true, }, { id: 1, name: '新闻', isActive: false, }, { id: 2, name: '娱乐', isActive: false, }, { id: 3, name: '金融', isActive: false, },] },})

• 父组件wxml文件

1 父组件(页面) 向子组件 传递数据 通过 标签属性的方式来传递 1 在子组件上进行接收 2 把这个数据当成是data中的数据直接用即可 2 子向父传递数据 通过事件的方式传递 1 在子组件的标签上加入一个 自定义事件

4.2.2子组件向父组件传值 类似vue 子传父用this.$emit(‘name’,value)
这里用this.triggerEvent(‘name’,value)

• 子组件中的js

/* 5 点击事件触发的时候 发父组件中的自定义事件 同时传递数据给父组件 this.triggerEvent("父组件自定义事件的名称",要传递的参数) */ //子组件向父组件传值 changeTab(e){ //获取当前的索引 const {index} = e.currentTarget.dataset this.triggerEvent('myTabs',index) //第一参数是自定义事件名称，第一个参数是要传递的参数 }

• 父组件通过标签事件接收子组件传递的事件和参数

这里绑定的事件myTabs就是子组件自定的事件名称

• 父组件的js文件

// pages/demo17/demo17.js Page({/** * 页面的初始数据 */ data: { list: [{ id: 0, name: '首页', isActive: true, }, { id: 1, name: '新闻', isActive: false, }, { id: 2, name: '娱乐', isActive: false, }, { id: 3, name: '金融', isActive: false, },] }, changTabs(e){ //获取子组件传递过的当前的index console.log(e) const index = e.detail //深拷贝data中的list数组 let list = JSON.parse(JSON.stringify(this.data.list)) //遍历数组，把当前的索引设置为选中状态，其他改为false list.forEach((item,i) => i===index ? item.isActive=true : item.isActive=false) //设置list this.setData({ list }) } })

4.2.3 插槽的使用 和vue中的slot作用一样，就是一个占位符，也可以有默认值，
当给定了内容，slot的内容就会被覆盖
示例：

• 子组件的wxml文件

{{item.name}} >

• 父组件的wxml文件

首页 新闻 娱乐 金融

4.3组件常见的属性

定义段	类型	是否必填	描述
properties	Object Map	否	组件的对外属性，是属性名到属性设置的映射表，参见下文
data	Object	否	组件内部数据，和properties一同用于组件模板渲染
observers	Object	否	组件数据字段监听器，用于properties和data的变化，类似于vue中的watch
methods	Object	否	组件的方法，包括时间相应函数和任意的自定义方法，
created	Function	否	组件生命周期函数，在组件实例化刚刚被创建时执行，此时不能调用setData
attached	Function	否	组件?命周期函数，在组件实例进???节点树时执?，
ready	Function	否	组件?命周期函数，在组件布局完成后执?，
moved	Function	否	组件?命周期函数，在组件实例被移动到节点树另?个位置 时执?
detached	Function	否	组件?命周期函数，在组件实例被从??节点树移除时执 行

五.小程序的生命周期函数 5.1应??命周期

属性	类型	默认值	必填	说明
onlLaunch	function		否	监听小程序初始化
onShow	function		否	监听小程序启动或切后台
onHide	function		否	监听小程序切后台
onError	function		否	错误监听函数
onPageNotFound	function		否	页面不存在监听函数

5.2页面生命周期

属性	类型	说明
data	Object	页面的初始数据
onLoad	function	生命周期回调–监听页面加载
onShow	function	?命周期回调—监听??显?
onReady	function	?命周期回调—监听??初次渲染完成
onHide	function	?命周期回调—监听??隐藏
onUnload	function	?命周期回调—监听??卸载
oonPullDwonRefresh	function	监听用户下拉动作
onReachBotton	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角转发
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改时触发
onTabltemTap	function	当前是tab也时，点击tab时触发

推荐阅读

• 

  为什么韩国总统往往不得善终？
• 

  买到这种螃蟹千万不能吃 正直爱洁蟹
• 

  睾丸静脉曲张症状怎么治疗 该吃什么好？
• 

  燕京理工学院学费多少钱一年本科 燕京理工学院学费2023
• 

  如何提高领导力和团队管理效率？
• 

  html5点击提交弹出窗口，h5点击按钮出现提示框
• 

  如何将手机数据远程备份到服务器？ 手机远程备份到服务器怎么弄
• 

  莓茶如何冲泡
• 

  《巫师3：狂猎》多方面通关感受心得分享
• 

  废旧电脑主板回收价格表 废旧电脑怎么处理
• 

  替组词 汉字替怎么组词
• 

  西门子热水器故障代码e10怎么处理？
• 

  家里蚤蝇怎么消灭彻底
• 

  微信微博禁止推广！
• 

  我爱我家作文300字 我爱我家范文三篇
• 

  鸣人六道模式没了 黄泉转身之术
• 

  商标注册流程及费用 中国商标年注册可以在哪里看，注册商标查询
• 

  膝盖|医生劝告：这5个行为是在给膝盖“施刑”，现在改还来得及
• 

  大雪节气的含义
• 

  云闪付的普通会员订单上显示有vlp特权

• 一个小故事，我的思考。
• 家乡的那条小河
• 一个人的碎碎念
• 野营记-第五章|野营记-第五章 讨伐梦魇兽
• 昨夜小楼听风
• 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
• 基于微信小程序带后端ssm接口小区物业管理平台设计
• 2019.4.18感恩日记
• 那件我们忽略的小事叫感恩
• 你有婚内虐待行为吗（）