微信小程序开发常用功能
获取用户信息
调用 wx.getUserProfile
方法获取用户基本信息。页面产生点击事件(例如 button
上 bindtap
的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 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
返回的 code
与 wx.login
返回的 code
作用是不一样的,不能混用。
代码示例
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
Page({getPhoneNumber (e) {console.log(e.detail.code)}
})
返回参数说明
参数 | 类型 | 说明 | 最低版本 |
---|---|---|---|
code | String | 动态令牌。可通过动态令牌换取用户手机号。使用方法详情 phonenumber.getPhoneNumber 接口 |
然后通过 code 换取用户手机号。 每个code只能使用一次,code的有效期为5min
调用如下接口
POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN
请求参数
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
access_token / cloudbase_access_token | string | 是 | 接口调用凭证 | |
code | string | 是 | 手机号获取凭证 |
返回的 JSON 数据包
属性 | 类型 | 说明 |
---|---|---|
errcode | number | 错误码 |
errmsg | string | 错误提示信息 |
phone_info | Object | 用户手机号信息 |
返回结果示例
{"errcode":0,"errmsg":"ok","phone_info": {"phoneNumber":"xxxxxx","purePhoneNumber": "xxxxxx","countryCode": 86,"watermark": {"timestamp": 1637744274,"appid": "xxxx"}}
}
实现微信支付
唤起微信支付的核心方法调用 wx.requestPayment
方法,该方法具体参数如下
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
timeStamp | string | 是 | 时间戳,从 1970 年 1 月 1 日 00:00:00 至今的秒数,即当前的时间 | |
nonceStr | string | 是 | 随机字符串,长度为32个字符以下 | |
package | string | 是 | 统一下单接口返回的 prepay_id 参数值,提交格式如:prepay_id=*** | |
signType | string |
MD5 仅在 v2 版本接口适用
|
否 | 签名算法,应与后台下单时的值一致 |
HMAC-SHA256 仅在 v2 版本接口适用
|
||||
RSA 仅在 v3 版本接口适用
|
||||
paySign | string | 是 | 签名,具体见微信支付文档 | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
/*** 微信支付方法* @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 + '',"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, // 动态传递当前商品idimageUrl: 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)}
})
参数说明
属性 | 类型 | 说明 |
---|---|---|
userName | string | 收货人姓名 |
postalCode | string | 邮编 |
provinceName | string | 国标收货地址第一级地址 |
cityName | string | 国标收货地址第二级地址 |
countyName | string | 国标收货地址第三级地址 |
streetName | string | 国标收货地址第四级地址 |
detailInfo | string | 详细收货地址信息(包括街道地址) |
detailInfoNew | string | 新选择器详细收货地址信息 |
nationalCode | string | 收货地址国家码 |
telNumber | string | 收货人手机号码 |
errMsg | string | 错误信息 |
预览图片
调用方法:wx.previewImage(Object object)
在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
urls | Array. | 是 | 需要预览的图片链接列表。2.2.3 起支持云文件ID。 | ||
showmenu | boolean | true | 否 | 是否显示长按菜单。 支持识别的码:小程序码 仅小程序支持识别的码:微信个人码、微信群码、企业微信个人码、 企业微信群码与企业微信互通群码; | 2.13.0 |
current | string | urls 的第一张 | 否 | 当前显示图片的链接 | |
referrerPolicy | string | no-referrer | 否 |
origin : 发送完整的referrer; no-referrer : 不发送。格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html ,其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版、体验版以及审核版本,版本号为 devtools 表示为开发者工具,其余为正式版本;
|
2.13.0 |
success | function | 否 | 接口调用成功的回调函数 | ||
fail | function | 否 | 接口调用失败的回调函数 | ||
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码
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"}
}
全部参数列表
属性 | 类型 | 默认值 | 描述 | 最低版本 |
---|---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 |
导航栏背景颜色,如 #000000
|
|
navigationBarTextStyle | string | white |
导航栏标题颜色,仅支持 black / white
|
|
navigationBarTitleText | string | 导航栏标题文字内容 | ||
navigationStyle | string | default |
导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航栏,只保留右上角胶囊按钮。
|
iOS/Android 微信客户端 7.0.0,Windows 微信客户端不支持 |
backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
backgroundTextStyle | string | dark |
下拉 loading 的样式,仅支持 dark / light
|
|
backgroundColorTop | string | #ffffff | 顶部窗口的背景色,仅 iOS 支持 | 微信客户端 6.5.16 |
backgroundColorBottom | string | #ffffff | 底部窗口的背景色,仅 iOS 支持 | 微信客户端 6.5.16 |
enablePullDownRefresh | boolean | false | 是否开启当前页面下拉刷新。 详见 Page.onPullDownRefresh | |
onReachBottomDistance | number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为px。 详见 Page.onReachBottom | |
pageOrientation | string | portrait |
屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化
|
2.4.0 (auto) / 2.5.0 (landscape) |
disableScroll | boolean | false |
设置为 true 则页面整体不能上下滚动。 只在页面配置中有效,无法在 app.json 中设置
|
|
usingComponents | Object | 否 | 页面自定义组件配置 | 1.6.3 |
initialRenderingCache | string |
页面初始渲染缓存配置,支持 static / dynamic
|
2.11.1 | |
style | string | default | 启用新版的组件样式 | 2.10.2 |
singlePage | Object | 否 | 单页模式相关配置 | 2.12.0 |
restartStrategy | string | homePage | 重新启动策略配置 | 2.8.0 |
效果
取消顶部默认的导航栏
找到页面 json
文件添加 "navigationStyle":"custom"
,即可去掉默认导航栏
{"usingComponents": {},"navigationStyle":"custom"
}
添加自定义样式后可以达到如下效果
微信小程序开发常用功能相关推荐
- 微信小程序开发编辑器功能常用快捷键整理
微信小程序开发编辑器功能常用快捷键整理 常用快捷键 Ctrl + L(选中当前行) Ctrl + Shift + L(选中所有匹配) Ctrl + D(选中匹配,按一次多选一个) Ctrl + U(回 ...
- 人才招聘微信小程序开发制作功能介绍
人才招聘微信小程序开发制作功能介绍 功能详情: 1.展示职位列表 2.展示简历列表 3.企业会员中心 4.个人会员中心展示 5.首页推荐企业广告位展示 6.职位详情展示 人才招聘微信小程序 企业入驻及 ...
- 在线刷题题库微信小程序开发制作功能介绍
在线刷题题库微信小程序开发制作功能介绍 1.题库大全:支持搜索查询各类课程试题答案. 2.多试题类型:支持单选题.多选题.判断题.问答题等多种类型. 3.批量导入:支持批量导入课程试题. 4.试题纠错 ...
- 微信小程序:常用功能5——在线客服功能的实现
微信小程序:常用功能5--在线客服功能的实现 微信小程序的客服功能比较纯熟,非常简单易用,只要在公众平台小程序账号中设置好相关客服人员,基本用户就能实现与客服人员的实时对话. 首先登陆微信公众平台小程 ...
- 微信小程序:常用功能8——小程序视频组件中的弹幕功能
微信小程序:常用功能8--小程序视频组件中的弹幕功能 昨天我们刚说了微信小程序的视频组件和分享功能微信小程序:常用功能8--在小程序添加视频组件,并将页面分享到朋友圈,今天想把弹幕功能说一下,但是感觉 ...
- 微信小程序开发常用的npm包
本篇主要介绍在微信小程序中使用 npm 包以及使用微信开发者工具开发微信小程序时最常用的 Vant Weapp 小程序 UI 组件库.miniprogram-api-promise 将 API Pro ...
- 问题上报随手拍微信小程序开发制作功能
创城进行时小程序微信小程序,包含"随手拍"功能,点位出现问题则"亮红灯",整改完毕销号出列后"亮绿灯",让"督导吹哨,部门报到&q ...
- 微信小程序开发常用知识
生命周期 应用的生命周期函数 onLaunch(Object object) 小程序初始化完成时触发,全局只触发一次.参数也可以使用 wx.getLaunchOptionsSync 获取. onSho ...
- 微信小程序全栈开发实践 第三章 微信小程序开发常用的API介绍及使用 -- 3.7 网络接口简介(七)学习EventChannel对象
零.回顾 在之前我们自定义实现picker-view组件的时候, 曾经使用过一个pop-up的自定义组件, 这个组件可以在底部滑入一个面板, 现在我们把登录按钮放在底部滑入的面板之上, 然后在完成登录 ...
- 微信小程序全栈开发实践 第三章 微信小程序开发常用的API介绍及使用 -- 3.6 网络接口简介(六)关于Page页面隐藏代码执行及Promise对象catch处理的补充
零.回顾 在上节课我们主要是基于 Promise 加 await.async关键字改写了登录模块代码, 但是我们在自动登录这一块的代码仍然有问题,这节课我们看一下, 如何在接口调用中实现微信用户的自动 ...
最新文章
- 皮一皮:论蓝朋友的拍摄技术
- 【Git】将 GitHub 工程设置为私有库 ( 登录账号 | 工程主页 | Settings | Danger Zone | Change visibility | Make private )
- python3 xml 取标签显示内容_如何应用“XML+XSLT”技术分离Web表示层数据和样式
- python 网页自动化框架_python+selenium自动化框架
- 25马5跑道,求最快的五匹马的需要比赛的次数
- 【Elasticsearch】不常用 length filer、ngram filter、trim filter、truncate filter、unique filter、synonym token
- Qt SizeHint()
- FFmpeg开发(十)——Qt 实现FFmpeg下载m3u8视频
- Web渗透测试实战:基于Metasploit 5.0
- 机器学习——LASSO算法
- 蓝桥02 等差素数列 ——数论知识
- python 管理windows客户端_Python管理Windows进程
- java中求平方函数和开方函数
- 提醒我 做学问要刨根究底
- 什么是TPS,什么是QPS?
- 电脑QQ正常上网但浏览器无法上网解决办法
- python中pd series_Python 数据处理(三)——pd.Series
- uniapp中的分享功能实现(APP,小程序,公众号)
- dongle 工具 蓝牙_bluetooth USB Dongle(蓝牙适配器)怎么用?
- AI聚变:寻找 2018 优秀人工智能应用案例
热门文章
- PS 模块BAPI新建修改项目、WBS、网络、作业 (二)
- mingw不能安装_C语言/C++初学——Visual Studio环境的安装配置与使用
- python 通配符用法,python - 通配符
- 企业为什么需要EDI?
- 马云留给阿里的财富:4个应用场景落地+90个区块链专利
- ImageNet ILSVRC2012数据集(分类部分)简要介绍和初步处理
- 【人工智能】人工智能二——遗传算法的基本概念遗传算法的基本算法(编码群体设定适应度函数选择交叉变异遗传算法步骤)解决带约束的函数优化问题多目标的遗传算法遗传算法的改进算法
- 烟雾检测模块ADPD188BI介绍与应用(一)
- Evernote推出实体笔记本Evernote Business Notebook,支持搜索手写笔记,用实体便签将笔记同步到Evernote上的相应分类
- 单行文本溢出省略以及多行文本溢出省略css实现方式