微信小程序——常用属性及标签

微信小程序

最近在学习小程序开发，在学习的过程中感受到了内容之多，这里总结了一些小程序开发的一些常用属性与方法，更加具体的还得通过打开微信开放文档进行学习，在学习的过程中多打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、高度240px

src指定要加载的图片路径，图片存在默认宽高

mode决定图片内容和图片标签的适配
1. scaleToFill默认值，不保持纵横比缩放图片，使图片填满image元素
2. aspectFit保持宽高比，确保图片的长边显示出来
3. aspectFill保持宽高比，只确保短边显示出来少用
4. 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来熟悉这些知识