1、通常情况下小程序的背景色backgroundColor要和页面的颜色设置成同一颜色。 2、justify-content 设置的是主轴上的对齐方式，而align-items 设置的是交叉轴上的对齐方式。通过观察flex-direction的值来判断 竖直方向还是水平方向哪一条是主轴。若flex-direction: column；那么竖直方向上为主轴，若flex-direction:row，那么水平方向上为主轴。 3、当一行内所有元素的宽度相加超过屏幕的宽度时，flex布局会将每一个元素进行压缩，以保证所有的元素都能显示在同一行内。为了让元素换行，可以使用flex-wrap: wrap。 4、小程序中的像素单位rpx可以根据设备的屏幕进行自适应。若一个字体设置成22px，那么不管设备是IP5还是IP6都会显示同样大的字，但是使用了rpx作为单位之后，在IP5上显示的字会小于IP6上的字。 5、在全局样式表（app.wxss）中定义的样式，只有font和color才会被组件继承,其他的样式都不会被组件继承（这样确保了组件的封闭性）。但是几乎所有的样式都可以被page给继承。 6、在设计组件时，尽量不要让组件产生一些无意义的空白。 7、使用bind:tap="onClick"来为页面元素绑定响应时间，此处为单击事件。 catch:tap可以阻止冒泡事件。 8、组件复用，代码分离。 9、一般不会将请求后台的代码写在组件中。如果组件中需要请求后台了应该是model的文件夹内创建相应的JS文件去请求后台，例如demo中的like.js。 10、在小程序的JS文件中，声明的data对象是该js文件中的私有变量，properties是公开的属性，外部可以访问，如果需要从外部传递进来，那么就需要将属性声明在properties中。不要在data和properties中声明相同的变量，那样会覆盖掉其中的一个变量。 11、修改data对象中的属性要使用this.setData方法来设置。 12、不要在properties的属性中，修改属性本身的值。 index: { type: Number, observer: function(newVal, oldVal, changedPath) { //当组件的值被改变时，会主动的调用observer //newVal：改变之后的值。 //oldVal：改变之前的值。 let val = newVal < 10 ? ‘0’ + newVal : newVal; this.setData({ index:val//错误的写法。会导致内存泄漏。 }); } } 13、在小程序中使用缓存的时候，要确定哪些部分是可以被缓存的，哪些是不能缓存的。（页面会实时发生变化的内容就是不能被缓存的） 14、小程序内置的标签是可以使用hidden=“{{true}}”属性来控制其显示与否的。但是开发者自己编写的组件就无法使用hidden属性来控制其显示或影藏（除非放在自己开发组件的所在WXML文件的view标签内）。 可以使用 wx:if="{{true}}" 来控制自己编写的组件的隐藏与否。 如果需要频繁的切换组件的显示或隐藏，那么微信官方推荐使用hidden，而如果不是频繁切换的话，那么微信官方推荐使用wx:if来控制组件的显示或隐藏。 15、在老板小程序中存在模板template这个概念，在template中可以提取共用的wxml和wxss内容实现组件的元素共用。新的小程序中，可以创建一个common.wxss文件。然后再所要引用的wxss文件中，使用@import “…/common.wxss”;将样式导进来 在小程序中播放音乐有两种方式，老的那种方式存在一定的bug，建议采用新的播放方式：背景音乐播放管理wx.getBackgroundAudioManage()来做。 16、小程序中的behavior可以多继承，当父类中存在一个属性，并且子类中也声明了该属性时，子类中的属性会覆盖掉父类中的那个属性（两个属性的名字相同，但是类型不同）。但是声明周期函数不会覆盖，而是以此执行。 17、使用 @import “…/common.wxss”; 可以为wxml文件引入公用的样式。 18、16和17分别解决了在小程序中复用js和wxss的问题，在wxml也可以通过模板的方式进行复用，但是在组件中复用wxml的话带来的意义并不是特别的大。 19、navi组件和music组件之间的通信，可以通过classic组件进行传递。子组件(navi)通过事件的方式将数据传递给父组件（classic），然后父组件再传递给另外一个子组件（music）。 20、wx:key 如果wx:for后面遍历的是一个object，可以使用object下的某一个属性来作为wx:key的取值，且该属性需要满足不重复且是数字或者是字符串。如果wx:for需要遍历的是一个数组或者字符串的话，那么wx:key后面的取值是*this。 21、在小程序中使用wx.navigateTo()进行小程序页面的跳转。让组件去进行页面的跳转会降低组件的通用性。如果在主页面中进行跳转，需要在组件的js文件中使用triggerEvent将组件内的参数传递到主页面，再在主页面中进行页面跳转。如何取舍？如果编写的组件不会和其他的项目进行共用，那么就可以在组件内部进行页面跳转。 22、组件之间的传参是通过properties中的属性进行传参的。而页面之间的传参是通过onload生命周期函数的options参数中。const id=option.id。就能接收到从外部传入的id了。 23、slot，插槽。感觉上像是一个占位符，可以在组件的外部向组件内部传递一个wxml标签。如果不传递，也不会有任何的显示。 在组件中需要声明属性 options:{ multipleSlots:true }, <view class=‘container’> <text>{{text}}</text> <slot name=“after”></slot> //这里预留一个插槽。 </view> 使用的时候需要将传入的标签，包裹在组件标签的内部： <block wx:for="{{comments}}"> //block用于循环，不是slot的相关知识点。 <v-tag text="{{item.content}}"> <text slot=“after”>{{’+’+item.nums}}</text> //after是插槽的名字。 </v-tag> </block> 24、在v-tag标签中加入属性 tag-class=“ex-tag”，然后在tag组件的js文件中写上externalClasses:[‘tag-class’],然后在再tag.wxml文件的view标签中增加class=‘tag-class’，这样就可以引入外部样式了。如果标签中存在多个样式，那么可能会造成冲突。样式加不上去。如果外部样式想要覆盖普通样式，可以使用!important就可以覆盖普通样式了。 .ex-tag{ background-color:#effbdd !important; } 25、WXS相当于在html标签中直接调用JS代码，可以用来写小程序的过滤器。小程序中的WXS只支持ES5的语法。WXS中文本并不默认解析转义字符例如   。当需要解析这些转义字符时，可以在调用过滤器的标签上添加属性decode。例如：<text class=‘content’ decode=’{{true}}’>{{util.format(book.summary)}}</text> 中的 decode=’{{true}}’ 26、下滑加载更多有两种实现方式：scroll-view和Page的onReachBottom，推荐使用onReachBottom。onReachBottom在组件中无法使用，所有要在Page中使用，并结合12点中的observer来实现下滑后，加载更多内容的动作。（在组件中定义一个属性，然后生成随机字符串或者随机数，在page中每次触发onReachBottom后，更改组件中属性的值，从而使用observer）。 27、小程序中，属性的名字尽量不要用驼峰命名法。在js中声明了一个属性openType，在wxml文件中使用的时候，使用连字符来调用。open-type=“xxxx”。 28、获取授权：老版本使用wx.getUserInfo来弹窗询问是否授权。新版本需要使用小程序中的组件button来获取授权。 在.wxml文件中，使用<button open-type=“getUserInfo” bindgetuserinfo=“getUser”>授权</button>

更新时间（2020/12/2) 大家好，众所周知，今年左右新出的订阅消息对商家和用户的友好度都极低，少了一个直接发信息到微信的最重要的渠道。 [图片] 那么我们动动歪心思，直接发消息到公众号（其实这是不是wx的本意？？？）。 所有服务号都可以在功能->添加功能插件处看到申请模板消息功能的入口，但只有认证后的服务号才可以申请模板消息的使用权限并获得该权限。 为方便公众号用户方便、快捷地接入小程序服务，公众号用户可复用公众号资质创建小程序。当前每个账号的模板消息的日调用上限为10万次，单个模板没有特殊限制。当账号粉丝数超过10W/100W/1000W时，模板消息的日调用上限会相应提升。这还不美滋滋吗，对于小商家来说等于无限次了。 所以我们一开始最好就在公众号进行微信认证，复用公众号的资质来注册小程序（注意，可以复用5个（好像））。 （我付出了￥300的惨痛代价）。 -------------------------------------------------------------------------------- 以上搞定后，流程走起 重点中的重点：为您的函数申请公网固定ip 有了这个ip之后，没有服务器的我们（穷）就能绕过ip白名单，这不正是真正的云开发精神吗？ [图片] 0.用你的小程序账号登陆腾讯云，并在里面新建一个云函数 [图片]>>[图片] 选择你要发消息到公众号的小程序 [图片] [图片] -----------------我是2020/10/23的拎包哥----------------------- 创建并选择角色 记得在 https://console.cloud.tencent.com/cam/role 创建角色 [图片] 勾选tcb，scf [图片] 在搜索框里搜scf，tcb后，有什么策略就勾选什么策略 [图片] [图片] 创建角色名 [图片] 在云函数启用刚刚新建的角色 [图片] ps. 记得做好这一步，不然各种报错 missing authorationo key // 报错：缺失授权键 you are not authorized to xxx // 你没有权限去xxx 1.打开 https://cloud.tencent.com/document/product/583/38198 ，申请白名单 [图片] 2.审核通过后，再跟着步骤走。 [图片] 最后你的云函数会得到一个公网固定ip [图片] 3.开始码云函数的代码 如下，记得把wx-server-sdk和request-promise的包都npm下来。 依赖包可以通过这里上传上来 [图片] 我的做法 把获取的accessToken储存在云开发的数据库里。这样就不用担心access token的生成次数超过限制了 'use strict'; const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database() const resInfo = db.collection('resInfo') const appid = '公众号的APPID'; // APPID const secret = '公众号的密钥'; // Secret const rp = require('request-promise') exports.main_handler = async (event, context, callback) => { var that = this var options = { url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + appid + '&secret=' + secret, json: true } return await rp(options) .then(async res1 => { return await resInfo.where({name:'outInfo'}).update({ data: { access_token: res1.access_token } }).then(res2 => { return res2 }) }).catch(err => { return err }) } 公众平台以access_token为接口调用凭据，来调用接口，所有接口的调用需要先获取access_token，access_token在2小时内有效，过期需要重新获取，但1天内获取次数有限，开发者需自行存储，详见获取接口调用凭据（access_token）文档。4.设置触发器（触发器偶尔会失灵，所以最好是59min触发一次）。 [图片] 权限设置 由于云函数的访问不存在openid，所以安全规则必须为任何人可读可写。 [图片] 5.有了可以稳定刷新的access_token后，根据需求挑选你的公众号模板消息，开始你的表演。 例如：做餐饮小程序的朋友都想用户下单后发送订单信息到商户。那么就需要 获取商户的openid 步骤 注：公众号的openid在小程序开发工具就可以查出来 5.1 获取公众号openid列表 https://api.weixin.qq.com/cgi-bin/user/get?access_token=ACCESS_TOKEN 注意我没有加上next_openid = NEXT_OPENID，是为了取出公众号的所有的openidopenid列表在 res.data.openid5.2 for循环openid列表，根据商户的微信信息（nickname，city等等）找出只属于商户的openid https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN --------------------------------------- var openidList = openid列表 for(var i in openidList){ wx.request({ url:'https://api.weixin.qq.com/cgi-bin/user/info?access_token='+ openList[i] + '&lang=zh_CN', success(){ console.log(....) } }) } 这里就不用unionid了，不用浪费时间在上面）, 就可以使用只发给商户的模板消息了。 公众号对应文档链接 https://developers.weixin.qq.com/doc/offiaccount/User_Management/Getting_a_User_List.htmlhttps://developers.weixin.qq.com/doc/offiaccount/User_Management/Get_users_basic_information_UnionID.html#UinonId， -----------------------------------------效果图--------------------------------------- [图片] -------------------------------------------------------------------------------- 哎，差不多了，感觉是有点折腾，如果感觉还是不够直白的，可以指出来我继续补充 。 求点赞，你的评论就是对拎包哥最大的支持。 [图片][图片] ===================更新于2020/10/23======================

[图片] 距离上一次冒泡已经是两个月前了，上一篇文章还是挂人的水帖，这次拎包哥带来的是市面上已经成熟存在的wifi打印机。 我浏览了一遍社区，但却没啥教程，为啥大家都藏着掖着，难道。。。这里有啥大咪咪？ 其实不然，代码真的很简单（看上去有点长），大家耐心走个流程（粘贴）就完事儿了。 ------------------------------------------------------------------------------------ 0.首先，买部飞鹅云的wifi打印机（没广告费），大概300RMB左右（不清楚wifi打印机对比蓝牙打印机优势的可以先百度一下） [图片] 这里吐槽一下智联云wifi打印机 不要被他们的噱头：“多送10卷纸”所蒙蔽了双眼（这就是我踩过的坑哈哈）。服务态度。。。真的一言难尽，每次打服务热线过去都是播完一整首的广场舞歌曲后，机器人告诉我无人接听做结束。下载api发现也不能ctrl c+ ctrl v（菜）直接使用，然后我进QQ群去咨询，半天也没人鸟我。综上所述我才退的货去买的飞鹅云，粘贴api代码，机器立马（一两天）就跑起来了。 1.打开网址：http://admin.feieyun.com/，注册，然后添加打印机 [图片] [图片] 填入这两个信息（在打印机底部）就够了 [图片][图片] 2.在飞鹅开放平台注册开发者账号（放心，不要钱的） 打开个人中心，进行个人实名认证（不需要企业认证） [图片] 认证成功后你会得到自己的开发者信息 [图片] 3.粘贴官方的api到自己的小程序（我直接粘贴过来了，方便讲解） 要改的只有这几个地方： 3.1认证通过后得到的开发者信息 + 打印机底部的SN编号 var USER = "xxxxxxxxxxxxxxxxx"; //必填，飞鹅云 http://admin.feieyun.com/ 管理后台注册的账号名 var UKEY = "xxxxxxxxxxxxxxxxx"; //必填，这个不是填打印机的key，是在飞鹅云后台注册账号后生成的UKEY var SN = 'xxxxxxxxxxxxxxxxx'; //必填，打印机编号,打印机必须要在管理后台先添加 USER和UKEY在这里 [图片] SN在这里（密钥不用管） [图片] 3.2 去掉注释 这里的1代表一次打印1张，如此类推。。。 // print_r(SN,orderInfo,1); 3.3 修改orderInfo里的数据到自己想要的格式 ps. 记得勾选这个 [图片] 官方算法 或者你可以直接跑起来先爽一下，但自己的数据还是要有算法来适应打印纸。 var orderInfo;        orderInfo = '小程序测试打印';        orderInfo += '名称　　　　　 单价  数量 金额';        orderInfo += '--------------------------------';        orderInfo += '饭　　　　　 　10.0   10  10.0';        orderInfo += '炒饭　　　　　 10.0   10  10.0';        orderInfo += '蛋炒饭　　　　 10.0   100 100.0';        orderInfo += '鸡蛋炒饭　　　 100.0  100 100.0';        orderInfo += '西红柿炒饭　　 1000.0 1   100.0';        orderInfo += '西红柿蛋炒饭　 100.0  100 100.0';        orderInfo += '西红柿鸡蛋炒饭 15.0   1   15.0';        orderInfo += '备注：加辣';        orderInfo += '--------------------------------'; 我的算法 orderInfo += '名称　　　　　 单价  数量 金额';orderInfo += '--------------------------------';for (var i in list) { if (list[i].name.length < 15) { aLength = list[i].name.match(reg).length * 2 a = list[i].name.concat(' '.repeat(15 - aLength)) } if (list[i].price.toString().length < 6) { b = list[i].price.toString().concat(' '.repeat(6 - list[i].price.toString().length)) } if (list[i].num.toString().length < 5) { c = list[i].num.toString().concat(' '.repeat(5 - list[i].num.toString().length)) } if (list[i].sinTtlPrice.toString().length < 5) { d = list[i].sinTtlPrice.toString().concat(' '.repeat(5 - list[i].sinTtlPrice.toString().length)) } orderInfo += a + b + c + d + ''} 完整官方小程序api 只是一个方法，不用node xx包，我等手残党福音！ [图片] [图片] //微信小程序https请求实例，根据自己的需求条件触发函数，推送订单打印test(e) {    //USER和UKEY在飞鹅云（ http://admin.feieyun.com/ ）管理后台的个人中心可以查看    var USER = "xxxxxxxxxxxxxxxxx";    //必填，飞鹅云 http://admin.feieyun.com/ 管理后台注册的账号名    var UKEY = "xxxxxxxxxxxxxxxxx";    //必填，这个不是填打印机的key，是在飞鹅云后台注册账号后生成的UKEY    var SN = 'xxxxxxxxxxxxxxxxx';    //必填，打印机编号,打印机必须要在管理后台先添加     //以下URL参数不需要修改    var HOST = "api.feieyun.cn";     //域名    var PATH = "/Api/Open/";         //接口路径    var STIME = new Date().getTime();//请求时间,当前时间的秒数    var SIG = hex_sha1(USER + UKEY + STIME);//获取签名     //标签说明：    //单标签:    //"<BR>"为换行,"<CUT>"为切刀指令(主动切纸,仅限切刀打印机使用才有效果)    //"<LOGO>"为打印LOGO指令(前提是预先在机器内置LOGO图片),"<PLUGIN>"为钱箱或者外置音响指令    //成对标签：    //"<CB></CB>"为居中放大一倍,"<B></B>"为放大一倍,"<C></C>"为居中,<L></L>字体变高一倍    //<W></W>字体变宽一倍,"<QR></QR>"为二维码,"<BOLD></BOLD>"为字体加粗,"<RIGHT></RIGHT>"为右对齐    //拼凑订单内容时可参考如下格式    //根据打印纸张的宽度，自行调整内容的格式，可参考下面的样例格式     var orderInfo;    orderInfo = '<CB>小程序测试打印</CB><BR>';    orderInfo += '名称　　　　　 单价  数量 金额<BR>';    orderInfo += '--------------------------------<BR>';    orderInfo += '饭　　　　　 　10.0   10  10.0<BR>';    orderInfo += '炒饭　　　　　 10.0   10  10.0<BR>';    orderInfo += '蛋炒饭　　　　 10.0   100 100.0<BR>';    orderInfo += '鸡蛋炒饭　　　 100.0  100 100.0<BR>';    orderInfo += '西红柿炒饭　　 1000.0 1   100.0<BR>';    orderInfo += '西红柿蛋炒饭　 100.0  100 100.0<BR>';    orderInfo += '西红柿鸡蛋炒饭 15.0   1   15.0<BR>';    orderInfo += '备注：加辣<BR>';    orderInfo += '--------------------------------<BR>';    orderInfo += '合计：xx.0元<BR>';    orderInfo += '送货地点：广州市南沙区xx路xx号<BR>';    orderInfo += '联系电话：13888888888888<BR>';    orderInfo += '订餐时间：2014-08-08 08:08:08<BR>';    orderInfo += '<QR>http://www.dzist.com</QR>';//把二维码字符串用标签套上即可自动生成二维码     // ***接口返回值说明***    //正确例子：{"msg":"ok","ret":0,"data":"123456789_20160823165104_1853029628","serverExecutedTime":6}    //错误：{"msg":"错误信息.","ret":非零错误码,"data":null,"serverExecutedTime":5}    // console.log(orderInfo);    //打开注释可测试    // print_r(SN,orderInfo,1);     var hexcase = 0;    var chrsz = 8;    function hex_sha1(s) {        return binb2hex(core_sha1(AlignSHA1(s)));    }    function core_sha1(blockArray) {        var x = blockArray;        var w = Array(80);        var a = 1732584193;        var b = -271733879;        var c = -1732584194;        var d = 271733878;        var e = -1009589776;        for (var i = 0; i < x.length; i += 16) {            var olda = a;            var oldb = b;            var oldc = c;            var oldd = d;            var olde = e;            for (var j = 0; j < 80; j++) {                if (j < 16)                    w[j] = x[i + j];                else                    w[j] = rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1);                var t = safe_add(safe_add(rol(a, 5), sha1_ft(j, b, c, d)), safe_add(safe_add(e, w[j]), sha1_kt(j)));                e = d;                d = c;                c = rol(b, 30);                b = a;                a = t;            }            a = safe_add(a, olda);            b = safe_add(b, oldb);            c = safe_add(c, oldc);            d = safe_add(d, oldd);            e = safe_add(e, olde);        }        return new Array(a, b, c, d, e);    }     function sha1_ft(t, b, c, d) {        if (t < 20)            return (b & c) | ((~b) & d);        if (t < 40)            return b ^ c ^ d;        if (t < 60)            return (b & c) | (b & d) | (c & d);        return b ^ c ^ d;    }     function sha1_kt(t) {        return (t < 20) ? 1518500249 : (t < 40) ? 1859775393 : (t < 60) ? -1894007588 : -899497514;    }     function safe_add(x, y) {        var lsw = (x & 0xFFFF) + (y & 0xFFFF);        var msw = (x >> 16) + (y >> 16) + (lsw >> 16);        return (msw << 16) | (lsw & 0xFFFF);    }     function rol(num, cnt) {        return (num << cnt) | (num >>> (32 - cnt));    }     function AlignSHA1(str) {        var nblk = ((str.length + 8) >> 6) + 1,            blks = new Array(nblk * 16);        for (var i = 0; i < nblk * 16; i++)            blks[i] = 0;        for (i = 0; i < str.length; i++)            blks[i >> 2] |= str.charCodeAt(i) << (24 - (i & 3) * 8);        blks[i >> 2] |= 0x80 << (24 - (i & 3) * 8);        blks[nblk * 16 - 1] = str.length * 8;        return blks;    }     function binb2hex(binarray) {        var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";        var str = "";        for (var i = 0; i < binarray.length * 4; i++) {            str += hex_tab.charAt((binarray[i >> 2] >> ((3 - i % 4) * 8 + 4)) & 0xF) +                hex_tab.charAt((binarray[i >> 2] >> ((3 - i % 4) * 8)) & 0xF);        }        return str;    }     // 打印订单方法：Open_printMsg    function print_r(SN, orderInfo, TIMES) {        wx.request({            url: 'https://' + HOST + PATH,            data: {                user: USER,//账号                stime: STIME,//当前时间的秒数，请求时间                sig: SIG,//签名                 apiname: "Open_printMsg",//不需要修改                sn: SN,//打印机编号                content: orderInfo,//打印内容                times: TIMES,//打印联数,默认为1            },            method: "POST",            header: {                "content-type": "application/x-www-form-urlencoded"            },            success: function (res) {                console.log(res.data)            }        })    }} 好了，大咪咪披露完了。可能还有什么纰漏，没关系，评论里见吧！ [图片] -=====================成果图========================= 应大家要求放上成果，图有点歪，当是治治大家的颈椎病吧。 [图片] [图片] ================更新于2020/7/22=========================