微信小程序
最近在学习小程序开发，在学习的过程中感受到了内容之多，这里总结了一些小程序开发的一些常用属性与方法，更加具体的还得通过打开微信开放文档进行学习，在学习的过程中多打demo才是最好的学习方式啊，再好的文档都比不上自己去实践。这里附上mdn: 微信开放文档 (qq.com)~
1. 准备工作
project.config.json：项目配置文件，比如项目名称、appid等；sitemap.json：小程序搜索相关的app.json：全局配置page.json：页面配置
全局配置
| 属性 | 类型 | 必填 | 描述 |
|---|---|---|---|
| pages | string[] | 是 | 页面路径列表 |
| window | Object | 否 | 全局的默认窗口表现 |
| tabBar | Object | 否 | 底部tab栏的表现 |
小程序的双线程模型
微信客户端是小程序的宿主环境。
执行wxml文件、wxss文件、js文件
渲染层（Webview线程）：wxml-> 布局文件 wxss -> 样式文件
逻辑层（JsCore）：js脚本
这两个线程都会经由微信客户端（Native）进行中转交互。
界面渲染过程 WXML和DOM树
WXML可以先转成 JS对象，再渲染出真正的DOM树
2.循环与对象绑定
数组和对象循环
列表循环：
-
wx:for="{{数组或者对象}}"wx:for-item="循环项的名称"wx:for-index="循环项的索引" -
wx-key="唯一的值"用来提高列表渲染的性能-
wx-key绑定一个普通的字符串的时候，那么这个字符串名称肯定是循环数组中对象的唯一属性 -
wx-key=*this就表示普通数组*this表示循环项
-
-
当出现数组的嵌套循环的时候，尤其要注意，以下绑定的名称不要重名
wx:for-item="item"wx:for-index="index"(默认情况下不写)小程序默认循环项的名称和索引的名称为item和index
对象循环：
wx:for-item="{{对象}}"wx:for-item="对象的值"wx:for-index="对象的属性"- 循环对象的时候，最好改一下
wx:for-item="value"wx:for-index="key"
事件绑定
第一种：给input绑定
-
给
input标签绑定bindinput -
通过
e.detail.value获取输入框的值 -
把输入框的值赋值给data:
this.setData({num: e.detail.value
})
第二种：给button绑定
- 给
button标签绑定bindtap - 无法在小程序当中的事件直接传参
- 通过自定义属性的方式传递参数
- 事件源中获取自定义属性
<button bindtap="handleTap" data-operation="{{1}}">+</button>
<button bindtap="handleTap" data-operation="{{-1}}">-</button>
这里可以通过把绑定事件打印出来，找到自己需要的那个实参拿出来。获取当前num的值是通过this.data.num来获取的。
3 . WXSS
小程序中，不需要主动引入样式文件。需要把页面中的某些元素的单位，由px改成rpx
rpx
rpx(responsive pixel)可以根据屏幕宽度进行自适应。规定屏幕宽为750px. rpx换算px(750/屏幕宽度)。如iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素
利用calc属性来计算rpx, 如：
width: cala(750rpx *100 / 375);
750和rpx中间不要留空格，运算符两边也不要留空格。
样式导入
使用@import语句可以导入外联样式表，路径只能写相对路径
@import "demo.js";
选择器
特别注意：小程序不支持通配符*****，在我们之前写css的样式中，经常会在最前面加一个通配符，写如下样式，但是这个通配符在小程序中是不适用的。
* {margin: 0；padding: 0;box-sizing: border-box
}
其他选择器的话跟css的差不多。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ayxjkwe-1626669911420)(E:\微信小程序\笔记\img\选择器.png)]
a. 常用组件
text
- 文本标签，只能嵌套
text标签 - 长按文字可以复制(只有这个标签有这个功能)
- 可以对空格 回车进行编码
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| user-select | Boolean | false | 文本是否可选 |
| decode | Boolean | false | 是否解码 |
image
-
图片标签，image组件默认宽度
320px、高度240pxsrc指定要加载的图片路径， 图片存在默认宽高mode决定图片内容和图片标签的适配scaleToFill默认值，不保持纵横比缩放图片，使图片填满image元素aspectFit保持宽高比，确保图片的长边显示出来aspectFill保持宽高比，只确保短边显示出来 少用widthFix跟以前web图片差不多，指定宽度，高度按比例调整 常用
-
支持懒加载 直接加
lazy-load就行
swiper
-
轮播图的外层容器：
swiper -
每一个轮播项：
swiper-item -
swiper标签存在默认样式width 100%height 250px -
swiper标签无法实现由内容撑开 -
swiper高度/swiper宽度=原图的高度 / 原图的宽度 -
autoplay自动轮播interval修改轮播事件circular衔接轮播indicator-dots显示分页indicator-color指示器未选择时的颜色indicator-active-color选中时的颜色
navigator
-
块级元素 默认会换行 可以直接加宽度和高度
-
url要跳转的页面路径，绝对路径、相对路径 -
target 指定跳转到当前小程序或者是其他的小程序页面
self：默认值 自己的小程序页面
miniProgram: 其他的小程序页面
rich-text富文本标签
通过nodes属性来实现，可以接收标签字符串和对象数组。rich-text全局支持class和style属性，不支持id属性，还有一些受信任的HTML节点及属性见官方文档。
<rich-text nodes="{{data}}"></rich-text>
b. 常用标签
button
-
外观的属性（1）size控制按钮的大小 a) default默认大小 b) mini小尺寸
（2）type控制按钮的颜色 a) default灰色 b) primary绿色 c) warn红色
（3）plain 按钮是否背景色为透明
-
open-type:
contact：直接打开客服对话功能，需要在微信小程序的后台配置
share：转发当前小程序到微信中，不能分享到朋友圈
getPhoneNumber：获取当前用户的手机号码信息，结合一个事件来使用。不是企业小程序账号没有权限获取用户的手机号码。实现思路：（1）bindgetphonenumber绑定事件；（2）在事件的回调函数中通过参数来获取信息；（3）获取到的信息需要用户自己搭建小程序的后台服务器，在后台中进行解析后返回小程序，（因为被加密过了）
getUserInfo：获取当前用户的个人信息
launchApp：在小程序中直接打开app
openSetting：打开小程序内置的授权页面
feedback：打开小程序内置的意见反馈页面，这个需要真机调试
icon
小程序中的字体图标
- type图标的类型：success | success_no_circle | info | warn | waiting | cancel | download | search | clear
- size大小
- color图标的颜色
radio 单选框
-
radio标签必须要和父元素radio-group来使用
-
value选中的单选框的值
-
需要给 radio-group 绑定change事件
-
需要在页面中显示选中的值
<radio-group bindchange="handleChange"><radio value="male">男</radio><radio value="female">女</radio> </radio-group>
注意点：
- 页面
.js文件中，存放事件回调函数的时候存放在data同层级下 - 组件
.js文件中，存放事件回调函数的时候必须要在methods中
4. 自定义组件
会写在下一篇博客中~
后续会继续更新d~ 除了记笔记，也要自己多打打小demo来熟悉这些知识
