经历了两次完整的网站接入微信登录开发,第2次开发从注册账号到最终上线全部参与完成,觉得有必要把我的开发流程详细记录下来.供后面查阅

微信开放平台注册:

微信开放平台链接:https://open.weixin.qq.com/ 注册登录后,在管理中心的网站应用中,点击创建网站应用.

创建完成后点击进入应用,在接口信息下申请开通微信登录.开发信息里的授权回调域填写真实线上的域名.
开通成功后,在开放平台上记录下来AppID和AppSecret,开发后台接口时需要用到.

后台接口开发

官方文档: https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
后台需要对接的接口一般有两个,一个是获取access_token和open_id,另外一个是根据access_token和openid获取用户信息.我这边是用egg开发,贴一下关键代码,非常简单

  // 根据code获取access_token
  async getAccessToken(code) {
    const wx = this.config.wxConfig
    const url = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${wx.appid}&secret=${wx.appSecret}&code=${code}&grant_type=authorization_code`

    const res = await axios.get(url)

    return res.data
  }

  // 根据access_token和open_id获取用户信息(昵称,头像)
  async getUserInfo(accessToken, openid) {
    const url = `https://api.weixin.qq.com/sns/userinfo?access_token=${accessToken}&openid=${openid}&lang=zh_CN`
    const res = await axios.get(url)

    return res.data
  }

小提示:后台开发过程中可以直接用手机扫码拿到重定向链接里的code,然后用postman直接http请求,扫码链接微信有提供: https://open.weixin.qq.com/connect/qrconnect?appid=[AppID]&redirect_uri=[重定向链接]&response_type=code&scope=snsapi_login&state=123456#wechat_redirect,标记中括号的地方需要替换成真实信息,其中重定向链接是微信用户扫码确认后浏览器会自动访问这里填的链接,注意域名要和开放平台里填写的一致.

后端代码通过postman调试通过后,就是前端代码开发了.前端代码调试比较麻烦一点,这里详细讲一下我的解决方案:

生成ssl证书

这个可以自行搜索使用openssl创建证书,这里贴个链接供参考https://developer.aliyun.com/article/617249
然后本地安装nginx(也可以用其他的web服务器,我对nginx的转发比较熟而已)

nginx下载及启动

nginx下载地址:http://nginx.org/en/download.html 其中单数为测试,双数为稳定,如1.21.x就是测试,不过本地开发调试无所谓都没问题,下载好后解压在文件夹路径下打开cmd 运行 start ./nginx.exe就启动了(linux下安装和启动平时用的更多,就不说了)

nginx配置

nginx安装路径下找到./conf/nginx.conf 打开编辑添加 server配置:(可以写在默认配置的server 上面)

        ...
    server {
        listen                443    ssl;
        server_name            [线上真实域名];
        ssl_certificate        ../cert/ssl.crt;   # 证书位置
        ssl_certificate_key    ../cert/ssl.key;   # 同上
    
        location / {
              proxy_pass        http://127.0.0.1:xxxx;  # 前端启动后的端口号记得改
        }
    }
        ...

