目录
获取用户信息
获取手机号
添加分享功能
带参分享
全局分享
分享按钮
页面跳转
自定义组件
定义全局组件
设置默认顶部导航栏样式
取消顶部默认的导航栏
首页 微信小程序 小程序开发 微信小程序开发常用功能汇总

微信小程序开发常用功能汇总

Aug 30, 2022 pm 01:56 PM
微信小程序

本篇文章给大家带来了关于微信小程序的相关知识,主要介绍了微信小程序开发常用功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,希望对大家有帮助。

微信小程序开发常用功能汇总

【相关学习推荐:小程序学习教程

获取用户信息

调用 wx.getUserProfile 方法获取用户基本信息。页面产生点击事件(例如 buttonbindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo

具体参数如下:

属性 类型 默认值 必填 说明
lang string en 显示用户信息的语言
desc string   声明获取用户个人信息后的用途,不超过30个字符
success function   接口调用成功的回调函数
fail function   接口调用失败的回调函数
complete function   接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

wx.getUserProfile({
    desc: '用于完善用户基本资料', // 声明获取用户个人信息后的用途,不超过30个字符
    success: (res) => {
        console.log(res.userInfo));
    }
})
登录后复制

获取到的返回值

{
  "nickName": "秋梓", // 微信昵称
  "gender": 0,
  "language": "zh_CN",
  "city": "",
  "province": "",
  "country": "",
  "avatarUrl": "https://thirdwx.qlogo.cn/mmopen/vi_32/qrSYVbDbBhunywgP5HTx4mhT8HVNzhmlibd8pfYo4guPJ5w/132" // 头像
}
登录后复制

获取手机号

目前该接口针对非个人开发者,且完成了认证的小程序开放(不包含海外主体)。需谨慎使用,若用户举报较多或被发现在不必要场景下使用,微信有权永久回收该小程序的该接口权限。

使用方法

需要将 button 组件 open-type 的值设置为 getPhoneNumber,当用户点击并同意之后,可以通过 bindgetphonenumber 事件回调获取到动态令牌code,然后把code传到开发者后台,并在开发者后台调用微信后台提供的 phonenumber.getPhoneNumber 接口,消费code来换取用户手机号。每个code有效期为5分钟,且只能消费一次。

注:getPhoneNumber 返回的 codewx.login 返回的 code 作用是不一样的,不能混用。

代码示例

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
登录后复制
Page({
  getPhoneNumber (e) {
    console.log(e.detail.code)
  }
})
登录后复制

返回参数说明

参数类型说明最低版本
codeString动态令牌。可通过动态令牌换取用户手机号。使用方法详情 phonenumber.getPhoneNumber 接口

然后通过 code 换取用户手机号。 每个code只能使用一次,code的有效期为5min

调用如下接口

POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN
登录后复制

请求参数

属性类型默认值必填说明
access_token / cloudbase_access_tokenstring 接口调用凭证
codestring 手机号获取凭证

返回的 JSON 数据包

属性类型说明
errcodenumber错误码
errmsgstring错误提示信息
phone_infoObject用户手机号信息

返回结果示例

{
    "errcode":0,
    "errmsg":"ok",
    "phone_info": {
        "phoneNumber":"xxxxxx",
        "purePhoneNumber": "xxxxxx",
        "countryCode": 86,
        "watermark": {
            "timestamp": 1637744274,
            "appid": "xxxx"
        }
    }
}
登录后复制

实现微信支付

唤起微信支付的核心方法调用 wx.requestPayment 方法,该方法具体参数如下

属性类型默认值必填说明
timeStampstring 时间戳,从 1970 年 1 月 1 日 00:00:00 至今的秒数,即当前的时间
nonceStrstring 随机字符串,长度为32个字符以下
packagestring 统一下单接口返回的 prepay_id 参数值,提交格式如:prepay_id=***
signTypestringMD5 仅在 v2 版本接口适用签名算法,应与后台下单时的值一致
HMAC-SHA256 仅在 v2 版本接口适用
RSA 仅在 v3 版本接口适用
paySignstring 签名,具体见微信支付文档
successfunction 接口调用成功的回调函数
failfunction 接口调用失败的回调函数
completefunction 接口调用结束的回调函数(调用成功、失败都会执行)
/**
 * 微信支付方法
 * @param {string} oderId 订单id
 * @param {string} total 订单金额
 * @param {stromg} openId 登陆人openid
 */
