使用微信小程序和公众号开发的文档有哪些？

发表时间：2023-09-01 15:52:04

文章来源：炫佑科技

浏览次数：176

菏泽炫佑科技菏泽炫佑小程序开发菏泽炫佑app制作炫佑科技

在开发微信小程序和公众号时，*重要的是可以使用微信账号一键授权登录，省去复杂的注册步骤，然后快速体验应用的功能。我们先看一下微信提供的文档。

微信登录功能介绍

为了方便用户方便地使用应用、网站、移动网页、小程序服务，微信提供了不同的技术方案，方便开发在不同终端平台接入微信登录服务。通过本教程，开发可以了解平台针对各个终端平台提供的微信登录能力，并可以根据实际使用场景合理选择接入方式。

以下是几种微信登录的功能说明：

类型授权域/接口用户侧使用流程访问流程

应用程序

接入微信SDK并调用

（1）在App中选择使用微信登录（2）拉起微信客户端，打开用户授权页面，完成登录授权

（1）注册微信开放平台（）账号并完成开发资质认证（2）申请【App移动应用】，审核通过后即可使用。查看开发文档

Web应用程序

（1）用户使用微信“扫一扫”，在PC端扫码（2）客户端打开授权页面，完成登录授权

（1）注册微信开放平台（）账号并完成开发资质认证（2）申请【网站申请】，审核通过后即可使用。查看开发文档

微信客户端H5

使用公众账号登录功能：

：静默授权：（1）用户在H5点击登录，调用授权弹窗（2）用户端完成登录授权

（1）注册微信公众号，选择“服务号”类型，并完成微信认证（2）在公众号管理后台设置回调域名（3）接入微信登录能力并查看开发文档

小程序

wx.登录 wx.

wx.login：静默授权，开发可以获取wx.：（1）用户点击小程序中的组件，弹出登录窗口（2）完成用户端的登录授权

（1）注册小程序（2）接入微信登录功能，查看开发文档，查看登录流程设计指南

我的服务同时有App、官网、公众号、小程序，那么如何打通用户数据呢？

对于多平台服务，如果开发希望能够识别用户，比如希望用户能够在小程序中查看应用内购买的商品订单，可以利用平台提供的机制来实现用户识别。

另外，需要注意的是，非微信环境下（浏览器直接打开）的H5手机站也是一个网站应用，需要使用开放平台。

登录小程序

小程序可以通过微信提供的官方登录能力轻松获取微信提供的用户身份，并在小程序内快速建立用户体系。

登录过程时序

注：图片来源【小程序开发文档】

这张图的意思是，首先要在小程序上通过wx.login获取代码，然后可以通过http请求将代码发送到开发服务器，然后开发服务器可以向微信发送相关参数接口服务器通过http请求来获取它。开发服务器获取到后，可以进行相关操作，比如在数据库中注册会员使用微信小程序和公众号开发的文档有哪些？，然后将相关数据状态返回给小程序。一般会生成一个token并返回给小程序。小程序获取token并缓存。起来，请求相关接口时带上http中的token。

新界面

需要注意的是，腾讯的规则一直在变化，增加了新的界面。如果开发需要获取用户的个人信息（头像、昵称、性别、地区），可以通过wx. 接口。具体请参考官方文档：小程序登录、用户信息相关接口调整说明

公众号登录

如果用户在微信客户端访问第三方网页，公众号可以通过微信网页授权机制获取用户的基本信息，进而实现业务逻辑。微信公众号网页开发的文档比较详细，所以我本文不会详细介绍。具体可以查看公众号开发文档微信网页开发：网页授权

注意：登录功能需要静默登录。前端只传输code，后端生成code，然后检查用户是否注册。如果注册，将执行登录过程。如果未注册，则返回空。

对于不同的公众号，用户在公众号中的身份是不同的。商户后台系统可以通过登录授权、支付通知、订单查询等API获取用户信息。主要目的是识别同一用户并向该用户发送客服消息、模板消息等。企业帐号用户需要使用企业帐号转换接口来转换企业会员。

网页授权获取用户

小程序获取

公众号获取

APP获取

支付

在了解微信支付之前，我们首先需要了解一些微信支付相关术语的解释。

微信公众平台

微信公众平台是微信公众号的申请入口和管理后台。商户可在公众平台提交基本信息、经营信息、财务信息申请微信支付功能。

微信开放平台

微信开放平台是商户APP接入微信支付开放接口的应用入口。通过该平台，您可以申请微信APP支付。

微商平台