编辑完成后保存,nginx -s reload 重启
(启动失败的话注意一下本地的80端口和443端口是否有其他服务,常见的是window自带的IIS启动了的原因.

本地host配置

我们还需要把域名解析转发到本地来,window下的目录在 C:\Windows\System32\drivers\etc\hosts
添加一行127.0.0.1 线上真实域名
我这边是用的utools的hosts切换插件,切换起来非常方便(注意个别window启动hosts插件白屏的原因是根本没有那个文件,自己在目录下新建一个就好了)

然后就是开发调试了,本地前端代码启动后,不要访问http://localhost:xxxx ,直接访问https://线上真实域名 (nginx配置反向代理后会代理到你启动的端口号)

注意这里浏览器会提示你网站有危险(你自己本地创建的证书浏览器当然不认了),window直接点仍然访问就可以了,mac下的chrome需要在页面下输入:thisisunsafe

前端代码开发

这个没啥说的,简单的做法就是直接跳转 https://open.weixin.qq.com/connect/qrconnect?appid=[AppID]&redirect_uri=[重定向链接]&response_type=code&scope=snsapi_login&state=123456#wechat_redirect
我用的是引用文件https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js然后通过js加载二维码.

 var obj = new WxLogin({
 self_redirect:true,
 id:"login_container", 
 appid: "", 
 scope: "", 
 redirect_uri: "",
  state: "",
 style: "",
 href: ""
 });

然后在跳转的redirect_uri里面拿到url的code和state(假设你做了state为了验证登录是不是你的网站里发起的)
整个微信登录的开发其实很简单,主要是本地开发环境搭建麻烦点,这里记录一下以便将来再开发时查阅.

公司钉钉小程序有需求要让用户选择一个日期区间
在市场上没有找到相对比较匹配日期区间选择组件,于是考虑自己封装
公司的钉钉小程序用的是uniapp开发的,所以理所当然的基于uniapp开始了组件封装.
大概花了1天多时间简单做了一下封装,对钉钉和微信两个小程序端做了适配.
之前还没有针对picker-view做过封装,基本上用的都是现成的组件.这次封装算是对picker-view做下大概的了解.
不过因为是基于公司业务封装,功能也略偏向业务.

github地址:https://github.com/aoobao/dateRangePicker

页面效果展示:https://aoobao.github.io/dateRangePicker/demo.mp4

开发网页或多或少会碰到要保存富文本内容的情况.但凡碰到需要保存富文本,服务端就必须开启xss防护.否则是非常不安全的.

egg.js默认集成了XSS框架,附上框架链接:
https://jsxss.com/zh/index.html
使用方法是 const safehtml = this.ctx.helper.shtml(html)
返回的html就是过滤后的html内容,可以安全保存在数据库中了.
里面有各种对不同的tag,不同属性的配置,这里就不举例了,大部分情况下默认配置就行,个别情况要改的话,根据默认配置增减就行.这里附上源码中的默认配置,以便查阅

https://github.com/leizongmin/js-xss/blob/master/lib/default.js

这里要说的主要内容是在egg.js中调用shtml,如果src或者href中的内容是'/'开头的没有域名,他是直接剔除掉的,附上源码:

    if (isWhiteAttr && (name === 'href' || name === 'src')) {
        if (!value) {
          return;
        }

        value = String(value);

        if (value[0] === '/' || value[0] === '#') {
          return;
        }

        const hostname = utils.getFromUrl(value, 'hostname');
        if (!hostname) {
          return;
        }

        // If we don't have our hostname in the app.security.domainWhiteList,
        // Just check for `shtmlConfig.domainWhiteList` and `ctx.whiteList`.
        if (!isSafeDomain(hostname, domainWhiteList)) {
          // Check for `shtmlConfig.domainWhiteList` first (duplicated now)
          if (shtmlConfig.domainWhiteList && shtmlConfig.domainWhiteList.length !== 0) {
            app.deprecate('[egg-security] `config.helper.shtml.domainWhiteList` has been deprecate. Please use `config.security.domainWhiteList` instead.');
            shtmlConfig.domainWhiteList = shtmlConfig.domainWhiteList.map(domain => domain.toLowerCase());
            if (!isSafeDomain(hostname, shtmlConfig.domainWhiteList)) {
              return '';
            }
          } else {
            return '';
          }
        }
      }

源码可以看到 if(value[0] === '/' || value[0] === '#'){ return }

但是一些情况下,在开发环境中,我们就是不想加域名,而是通过代理去实现图片访问,这个时候图片下的src属性值就是'/'开头.

通过源码可以看到,他合并了egg.js中的config,然后在最后判断了config中是否有onTagAttr方法,用来重写他的onTagAttr方法

    ...
    const shtmlConfig = utils.merge(this.app.config.helper.shtml, securityOptions.shtml);
    ...
    // avoid overriding user configuration 'onTagAttr'
    if (shtmlConfig.onTagAttr) {
      const original = shtmlConfig.onTagAttr;
      shtmlConfig.onTagAttr = function() {
        const result = original.apply(this, arguments);
        if (result !== undefined) {
          return result;
        }
        return shtmlConfig[BUILD_IN_ON_TAG_ATTR].apply(this, arguments);

      };
    } else {
      shtmlConfig.onTagAttr = shtmlConfig[BUILD_IN_ON_TAG_ATTR];
    }

我这里在config.default.js中添加了helper.shtml.onTagAttr方法,然后在config.prod.js文件中把他覆盖掉了,这样开发环境就可以使用'/'开头了.附上config.default.js中的配置代码:

const config  = {
// ...
    helper: {
      shtml: {
        onTagAttr(tag, name, value, isWhiteAttr) {
          if (isWhiteAttr && (name === 'href' || name === 'src')) {
            if (!value) {
              return
            }

            value = String(value)

            // 测试环境通过/做代理,不要过滤掉.
            if (value[0] === '/') {
              return `${name}="${value}"`
            }
          }
        },
      },
    },
// ...
}

有时候把自己写的代码复制到U盘中,想批量删除node_modules文件夹,可以使用rimraf的模糊匹配

rimraf ./**/node_modules/

我在开发大富翁游戏中,希望骰子能跟现实一样投掷,因为three.js中并没有物理引擎的引入,所以我需要引入cannon.js
cannon.js属于一个轻量级引擎,对cpu的性能要求比较低,非常适合放在web游戏中使用.
简单记录一下cannon.js使用过程中的要点,以便后面查阅.

大富翁源码地址:https://github.com/aoobao/backpacker

cannon.js 文档地址: https://schteppe.github.io/cannon.js

创建物理引擎世界

this.world = new CANNON.World()
this.world.gravity.set(0, 0, -9.8 * 70)    // 重力加速度设置 这里乘以70是因为之前创建的物体设置的比较大,所以需要加大重力加速度矫正

创建刚体

// 设置材质 这里设置了地面,墙壁,骰子三种材质
const cubeMaterial = new CANNON.Material('cube')
const material = new CANNON.Material('ground')
const wallMaterial = new CANNON.Material('wall')

// 地面
const bodyGround = new CANNON.Body({
      mass: 0,
      position: new CANNON.Vec3(0, 0, 0.1),
      shape: new CANNON.Plane(),
      material: material,
})

const wall1 = new CANNON.Body({
      mass: 0,
      position: new CANNON.Vec3(WIDTH / 2, 0, 0),
      shape: new CANNON.Plane(),
      material: wallMaterial,
})

wall1.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), -Math.PI / 2)