function weixinPayFun(data) {
  wx.showLoading({
    mask: true
  })
  const http = new Http()
  return new Promise((resolve, reject) => {
    // 请求支付接口
    http.post(`${env.fayongApi}/app/shopping/order/pay`, data).then(res => {
      // 获取支付签名信息
      let payInfo = res.data
      // 调起微信支付
      wx.requestPayment({
        "timeStamp": payInfo.timeStamp + &#39;&#39;,
        "nonceStr": payInfo.nonceStr,
        "package": payInfo.package,
        "signType": "RSA",
        "paySign": payInfo.paySign,
        "success": function (res) {
          console.log(res, &#39;success&#39;);
          // 支付成功
          resolve(res)
        },
        "fail": function (err) {
          // 支付失败
          reject(err)
        },
        "complete": function (res) {
          wx.hideLoading()
        }
      })
    })
  })
}
登录后复制

添加分享功能

在需要分享的分享的页面中添加 onShareAppMessage 事件函数,此事件处理函数需要 return 一个 Object,用于自定义转发内容,只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮

onShareAppMessage 方法具体参数如下

字段说明默认值最低版本
title转发标题当前小程序名称
path转发路径当前页面 path ,必须是以 / 开头的完整路径
imageUrl自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。使用默认截图1.5.0
promise如果该参数存在,则以 resolve 结果为准,如果三秒内不 resolve,分享会使用上面传入的默认参数 2.12.0

静态分享

示例代码

Page({
    // 分享
    onShareAppMessage() {
        return {
            title: "乐福健康", // 分享标题
            path: "pages/newhome/index", // 分享地址路径
        }
    }
})
登录后复制

添加完成后点击右上角胶囊按钮会分享图标会亮起

带参分享

上面的分享是不带参数的,我们可以直接在路径中动态添加参数,分享后用户点击时会触发 onLoad 函数获取路径中的参数值

// 分享
onShareAppMessage() {
    const that = this;
    return {
        title: that.data.goodInfo.goodName, // 动态获取商品名称
        path: "pages/component/orderparticulars/orderparticulars?id=" + that.data.productId, // 动态传递当前商品id
        imageUrl: that.data.background[0] // 获取商品封面图
    }
}
登录后复制

动态获取分享图片和标题后我们每次分享时会出现不同内容

全局分享

除此之外我们也可以添加全局分享功能

首先要在每个页面中添加 onShareAppMessage 函数,函数体内容可以为空,如果函数体内容为空,则会使用我们在 app.js 中定义的默认分享方法,如果该函数返回了一个 object 则使用我们自定义的分享功能

在需要被分享的页面添加如下代码

Page({
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
		// 函数体内容为空即可
    }
})
登录后复制

接着在 app.js 中添加重写分享方法

//重写分享方法
overShare: function () {
    //间接实现全局设置分享内容
    wx.onAppRoute(function () {
        //获取加载的页面
        let pages = getCurrentPages(),
            //获取当前页面的对象
            view = pages[pages.length - 1],
            data;
        if (view) {
            data = view.data;
            // 判断是否需要重写分享方法
            if (!data.isOverShare) {
                data.isOverShare = true;
                view.onShareAppMessage = function () {
                    //重写分享配置
                    return {
                        title: &#39;分享标题&#39;,
                        path: "/pages/index/index"    //分享页面地址
                    };
                }
            }
        }
    })
},
登录后复制

然后在 onLaunch 函数中调用该方法

onLaunch() {
    this.overShare()
}
登录后复制

分享按钮

在开发中我们也会碰到点击分享按钮实现分享功能,实现代码如下

首先在 html 中添加 button 按钮。其中 open-typ 要等于 share,表示点击这个按钮注定触发分享函数

<!-- 分享按钮 -->
<van-button type="primary" icon="share" round class="search" open-type="share" size="small">
    分享
</van-button>
登录后复制

之后要确保我们在 js 中添加了 onShareAppMessage 函数

效果如下:

获取用户收货地址

获取用户收货地址。调起用户编辑收货地址原生界面,并在编辑完成后返回用户选择的地址。

wx.chooseAddress({
    success(res) {
        console.log(res.userName)
        console.log(res.postalCode)
        console.log(res.provinceName)
        console.log(res.cityName)
        console.log(res.countyName)
        console.log(res.detailInfo)
        console.log(res.nationalCode)
        console.log(res.telNumber)
    }
})
登录后复制

参数说明

属性类型说明
userNamestring收货人姓名
postalCodestring邮编
provinceNamestring国标收货地址第一级地址
cityNamestring国标收货地址第二级地址
countyNamestring国标收货地址第三级地址
streetNamestring国标收货地址第四级地址
detailInfostring详细收货地址信息(包括街道地址)
detailInfoNewstring新选择器详细收货地址信息
nationalCodestring收货地址国家码
telNumberstring收货人手机号码
errMsgstring错误信息

预览图片

调用方法:wx.previewImage(Object object)

在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

