微信小程序开发常用功能汇总（微信小程序开发功能介绍）

本文提供了微信小程序的相关知识。 我们主要介绍微信小程序开发的常用功能。 在本文中，我们将详细介绍示例代码，绝对对您的学习和工作有用。 我希望这对你有帮助。

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

获取用户信息

调用wx.getUserProfile方法创建一个基本的用户获取信息。 这只能在页面上生成单击事件后调用（例如，在按钮的绑定点击回调中）。 每个请求都会显示一个身份验证窗口，用户同意后返回。 userInfo

具体参数为：

属性类型 默认值 必填 说明 langstringen 是否显示用户信息的语言 descstring 是，不再，声明获取用户个人信息的目的。 30个字符 successfunction 无接口调用 使用成功回调函数 failedfunction 无调用失败回调函数的接口 Completefunction 无调用完成回调函数的接口（成功回调和失败回调均为 ）

示例代码

wx.getUserProfile({ desc: '用于完善用户的基本信息', // 声明检索用户个人信息的目的 30. 声明成功: (res) => { console.log(res.userInfo))

获取返回值

{ "nickName": "Qiuzi", //微信昵称 "gender": 0、“语言”：“zh_CN”、“城市”：“”、“省份”：“”、“国家”：“”、"avatarUrl": "https://thirdwx.qlogo.cn/mmopen/vi_32/qrSYVbDbBhunywgP5HTx4mhT8HVNzhmlibd8pfYo4guPJ5w/132" // Avatar} 获取手机号码 对小规模程序开放。 （海外法人除外）使用时请务必小心。 若用户频繁举报或发现小程序被用于不必要的场景，微信有权永久撤销该小程序的接口权限。

用法

必须将按钮组件open-type的值设置为getPhoneNumber。 用户单击接受后，您可以通过bindgetphonenumber事件回调检索动态令牌代码。 然后，将code传递给开发者后端，开发者后端调用微信后端提供的phonenumber.getPhoneNumber接口，使用code换取用户的手机号码。 每个代码的有效期为 5 分钟，且只能使用一次。

注意：getPhoneNumber 返回的代码和 wx.login 返回的代码具有不同的功能，不能混合使用。

代码示例

Page({ getPhoneNumber (e) { console.log(e.detail.code) }})

返回参数说明

参数类型描述的最低版本 codeString 动态令牌。 您可以用用户的手机号码交换动态令牌。 使用详情phonenumber.getPhoneNumber接口

接下来我们通过代码交换用户的手机号码。 每个代码只能使用一次，代码有效期为 5 分钟。

调用如下接口。

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", "pu rePhoneNumber": "xxxxxx" , “国家代码”：86，“水印”：{“时间戳”：1637744274，“appid”：“xxxx”} }}

微信实现Payment

调用微信支付的核心方法调用wx.requestPayment方法。 该方法的具体参数为：

属性类型默认值必填描述timeStampstring 是一个时间戳，即自开始以来的秒数。 从1970年1月1日00:00:00到现在，当前时间nonceStrstring是一个长度最多32个字符的随机字符串。 包字符串统一订单接口返回的prepay_id参数值。 发送格式为prepay_id=***signTypestringMD5等。 这仅适用于 v2 版本接口。 签名算法必须与后台下单时的值匹配。 HMAC-SHA256 仅适用于 v2 版本接口。 RSA 仅适用于 v3。 应用版本接口。 paySignstring 是签名。 更多信息请参考微信支付文档。 successfunction 否，接口调用成功的回调函数。 failfunction 否，这是接口调用失败时的回调函数。 completefunction 不是，是接口完成回调函数。 call (调用成功和失败均执行) /** * 微信支付方式 * @param {string } oderId 订单ID * @param {string} 订单总金额 * @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 => { // 请求支付 Get签名信息 Let payInfo = res.data // 调用微信支付 wx.requestPayment({ "timeStamp": payInfo.timeStamp + '', "nonceStr": payInfo.no​​nceStr, "package": payInfo.package, "signType": "RSA", "paySign": payInfo.paySign, "success s": function (res) { console.log(res, 'success'); // 支付成功解析( res) }, "FAIL": Function (ERR) {//支付失败被拒绝(err)}, "complete": function (res) { wx.hideLoading() } }) }) })}添加共享函数

在需要共享的页面中添加onShareAppMessage事件函数。如果您定义了该事件处理函数，则会使用该事件处理函数。只需要返回一个对象即可自定义传输的内容，右上角的菜单中会出现一个转发按钮。

onShareAppMessage方法的具体参数为：

字段说明默认值最低版本标题传输标题当前Applet 名称路径传输路径当前页面的路径。 必须以/开头。 imageUrl开头的完整路径可以是本地文件路径、代码包文件路径或网络图片路径。 支持 PNG 和 JPG。 显示图像的长宽比为5:4。 如果存在此参数，则使用默认屏幕截图 1.5.0promise。 ，解析结果优先。 如果3秒内没有解决，共享将使用2.12.0

中传递的默认参数退出。状态分享

示例代码

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

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

使用参数共享

共享没有参数。 可以直接动态添加参数到路径中，分享后用户点击时会触发onLoad。 该函数检索路径中的参数值。

// 分享 onShareAppMessage() { const that = this; return { title: that.data.goodInfo.goodName, // 动态获取商品名称路径: "pages/component/order erparticles/ orderparticles?id= + that.data.productId, // 动态传递当前商品ID imageUrl : that.data.background[0] // 获取商品的封面图片 }}

动态获取分享图片和标题后，每次分享都会显示不同的内容

全局共享

另外，你还可以添加全局共享功能

首先添加添加 onShareAppMessage 函数。 函数体的内容也可以为空。 如果函数体内容为空，则使用app.js中定义的默认共享方法。 如果您的函数返回一个对象，请使用自定义的共享函数。

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

Page({ /** * 当用户点击右上角时，分享 */ onShareAppMessage: function () {// 函数体内容可以为空 }})

然后，添加一个override app.js中的共享方法

//OverShare方法 overShare: function () { //间接实现共享内容的全局设置 wx.onAppRoute(function () { // 获取加载的页面 let pages = getCurrentPages(), // 获取当前对象页面 // 判断是否需要重写共享方法 if (!data.isOverShare) { data. isOverShare = true; { //重写共享设置 return { title: '共享标题', path: "/pages/index/index" // 分享页面的地址 函数内部调用该方法

onLaunch() { this.overShare()} 分享按钮

运行中 开发中，分享点击的问题分享按钮实现功能如下：

首先，将按钮添加到html中：必须等于 分享。这意味着点击此按钮将触发分享功能。 ] 按钮>

在js中添加onShareAppMessage函数。

效果如下：

获取用户的送货地址

获取用户的送货地址进行编辑，调用用户的原生接口并返回用户选择的地址。完成

wx.chooseAddress( { success(res) { console.log(res.userName) console.log(res.po) stalCode. ) 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 邮政编码 ProvinNamestring 国标收货地址一级地址 cityNamestring 国标收货地址 Address 二级地址 CountyNamestring 国标收货地址送货地址 第三级地址 streetNamest Ring 国家标准送货地址 第四级地址 DetailInfostring 收货地址详细信息（包括街道号码） DetailInfoNewstring 新建选择器 收货地址详细信息 NationalCodestring 收货地址国家代码 telNumberstring 收件人手机号码 errMsgstring 错误消息

图片预览

调用方式：wx.previewImage(Object对象）

在新页面上全屏预览图像。 在预览过程中，用户可以保存照片或将其发送给朋友。

属性类型默认值必需说明最低版本urlsArray。 是需要预览的图像链接列表。 从 2.2.3 开始支持云文件 ID。 showmenuboleantrue 是否显示长按菜单。 支持识别的代码：小程序代码。 仅小程序支持识别码：微信个人码、微信群码、企业微信个人码、企业微信群码、企业微信互通群码。 2.13.0currentstringurls 的第一个 URL 当前可见 链接到图像 ReferrerPolicystringno-referrer no Origin：发送完整的引荐来源网址。 no-referrer：不发送。 格式固定为https://servicewechat.com/{appid}/{version}/page-frame.html。 其中{appid}为小程序的appid，{version}为小程序的版本号。 小程序，版本号为0表示为开发版、试用版和审查版，版本号为 devtools。 显示为开发者工具，其余为官方版本。 2.13.0 successfunction 接口调用成功没有回调函数。 >示例代码

wx. previ ewImage({ current: '', // 当前显示图片的http链接 URL: [] // 需要预览的图片的http链接列表 }) 页面跳转

跳转到普通页面

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

保留当前页面并跳转到应用程序内的页面。 但是，我无法跳转到标签栏页面。 使用wx.navigateBack返回到原始页面。 小程序页面堆栈最多可达10级。

跳转到tabBar页面。

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

wx .switchTab({ url: '/index'}) 自定义组件 小程序的

组件和普通页面的js结构有很大不同。 结构如下。

//pages/TestComponent/test.jsComponent({ /** * 组件属性列表 */properties: { userName:"" }, * 组件初始数据: { * 组件方法列表Methods: { //获取从父组件传递的参数 getPropName(){ console.log(this.data.userName) } }})

在其中创建一个属性对象。组件 定义组件的属性列表。

接下来，在组件中添加一个触发 getPropName 的方法。

获取名称。

在您需要的页面上声明它。 要部署这个组件，请确定组件的名称和地址，后缀是json文件，并添加以下代码：

{ "usingComponents": { "test-component":"../TestComponent/test" }}

然后您可以像常规标签一样在页面中使用此组件并将数据传递给 Pass它到组件。

传递数据后，可以点击组件内部的按钮来获取父组件传递的值。

定义全局组件

组件定义完成。 如果您想全局使用您的组件，您可以定义它。 组件作为全局组件

首先，找到你的app.json文件，找到usingComponents，并添加你的组件的地址。

{ ...其他代码省略。 "usingComponents": { "test-component":"./ Pages/TestComponent/test" }}

声明完成后，就可以像使用标签一样全局使用该组件了

设置默认顶部导航栏样式

在app.json中添加以下代码

p>{ "Window": { "backgroundTextStyle": “灯光”、“导航栏背景颜色”t;: "#22a381", "navigationBarTitleText": "乐福健康", "navigationBarTextStyle": "white" }}

所有参数列表

属性类型 默认值说明 最低版本 NavigationBarBackgroundColorHexColor#000000导航栏背景颜色#0 00000 NavigationBarTextStylestring白色导航 栏标题颜色等。仅支持黑/白 NavigationBarTitleTextstring 导航栏标题文本内容 NavigationStylestringdefault 导航栏样式。 仅支持以下值： 默认默认样式自定义自定义导航栏。 仅保留右上角的胶囊按钮。 iOS/Android微信客户端7.0.0、Windows微信客户端不支持backgroundColorHexColor#ffffff窗口背景色。 backgroundTextStylestringdark 支持下拉加载样式，仅支持顶部窗口的深色/浅色背景颜色。 仅支持backgroundColorTopstring#ffffff 的背景颜色。 仅iOS支持微信客户端6.5。 16backgroundColorBottomstring#ffffff 底部窗口背景颜色。 仅iOS支持微信客户端6.5.16。 EnablePullDownRefreshbooleanfalse 是否启用当前页面下拉刷新。 有关详细信息，请参阅 Page.onPullDownRefresh。 onReachBottomDistancenumber50 页面下拉事件触发时距页面底部的距离（单次）位是 px。 有关详细信息，请参阅 Page.onReachBottom。 pageOrientationstring 垂直屏幕旋转设置，支持自动/纵向/横向，具体请参见支持显示区域变化。 2.4.0（自动）/2.5.0（水平）disableScrollbooleanfalse 设置为 true，页面无法完全向上或向下滚动。 仅在页面配置中有效，不能在app.json中使用ComponentsObject设置。 该页面没有自定义组件配置。 1.6.3InitialRenderingCachestring 页面初始渲染缓存配置，支持静态/动态2种。 11.1stylestringdefault 启用新版本的组件样式。 2.10.2singlePageObject 无单页模式相关设置 2.12.0restartStrategystringhomePage 重启策略设置 2.8.0

效果

顶部默认导航栏取消

找到页面的json文件，添加 "navigationStyle": "custom" 设置默认导航 去掉栏

{ " usingComponents": { }, "navigationStyle": "custom"}

添加自定义样式有如下效果

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

下载微信App

微信是一款支持通过手机网络发送语音消息、视频、照片和文字的移动通讯软件。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

这几篇文章你可能也喜欢：

• 微信小程序全局配置和页面配置详解（微信小程序全局变量如何设置）
• 微信小程序开发工具概述（微信小程序开发）
• 微信小程序实践项目富文本编辑器实现（uniapp小程序富文本编辑器）
• 微信小程序文本区域概述及输入问题（微信小程序Rich-Text）
• 微信小程序开发的宿主环境详解（微信小程序开发环境搭建流程）

本文由主机参考刊发，转载请注明：微信小程序开发常用功能汇总（微信小程序开发功能介绍） https://zhujicankao.com/140833.html