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

Posted 2021-08-18 MaNqo

微信小程序

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

数组和对象循环

列表循环：

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

2. wx-key="唯一的值" 用来提高列表渲染的性能

   • wx-key 绑定一个普通的字符串的时候，那么这个字符串名称肯定是循环数组中对象的唯一属性

   • wx-key=*this 就表示普通数组 *this表示循环项

3. 当出现数组的嵌套循环的时候，尤其要注意，以下绑定的名称不要重名

   wx:for-item="item" wx:for-index="index"(默认情况下不写)小程序默认循环项的名称和索引的名称为item和index

对象循环：

1. wx:for-item="{{对象}}" wx:for-item="对象的值" wx:for-index="对象的属性"
2. 循环对象的时候，最好改一下 wx:for-item="value" wx:for-index="key"

事件绑定

第一种：给input绑定

1. 给input标签绑定bindinput

2. 通过e.detail.value获取输入框的值

3. 把输入框的值赋值给data:

this.setData({
    num: e.detail.value
})

第二种：给button绑定

1. 给button标签绑定bindtap
2. 无法在小程序当中的事件直接传参
3. 通过自定义属性的方式传递参数
4. 事件源中获取自定义属性

<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

1. 轮播图的外层容器： swiper

2. 每一个轮播项：swiper-item

3. swiper标签存在默认样式 width 100% height 250px

4. swiper标签无法实现由内容撑开

5. swiper高度/swiper宽度 = 原图的高度 / 原图的宽度

6. autoplay自动轮播 interval修改轮播事件 circular衔接轮播 indicator-dots 显示分页

   indicator-color指示器未选择时的颜色 indicator-active-color选中时的颜色

navigator

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

2. url要跳转的页面路径，绝对路径、相对路径

3. target 指定跳转到当前小程序或者是其他的小程序页面

   self：默认值 自己的小程序页面 miniProgram: 其他的小程序页面

rich-text富文本标签

通过nodes属性来实现，可以接收标签字符串和对象数组。rich-text全局支持class和style属性，不支持id属性，还有一些受信任的html节点及属性见官方文档。

<rich-text nodes="{{data}}"></rich-text>

b. 常用标签

button

1. 外观的属性（1）size控制按钮的大小 a) default默认大小 b) mini小尺寸

   ​ （2）type控制按钮的颜色 a) default灰色 b) primary绿色 c) warn红色

   ​ （3）plain 按钮是否背景色为透明

2. open-type:

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

   share：转发当前小程序到微信中，不能分享到朋友圈

   getPhoneNumber：获取当前用户的手机号码信息，结合一个事件来使用。不是企业小程序账号没有权限获取用户的手机号码。实现思路：（1）bindgetphonenumber绑定事件；（2）在事件的回调函数中通过参数来获取信息；（3）获取到的信息需要用户自己搭建小程序的后台服务器，在后台中进行解析后返回小程序，（因为被加密过了）

   getUserInfo：获取当前用户的个人信息

   launchApp：在小程序中直接打开app

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

   feedback：打开小程序内置的意见反馈页面，这个需要真机调试

icon

小程序中的字体图标

1. type图标的类型：success | success_no_circle | info | warn | waiting | cancel | download | search | clear
2. size大小
3. color图标的颜色

radio 单选框

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

2. value选中的单选框的值

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

4. 需要在页面中显示选中的值

   <radio-group bindchange="handleChange">
       <radio value="male">男</radio>
       <radio value="female">女</radio>
   </radio-group>
   

注意点：

• 页面.js文件中，存放事件回调函数的时候存放在data同层级下
• 组件.js文件中，存放事件回调函数的时候必须要在methods中

4. 自定义组件

会写在下一篇博客中~

后续会继续更新d~ 除了记笔记，也要自己多打打小demo来熟悉这些知识