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

本文为大家带来关于微信小程序的知识，主要介绍微信小程序开发的常用功能。本文通过示例代码为您做了非常详细的介绍，对您的学习或工作有一定的参考价值，希望对您有所帮助。

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

获取用户信息调用wx.getUserProfile方法获取用户基本信息。它只能在页面单击事件(如按钮上bindtap的回调)生成后调用。每个请求都会弹出一个授权窗口，用户同意后会返回userInfo。

具体参数如下:

type default value required description lang string en No language for display user information descstring的目的是声明获取用户的个人信息，并且不超过30个字符。成功函数无接口调用成功的回调函数失败函数无接口调用失败的回调函数完成函数无接口调用结束的回调函数(成功和失败的调用都将被执行)

示例代码

wx . get user profile({ desc:& # 039；用于完善用户的基本信息& # 039；，//获取用户个人信息后声明用途，不超过30个字符成功:(RES)= > >；{ console . log(RES . userinfo))；}})获得的返回值。

{ & quot昵称& quot:& quot秋”，//微信昵称“性别& quot:0，& quot语言& quot:& quotzh _ CN & quot，& quot城市& quot:& quot"，& quot省& quot:& quot"，& quot国家& quot:& quot"，& quotavatarUrl & quot:& quothttps://third wx . qlogo . cn/mmopen/VI _ 32/qrsyvbdbbhunywgp 5 htx 4 MHT 8 hvnzhmlibd 8 pfyo 4 gupj 5 w/132 & quot；//头像}获取手机号。目前该接口面向非个人开发者，认证小程序开放(不含海外实体)。小心使用。如果用户举报较多或者被发现在不必要的场景下使用，微信有权永久收回小程序的接口权限。

施用方式

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

注意:getPhoneNumber返回的代码与wx.login返回的代码不同，不能混用。

代码示例

& lt按钮打开-type = & quot；getPhoneNumber & quotbindgetphonenumber = & quotgetPhoneNumber & quot& gt& lt/button & gt；page({ getphonenumber(e){ console . log(e . detail . code)} })返回参数描述。

参数描述最低版本代码字符串动态令牌。用户的手机号码可以通过动态令牌进行交换。使用方法details phone number . getphone number接口。

然后用代码换取用户的手机号。每个代码只能使用一次，代码有效期为5min。

调用以下接口

https://api.weixin.qq.com/wxa/business/getuserphonenumber?后访问令牌=访问令牌请求参数

属性默认值必填说明:access _ token/cloudbase _ access _ token string为接口调用凭证，codestring为手机号获取凭证。

由返回的JSON数据包

属性描述errcodenumber错误代码errmsgstring错误消息phone_infoObject用户的手机号码信息

返回结果示例

{ & quot错误代码& quot:0，& quoterrmsg & quot:& quot好的& quot，& quot电话信息& quot:{ & quot电话号码& quot:& quotxxxxxx & quot，& quot纯电话号码& quot:& quotxxxxxx & quot，& quot国家代码& quot:86，& quot水印& quot:{ & quot时间戳& quot:1637744274，& quotappid & quot:& quotxxxx & quot}}}实现微信支付

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

Type default value必选说明timeStampstring是时间戳，即自1970年1月1日00:00:00开始的秒数，即当前时间。nonceStrstring是长度小于32个字符的随机字符串。packagestring是统一订购接口返回的prepay_id参数值。提交格式如下:prepay_id=***signTypestringMD5。无签名算法只适用于v2版本接口，应该与后台顺序的值一致。HMAC-SHA256只适用于v2版本接口，RSA只适用于v3版本接口。paySignstring是签名。详见微信支付单据成功函数号、接口调用成功的回调函数failfunction号、接口调用失败的回调函数completefunction号、接口调用结束的回调函数(成功和失败的调用都会执行)。

/* * *微信支付方式* @param {string} oderId订单id * @param {string}订单总金额* @param {stromg} openId登录openId */function weixinpayfun(data){ wx . show loading({ mask:true })const Http = new Http()return new Promise((resolve，reject)= & gt；{//请求支付接口http . post(` $ { env . fayong API }/app/shopping/order/pay `，data)。然后(RES = >；{//获取支付签名信息let payInfo = res.data //调出微信支付wx . request payment({ " timeStamp & quot；:payinfo . timestamp+& # 039；'，& quot非中心& quot:payInfo.nonceStr，& quot包& quot:payInfo.package，& quotsignType & quot:& quotRSA & quot，& quotpaySign & quot:payInfo.paySign，& quot成功& gt；:function (res) { console.log(res，& # 039；成功& # 039；);//支付成功解析(res) }，" fail & quot:function (err) {//支付失败拒绝(err)} " complete & quot；:function(RES){ wx . hide loading()} } }添加共享函数将onShareAppMessage事件函数添加到需要共享的页面中。这个事件处理程序需要返回一个对象来定制转发内容。只有定义了这个事件处理程序，右上角菜单才会显示“前进”按钮。

onShareAppMessage方法的具体参数如下

描述字段默认值最低版本标题转发标题当前小程序名称路径转发路径当前页面路径必须是以/开头的完整路径imageUrl自定义图像路径，可以是本地文件路径、代码包文件路径或网络图像路径。支持巴布亚新几内亚和JPG。显示图片的纵横比为5:4。使用默认截图1 . 5 . 0承诺，如果该参数存在，以解决结果为准。如果三秒钟内没有解决，共享将使用上面传入的默认参数2.12.0。

静态共享

示例代码

page({//shareonsharappmessage(){ return { title:“乐福健康”，//共享标题路径:“pages/new home/index & quot；，//共享地址路径}}})添加完毕后，点击右上角的胶囊按钮，共享图标就会亮起。

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

//shareonsharappmessage(){ const that = this；return { title:that . data . goodinfo . goodname，//动态获取商品名称路径:" pages/component/order details/order details？id = & quot+that.data.productId，//动态传递当前产品id imageurl:that . data . background。

全局共享另外，我们还可以添加全局共享功能。

首先，要给每个页面添加onShareAppMessage函数，函数体内容可以为空。如果函数体内容为空，将使用app.js中定义的默认共享方法，如果函数返回对象，将使用我们的自定义共享函数。

将以下代码添加到需要共享的页面中

Page({ /** *用户点击右上角分享*/onshareappmessage:function(){//函数体内容可以为空}})然后在app.js中添加重写分享方法

//覆盖共享方法overShare: function () {//间接实现共享内容的全局设置wx.onAppRoute(function () {//获取加载的页面let pages = getCurrentPages()，//获取当前页面的对象view = pages。

获取用户的送货地址。

获取用户的送货地址。调用用户原生界面编辑接收地址，编辑后返回用户选择的地址。

wx . choose address({ success(RES){ console . log(RES . username)console . log(RES . postal code)console . log(RES . province name)console . log(RES . city name)console . log(RES . county name)console . log(RES . detail info)console . log(RES . national code)console . log(RES . tel number)}))

属性描述userNamestring收货人姓名邮政编码省名string GB收货地址级别1地址cityNamestring GB收货地址级别2地址countyNamestring GB收货地址级别3地址streetNamestring GB收货地址级别4地址DetailInfostring详细收货地址信息(包括街道地址)detailInfoNewstring新选择器详细收货地址信息national codestring收货地址国家代码telNumberstring收货人的手机号码errMsgstring错误消息

预览图片

方法:wx.previewImage(Object对象)

在新页面中全屏预览图片。在预览过程中，用户可以保存图片并发送给朋友。

键入所需默认值描述最低版本URL数组。是要预览的图片链接列表。2.2.3支持云文件ID。是否显示长按菜单。识别代码:小程序代码只有小程序支持识别代码:微信个人代码、微信群代码、企业微信个人代码、企业微信群代码、企业微信互通群代码；2 . 13 . 0 currentstringurls的第一个编号，当前显示图片的链接，referrer PolicyStringNo -referrer No origin:发送完整的referrer；-推荐人:不发。格式固定为https://service watch . com/{appid}/{version}/page -frame . html，其中{ appid }为小程序的appid，{ version }为小程序的版本号，版本号0表示开发版、体验版、审核版，devtools的版本号表示开发者工具，其余为正式版；2 . 13 . 0成功函数无接口调用成功回调函数失败函数无接口调用失败回调函数完成函数无接口调用完成回调函数(将执行成功和失败的调用)

示例代码

wx . preview image({ current:& # 039；'，//当前显示图片的http链接URL:

取消顶部的默认导航栏，找到页面json文件Add & quot navigationStyle & quot:& quot自定义& quot您可以删除默认的导航栏。

{ & quot使用组件& quot:{ }，& quot导航样式& quot:& quot自定义& quot}添加自定义样式后，可以达到以下效果

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

前端(vue)入门到精通课程:立即学习