充值完，最后看下使用量限额



到这里就充值结束了，可以安心的使用API了，不用再担心免费的200次/天的限额了。



注册流程大家都会了，这里简单说下流程：

划重点！！如果没注册的就跳过这一步，开卡平台WildCard会送省外手机号、邮箱，送美国家庭环境IP，这时候再注册又能省一点钱。



开科学上网，全局，美国或者日本之类的，不要香港。

官网注册，我是使用谷歌和微软账号注册的，使用邮箱注册也行。

手机号码收验证码平台：https://sms-activate.org/cn

我选的最便宜的印度和阿根廷，印度的有机率收不到验证码或者已使用，看运气。

没收到验证码就点换号码，或者点X按钮删掉号码，这样钱会退回。有时间倒计时的，在倒计时内免费退。

短信平台现在最低充值2美元，加税合计15.42元（2.1美元）



流程注册完进入开发者平台 https://platform.openai.com/account/usage



最后：推荐下我开发的小程序：ai自由畅想

moment('12:00:00', 'HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')

获取上一天昨天上午9点

//使用subtract减去1天
moment('09:00:00', 'HH:mm:ss').subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss')

获取下一天明天下午17点

//使用add增加1天
moment('17:00:00', 'HH:mm:ss').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')

cd /www/server/data

2、根据你需要的数据日期确定binlog是哪几个文件，然后执行下面的命令转成sql文件

#database指定需要的数据库名，然后因为我的有多个文件，就输出日志的名字.sql

/www/server/mysql/bin/mysqlbinlog --database=h5case /www/server/data/mysql-bin.000456  > output000456.sql

我的只需要指定数据库名字就行了，也可以加上开始结束时间指定下日期更精准 --start-datetime="2022-12-09 00:00:00" --stop-datetime="2022-12-14 23:59:59" ，具体可谷歌搜下mysqlbinlog命令



看到有INSERT INTO写入记录就放心了







3、本来是有命令直接输出sql并导入到数据库，但是我怕搞出问题，就把生成的sql文件下载到本地，在本地恢复数据库

生成的sql文件使用Navicat Preminum导入的时候会报错，这里我使用的是本地的phpstudy导入的







遇到报错会返回第几行，然后定位到那里解决就好了。

原理如下：



主要就是使用如下代码裁剪了

/*使用clip-path剪切掉多余的部分*/
clip-path: polygon(0 0, 0 0, 100% 0, 100% 0, 280px 100%, 0 100%); 

安卓小程序上显示效果

const $scrollBottom = {
  num: 0,
  isScroll: true,
  scroll(callback) {
    if (!this.isScroll) return
    window.onload = e => {
      $(window).scroll(() => {
        const h = $(document.body).height();
        const c = $(document).scrollTop();
        const wh = $(window).height();

        if (Math.ceil(wh + c) >= h) {

          this.num++
          if (this.num === 1) {
            //执行底部事件

            this.end()
            callback()

          }
        }
      })

    }
  },
  end() {
    this.num = 1
    this.isScroll = false
  },
  start() {
    this.num = 0
    this.isScroll = true
  }
}

调用方法

// 开始执行滚动到底部
$scrollBottom.scroll(function () {
    // 滚动到底部了
    console.log('滚动到底部了,开始请求', );

    // 开始请求
    setTimeout(() => {
        console.log('模拟请求成功!', );

        //请求结束  重新开始检测滚动到底部 , 没数据后 不执行start()方法 或者 执行 $scrollBottom.end() 禁用检测滚动到底部
        $scrollBottom.start()
    }, 1000);

})

<canvas
      type="2d"
      id="canvas"
      class="canvas"
      canvas-id="canvas"
      :style="{ width: canvasObj.w + 'px', height: canvasObj.h + 'px' }"
    ></canvas>

2、data中定义下尺寸

data () {
  return {
    canvasObj: {
        w: 569,
        h: 822,
      },
      ctx: null,
      canvas: null,
  }
},

3、在接口执行完成，或者mounted、onReady周期执行获取dom选择器

const query = uni.createSelectorQuery()    
  query
  .select('#canvas')
  .fields({ node: true, size: true })
  .exec((res) => {
    console.log('获取到的canvas元素res', res)
    this.canvas = res[0].node
    this.canvas.width = this.canvasObj.w
    this.canvas.height = this.canvasObj.h
    this.ctx = this.canvas.getContext('2d')
   //开始画图
    this.darwAwardFn()

  })

4、弄个下载图片的函数

getImageInfoFn(url) {

    const _this = this
    return new Promise((resolve, reject) => {
      uni.getImageInfo({
        src: url,
        success: (res) => {
          console.log('下载正确', res)
          return resolve(res)
        },
        fail: (err) => {
          console.log('下载错误err---', url, err)
          uni.hideLoading()
          return reject(err)
        },
      })
    })
  },

5、开始画图

