本篇文章给大家带来了关于微信小程序的相关知识,主要介绍了微信小程序开发常用功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,希望对大家有帮助。 ...
本篇文章给大家带来了关于微信小程序的相关知识,主要介绍了微信小程序开发常用功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,希望对大家有帮助。 【相关学习推荐:小程序学习教程】 获取用户信息调用 具体参数如下:
示例代码 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 组件 注: 代码示例 <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button> 登录后复制 Page({ getPhoneNumber (e) { console.log(e.detail.code) } }) 登录后复制 返回参数说明
然后通过 code 换取用户手机号。 每个code只能使用一次,code的有效期为5min 调用如下接口 POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN 登录后复制 请求参数
返回的 JSON 数据包
返回结果示例 { "errcode":0, "errmsg":"ok", "phone_info": { "phoneNumber":"xxxxxx", "purePhoneNumber": "xxxxxx", "countryCode": 86, "watermark": { "timestamp": 1637744274, "appid": "xxxx" } } } 登录后复制 实现微信支付 唤起微信支付的核心方法调用
/** * 微信支付方法 * @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() } }) }) }) } 登录后复制 添加分享功能在需要分享的分享的页面中添加
静态分享 示例代码 Page({ // 分享 onShareAppMessage() { return { title: "乐福健康", // 分享标题 path: "pages/newhome/index", // 分享地址路径 } } }) 登录后复制 添加完成后点击右上角胶囊按钮会分享图标会亮起 带参分享上面的分享是不带参数的,我们可以直接在路径中动态添加参数,分享后用户点击时会触发 // 分享 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] // 获取商品封面图 } } 登录后复制 动态获取分享图片和标题后我们每次分享时会出现不同内容 全局分享除此之外我们也可以添加全局分享功能 首先要在每个页面中添加 在需要被分享的页面添加如下代码 Page({ /** * 用户点击右上角分享 */ onShareAppMessage: function () { // 函数体内容为空即可 } }) 登录后复制 接着在 //重写分享方法 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() { this.overShare() } 登录后复制 分享按钮在开发中我们也会碰到点击分享按钮实现分享功能,实现代码如下 首先在 <!-- 分享按钮 --> <van-button type="primary" icon="share" round class="search" open-type="share" size="small"> 分享 </van-button> 登录后复制 之后要确保我们在 效果如下: 获取用户收货地址 获取用户收货地址。调起用户编辑收货地址原生界面,并在编辑完成后返回用户选择的地址。 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) } }) 登录后复制 参数说明
预览图片 调用方法: 在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。
示例代码 wx.previewImage({ current: '', // 当前显示图片的http链接 urls: [] // 需要预览的图片http链接列表 }) 登录后复制 页面跳转跳转普通页面 wx.navigateTo({ url: '', }) 登录后复制 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层 跳转tabBar 页面 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 wx.switchTab({ url: '/index' }) 登录后复制 自定义组件在小程序中的组件和普通页面的 // pages/TestComponent/test.js Component({ /** * 组件的属性列表 */ properties: { userName:"" }, * 组件的初始数据 data: { * 组件的方法列表 methods: { // 获取父组件传递过来的参数 getPropName(){ console.log(this.data.userName); } } }) 登录后复制 其中我们在 然后再组件中添加触发 <button bind:tap="getPropName">获取名称</button> 登录后复制 在我们需要引入这个组件的页面去声明这个组件的名称和地址,找到后缀为 { "usingComponents": { "test-component":"../TestComponent/test" } } 登录后复制 之后我们在页面中像使用普通标签一样使用这个组件,并且给组件传递数据 <test-component userName="张三"></test-component> 登录后复制 传递数据后我们即可实现点击组件中的按钮获取父组件传递过来的值 定义全局组件我们定义完组件后想要在全局使用,我们可以将这个组件定义为全局组件 首先找到项目中的 { ......省略其他代码 "usingComponents": { "test-component":"./pages/TestComponent/test" } } 登录后复制 声明完成后我们即可在全局像使用标签的方式使用该组件 设置默认顶部导航栏样式在 { "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#22a381", "navigationBarTitleText": "乐福健康", "navigationBarTextStyle": "white" } } 登录后复制 全部参数列表
效果 取消顶部默认的导航栏找到页面 { "usingComponents": { }, "navigationStyle":"custom" } 登录后复制 添加自定义样式后可以达到如下效果 【相关学习推荐:小程序学习教程】 以上就是微信小程序开发常用功能汇总的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章! |