微信小程序笔记

微信小程序笔记

1、全局配置

配置文件为app.json

1、pages字段

用来编写每页的url
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

2、window字段

用来编写全局顶层的配置
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

3、tabbar字段

用来编写页面按钮可以在全局页面的上面也可以在下面
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

2、页面配置

配置文件为.json文件

可以修改全局的window字段的属性使页面具有独特的属性，不跟全局属性一样。
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

3、sitemap配置

####配置文件sitemap.json文件

微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html

4、数据绑定

数据绑定前的代码编辑器技巧

1、text

相当于以前web中的 span标签 行内元素 不会换行

2、view

相当于以前web中的 div标签 块级元素 会换行

3、checkbox

相当于以前web中的复选框

数据绑定

{{data里面的属性名}}

5、运算 => 表达式

1、可以在花括号众加入表达式

2、表达式

指的是一些简单 运算 数字运算 字符串拼接 逻辑运算。。
1、数字的加减
2、字符串拼接
3、三元表达式

3、语句

复杂的代码段
if else
switch
do while
for

6、列表渲染

1、列表循环

1、wx.for

wx:for=“{{数组或者对象}}”
wx:for-item=“循环项的名称”
wx:for-index=“循环项的索引”

例：<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index">索引:{{index}}值:{{item.name}}</view>

2、wx:key=“唯一的值”

用来提高列表渲染的性能

1、wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是 循环数组中的对象的唯一属性
2、wx:key =“*this” 就表示 你的数组是一个普通的数组 *this 表示是循环项
循环项例如:[1,2,3,44,5] [“aa”，“11”，“sadfas”]
3、当出现 数组的嵌套循环的时候 尤其要注意 以下绑定的名称 不要重名
如:wx:for-item=“item” wx:for-index=“index”
4、默认情况下 我们不写 wx:for=“{{list}}” wx:for-item=“item” wx:for-index=“index” 小程序也会把 循环项的名称 和 索引的名称 item 和 index 只有一层循环的话（wx:for=“{{list}}” wx:for-item=“item” wx:for-index=“index”）可以省略

2、对象循环

1、wx:for

wx:for=“{{对象}}”
wx:for-item=“循环项的名称”
wx:for-index=“循环项的索引”
循环对象的时候 最好把 item和index的名称都修改一下
key 和 value 等效于item index
在循环读取对象的时候，不用专门写对象的key值，直接写value 和 key 就可以了
如:wx:for-item=“value” wx:for-index=“key”

7、block标签

1、占位符的标签

2、写代码的时候 可以看到这标签存在

3、页面渲染 小程序会把它移除

作用不想渲染的时候额外再加标签，就可以用block标签

8、条件渲染

1、wx:if=“{{true/false}}”

true:显示 false:隐藏

2、if，else，if else

wx:if wx:elif wx:else

3、hidden(默认是ture隐藏)

1、在标签上直接加入属性 hidden
2、hidden=“{{ture}}”

3、什么场景下用哪个

1、当标签表示频繁的切换显示 优先使用 wx:if
原理：直接把标签从 页面结构给移除
2、当标签频繁的切换显示的时候 优先使用 hidden
原理 通过样式的方式来切换显示
hidden 属性不要和样式display一起使用
因为display是底层是display实现的

9、事件绑定

1、需要给input标签绑定 input事件

绑定关键字 bindinput

1、如何获取输入框的值

通过事件源对象来获取 e.deatil.value(e为事件传入的参数)

2、把输入框的值 赋值到 data当中

不能直接
1、this.data.num=e.datail.value
2、this.num=e.detail.value
正确写法
this.setData({
num:e.detail.value
})

这样就可以做到双向绑定

2、<button>按钮绑定点击事件

1、绑定一个点击事件

绑定关键词 bindtap

2、无法在小程序当中的 事件中 直接传参

如<button bindatp="handletap(1)">

3、通过自定义属性的方式来传递参数

如:data-operation=“{{}}”

4、事件源中获取 自定义属性

如:const operation=e.currentTarget.dataset.operation(e为事件传入的参数)

10、样式 WXSS

小程序中 不需要主动引入样式文件

1、编写页面的宽度rpx

适应化公式（随着屏幕大小的改变而改变）
page px=750 rpx
1 px = 750 rpx / page
100 px = 750 rpx * 100 / page

2、实现不同宽度的页面适配

利用 一个属性 calc属性 css 和 wxss 都支持 一个属性

如、width:calc(750rpx*100/375);
1、750 和 rpx 中间不要留空格
2、运算符的两边也不要留空格
错误写法 如、width:750 rpx * 100 / 375;

3、导入

1、引入的代码 是通过 @import 来引入
2、路径 只能写相对路径

4、选择器

特别需要注意的是 小程序 不支持通配符*
小程序支持的选择器有.class #id element element,element nth-child ::after ::before

