第三方包相关

1. 线上小程序在低版本手机上无法打开，不支持ES5（IOS9 ~ IOS10）。

• npm run build 本地检查 dist 目录下的包是否有 const 、 let 等。
• 确认引入的第三方包是否支持es5。

2. js-base64、md5 等第三方包引入报错。

• 小程序全局对象没有 window 、 document。
• 检查第三方包是否使用了 window 或 document 上方法或者属性。
• 如果有，选择可替换的 npm 包。

3. 小程序里是否可以用 icofont 。

• 小程序支持 icofont。

3. 小程序里使用 three.js 。

1. 使用小程序最新构建包，npm i bili-small-app@latest。
2. 创建一个小程序页面，然后将页面路由挂载到 src/app.json 的路由上。
3. 在页面中引入 three.js , import { createScopedThreejs } from 'three'。
4. threejs 对外暴露的对象，都可以在 import 中单独暴露，小程序为了适配 three ，单独包了一个方法适配，方法为：createScopedThreejs.
5. 在页面中使用 three 的地方开始初始化，const THREE = createScopedThreejs(canvas)， 这个时候的 THREE ，才是小程序可以用的。
6. 其他 three 的 api 等逻辑和H5没啥区别

demo示例

<template>
  <div>
    <b-canvas
        type="webgl"
        id="newCanvas"
        style="width: 100%;height: 50vh;"
        :disable-scroll="true"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
    ></b-canvas>
  </div>
</template>

<script>
import { createScopedThreejs } from 'three'

export default {
  name: "index",
  data(){
    return {
    }
  },
  onReady() {
    this.testCanvas()
  },
  methods: {
    touchStart(e) {
      this.canvas.dispatchTouchEvent({...e, type:'touchstart'})
    },
    touchMove(e) {
      this.canvas.dispatchTouchEvent({...e, type:'touchmove'})
    },
    touchEnd(e) {
      this.canvas.dispatchTouchEvent({...e, type:'touchend'})
    },
    testCanvas(){
      bl.createSelectorQuery()
          .select('#newCanvas')
          .fields({
            node: true,
            size: true
          })
          .exec(this.useCanvas.bind(this))
    },
    useCanvas (res) {
      const canvas = res[0].node;
      const THREE = createScopedThreejs(canvas)
      this.canvas = canvas;
      // 这里可以正式使用three了....
    }
  }
}
</script>