微信小程序学习笔记（4）

墨港

已于 2022-03-28 21:34:40 修改

阅读量477

点赞数

文章标签：学习

于 2022-03-28 21:33:55 首次发布

本文链接：https://blog.csdn.net/Outro_/article/details/123479065

版权

写在前面：

本文仅用于记录自己的学习经过和转载一些资料

本文所有练习和实例均使用vscode和微信官方的微信开发者工具共同完成，vscode仅用于编译代码。某些功能如即时模拟，实际上要使用微信官方工具才得以实现。

要达成代码同步，仅需要使用vscode和微信工具同时打开一个项目即可。

五、样式WXSS

类似前端中的CSS，但支持响应式长度单位（rpx）。

一、新的单位和样式导入。

1、响应式长度单位

小程序不需要写link标签来链接页面，可以自动寻找同名文件。

rpx全称responsiv pixel，相对像素，规定屏幕宽为750rpx。和物理像素比例会产生相应变化。rpx和px的比例有公式有：设一个设计稿，内含有一元素，

（元素 px）= （750 rpx）*（元素px）/（设计稿 px）

故当在设计元素的属性时，可以用属性calc来快速计算，举例：

#firstword{
    height: 200rpx;
    font-size: 40rpx;
    background-color: gold;
    width: calc(750px * 100 / 375);
    //iPhone6的屏幕宽为375px，设该元素的宽为100px
}

2、样式导入

wxss支持直接导入样式，关键字@import，仅支持相对路径。

@import "../../styles/common.wxss"

3、选择器

wxss不支持通配符*。

选择器	举例	描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element,element	view,checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

二、常用的组件

一些和web类似的组件，例如view和text等可以看这里快速进行查漏补缺。

1、图片（image）

1)、支持懒加载。

2)、图片加载有默认上限而且很小（2m），故一般需要图片时直接放在外网调用。

3)、图片默认的尺寸为宽度320px、高度为240px。

4)、关于图片的拉伸属性（mode），可以在官方文档进行查看。可以实现让图片以各种状态（截取宽或高，保持比例、不保持比例拉伸等）进行变换。

2、轮播图（swiper）

关键字swiper与swiper-item。

<swiper>里只能放入<swiper-item>，否则会报错。关键字可以查看这里，可自定义内容有纵/横向滑动，滑动动画等。

*在开发时我遇到了img无法加载的问题，~~初步判断是因为抓取图片的速度没有跟上小程序初始渲染的速度，暂时留存问题，待后续更改。~~ 实际上是微信小程序自身的bug，不支持某种格式的图片。

控制台报错

3、跳转组件（navigator）

关键字navigator，用于创建跳转块。

<navigator url="/pages/demo02/demo02">点击跳转</navigator>

属性看这里。一般抓url+相对地址进行跳转。

*在默认情况下不能跳转至绑定了tabbar的页面。可以在open-type属性设置switchTab。

跳转组件

跳转后的页面会有返回按钮

4、富文本（Rich-text）

关键属性nodes，多用于前端开放端口给后端，获取完整的divstyle。两种用法：

举例1：

const thingstyle =
`<div class="div_class">
  <h1>Title</h1>
  <p class="p">
    Life is&nbsp;<i>like</i>&nbsp;a box of
    <b>&nbsp;chocolates</b>.
  </p>
</div>
`
Page({
    data: {
        thingstyle
    }
})

js文件：通过创建对象来引入wxml初始数据

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

wxml

展示

举例2：

page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: #1AAD19;'
      },
      children: [{
        type: 'text',
        text: 'You never know what you\'re gonna get.'
      }]
    }]
  }
})

直接在page初始数据这里写入，但是不直观，尽量不用

官方文档。

5、按钮(button)

1）样式

关于样式，直接查看官方文档，或者自己在wxss里写，很简单。

当前小程序用的是新版组件V2，想自己调整button的大小可以在json文件里将"style": "v2"删除或改成v1，回退组件版本。

*小程序提供了一个有loading样式的图标，挺好看的：

2）开放能力

小程序的几个开放功能都是封装好的：

合法值	说明
contact	打开客服对话，可以在后台设置客服
share	转发（给朋友，不能转发至朋友圈）
*getPhoneNumber	获取手机号，但需非个人用企业微信号且完成认证，且需要绑定事件bindgetphonenumber回调来获取手机号。
*getUserInfo	这个值原先用于获取用户信息，但在2021.4.28后被官方回收了，现在只能获取到匿名信息。
*launchApp	跳转app，但是一个类似返回的功能，需要先从app跳转到小程序再从小程序跳回app。
openSetting	查看自己的授权，可以取消授权。
feedback	意见反馈。
chooseAvatar	获取用户头像，可以从bindchooseavatar回调中获取到头像信息。

*关于getUserInfo这个值，于小程序三次回收迭代后（真闲），于今（2022.3.28）改用getUserProfile()方法来执行获取用户信息，举例：

page({
    getUserProfile() {
        wx.getUserProfile({
            desc: "登录",
            //请求拉取用户数据时显示的内容
            success: (res) => {
                console.log(res);
            },
            //拉取成功
            fail: (res) => {
                console.log(res);
            },
            //拉取失败
        });
    }
})

关于getUserProfile()的五个属性：

属性	必填	用处
lang	否	显示用户使用的语言。只支持英简繁。
desc	是	声明获取用户个人信息后的用途，不超过30个字符。
success	否	接口调用成功的回调函数。
fail	否	接口调用失败的回调函数。
complete	否	接口调用完成后的回调函数。