小程序：开发微信小程序中多选、自定义顶部栏、等十个重要的常见功能合集

本文链接：https://blog.youkuaiyun.com/weixin_43216105/article/details/108638763

这篇博客总结了微信小程序开发中常见的十个功能，包括使用本机字体、自定义透明顶部栏、拨打电话、获取用户信息、动态设置图片地址、一键复制内容、多选与重置功能、px与rpx单位、 vant-ui库的应用以及自定义组件的封装和调用。这些功能的实现有助于提升小程序的用户体验和开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序常见功能

前言
一、使用本机字体
二、自定义透明顶部栏
三、拨打电话
四、获取用户信息
五、动态设置图片地址
六、一键内容到剪切板，并关闭弹框提示
七、多选及重置功能：动态改变class
八、px及rpx
九、如何使用vant-ui库
十、如何使用自定义组件
- 10.1 封装 compontents/newsList
- 10.2 页面调用
结语

前言

总结下小程序开发中，拨打电话、自定义顶部栏、使用本机字体等常见功能整理；

一、使用本机字体

css中更改font-family；

.page{
   
	font-family:Monospaced Number,Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif!important;
}

二、自定义透明顶部栏

顶部栏透明可以显示轮播图及图片，这个功能在单页面和总页面都可以完成，在json文件中配置；

顶部栏透明可以显示轮播图及图片："navigationStyle": "custom";
navigationBarTitleText：导航栏文字
navigationBarTextStyle：标题颜色（black / white）
backgroundColor：胶囊按钮的颜色；
其他配置：微信小程序导航的配置

{
   
  "usingComponents": {
    },
  "backgroundTextStyle": "dark",
  "navigationStyle": "custom",
  "navigationBarTitleText": "小程序标题",
  "navigationBarTextStyle": "white"
}

三、拨打电话

官方提供了API

  callPhone() {
   
    wx.makePhoneCall({
   
      phoneNumber: '18100002222',
      success: function () {
   
        console.log('拨打成功')
      },
      fail: function () {
   
        console.log('拨打失败')
      },
    })
  },

四、获取用户信息

原本官方提供了API，但是新版目前版本，只能用按钮操作！直接调用API不生效，设置open-type="getUserInfo"及bindgetuserinfo="getUserInfo"就可获取到用户信息；

<button bindgetuserinfo="getUserInfo" open-type="getUserInfo">
	微信登录
</button>

展示页可以直接使用open-data展示，无需操作保存userInfo；
附：open-data中type 的合法值

<view class="isLogin" >
	头像：<open-data type="userAvatarUrl"></open-data>
    微信名：<open-data type="userNickName"></open-data>
</view>

五、动态设置图片地址

将路径绑定到data，中即可动态设置图片地址；

 <image src="{
    {qrCodePath}}" mode="widthFix" />

Page({
   
 data: {
   
   qrCodePath: '',
 },
 onLoad(){