// 注意CANNON.Plane底部是包含材质的,并不是只有一个平面,假设 position: new CANNON.Vec3(0, 0, 0), 那么z方向<0的都是存在材质,物体如果在z方向<0 会被挤到上来,在z+方向有一个力
// 设置两个材质之间的参数值,因为我不希望骰子斜靠在墙上,所以墙壁和骰子的摩擦力设置成了0.
const groundContactMaterial = new CANNON.ContactMaterial(material, cubeMaterial, {
      friction: 0.1,    // 摩擦力
      restitution: 0.5, // 弹性
})

const wallContactMaterial = new CANNON.ContactMaterial(wallMaterial, cubeMaterial, {
      friction: 0,
      restitution: 1,
})

创建骰子,并给予初速度及角速度

addBox(cube: Cube, speed = 1) {
    return new Promise<void>((resolve, reject) => {
      const pos = cube.instance.position
      const qua = cube.instance.quaternion
      const size = cube.size
      const halfExtents = new CANNON.Vec3(size / 2, size / 2, size / 2)
      const bodyBox = new CANNON.Body({
        mass: 5,
        position: new CANNON.Vec3(pos.x, pos.y, pos.z),
        shape: new CANNON.Box(halfExtents),
        quaternion: new CANNON.Quaternion(qua.x, qua.y, qua.z, qua.w),
        linearDamping: 0.01,
        angularDamping: 0.05,
        material: cubeMaterial,
      })

      const x = 500 * speed * randPM()
      const y = 500 * speed * randPM()
      const z = 300 + 300 * speed

      bodyBox.velocity.set(x, y, z)
      bodyBox.angularVelocity.set(rendAngular(), rendAngular(), (50 + 50 * Math.random()) * randPM())

      function rendAngular() {
        return (10 + 10 * Math.random()) * randPM()
      }

      const box: PhysicsBody = {
        type: 'cube',
        cube,
        bodyBox,
        resolve,
        reject,
        timer: new Date().getTime(),
      }

      this.world.addBody(bodyBox)
      this.bodyList.push(box)
    })
  }

每帧渲染的时候更新计算

// updatePhysics
  render(res: any) {
    const delta = res.delta as number
    if (delta) {
      // console.log(delta)
      this.world.step(fixedTimeStep, delta, maxSubSteps)
      for (let i = this.bodyList.length - 1; i >= 0; i--) {
        const box = this.bodyList[i]
        // 将物理引擎中的计算值同步到threejs中的对象中(position,quaternion),并判断CANNON.Body的速度和角速度是否低于某个阈值,
        // 如果低于阈值后,则可以认为骰子已经停止运动了,可以读取骰子的朝向及点数值了.
        if (this.syncInstanceValue(box)) {
          this.bodyList.splice(i, 1)

          // 延迟去除,多个骰子
          setTimeout(() => {
            this.world.remove(box.bodyBox)
          }, 5000)
          box.resolve()
        }
      }
    }
  }

以上记录了比较关键的内容,源码可以参考https://github.com/aoobao/backpacker/blob/master/src/assets/physics.ts