属性类型默认值必填说明最低版本
urlsArray. 需要预览的图片链接列表。2.2.3 起支持云文件ID。
showmenubooleantrue是否显示长按菜单。 支持识别的码:小程序码 仅小程序支持识别的码:微信个人码、微信群码、企业微信个人码、 企业微信群码与企业微信互通群码;2.13.0
currentstringurls 的第一张当前显示图片的链接
referrerPolicystringno-referrerorigin: 发送完整的referrer; no-referrer: 不发送。格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版、体验版以及审核版本,版本号为 devtools 表示为开发者工具,其余为正式版本;2.13.0
successfunction 接口调用成功的回调函数
failfunction 接口调用失败的回调函数
completefunction 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

wx.previewImage({
  current: &#39;&#39;, // 当前显示图片的http链接
  urls: [] // 需要预览的图片http链接列表
})
登录后复制

页面跳转

跳转普通页面

wx.navigateTo({
    url: &#39;&#39;,
})
登录后复制

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层

跳转tabBar 页面

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

wx.switchTab({
  url: &#39;/index&#39;
})
登录后复制

自定义组件

在小程序中的组件和普通页面的 js 结构有很大差异,结构如下

// pages/TestComponent/test.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        userName:""
    },

     * 组件的初始数据
    data: {
     * 组件的方法列表
    methods: {
        // 获取父组件传递过来的参数
        getPropName(){
            console.log(this.data.userName);
        }
    }
})
登录后复制

其中我们在 properties 对象中定义组件组件的属性列表

然后再组件中添加触发 getPropName 的方法

<button bind:tap="getPropName">获取名称</button>
登录后复制

在我们需要引入这个组件的页面去声明这个组件的名称和地址,找到后缀为 json 的文件,添加如下代码

{
  "usingComponents": {
    "test-component":"../TestComponent/test"
  }
}
登录后复制

之后我们在页面中像使用普通标签一样使用这个组件,并且给组件传递数据

<test-component userName="张三"></test-component>
登录后复制

传递数据后我们即可实现点击组件中的按钮获取父组件传递过来的值

定义全局组件

我们定义完组件后想要在全局使用,我们可以将这个组件定义为全局组件

首先找到项目中的 app.json 文件,找到 usingComponents 添加组件地址

{
    ......省略其他代码
    "usingComponents": {
        "test-component":"./pages/TestComponent/test"
    }
}
登录后复制

声明完成后我们即可在全局像使用标签的方式使用该组件

设置默认顶部导航栏样式

app.json 中添加如下代码

{
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#22a381",
        "navigationBarTitleText": "乐福健康",
        "navigationBarTextStyle": "white"
    }
}
登录后复制

全部参数列表

属性类型默认值描述最低版本
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 #000000
navigationBarTextStylestringwhite导航栏标题颜色,仅支持 black / white
navigationBarTitleTextstring 导航栏标题文字内容
navigationStylestringdefault导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航栏,只保留右上角胶囊按钮。iOS/Android 微信客户端 7.0.0,Windows 微信客户端不支持
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStylestringdark下拉 loading 的样式,仅支持 dark / light
backgroundColorTopstring#ffffff顶部窗口的背景色,仅 iOS 支持微信客户端 6.5.16
backgroundColorBottomstring#ffffff底部窗口的背景色,仅 iOS 支持微信客户端 6.5.16
enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新。 详见 Page.onPullDownRefresh
onReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离,单位为px。 详见 Page.onReachBottom
pageOrientationstringportrait屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化2.4.0 (auto) / 2.5.0(landscape)
disableScrollbooleanfalse设置为 true 则页面整体不能上下滚动。 只在页面配置中有效,无法在 app.json 中设置
usingComponentsObject页面自定义组件配置1.6.3
initialRenderingCachestring 页面初始渲染缓存配置,支持 static / dynamic2.11.1
stylestringdefault启用新版的组件样式2.10.2
singlePageObject单页模式相关配置2.12.0
restartStrategystringhomePage重新启动策略配置2.8.0

效果

取消顶部默认的导航栏

找到页面 json 文件添加 "navigationStyle":"custom",即可去掉默认导航栏

{
  "usingComponents": {
      
  },
  "navigationStyle":"custom"
}
登录后复制

添加自定义样式后可以达到如下效果

【相关学习推荐:小程序学习教程

以上是微信小程序开发常用功能汇总的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

闲鱼微信小程序正式上线 闲鱼微信小程序正式上线 Feb 10, 2024 pm 10:39 PM

闲鱼官方微信小程序悄然上线,在小程序中可以发布闲置与买家/卖家私信交流、查看个人资料及订单、搜索物品等,有用好奇闲鱼微信小程序叫什么,现在快来看一下。闲鱼微信小程序叫什么答案:闲鱼,闲置交易二手买卖估价回收。1、在小程序中可以发布闲置、与买家/卖家私信交流、查看个人资料及订单、搜索指定物品等功能;2、在小程序的页面中有首页、附近、发闲置、消息、我的5项功能;3、想要使用的话必要要开通微信支付才可以购买;

