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

首页 2024-07-09 07:38:54

本文为您带来了微信小程序的相关知识，主要介绍了微信小程序开发的常用功能。本文通过实例代码向您详细介绍，对您的学习或工作具有一定的参考价值，希望对您有所帮助。

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

获取用户信息

调用 wx.getUserProfile 获取用户基本信息的方法。页面产生点击事件(例如 button 上 bindtap 只有在回调中）后才能调用。授权窗口将在每个请求中弹出。用户同意后返回 userInfo

具体参数如下：

属性类型默认值必填说明 lang string en 否语言显示用户信息 desc string ? 是声明获取用户个人信息后的用途，不超过30个字符 success function ? 否接口调用成功的回调函数 fail function ? 否接口调用失败的回调函数 complete function ? 否接口调用结束的回调函数(调用成功或失败都会执行)

示例代码

wx.getUserProfile({
    desc: &#39;用于完善用户基本数据&#39;, // 声明获取用户个人信息后的用途，不超过30个字符
    success: (res) => {
        console.log(res.userInfo));
    }
})

获得的返回值

{
  "nickName": "秋梓", // 微信昵称
  "gender": 0,
  "language": "zh_CN",
  "city": "",
  "province": "",
  "country": "",
  "avatarUrl": "https://thirdwx.qlogo.cn/mmopen/vi32/qrSYVbDBhunywgP5HTx4mhT8HVNzhmlibd8pfYo4guPJ5w/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)
  }
})

返回参数说明

参数类型说明最低版本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 是签名，详见微信支付文档successfunctionction 否接口调用成功的回调函数failfunction completefunction，否接口调用失败的回调函数否定接口调用回调函数结束(调用成功或失败将执行)

/**
 * 微信支付方式
 * @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   &#39;&#39;,
        "nonceStr": payInfo.nonceStr,
        "package": payInfo.package,
        "signType": "RSA",
        "paySign": payInfo.paySign,
        "success": function (res) {
          console.log(res, &#39;success&#39;);
          // 支付成功
          resolve(res)
        },
        "fail": function (err) {
          // 支付失败
          reject(err)
        },
        "complete": function (res) {
          wx.hideLoading()
        }
      })
    })
  })
}

添加共享功能

添加到需要共享的页面中 onShareAppMessage 事件函数，事件处理函数需要 return 一个 Object，用于定制转发内容，只有定义事件处理函数，右上角的菜单才会显示“转发”按钮

onShareAppMessage 具体参数如下

字段说明默认值最低版本title转发标题目前的小程序名称当前页面页面转发路径 path ，必须是以 / 开头的完整路径 imageurl自定义图片路径，可以是本地文件路径、代码包文件路径或网络图片路径。支持PNG和JPG。显示图片的长宽比是 5:4。使用默认截图1.5.如果0promise存在于此参数中，则以此为准 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, // 动态传递当前商品idid
        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: &#39;分享标题&#39;,
                        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)
    }
})

参数说明

属性类型说明postalCodestring邮编provinceNamestring国家标准收货地址cityNamestring国家标准收货地址countyNamestring国家标准收货地址countyNamestring国家标准收货地址第三级地址streetNamestring国家标准收货地址第四级地址detailInfostring详细收货地址信息(包括街道地址)detailInfoNewstring

预览图片

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

在新页面上全屏预览图片。用户可以在预览过程中保存图片并发送给朋友。

属性类型默认值必填说明最低版本urlsArray. 这是一个需要预览的图片链接列表。2.2.3 支持云文件ID。 showmenubooleantrue是否显示长按菜单。支持识别码：小程序码只有小程序支持识别码：微信个人码、微信群码、企业微信个人码、企业微信群码与企业微信互通群码；2.13.0currentstringurls 当前显示图片的链接是否为第一张？ referrerPolicystringno-referer否定origin: 发送完整的referererer; no-referrer: 不发送。格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 是小程序的版本号，版本号是 0 表示为开发版、体验版和审核版，版本号为 devtools 表示为开发者工具，其余为正式版本；2.13.0successfunction 否接口成功调用回调函数 failfunction 否接口调用失败的回调函数 completefunction 否定接口调用回调函数结束(调用成功或失败将执行)

示例代码

wx.previewImage({
  current: &#39;&#39;, // 目前显示图片的http链接
  urls: [] // HTTP链接列表中需要预览的图片
})

页面跳转

跳转普通页面

wx.navigateTo({
    url: &#39;&#39;,
})

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

跳转tabbar 页面

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

wx.switchTab({
  url: &#39;/index&#39;
})

自定义组件

小程序中的组件和普通页面 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 NavigationBarTextStylestringwhite导航栏的标题颜色，仅支持 black / white navigationBarTitleTextstring 导航栏标题文本内容 navigationstringdefault导航栏样式仅支持以下值： default 默认样式 custom 定制导航栏，只保留右上角的胶囊按钮。iOS/Android 微信客户端 7.0.0，Windows 微信客户端不支持backgroundcolorhexcolor#fffff窗口的背景色 backgrondtetstringdark下拉 loading 的样式，仅支持 dark / light backgroundColorTopstring#只有fffff顶窗的背景色 iOS 支持微信客户端 6.5.16backgroundcolorbottomstring#fffff底窗的背景色，仅 iOS 支持微信客户端 6.5.16enablepuldownrefreshboleanfalse是否打开当前页面下拉刷新。详见 Page.onPullDownRefresh onreachbotomdistancenumber50页上的拉触底事件触发时，单位为px。详见 Page.onReachBottom pageorientationtringportrait屏幕旋转设置，支持 auto / portrait / landscape 详见响应显示区变化2.4.4.0 (auto) / 2.5.0(landscape)disablescrolleanfalse设置为 true 整个页面不能上下滚动。只在页面配置中有效，不能在页面配置中有效 app.json 中设置 usingcomponentobject否页面自定义组件配置1.6.3initialRenderingCachestring 缓存配置在页面初始渲染中，支持 static / dynamic2.11.1.1stylestringdefalt启用新版组件样式2.10.2singlePageobject否单页模式相关配置2.12.0restartstringhomePage重启策略配置2.8.0

效果

取消顶部默认导航栏

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

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

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

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

以上是微信小程序开发常用功能总结的详细内容，请关注其他相关文章！

阅读全文

上一篇：精通远程桌面连接：命令操作全攻略
下一篇：关闭服务器端口，保障网络安全无忧！

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

首页 2024-07-09 07:38:54

最新文章

相关文章