微信商户平台是微信支付相关商户功能的集合，包括参数配置、支付数据查询与统计、在线退款、代金券或即时折扣操作等功能。

我们网页前端涉及到的微信支付一般都是微信小程序或者微信公众号，所以首先要在微信小程序或者微信公众号管理后台申请激活微信支付功能。激活微信支付前，您必须先在微信商户平台注册微信商户，然后在微信商户平台绑定相关微信小程序和微信公众号，然后返回微信小程序或微信公众号管理后台。确认绑定。这个过程称为激活微信支付功能。

业务流程图

关键步骤说明：

步骤3：用户下单发起支付，商户可以通过JSAPI下单创建支付订单。

步骤8：商户可以在微信浏览器中通过JSAPI调用支付接口，调用微信支付并发起支付请求。

步骤15 用户支付成功后，商户可以收到微信支付支付结果通知接口。

步骤20 如果商户没有收到微信支付结果通知，则需要主动调用查询订单接口查询支付结果。

小程序支付

小程序支付是指商户现有小程序接入微信支付接口广州微信小程序开发，让用户在小程序内完成交易的场景。

请求示例

wx.requestPayment
(
	{
		"timeStamp": "1414561699",
		"nonceStr": "5K8264ILTKCH16CQ2502SI8ZNMTM67VS",
		"package": "prepay_id=wx201410272009395522657a690389285100",
		"signType": "RSA",
		"paySign": "oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ\/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq\/xDg==",
		"success":function(res){},
		"fail":function(res){},
		"complete":function(res){}
	}
)

请求示例

// #ifdef MP
uni.requestPayment({
    "timeStamp": res.data.timeStamp,
    "nonceStr": res.data.nonceStr,
    "package": res.data.packageValue,
    "signType": res.data.signType,
    "paySign": res.data.paySign,
    "success": function(res) {
        callbackQueryOrder(orderId).then(res => {
            if (res.status === 'OK') {
                _this.$store.dispatch('saveCurrPayOrder', {...currPayOrder, status: 'success'})
                _this.$util.Tips({
                    title: '支付成功',
                    icon: 'success'
                }, {
                    tab: 4,
                    url: toPages
                })
            }
        }).catch(err => console.log(err))
    },
    "fail": function(res) {
        _this.$store.dispatch('saveCurrPayOrder', {...currPayOrder, status: 'fail'})
        _this.$util.Tips({
            title: '取消支付'
        }, {
            tab: 4,
            url: toPages
        });
    },
    "complete": function(res) {
        uni.hideLoading();
        //关闭当前页面跳转至订单状态
        if (res.errMsg == 'requestPayment:cancel') return that.$util.Tips({
            title: '取消支付'
        }, {
            tab: 4,
            url: goPages
        });
    }
})
// #endif

公众号支付（JSAPI网页支付）

JSAPI网页支付，即俗称公众号支付，可以在微信公众号、朋友圈、聊天会话中点击页面链接，或使用微信“扫一扫”扫描页面地址二维码，打开商户的HTML5页面在微信页面下单并完成支付。

通过JSAPI订单接口获取发起支付所需的参数，然后使用微信支付提供的前端JS方法调用公众号支付。

注意：请确保实际支付时请求的目录与后台配置的目录一致（现已支持根目录的配置，配置后会有一定的生效时间，一般为5分钟以内），否则微信支付无法成功触发。详细配置方法请参见配置方法。内置对象在其他浏览器中无效。的wx。 JSSDK调用支付，调用格式内容引用。 JSSDK使用步骤说明的链接地址。调用支付返回的res对象的驼峰格式是JSSDK返回的格式，但是返回的格式。如果商家采用不同的方式，这里需要注意响应的字符大小写和格式。

发起微信支付请求

wx.chooseWXPay({
  timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但*新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
  nonceStr: '', // 支付签名随机串，不长于 32 位
  package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
  signType: '', // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
  paySign: '', // 支付签名
  success: function (res) {
    // 支付成功后的回调函数
  }
});

详细内容请参考微信支付V3开发文档：/wiki/doc/ap...

地址小程序获取地址

wx.()

获取公众账号地址

代码示例

