小程序介绍

目录结构

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": "兵团食用农产品合格证助手","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 = thisvar currentTime = that.data.currentTimevar 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 //printNumbervar currentPrint = that.data.currentPrintvar bufvar dataViewif (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)}}}})},

四、小程序真机调试

小程序的控制台：

真机调试的控制台：

手机上打开控制台：

五、小程序的更新与发版

如果需要测试环境，则在微信小程序官网，在版本管理->开发版本，选择你要用做测试的版本，将其设为体验版。

注意：
微信的 web-view 组件就是一个嵌在小程序里的浏览器，它在缓存上并没有完全遵照上述的规则，也即它的缓存并不能及时得到清理。想必下面的操作大家都有尝试过：

· 手动退出小程序，再次进入；
· 将微信从后台退出再打开并重新进入小程序；
· 修改 Nginx 关于 Cache-Control 的配置；
· 用 debugx5.qq.com 手动清除安卓微信浏览器缓存；
· iOS 利用微信自带清楚缓存功能。

无法及时刷新缓存会导致发布了最新的页面，而小程序里仍然是以前的页面，从而会带来许多问题，如前后端的数据不一致，新的特性无法及时起作用，修改的问题没有得到解决等等。这里需要说明一下：web-view 在过一段时间（时间不定，一天或者几小时，无明显规律）是可以进行缓存刷新的。

微信小程序笔记、小程序打印相关推荐

springboot+微信小程序“微印象”在线打印预约系统的设计与实现毕业设计源码061642
摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微印象在线打印预约小程序被用户普遍使用,为方 ...
基于微信小程序的校园自助打印系统小程序
文末联系获取源码开发语言:Java 框架:springboot JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:ecl ...
微信小程序学习笔记 ( 小程序主体学习二逻辑层 app.js 扩展高级食用方法)
目录结构上图是我建立的的微信小程序的目录结构主体学习逻辑层(App Service) 小程序开发框架的逻辑层由 JavaScript 编写. 逻辑层将数据进行处理后发送给视图层,同时接受视 ...
微信小程序笔记（三）Wepy使用记录—Stylus预编译基本使用
Wepy使用记录-Stylus预编译基本使用坏境搭建请前往wepy框架官网淘宝 NPM 镜像 wepy新建wpy初始化模板参考创建空项目使用wepy init empty 项目名称命令来创 ...
【Cxinny】微信小程序笔记
事件绑定 bindtap:类似click bindinput:文本框的输入事件 bindchange:状态改变时触发事件对象的属性列表event target是触发该事件的源头组件,而current ...
微信小程序笔记(包含node.js简介)
一.小程序基础知识 1. 小程序简介小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 2. CSS样式 https://www.w3school.c ...
wx小程序笔记（2）
wx小程序笔记第三章:常用组件第一节:scroll-view组件 view: scroll-view: 设置横向滚动: 设置竖向滚动: scrolltoupper和scrolltolower事件: ...
uni-app开发小程序,笔记记录6 商品详情页
学习地址零基础玩转微信小程序:黑马程序员前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署) uniapp - 黑马优购笔记地址知识点 1 数据加 ...
个人项目-仿微信小打卡小程序
#1 项目说明由于受限于微信认证不通过(个人号无法认证),超出了小程序涉及的类目(社交-笔记),因此无法审核通过进行发布,只能体验版使用.为了项目展示,就只能放到博客上面来了. 本项目只是个人学习项 ...
微信小程序和小游戏自动化测试
版权声明:允许转载,但转载必须保留原链接:请勿用作商业或者非法用途此文章来源于项目官方公众号:"AirtestProject" Airtest Project自动化测试方案除了支 ...

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