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

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

本篇文章给大家带来了关于

微信小程序

的相关知识，主要介绍了微信小程序开发常用功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，希望对大家有帮助。

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

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

获取用户信息

具体参数如下：

示例代码

获取到的返回值

{ "nickName": "秋梓", // 微信昵称 "gender": 0, "language": "zh_CN", "city": "", "province": "", "country": "", "avatarUrl": "https://thirdwx.qlogo-/mmopen/vi_32/qrSYVbDbBhunywgP5HTx4mhT8HVNzhmlibd8pfYo4guPJ5w/132" // 头像}-

获取手机号

目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）。需谨慎使用，若用户举报较多或被发现在不必要场景下使用，微信有权永久回收该小程序的该接口权限。

使用方法

注：getPhoneNumber 返回的 code 与 wx.login 返回的 code 作用是不一样的，不能混用。

代码示例

-

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" } }}-

实现微信支付

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

/** * 微信支付方法 * @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 方法具体参数如下

静态分享

示例代码

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] // 获取商品封面图 }}-

动态获取分享图片和标题后我们每次分享时会出现不同内容

全局分享

除此之外我们也可以添加全局分享功能

首先要在每个页面中添加 onShareAppMessage 函数，函数体内容可以为空，如果函数体内容为空，则会使用我们在 app.js 中定义的默认分享方法，如果该函数返回了一个 object 则使用我们自定义的分享功能

在需要被分享的页面添加如下代码

接着在 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()}-

分享按钮

分享-

之后要确保我们在 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) }})-

参数说明

预览图片

调用方法：wx.previewImage(Object object)

在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

示例代码

wx.previewImage({ current: '', // 当前显示图片的http链接 urls: [] // 需要预览的图片http链接列表})-

页面跳转

跳转普通页面

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

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

跳转tabBar 页面

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

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

自定义组件

在小程序中的组件和普通页面的 js 结构有很大差异，结构如下

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

其中我们在 properties 对象中定义组件组件的属性列表

然后再组件中添加触发 getPropName 的方法

获取名称-

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

之后我们在页面中像使用普通标签一样使用这个组件,并且给组件传递数据

-

定义全局组件

我们定义完组件后想要在全局使用，我们可以将这个组件定义为全局组件

首先找到项目中的 app.json 文件，找到 usingComponents 添加组件地址

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

设置默认顶部导航栏样式

在 app.json 中添加如下代码

{ "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#22a381", "navigationBarTitleText": "乐福健康", "navigationBarTextStyle": "white" }}-

全部参数列表

效果

取消顶部默认的导航栏

找到页面 json 文件添加 "navigationStyle":"custom",即可去掉默认导航栏

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

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。