微信小程序实现图片上传功能 微信小程序实现图片上传功能 Nov 21, 2023 am 09:08 AM

微信小程序实现图片上传功能随着移动互联网的发展,微信小程序已经成为了人们生活中不可或缺的一部分。微信小程序不仅提供了丰富的应用场景,还支持开发者自定义功能,其中包括图片上传功能。本文将介绍如何在微信小程序中实现图片上传功能,并提供具体的代码示例。一、前期准备工作在开始编写代码之前,我们需要先下载并安装微信开发者工具,并注册成为微信开发者。同时,还需要了解微信

闲鱼微信小程序叫什么 闲鱼微信小程序叫什么 Feb 27, 2024 pm 01:11 PM

闲鱼官方微信小程序已经悄然上线,它为用户提供了一个便捷的平台,让你可以轻松地发布和交易闲置物品。在小程序中,你可以与买家或卖家进行私信交流,查看个人资料和订单,以及搜索你想要的物品。那么闲鱼在微信小程序中究竟叫什么呢,这篇教程攻略将为您详细介绍,想要了解的用户们快来跟着本文继续阅读吧!闲鱼微信小程序叫什么答案:闲鱼,闲置交易二手买卖估价回收。1、在小程序中可以发布闲置、与买家/卖家私信交流、查看个人资料及订单、搜索指定物品等功能;2、在小程序的页面中有首页、附近、发闲置、消息、我的5项功能;3、

实现微信小程序中的下拉菜单效果 实现微信小程序中的下拉菜单效果 Nov 21, 2023 pm 03:03 PM

实现微信小程序中的下拉菜单效果,需要具体代码示例随着移动互联网的普及,微信小程序成为了互联网开发的重要一环,越来越多的人开始关注和使用微信小程序。微信小程序的开发相比传统的APP开发更加简便快捷,但也需要掌握一定的开发技巧。在微信小程序的开发中,下拉菜单是一个常见的UI组件,实现了更好的用户操作体验。本文将详细介绍如何在微信小程序中实现下拉菜单效果,并提供具

如何使用PHP开发微信小程序的二手交易功能? 如何使用PHP开发微信小程序的二手交易功能? Oct 27, 2023 pm 05:15 PM

如何使用PHP开发微信小程序的二手交易功能?微信小程序作为一种热门的移动应用开发平台,被越来越多的开发者所使用。在微信小程序中,二手交易是一种常见的功能需求。本文将介绍如何使用PHP开发微信小程序的二手交易功能,并提供具体的代码示例。一、准备工作在开始开发前,需要先确保已具备以下条件:微信小程序的开发环境已搭建完成,包括注册小程序的AppID,并在小程序后台

使用微信小程序实现轮播图切换效果 使用微信小程序实现轮播图切换效果 Nov 21, 2023 pm 05:59 PM

使用微信小程序实现轮播图切换效果微信小程序是一种轻量级的应用程序,具有简单、高效的开发和使用特点。在微信小程序中,实现轮播图切换效果是常见的需求。本文将介绍如何使用微信小程序实现轮播图切换效果,并给出具体的代码示例。首先,在微信小程序的页面文件中,添加一个轮播图组件。例如,可以使用&lt;swiper&gt;标签来实现轮播图的切换效果。在该组件中,可以通过b

实现微信小程序中的图片滤镜效果 实现微信小程序中的图片滤镜效果 Nov 21, 2023 pm 06:22 PM

实现微信小程序中的图片滤镜效果随着社交媒体应用的流行,人们越来越喜欢在照片中应用滤镜效果,以增强照片的艺术效果和吸引力。在微信小程序中也可以实现图片滤镜效果,为用户提供更多有趣和创造性的照片编辑功能。本文将介绍如何在微信小程序中实现图片滤镜效果,并提供具体的代码示例。首先,我们需要在微信小程序中使用canvas组件来加载和编辑图片。canvas组件可以在页面

实现微信小程序中的图片旋转效果 实现微信小程序中的图片旋转效果 Nov 21, 2023 am 08:26 AM

实现微信小程序中的图片旋转效果,需要具体代码示例微信小程序是一种轻量级的应用程序,为用户提供了丰富的功能和良好的用户体验。在小程序中,开发者可以利用各种组件和API来实现各种效果。其中,图片旋转效果是一种常见的动画效果,可以为小程序增添趣味性和视觉效果。在微信小程序中实现图片旋转效果,需要使用小程序提供的动画API。下面是一个具体的代码示例,展示了如何在小程

See all articles