广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序开发常用功能汇总
  • 866
分享到

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

2024-04-02 19:04:59 866人浏览 安东尼
摘要

目录获取用户信息获取手机号添加分享功能静态分享带参分享全局分享分享按钮页面跳转自定义组件定义全局组件设置默认顶部导航栏样式取消顶部默认的导航栏获取用户信息 调用 wx.getUser

获取用户信息

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

具体参数如下:

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

示例代码

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 接口调用结束的回调函数(调用成功、失败都会执行)

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 + '',
        "nonceStr": payInfo.nonceStr,
        "package": payInfo.package,
        "signType": "RSA",
        "paySign": payInfo.paySign,
        "success": function (res) {
          console.log(res, 'success');
          // 支付成功
          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: '分享标题',
                        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: '', // 当前显示图片的http链接
  urls: [] // 需要预览的图片http链接列表
})

页面跳转

跳转普通页面

wx.navigateTo({
    url: '',
})

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

跳转tabBar 页面

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

wx.switchTab({
  url: '/index'
})

自定义组件

在小程序中的组件和普通页面的 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"
}

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

到此这篇关于微信小程序开发常用功能的文章就介绍到这了,更多相关微信小程序开发内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 微信小程序开发常用功能汇总

本文链接: https://www.lsjlt.com/news/138883.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序开发常用功能汇总
    目录获取用户信息获取手机号添加分享功能静态分享带参分享全局分享分享按钮页面跳转自定义组件定义全局组件设置默认顶部导航栏样式取消顶部默认的导航栏获取用户信息 调用 wx.getUser...
    99+
    2022-11-13
  • 微信小程序开发常用功能点与使用方法总结
    在这里,我主要整理了一些小程序开发过程中常用的功能点,非常实用,下面来一看看看吧  1、获取高度宽度 var windowHeight = wx.getSystemIn...
    99+
    2022-11-12
  • 微信小程序如何开发微信支付功能
    本篇内容主要讲解“微信小程序如何开发微信支付功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序如何开发微信支付功能”吧!用户请求开发者后台,发起下单请求发起请求前在小程序端调用&nbs...
    99+
    2023-06-26
  • 开发微信小程序之HTTPS报错常见问题汇总及解决方法
    开发微信小程序之HTTPS报错常见问题汇总及解决方法今年年初,微信小程序正式上线,在微信的光芒照射下,微信小程序已经广为人知。从而越来越多的开发人员投身与微信小程序的开发工作中。在开发的过程中,总会碰到各种各样的情况。其中由于微信小程序要求...
    99+
    2023-06-04
  • 使用PHP开发微信小程序预约功能
    随着微信小程序的飞速发展,很多企业或个人开发者都开始将重心转向小程序开发。其中,预约功能是许多企业或个人开发者不可或缺的一项功能。本篇文章将基于PHP语言来介绍开发微信小程序预约功能的实现方法。一、准备开发环境在开始开发之前,需要准备以下开...
    99+
    2023-05-14
    PHP 微信小程序 预约功能
  • uni-app 开发微信小程序定位功能
    目录一、注册账号二、创建应用和Key1.进入控制台2.创建应用3.创建Key三、登录微信公众平台后台四、下载微信小程序JavaScriptSDK五、代码实现六、一般获取经纬度地址七、...
    99+
    2022-11-13
  • 【微信开发】微信小程序实现实时聊天功能
    最近在做一个项目,需要运用到实时聊天功能,分享一下。      分为: 界面如何布局以及细节; 如何实现实时更新; 全部代码展示;         一、界面如何布局以及细节:         1.说到底,聊天界面就是循环一个数组,每一行...
    99+
    2023-09-02
    微信小程序 小程序
  • 微信小程序部分面试题汇总
    1.小程序中如何进行接口请求?会不会跨域,为什么 微信小程序有自带的api接口,wx.request(); 不会跨域,因为微信小程序不是浏览器,没有同源策略的约束; wx.request({ url: 'https://xxxxxxx.c...
    99+
    2023-08-18
    微信小程序 小程序 javascript
  • 微信小程序 | 小程序开发
    🖥️ 微信小程序专栏:小程序开发 初级知识 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫...
    99+
    2023-09-08
    微信小程序 小程序
  • 微信小程序如何开发朋友圈功能
    这篇“微信小程序如何开发朋友圈功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序如何开发朋友圈功能”文章吧。一、开...
    99+
    2023-06-26
  • 微信小程序怎样开发摇一摇功能
    这篇文章给大家分享的是有关微信小程序怎样开发摇一摇功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。微信小程序摇一摇方法定义: let shakeInfo&n...
    99+
    2022-10-19
  • 微信小程序云开发实现搜索功能
    微信小程序云开发实现搜索功能,供大家参考,具体内容如下 微信小程序使用云开发实现搜索功能有两种情况,一种是简单的搜索用关键字来查询数据,另一种是模糊查询关于关键字的全部数据查询。废话...
    99+
    2022-11-13
  • 婚庆微信小程序开发要哪些功能
    这篇“婚庆微信小程序开发要哪些功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“婚庆微信小程序开发要哪些功能”文章吧。1、案...
    99+
    2023-06-27
  • 微信小程序购物车功能如何开发
    这篇“微信小程序购物车功能如何开发”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序购物车功能如何开发”文章吧。ind...
    99+
    2023-06-26
  • 如何用PHP开发微信小程序的直播功能?
    随着微信小程序的流行,越来越多的企业开始关注微信小程序的开发和推广。其中,直播功能是非常受欢迎的一种功能。本文将围绕如何使用PHP开发微信小程序的直播功能进行介绍,同时提供具体的代码示例。一、准备工作在开发微信小程序的直播功能之前,首先需要...
    99+
    2023-10-28
    PHP 微信小程序 直播功能
  • 如何用PHP开发微信小程序的登录功能?
    如何用PHP开发微信小程序的登录功能?微信小程序已成为越来越多企业和开发者选择的平台之一。为了让用户能够在小程序中使用个人信息或进行一些需要用户身份验证的操作,开发者需要实现登录功能。本文将介绍如何使用PHP开发微信小程序的登录功能,并提供...
    99+
    2023-10-26
    PHP 微信小程序 登录功能
  • 开发菜谱类微信小程序有什么功能
    小编给大家分享一下开发菜谱类微信小程序有什么功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1.菜谱展示相比以往的话,每次想要制作不会的菜品就必须要到百度搜索中去查询相关菜谱,但是这就需要花费大量的时间来查询了,而菜谱小...
    99+
    2023-06-27
  • 微信斗图小程序开发需要什么功能
    这篇文章主要讲解了“微信斗图小程序开发需要什么功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信斗图小程序开发需要什么功能”吧!  微信斗图小程序开发需要哪些功能  1、用户登录注册:对...
    99+
    2023-06-26
  • 微信小程序开发如何实现地图功能
    这篇文章主要讲解了“微信小程序开发如何实现地图功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序开发如何实现地图功能”吧!基本使用地图组件使用起来也很简单。.wxml<map...
    99+
    2023-06-26
  • 【微信小程序开发】第 7 课 - 小程序的常用组件
              欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 目录 1、缘起 2、小程序中组件的分类 3、常用的视图容器类组件  3.1、view 组件 3.2、scroll ...
    99+
    2023-09-23
    微信小程序
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作