微信小程序笔记、小程序打印

申小璇

已于 2023-05-24 11:11:07 修改

阅读量3.2k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序小程序前端

于 2022-06-22 14:34:21 首次发布

本文链接：https://blog.csdn.net/weixin_49608678/article/details/125205470

版权

微信小程序专栏收录该内容

1 篇文章

订阅专栏

小程序介绍

目录结构

在这里插入图片描述

app.js

//程序的入口
App({
    //小程序的生命周期函数
    onLaunch: function () {
        this.globalData.sysinfo = wx.getSystemInfoSync()
    },
    //可以定义一些全局的函数
    getVersion: function () { //获取微信版本号
        return this.globalData.sysinfo["version"]
    },
    //也可以定义一些全局变量，通过app.globalData来调用
    globalData: {        
    }
})

单个页面的目录结构

在这里插入图片描述

.wxml : 用来描述当前这个页面的结构，同时提供了类似于Vue中指令的语法
.js : 用来定义当前页面中用到的数据、交互逻辑和响应用户的操作
.json : 用来定义当前页面的个性化配置，例如，为每个页面单独配置顶部颜色、是否允许下拉刷新等
.wxss : 用来定义样式

注意：在小程序页面的.js文件当中，即使我们没有任何的逻辑要写，也要在js文件中写一个页面初始化的Page({})函数

生命周期

生命周期：是指一个对象从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段
小程序应用的生命周期：

App({
  //小程序初始化完成时，执行此函数，全局只触发一次。可以做一些初始化的工作。
  onLaunch: function(options) { },
  
  //小程序启动，或从后台进入前台显示时触发。
  onShow : function(options) { },
  
  //小程序从前台进入后台时触发。
  onHide : function() { }
})

小程序页面的生命周期：

Page({
  //监听页面加载，一个页面只调用1次
  onLoad : function(options) { }，
  //监听页面显示
  onShow : function() { },
  //监听页面初次渲染完成，一个页面只调用1次
  onReady : function() { },
  //监听页面隐藏
  onHide: function() { },
  //监听页面卸载，一个页面只调用1次
  onUnload: function() { }
})

Page中除了生命周期函数外，自定义的函数和变量，还有一些事件的监听都是写在这里

Page({
  //监听页面滚动
  onPageScroll: function() {
    // Do something when page scroll
  },
  //自定义函数
  viewTap: function() {
    this.setData({
      hi: 'nizhenhao.'
    }, function() {
      // this is setData callback
    })
  },
  //自定义的变量
  data: {
    hi: 'nihao'
  }
})

一、微信小程序的关键配置

app.json

{
    "pages": [
        "pages/web/web",
        "pages/all/all",
        "pages/camera/camera",
        "pages/scanCode/scanCode",
        "pages/result/result"
    ],
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#2069d7",
        "navigationBarTitleText": "xxxxxxx",
        "navigationBarTextStyle": "white"
    },
    "sitemapLocation": "sitemap.json"
}

pages 数组：配置小程序的页面路径（第一个路径为默认访问的路径）
window 对象：用于设置小程序的状态栏、导航条、标题、窗口背景色
在这里插入图片描述

开发配置
服务器域名请在「小程序后台 - 开发 - 开发设置 - 服务器域名」中进行配置。

注意：
域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议；
域名不能使用 IP 地址（小程序的局域网 IP 除外）或 localhost；
可以配置端口，如 https://gago.com:8080，但是配置后只能向 https://gago.com:8080 发起请求。如果向 https://gago.com等 URL 请求则会失败。
如果不配置端口。如 https://gago.com，那么请求的 URL 中也不能包含端口，甚至是默认的 443 端口也不可以。如果向 https://gago.com:443 请求则会失败。
业务域名是在web-view中加载的h5的地址。

二、小程序与网页间通信

小程序与H5跳转

H5 ==> 小程序

1、在H5页面引入JSSDK
首先需要在H5页面中引入JSSDK，它可以让H5页面的js文件执行微信小程序的部分API命令。
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
2、使用wx API路由跳转
url就是在小程序里app.json的pages里面写的路由，需要传的参数就像get请求那样拼接在后面就行。