async darwAwardFn() {
    uni.showLoading({
      title: '生成中',
      // mask: true,
    })

    const ctx = this.ctx

    const bgObj = await this.getImageInfoFn('图片路径.jpg') //把需要的图片先都下载好
    const bgImg = this.canvas.createImage() //创建图片,与H5端的 new Image()同理
    bgImg.src = bgObj.path
    bgImg.onload = () => { //等图片加载完
      ctx.drawImage(bgImg, 0, 0, this.canvasObj.w, this.canvasObj.h)  //背景图写入
      ctx.font = '26px xieyiyi'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'top'
      ctx.fillText('文字内容,使用 xieyiyi字体', 170, 300)

      //生成图片
      uni.canvasToTempFilePath({
        canvas: this.canvas, // 使用2D 需要传递的参数
        success: (res) => {
          console.log('生成的图片', res.tempFilePath)
          this.downPic = res.tempFilePath  //把生成的图片增值给需要显示的变量
          uni.hideLoading()

        },
        fail(err) {
          uni.hideLoading()
        },
      })
      // end
    }
  },

上面Canvas里有使用自定义字体，自定义字体搞了好久都不生效，CSS里声明的@font-face无效， 最后终于找到方法了

在App.vue里周期里运行下面代码下载字体，这样全局就都可用了。原生小程序在app.js里运行。

切记！！模拟器可能无效，在真机看效果！！！实测安卓iOS可用。

不想放全局的可以在需要的页面试下效果。

 wx.loadFontFace({
      family: 'xieyiyi',
      source:
        'url("字体路径.ttf")',
      global: true, //是否全局可用
      scopes: ['webview', 'native'], //重点!!!使字体在原生canvas 2d里面也可用
      success(e) {
        // console.log('success字体下载', e)
      },
      fail(err) {
        // console.log('字体下载失败', err)
      },
    })

最终效果图是这样

handleInput(e) {
   this.val !== e.detail.value && (this.val = e.detail.value)
},

如果val的值和方法返回的值不一样时赋值一下，这样就解决丢失文字和报错的问题了



当页面只有一个输入框的时候用上面的方法好解决，如果是有多个输入框就要用另外的@blur失去焦点方法了



多个输入框修改方法1：

给每个输入框加个@blur失去焦点事件 ， 第2个参数把变是名带过去

 <u-input
      v-model="value1"
      type="text"
     @blur="inputBlurFn($event, 'value1')"
/>

然后在methods里加个事件赋值下

    handleInput(e) {
      // 所有有u-input的页面都需要加个这个函数，不然会报错，报错让人很不爽
    },
    inputBlurFn(e, key) {
      // console.log('外面的输入框失去焦点', e, key)
      this[key] !== e && (this[key] = e)     //不相等的时候赋值下
    },

这样就可以了 ，但是如果多个页面有输入框这样改起来又麻烦 ，索性我直接去修改源码了



多个输入框修改方法2：

定位到  components\uview-ui\components\u-input\u-input.vue 输入框文件修改 handleBlur 事件，在方法里加入下面代码

      if (this.defaultValue !== event.detail.value) {
        this.defaultValue = event.detail.value
        this.$emit('input', this.defaultValue)
      }

就行了，每个使用u-input的页面都需要加个 handleInput 函数防止报错。

storePassword = xieyiyi1011  #密码
keyPassword = xieyiyi1011 #密码
keyAlias =  xieyiyi  #别名
storeFile = ../../reward.jks  #文件路径

3、打开 android\app\build.gradle 文件，记住是app下的build.gradle文件，在28行左右插入下面代码

def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {keystoreProperties.load(new FileInputStream(keystorePropertiesFile))}

4、继续在build.gradle文件的60行左右，插入如下代码

signingConfigs {
        debug {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile file(keystoreProperties['storeFile'])
            storePassword keystoreProperties['storePassword']
        }
        release {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile file(keystoreProperties['storeFile'])
            storePassword keystoreProperties['storePassword']
        }
    }

这样设置debug包也会带上签名，就可以测试微信分享了

@click="funName($event , ...参数)"

二、数组对象更新不想用$set的时候，使用下面代码强制刷新下就好

this.$forceUpdate()

三、页面定时器如果在destroyed()销毁页面的时候清除定时器，会难以维护

 data() {
    return {
      timer: null,
      num: 1,
    }
  },

  mounted() {
     this.timer = setInterval(() => {
        console.log('定时器加1', this.num++)
      }, 1000)
  },
  destroyed() {
    clearInterval(this.timer)
  },

使用hook:destroyed可以把清除定时器代码写在一起，注释定时器的时候可以方便一起注释了

methods: {
    startTimer() {
      this.timer = setInterval(() => {
        console.log('定时器加1', this.num++)
      }, 1000)
      //直接在这写清除定时器方便维护
      this.$once('hook:destroyed', _ => {
        clearInterval(this.timer)
      })
    },    
  },

四、苹果新版ios系统在微信浏览器中长按图片会出现拖动事件，会使opacity透明的图片显示出来，常用的是隐藏的带二维码的海报长按保存时出现拖动了。禁止图片拖动事件就好了



JS原生写法，给img标签加上下面代码

ondragstart="return false"

VUE写法

<img  @dragstart="dragstartFn" />

dragstartFn(e) {
   e.preventDefault()
   return false
},

五、苹果ios微信H5里父级设置border-radius圆角后overflow: hidden失效的问题，父元素设置以下两个CSS属性

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);