5、小程序中使用less

需要从vscode 安装 easy less插件 修改settings.json配置
less的作用: 在写.less页面上 会生成对应 .wxss 文件

11、常见组件

小程序中常用的布局组件

view,text rich-text,button,image,navigator,icon,swiper,radio,checkbox等

1、view 块级标签

https://developers.weixin.qq.com/miniprogram/dev/component/view.html

代替 原来的 div 标签

2、text 文本

https://developers.weixin.qq.com/miniprogram/dev/component/text.html

1、文本标签
2、只能嵌套text
3、长按文字可以复制(只有该标签有这个功能) selectable属性可以操作文本是否可选 例如，复制
4、可以对空格 回车 进行编码
decode 是否对文本进行解码
例如 回车&nbsp在没有decode时是直接写上页面的 有decode时 是在页面上展示回车

3、image 图片展示

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

1、src 指定要加载的图片的路径(图片存在默认的宽度和高度 320*240)

2、mode 决定 图片内容 如何 和 图片标签 宽高 做适配

1、scaleToFill 默认值 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
2、aspectFit 保持宽高比 确保图片的长边 显示出来 页面轮播图 常用
3、aspectFill 保持纵横比缩放图片，只保证图片的 短边 能完全显示出来。 少用
4、widthFix 以前web的图片的 宽度指定了之后 高度 会自己按比例来调整 常用
5、bottom。。。。类似以前的backgroud-position

3、小程序当中的图片 直接就支持 懒加载 lazy-load

lazy-load 会自己判断 当 图片 出现在视口 上下三屏的高度 之内的时候 自己开始加载图片

4、swiper 轮播图

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

1、swiper要与swiper-item一起用

1、轮播图外层容器 swiper
2、每一个轮播项 swiper-item

2、swiper标签 存在默认样式

1、width 100%
2、height 150px

3、swiper-item标签 内的image标签也存在默认样式

image 存在默认宽度和高度 320 * 240

4、让swiper适应图片的宽高

先找出 原图的宽度和高度 等比例 给swiper 定 宽度和高度
swiper 宽度(一般都是100%或100vw(100%和100vw就是写法不一样，但表达式一样)) / swiper 高度 = 原图的宽度 / 原图的高度
swiper 高度 = swiper 宽度(一般都是100%或100vw(100%和100vw就是写法不一样，但表达式一样)) * 原图的高度 / 原图的宽度
例、原图的宽度和高度 1125*352px
height:calc(100vw * 352 / 1125);

5、swiper 属性

autoplay 自动轮播 interval 修改轮播事件 circular 循环轮播
indicator-dots 显示 指示器 分页器 索引器
indicator-color 指示器的未选择的颜色 indicator-active-color 选中的时候的指示器的颜色

5、navigator 导航组件（跳转页面）

https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

1、块级元素 默认会换行 可以直接加宽度和高度

1、url

要跳转的页面路径 绝对路径 相对路径

2、target

要跳转到当前的小程序 还是其他的小程序的页面
self 默认值 自己的小程序页面
miniProgram 其他的小程序的页面

3、open-type 跳转的方式

1、默认值 navigate 保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar页面
2、redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面
3、switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
4、reLaunch 关闭所有页面，打开到应用内的某个页面

6、rich-text 富文本组件(可以用来写html网页)

https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

1、nodes属性来实现

1、接收标签字符串
2、接收对象数组

7、button 按钮组件

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

1、外观属性

1、size 控制按钮的大小

1、default 默认大小
2、mini 小尺寸

2、type 用来控制按钮的颜色

1、defalut 灰色
2、primary 绿色
3、warn 红色

3、plain 按钮是否镂空，背景色透明

以上都不用去记都可以通过样式去自己定义

4、loading 名称前是否带loading（等待加载图标）图标

2、open-type 开发属性

1、contact

直接打开 客服对话功能 需要在微信小程序的后台配置

2、share

转发当前的小程序 到微信朋友中 不能把小程序分享到 朋友圈

3、getPhoneNumber

获取当前用户的手机号码信息 结合一个事件来使用 比缩企业的小程序账号 没有权限来获取用户的手机号码

1、绑定一个事件 bindgetphonenumber
2、在事件的回调函数中 通过参数来获取信息
3、获取到的信息 已经加密过了需要用户自己建的小程序的后台服务器，在后台服务器中进行解析 手机号码，返回到小程序中，就可以看到信息了

4、getUserInfo

获取当前用户的个人信息

1、使用方法 类似 获取用户的手机号码
2、可以直接获取 不存在加密的字段

5、launchApp

在小程序当中 直接打开 app

1、需要现在 app中 通过app的某个链接 打开 小程序
2、在小程序 中 再通过这个功能 重新打开 app
3、如：找到京东的app 和京东的小程序