// 获取微信地址
getWxAddress() {
    let that = this;
    // #ifdef MP-WEIXIN
    uni.authorize({
        scope: 'scope.address',
        success: function(res) {
            uni.chooseAddress({
                success: function(res) {
                    console.log(res);
                    const item = {
                        province: res.provinceName,
                        city: res.cityName,
                        region: res.countyName,
                        detailAddress: res.detailInfo,
                        default: false,
                        name: res.userName,
                        phoneNumber: res.telNumber,
                        id: '',
                    }
                    that.editAddress(item)
                },
                fail: function(res) {
                    if (res.errMsg == 'chooseAddress:cancel') return that.$util
                        .Tips({
                        title: '取消选择'
                    });
                },
            })
        },
        fail: function(res) {
            uni.showModal({
                title: '您已拒绝导入微信地址权限',
                content: '是否进入权限管理，调整授权？',
                success(res) {
                    if (res.confirm) {
                        uni.openSetting({
                            success: function(res) {}
                        });
                    } else if (res.cancel) {
                        return that.$util.Tips({
                            title: '已取消！'
                        });
                    }
                }
            })
        },
    })
    // #endif
    // #ifdef H5
    // return
    this.$wechat.openAddress().then(res=>{
        const item = {
            province: res.provinceName,
            city: res.cityName,
            region: res.countyName,
            detailAddress: res.detailInfo,
            default: false,
            name: res.userName,
            phoneNumber: res.telNumber,
            id: '',
        }
        that.editAddress(item)
    }).catch(err=>{
        console.log('失败',err);
    })
    // #endif
}

定位小程序获取定位

具体可以参考我之前写的文章：微信小程序实现根据定位打卡功能的工作总结

公众号获取定位

uni-app有现成的接口，可以直接获取经纬度

// 获取经纬度
export function getLocation() {
    return new Promise((resolve, reject) => {
        uni.getLocation({
            type: 'gcj02',
            success: function(res) {
                uni.setStorageSync('user_latitude', res.latitude)
                uni.setStorageSync('user_longitude', res.longitude)
                resolve(res)
            },
            fail: function(err) {
                uni.showToast({
                    title: '访问位置被拒绝'
                })
                reject(err)
            }
        })
    })
}

将公众号定位转换为地址

因为H5端编译到浏览器后会出现跨域问题，所以我们需要先解决跨域问题。现在找到根目录下的.json文件，然后选择*后的源码查看，找到*后的H5配置，跨域腾讯界面。域代理（X内部浏览器没有跨域问题）

开发环境解决跨域问题（通过代理）

"h5" : {
        "devServer" : {
            "https" : false,
            "port" : 80,
            "disableHostCheck" : true,
            "proxy" : { // 可代理多个
                "/TencentGet" : {
                    "target" : "https://apis.map.qq.com/ws/geocoder/v1/", // 腾讯地图逆地址解析
                    "changeOrigin" : true,
                    "secure" : false,
                    "pathRewrite" : {
                        "^/TencentGet" : ""
                    }
                }
            }
        },
	}

生产环境解决跨域问题（nginx配置）

location /TencentGet {
     proxy_pass   https://apis.map.qq.com/ws/geocoder/v1/;
}

画一个通过经纬度获取城市信息的公共方法

// 通过经纬度获取地址信息
export function getLocationCity(latitude, longitude) {
    // #ifdef H5
    // 存在跨域需要在manifest中代理一下
    let baseUrl = `/TencentGet/?coord_type=5&get_poi=0&output=json&location=${latitude},${longitude}&key=${key}`
    return new Promise((resolve, reject) => {
        uni.request({
            url: baseUrl,
            method: 'GET'
        }).then(res => {
            uni.setStorageSync('city_address', res[1].data.result)
            uni.setStorageSync('city', res[1].data.result.address_component.city)
            resolve(res[1].data.result)
        }).catch(err => {
        })
    })
    // #endif
    // 除H5之外
    // #ifndef H5
    return new Promise((resolve, reject) => {
        var that = this
        var map = new TencentMap({
            key: key
        })
        map.reverseGeocoder({
            location: {
                latitude: latitude,
                longitude: longitude
            },
            success: function(res) {
                // console.log('腾讯获取城市名', res)
                uni.setStorageSync('city_address', res.result)
                uni.setStorageSync('city', res.result.address_component.city)
                resolve(res.result)
            },
            fail: function(err) {
                reject(err)
            }
        })
    })
    // #endif
}

电话号码小程序获取电话号码

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等

使用微信小程序和公众号开发的文档有哪些？

相关案例查看更多

童装买家秀案例

方案小程序开发案例

定制蛙博士打印系统软件

炫佑开发北京嘉华ERP管理系统软件

上门预约小程序服务类开发

炫佑开发校园管理系统

全球钻价小程序和app案例

中民油气app开发案例

友情链接