微信小程式開發常用功能匯總

本篇文章為大家帶來了關於微信小程式的相關知識，主要介紹了微信小程式開發常用功能,本文透過實例程式碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鏡價值，希望對大家有幫助。

【相關學習推薦：小程式學習教學】

取得使用者資訊

##呼叫

# 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 介面

POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN

屬性類型預設值必填說明access_token / cloudbase_access_tokenstring 是介面呼叫憑證#code

	#然後透過 code 換取用戶手機號碼。每個code只能使用一次，code的有效期限為5min	呼叫如下介面	請求參數

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, // 动态传递当前商品id
        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: '分享标题',
                        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)

在新頁面中全螢幕預覽圖片。預覽的過程中使用者可以進行儲存圖片、傳送給朋友等操作。

##說明#最低版本urlsArray.# #是需要預覽的圖片連結列表。 2.2.3 起支援雲端文件ID。  showmenubooleantrue否是否顯示長按菜單。支援識別的碼：小程式碼僅小程式支援辨識的碼：微信個人碼、微信群碼、企業微信個人碼、企業微信群碼與企業微信互通群碼；2.13.0currentstringurls 的第一張否目前顯示圖片的連結 referrerPolicystringno-referrer ##successfunction 否#介面呼叫成功的回呼函數 #failfunction 介面呼叫失敗的回呼函數

屬性	類型	預設值	必填
				#origin : 發送完整的referrer; #​​##no-referrer: 不發送。格式固定為 https://servicewechat.com/{appid}/{version}/page-frame.html，其中{appid} 為小程式的appid，{version} 為小程式的版本號，版本號碼為0 表示為開發版、體驗版以及審核版本，版本號碼為devtools 表示為開發者工具，其餘為正式版本；2.13.0
					否

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

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

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

以上是微信小程式開發常用功能匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章！