微信小程序开发 学习笔记(一)

目录

小程序开发学习笔记

一、一些问题

1.安装相关

2.引用Dom | 构造ImageData

3.使用异步函数加载模型

4.canvas 函数

5.Mock


小程序开发学习笔记

        今年以试试手的心态报了小程序开发赛,对这方面没什么经验,边学边做,用这个系列记录一下开发中的一些内容。


一、一些问题

1.安装相关

        (1).从微信开发者网站下载开发者工具,可以申请一个测试号,如果要申请正式ID没及时点邮箱/不小心退出去了,需要返回主页用邮箱密码登录,如果直接用手机扫码可能登不上或显示已经被注册过。

        (2).参赛要求使用正式的AppID发布,因此要注意申请一下正式的ID,如果要用云开发功能的模板也需要正式ID。

        (3).这次开发用到了nodejs,装了下环境,注意先安装nodejs,在环境变量Path中添加nodejs文件夹的路径,在小程序中新建一个终端,输入npm初始化语句进行初始化,可以事先在小程序根目录添加package.json,添加要安装的modules。

$ npm init -y         #初始化
$ npm install xxx     #安装  

        添加后,会在项目根目录生成node_modules文件夹,接着使用开发者工具-工具-构建npm来进行项目内构建。

        (4).使用tsfl.js上线模型,安装TensorFlow.js,这是一个非常方便的基于JavaScript的机器学习模型训练库。这里也是使用了npm安装,注意对应的版本号以及相应的小程序基础库版本。安装后直接import即可。

2.引用Dom | 构造ImageData

        由于小程序的线程特点,无法直接使用 document.getElementByXX 如是的语句,如果一定要使用,根据开发文档,应该写为:

handleInfo(){
    const that = this;
    var query = wx.createSelectorQuery(); //创建选择器
    query.select('.kd').boundingClientRect();
    query.exec(function (res) {
          //返回一个含有指定标签信息的数组,可以对指向的元素含有的信息进行操作
         that.setData({
             data:res[0].height
         })
    });
 },

        在TensorFlow.js中有一个fromPixels()的函数,用于创建指定图像的像素张量,需要一个四维四通道的Tensor图像数据,以及输出的通道数,默认为4。

 const tensorImg = tf.browser.fromPixels(input, num);

        项目中用到了这部分代码,但input这一块卡了很久,因为第一个参数按照要求,必须是HTMLVideoElement、HTMLImageElement、HTMLCanvasElement、browser中的ImageData或OffscreenCanvas。当时的设想是直接在前端写好识别的逻辑,通过chooseImage()获取到上传的图片后,直接对返回的临时图片进行识别,但这一个参数无法通过url来直接读取图片信息,试过readFile()、把图片转成Base64读取信息、新建Image对象、通过Img元素获取(HTMLImageElement 一般支持<img>而不是<image>,前者src不能使用绝对路径,但由于获取到的临时图片是绝对路径,因而无法使用),这些方法多少都有些欠缺。后来想到了将图片转换为 canvas ,wxml设置canvas-id,初始化页面创建canvas,通过 canvas 调用 canvasGetImageData()。

const dt = wx.canvasGetImageData();

        在canvasGetImageData返回的信息中构建一组数据:新建Uint8Array类型化图片数据、画布长宽,之后便可以调用tidy()、fromPixels()、slice() 对图像数据进行处理。

wx.canvasGetImageData({
      canvasId: 'canvas',
      height: 640,
      width: 640,
      x: 0,
      y: 0,
      success: async res=>{
        const imgData = {
          data: new Uint8Array(res.data),
          width: res.width,
          height: res.height
      };
});

3.使用异步函数加载模型

        因为是在前端本地跑模型,有的模型可能非常大,加载模型的时间过长,等待加载的时间相当浪费,使用异步函数 (async) 和 异步方法 (await),await等待async,暂停执行异步函数后面的代码,让出 JS 运行时的执行线程,搭配使用可以不影响页面正常加载而运行,提高程序的效率。

        如果有返回值,这个返回值被 Promise.resolve() 包装成一个 Promise 对象,async 始终返回 Promise 对象。在函数外部调用这个函数可以得到它返回的 Promise。

 async loadModel(){    
       await net.load({
          //模型参数设置
           ...
       }).then(model => { //有返回值返回一个 Promise 对象,没有则是undefined
         console.log("加载完成!");
       }).catch(e => {
         console.log("加载失败!");
       })
           ...
 };

4.canvas 函数

(1).draw函数

        使用canvas 绘制时,用到了 canvas.draw() 函数, 该函数表示本次绘制是否接着上一次绘制。即 reserve 参数为 false,则在本次调用绘制之前 native 层会先清空画布再继续绘制;若 reserve 参数为 true,则保留当前画布上的内容,本次调用 drawCanvas 绘制的内容覆盖在上面,默认 false。 第二个参数为一个回调函数,回调函数保证了canvas在清空之前执行逻辑。

draw(
            reserve?: boolean,
            /** 绘制完成后执行的回调函数 */
            callback?: (...args: any[]) => any
): void

        回调函数:将函数作为参数传到另一个主函数里,当该主函数执行后,再执行参数函数。回调函数可以是一个匿名函数。

//延时/计时器函数回调
setTimeOut(function () {
       ...
},1000);

//dom函数回调
document.getElementById("clear").onclick = function() {
       ...
};

//POST ajax 函数回调
var x = $("input").val();
$.post("index.html",{valu:x}, function(res){
       ... //传递val = x
});

(2).drawImage函数

        该函数可以用wx.chooseImage 获取到图像后用 wx.getImageInfo 得到图像资源信息后调用。

imageResource

                        将要绘制的图像资源

        getImageInfo / downloadFile 下载网络资源

sx,sy

imageResource的矩形选择框的左上角 x、y坐标

sW,sHimageResource的矩形选择框的宽度、高度
dx,dy

imageResource的左上角在目标 canvas 上 x、y轴的位置

dW,dH

canvas 上 绘制imageResource的宽度、高度,允许对绘制的imageResource进行缩放,canvas 的输出宽度、高度

drawImage(imageResource: string,
            sx: number,sy: number,
            sW: number,sH: number,
            dx: number,dy: number,
            dW: number,dH: number
): void

5.Mock

        当时开发的小程序项目基本上集中于前端开发,为了模拟从后端获取数据的效果,采用了mock。先使用 npm 安装 mock.js ,可以使用 --save-dev 来启用并存入 package.json,保留模块信息。

$ npm install mockjs

        在app.js中加入 require(../mockjs) 调用。然后在开发者工具调试器中找到Mock,根据需求调整Mock的配置,之后执行下面的代码得到返回的数据。其他参数参考官方文档 API Mock | 微信开放文档 (qq.com)

wx.request({
  url: 'https://xxxx.com/ajax?dataType=member',
  dataType: 'json',
  success(res) {
    console.log(res)
  }
})

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值