uniapp网页开发使用微信jssdk

下载或者复制获得微信jssdk的js文件

http://res.wx.qq.com/open/js/jweixin-1.6.0.js

把文件放在项目static目录下,这样打包后才找得到

封装使用方法

import {
    getWxSign
} from '@/utils/api.js'//此处为请求后端接口方法返回的权限

const WeixinJsSDK = {
    init: function(param) {
        if (!param) return console.error("传入api类型");
        if (param.APIs) this.APIs = param.APIs;
        if (param.callback) this.callback = param.callback;
        WeixinJsSDK.sign();
    },
    sign: function() {
        let pageUrl = location.href.split('#')[0];
        console.log(pageUrl)
        getWxSign({
            url: pageUrl
        }).then((res) => {
            console.log(res.code);
            if (res.code === 0) {
                WeixinJsSDK.initAPIs(res.data);
            }
        }).catch((err) => {
            console.log(err);
        });
    },
    initAPIs: function(param) {
        const config = {
            ...param,
            jsApiList: WeixinJsSDK.APIs // 修改此处
        }
        jWeixin.config(config);
        jWeixin.ready(function() {
            jWeixin.checkJsApi({
                jsApiList: WeixinJsSDK.APIs, // 修改此处
                success: function(res) {
                    if (typeof WeixinJsSDK.callback === 'function') {
                        WeixinJsSDK.callback();
                    }
                },
                error: function(err) {
                    console.log(err)
                }
            });
        });

        jWeixin.error(function(res) {
            console.log(res)
            // 处理错误
        });
    }
};

export default WeixinJsSDK;

需要后端返回权限

在index.html文件中写入

 <script>
            window.jWeixin = window.wx;
            delete window.wx;
        </script>

在要使用的页面导入封装的方法

通过事件触发方法

const ScanCode = () => {
    WeixinJsSDK.init({
        APIs: ['scanQRCode'],//这里我要使用的是微信扫一扫事件,要使用别的就替换成要使用的api
        callback: () => {
            jWeixin.scanQRCode({
                needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
                scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
                success: function (res) {
                    console.log(res.resultStr);
                    var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
                    //这里处理结果
                }
            });
        }
    });
};

微信api使用通过官网查看

概述 | 微信开放文档

### 配置步骤 在 UniApp 中集成微信 JS-SDK 并实现文件上传功能涉及多个方面。为了确保顺利实施,以下是详细的配置过程。 #### 1. 引入微信 SDK 可以通过 npm 安装 `weixin-js-sdk` 来简化开发流程[^2]: ```bash npm install weixin-js-sdk --save ``` 接着,在需要使用的页面按需引入该模块: ```javascript import wx from 'weixin-js-sdk'; ``` #### 2. 获取签名参数 要使微信 JS-SDK 生效,必须先获取服务器端返回的签名参数(timestamp, nonceStr 和 signature)。这一步通常由后端完成,并通过接口传递给前端应用。具体操作可参照官方文档说明[^3]。 #### 3. 初始化并注入权限验证配置 收到上述三个必要参数之后,就可以调用微信提供的 jsapi 接口来初始化 sdk: ```javascript wx.config({ debug: false, appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名 jsApiList: ['chooseImage', 'uploadImage'] // 必填,需要使用JS接口列表 }); ``` 注意:此处列举了两个用于图片选择和上传的关键 API 方法名称。 #### 4. 使用 chooseImage 进行本地资源选取 当用户点击按钮触发事件时,可以利用 `chooseImage` 方法让用户从相册或相机中挑选照片作为待上传对象: ```javascript wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success (res) { const localIds = res.localIds; // 返回选定照片的本地ID列表 console.log(localIds); uploadFile(localIds); // 调用自定义函数处理后续逻辑 } }) ``` #### 5. 执行实际的数据传输工作 最后一步就是执行真正的文件上载动作。这里需要注意的是,由于安全原因,直接使用 `uploadImage` 不会得到完整的 URL 地址;因此建议采用服务端代理的方式接收临时 media_id 后再做进一步处理: ```javascript function uploadFile(localId){ wx.uploadImage({ localId: localId[0], // 需要上传的图片的本地 ID,由 chooseImage 接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success(res){ let serverId = res.serverId; // 将serverId发送至后台换取真实url... }, fail(err){ console.error('Upload failed:', err); } }); } ``` --- ### 注意事项 - **安全性考量**:考虑到数据的安全性和隐私保护,务必遵循最新的 OAuth 认证机制以及 HTTPS 协议。 - **兼容性测试**:不同版本的小程序可能会存在差异,所以应该充分考虑多平台间的适配问题。 - **错误捕获与日志记录**:在整个过程中加入 try-catch 结构捕捉异常情况,并做好相应的调试信息输出以便排查潜在隐患。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值