uniapp开发微信公众号,调用微信接口是跨域怎么处理

注:这里代理的名字千万不能写/api,不然 https://api.weixin.qq.com里面的api会被替换掉

 "/wxApi" : {
                    "target" : "https://api.weixin.qq.com",
                    "changeOrigin" : true, //是否跨域
                    "secure" : true, // 设置支持https协议的代理
                    "pathRewrite" : {
                        "^/wxApi" : ""
                    }
                },

使用的时候

const mode = process.env.NODE_ENV === 'development' ? '/wxApi' : "https://api.weixin.qq.com"

const token = () => {
    uni.request({
        url: mode + '/cgi-bin/stable_token',
        method: 'POST',
        data: {
            "grant_type": "client_credential",
            "appid": "",
            "secret": ""
        },
        success(res) {
            uni.setStorageSync('access_token', res.data.access_token)
        }
    })
}

### 使用 UniApp 开发微信小程序 #### 项目初始化与环境搭建 UniApp 是一个多端开发框架,支持一次编写代码即可适配多个平台(如微信小程序、H5 和 App)。官方推荐使用 HBuilderX 进行开发,因为它提供了丰富的模板和智能提示,并能一键运行到目标平台上[^1]。 安装并启动 HBuilderX 后,可以通过新建项目向导创建一个基于 UniApp微信小程序工程。在创建过程中可以选择默认模板或者空白模板来快速构建基础架构。 #### 示例项目结构说明 典型的 UniApp 工程目录如下所示: ```plaintext project-name/ ├── common/ # 存放公共文件夹, 如工具函数等 ├── components/ # 自定义组件存放位置 │ └── my-component.vue # 示例自定义组件 ├── pages/ # 页面文件所在路径 │ ├── index/ # 主页对应的页面文件夹 │ │ ├── index.vue # Vue 文件描述 UI 和逻辑 │ │ └── ... # 其他资源(如果存在) │ └── other-page/ # 其它页面... ├── static/ # 静态资源存储处 (图片、字体...) ├── uni.scss # 全局样式变量定义 ├── manifest.json # 应用配置文件 └── pages.json # 页面级配置文件 ``` 其中 `manifest.json` 负责全局应用级别的设置,比如名称、图标以及多端兼容选项;而 `pages.json` 则用于管理各个页面的导航栏文字颜色、背景色等内容显示属性。 #### 组件化开发实践 为了提升项目的模块性和重用率,在实际编码时应该采用 **组件化开发** 思路[^2]。以下是几个关键点: - **单一职责原则**: 每个组件专注于完成特定的功能或展示某一部分视图。 - **可复用性**: 设计通用性强的部件以便于不同场景下重复利用。 - **封装性**: 对外隐藏不必要的细节部分,仅仅开放必需的操作方法给调用者知道。 - **可配置性**: 提供灵活参数让用户可以调整外观表现形式或是交互方式。 举个例子来说,假设我们需要制作一个按钮控件,则该控件应当接受诸如主题色调(`primary`, `secondary`)之类的输入项来自由改变视觉效果。 下面是一个简单的自定义按钮组件实例: ```vue <template> <button :class="['custom-btn', theme]" @click="$emit('on-click')"> {{ label }} </button> </template> <script> export default { name: 'CustomButton', props: { label: String, theme: { type: String, default: 'default' } }, }; </script> <style scoped lang="scss"> .custom-btn { padding: .8em; border-radius: 4px; &.default { background-color: gray; color:white ; } &.primary{ background-color: blue; color:#fff ; } } </style> ``` 此段代码展示了如何建立一个具有基本样式的按钮元件,并允许使用者通过传递不同的 prop 值来更改它的外观特征。 #### 配置详解 对于具体的业务需求而言,可能还需要进一步修改一些特殊设定。例如针对某些特殊的 API 接口请求头增加 token 认证机制的话,可以在 utils/request.js 中加入相应处理逻辑片段。 另外值得注意的是,当涉及到访问或者是 HTTPS 加密传输等问题的时候也需要特别留意服务器端的相关部署情况。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值