window.wx.miniProgram.navigateTo({
      url: `../all/all?${queryString.stringify(params)}`,
    });

接收参数：在小程序的生命周期函数onLoad里接收一个options
onLoad: function (options) {}

小程序 ==> H5

wx.navigateBack({
  delta: 2,
});
wx.navigateTo({
    url: `../web/web`,
})

navigateBack：顾名思义就是返回，delta就是路由回退的数量
navigateTo：这个就是跳转到制定到路由，这里是返回到的地方。
使用navigateTo，会重新渲染H5的页面，也就是会经过路由重定向到登陆页的过程，所以H5中要做token的保存和验证。

小程序向H5传输数据

每个微信小程序需要事先设置通讯域名（上面的服务器域名），小程序只可以跟指定的域名进行网络通信。包括普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）

request

文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

wx.request({
      url: 'url',
      method: 'POST',
      data: {
        xxx: xxx
        ...
      },
      header: {
        'content-type': 'application/json', // 默认值
      },
      success(res) {
        that.printSuccess(app.globalData.printData.certificateCode);
      }
    })

三、小程序与打印机间通信

搜索蓝牙、获取蓝牙列表、停止搜索
建立连接，获取deviceId
连接成功后获取蓝牙设备服务（serviceId）
根据deviceId、deviceId 来获取设备的读写特征。（notify、write、read）
向低功耗蓝牙设备特征值(write)中写入二进制数据

在小程序中，要使用蓝牙能力（Beacon 除外）必须首先调用 wx.openBluetoothAdapter 初始化蓝牙适配器模块，其生效周期为调用 wx.openBluetoothAdapter 至调用 wx.closeBluetoothAdapter 或小程序被销毁为止。

每个蓝牙设备都有唯一的 deviceId 来标识。建立蓝牙连接需要的参数就是这个deviceId。需要注意，在不同设备上扫描获取到的 deviceId 可能是变化的。因此 deviceId 不能写死在代码中。

向低功耗蓝牙设备特征值(write)中写入二进制数据

建议每次写入的buffer不超过20字节，超过会有写入错误的风险
所以需要将数据分包发送

Send: function (buff) { //分包发送
    var that = this
    var currentTime = that.data.currentTime
    var loopTime = that.data.looptime // parseInt(buff.length / time);
    var lastData = that.data.lastData // parseInt(buff.length % time);
    var onTimeData = that.data.oneTimeData //每次数据大小：20字节
    var printNum = that.data.printSize //printNumber
    var currentPrint = that.data.currentPrint
    var buf
    var dataView
    if (currentTime < loopTime) {
      buf = new ArrayBuffer(onTimeData)
      dataView = new DataView(buf)
      for (var i = 0; i < onTimeData; ++i) {
        dataView.setUint8(i, buff[(currentTime - 1) * onTimeData + i])
      }
    } else {
      buf = new ArrayBuffer(lastData)
      dataView = new DataView(buf)
      for (var i = 0; i < lastData; ++i) {
        dataView.setUint8(i, buff[(currentTime - 1) * onTimeData + i])
      }
    }
    wx.writeBLECharacteristicValue({
      deviceId: app.BLEInformation.deviceId,
      serviceId: app.BLEInformation.writeServiceId,
      characteristicId: app.BLEInformation.writeCharaterId,
      value: buf,
      success: function (res) {
        if (currentPrint == printNum) {
          wx.showToast({
            title: '打印成功',
          })
        }
      },
      fail: function (e) {
        wx.showToast({
          title: '打印失败',
          icon: 'none',
        })
      },
      complete: function () {
        currentTime++
        //分包发送结束
        if (currentTime <= loopTime) {
          that.setData({
            currentTime: currentTime
          })
          that.Send(buff)
        } else {
            //是否打印多张
          if (currentPrint == printNum) {
            that.setData({
              looptime: 0,
              lastData: 0,
              currentTime: 1,
              isLabelSend: false,
              currentPrint: 1
            })
            that.recordPrintNum(printNum);//将打印数量提交到后台
          } else {
            currentPrint++
            that.setData({
              currentPrint: currentPrint,
              currentTime: 1,
            })
            that.Send(buff)
          }
        }
      }
    })
  },