6、openSetting

打开小程序内置的 授权页面

授权页面中 只会出现用户曾经点击过的 权限

7、feedback

打开 小程序内置的 意见反馈页面

只能通过真机调试来打开

8、icon 小图标(微信小程序内自带的图标)

https://developers.weixin.qq.com/miniprogram/dev/component/icon.html

1、type 图标的类型

success | success_no_circle | info | warn | waiting | cancel |download | search |clear

2、size 大小

3、color 图标的颜色

9、radio 单选框

https://developers.weixin.qq.com/miniprogram/dev/component/radio.html

1、radio标签 必须要和 父元素 radio-group来使用

2、value 选中的单选框的值

3、需要给 radio-group 绑定 change事件

4、通过事件的函数，调用事件参数，反调单选框的值，再将其展示

5、还可以通过color属性修改颜色

10、checkbox 复选框

https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html

1、checkbox标签 必须要和 父元素 checkbox-group一起使用

2、value数组有多选框的值

3、需要给 checkbox-group 绑定 change事件

4、通过事件的函数，调用事件参数，反调单选框的值，再将其展示

5、还可以通过color属性修改颜色

12、自定义组件

1、创建新的自定义组件

自定义组件的标签名就是.wsml文件内的class内的属性

2、标题激活选中

1、绑定点击事件 需要在methods中绑定

bindtap="绑定事件名"点击后执行绑定事件名

---

2、获取被点击的索引

3、获取原数组

解构 对 复杂类型进行结构的时候 复制了一份 变量的引用而已
最严谨的做法 重新拷贝一份 数组， 再对这个数组的备份进行处理
如let tabs=JSON.parse(JSON.stringify(this.data.tabs));
不要直接修改 this.data.数据

4、对数组循环

[].forEach 遍历数组 遍历数组的时候 修改了v， 也会导致源数组被修改
1、给每个循环性 选中属性 改为 false
2、给 当前的索引的 项 添加激活选中效果就可以了

3、父向子传递数据

1、父组件（页面）向子组件 传递数据 通过 标签属性的方式来传递

1、在子组件上进行接收(properties 进行接收)
2、把这个数据当成是data中的数据直接用即可

4、子向父传递数据(通过事件的方式传递)

1、在子组件的标签上加入一个 自定义事件

点击事件触发的时候

触发父组件中的自定义事件 同时传递数据给 父组件
如、this.triggerEvent(“父组件自定义事件的名称”，要传递的参数)

4、slot标签

slot标签 其实就是一个占位符 插槽 等到父组件调用子组件的时候 再传递 标签过来 最终 这些被传递的标签就会替换 slot 插槽的位置

13、小程序生命周期

1、应用生命周期(在app.js文件进行设置)

https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

1、onLaunch

触发要求:应用第一次启动的就会触发的事件

用处举例、在应用第一次启动的时候 获取用户的个人信息

2、onShow

触发要求:应用 被用户看到

用处举例、对应用的数据或者页面效果 重置

3、onHide

触发要求:应用 被隐藏

用处举例、暂停或者清除定时器

4、onError

触发要求:应用的代码发生了报错的时候

用处举例、在应用发生代码报错的时候，收集用户的错误信息，通过异步请求 将错误的信息发送后台去

5、onPageNotFound

触发要求:页面找不到就会触发(应用第一次启动的时候，如果找不到第一个入口页面 才会触发)

用处举例、如果页面不存在了 通过js的方式来重新跳转页面 重新跳到第二个首页

js方式:

不能跳到tabbar页面 类似导航组件

wx.navigateTo({
   rul:''
})

2、页面生命周期

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

1、onLoad

触发条件:监听页面加载

onLoad发送异步请求来初始化页面数据

2、onShow

触发条件:监听页面显示

3、onReady

触发条件:监听页面初次渲染完成

4、onHide

触发条件:监听页面隐藏

5、onUnload

触发条件:监听页面卸载 也是可以通过点击超链接来演示

6、onPullDownRefresh

触发条件:监听用户下拉动作

页面的数据 或者效果 重新 刷新

7、onReachBottom

触发条件:页面上拉触底事件的处理函数 需要让页面出现上下滚动才行

上拉加载下一页数据

8、onShareAppMessage

触发条件:用户点击右上角分享

9、onPageScroll

触发条件:页面滚动 就可以触发

10、onResize

触发条件:页面的尺寸发生改变的时候触发 小程序 发生了横屏竖屏 切换的时候触发

11、onResize

1. 必须要求当前页面，也是tabber页面
2. 点击的自己的tab item 的时候才触发

---

项目

1、主键

1、页面滚动条

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

2、标签 渲染多个代码块

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html#block%20wx:for

通常和 wx.for wx.if 联用