微信小程序-踩坑=详解-fetch请求-登陆详解wx.request封装

5,423 阅读2分钟

一、小程序的注册篇 首先你要有个邮箱。 小程序的注册通常分为两种方式。独立注册一个小程序,和关联公众号注册。 (1). 如果你有一个现成的认证过的公众号,那么就可以通过公众里面的快速注册,直接采用公众号的资质,直接关联快速注册小程序。 (2).重头开始注册小程序,需要提供一些列认证资质,并且认证需要300圆人民币,需要等待微信审核,根据他的注册说明提供一系列资质。 二、 开发开始准备预先踩坑篇 (1).首先你需要在小程序的后台给予开发人员设置一个开发权限(后期测试人员的权限同样在此设置)一个先下载微信开发者工具,创建一个小程序项目,填写你的小程序的AppID。 (2).开发前准备,因为小程序需要安全域名验证,需要在小程序的官方后台配置安全域名(微信只支持https,所以记得给你的域名认证),同理如果你的小程序内嵌的webview页面,也需要配置相应的域名(需要下载证书,放置在跟域名下),涉及到支付了的情况下,也请根据微信官方文档进行相应的配置,才可以调用微信的支付回调。

在此处不进行详细的操作过程,只为了提醒一下相应的流程过程,不至于造成不必要的埋坑。 三、开发基础架子准备篇 (一)。小程序官方给出了框架,组建,已经相应的api方法相信大家在读到这篇文章前,肯定已经阅读过了,此处只对我本人在开发过程中遇到的问题给进行列举,不对详细基础知识进行一一阐述。 1.发起https请求之wx.request的二次封装。 我们这一个项目可能依赖于三个甚至四个环境。为了是适应多个环境,首先在 app.js 配置多个环境变量。

globalData: {
/**
 * globalData 存放全局数据管理
 * @params bashPath 请求环境
 */
 bashPath:{
     flyPath:'https:XXXXX',
     bopPath:'htpps:XXXXX',
     .....
 }

}

创建封装公共请求方法 fetch.js.不多说直接上代码

const app = getApp()
 //公共参数的封装
const fetch = (config,bash) => {
 let defaultConfig = {
   v: "1.0",
   timestamp: new Date().getTime(),
   devId: 'h5',
   reqId: 'h5'
 }
 return  new Promise((resolve, reject) => {
   config.params= Object.assign(config.params, defaultConfig)
   let postData = {
     method: config.method,
     params: config.params,
     v: config.v||version
   }
   wx.request({
     url:`{app.globalData.bashPath[bash]} ${config.url}`,
     data: postData,
     method: 'POST',
     header: { 'content-type': 'application/json' },
     success:(res) => {
      // 响应业务分析成功活着失败
       if (res.data.code == 0) {
         resolve(res.data)
       }  else {
         wx.showToast({
           title: res.data.message || '网络异常',
           icon: 'none',
           duration: 2000
         })
         reject(res.data.message)
       }
     },
     fail: (e) => {
       reject('网络出错')
     }
     
   })
 });
}
module.exports = fetch

然后在相应的页面引入,调用方法。

2.目前所知小程序常见问题汇总 (1.)微信小程序 display:flex布局。使用hidden不生效。 (1)行内样式无效,采用height 导致textarea焦点无法获取到。