人们将90％的时间花在无聊的事情上。社会的发展使我们的休闲时间越来越多。除了工作之外，我们还从事其他娱乐活动。
程序员有点特殊。他们认为键入代码是娱乐活动的一部分，这不是少数。最近，使用bmob后端云提供数据存储服务来制作袖珍吉他小程序并不无聊，除了吉他乐谱图片，其他图片都存储在Qiniu中。
请单击此处以获取bmob 小程序开发文档。该文档详细简洁，主要是为了缩短开发周期，但是对于复杂的项目，建议使用自己的服务器来提供数据服务。
使用微信扫描QR码以预览源代码地址：/ alex1504 / wx ...
以下几点分享了小程序发展过程中的关键点和感受，解释：
小程序标签统称为组件，而Html标签统称为元素。部分内容将使用iconfont字体图标与vuejs和jQuery进行比较
新项目并添加图标
在app.wxss中以unicode引入
@font-face { font-family: 'iconfont'; /* project id 431644 */ src: url('//at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.eot'); src: url('//at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.woff') format('woff'), url('//at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.ttf') format('truetype'), url('//at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.svg#iconfont') format('svg');}复制代码
定义常规图标样式并定义伪元素
.icon{ display: inline-block; font-family: 'iconfont';}.icon-home::before{ content: "\e600";}复制代码
使用
复制代码
小程序事件绑定和处理程序
小程序与像vuejs这样的v模型没有双向绑定。使用jQuery之类的bindinput监视输入事件并在事件处理程序中更新数据。输入的值可以通过事件对象e.data.value获取。
// bindconfirm监听键盘回车事件，focus属性聚焦渲染组件时会自动弹出手机软键盘复制代码
bindSearchInput(e) { this.setData({ searchTxt: e.detail.value })}复制代码
小程序中的事件处理程序无法传递vue这样的参数，因为该事件处理程序只有一个默认参数事件对象。如果要获取for循环组件中元素的id，则可以通过与jQuery相同的方式传递Bind data属性。
复制代码
获取ID：
//事件处理函数navigateToDetail: function (e) { const id = e.currentTarget.dataset.id;}复制代码
防止事件冒泡
bindtap、bindlongtap、bindtouchstart、bindtouchmove、bindtouchend、bindtouchcancle复制代码
为防止冒泡事件，将catch替换为catch
setData
小程序的视图更新需要调用setData来修改绑定的数据。直接修改数据不会触发视图图层更新。 setData接受一个对象，该对象是需要添加或修改的属性。属性名称有点特殊，[]中的值将被识别为变量，因此，如果要修改对象数组中的属性，则只能预先拼接属性名称。错误的方法：
// 视图不更新this.data.searchSongs[index].love_flag': 2// SyntaxError: unknown: Unexpected tokenthis.setData({ 'searchSongs[' + index + '].love_flag': 2})复制代码
正确的方法：
setSongFlag(e) {// 注意setData属性名[]中的非整数值会被识别为变量let key = 'searchSongs[' + index + '].love_flag'this.setData({ [key]: 2})复制代码
关于图像组件
小程序 wxss背景图像和图像组件不支持本地网址。在H5的开发中，我们通常对页面上的某些图片使用img标签，这些图片不需要根据容器的大小进行显示，并且需要一些特殊的显示。使用背景的方式。但是小程序只需要图像分量。它提供了mode属性和背景定义图片以及img元素控制图片显示模式之间的比较
mode属性background-sizehtml img元素
scaleToFill
100％，100％（默认）
宽度：100％；高度：100％
aspectFit
包含
js实现
aspectFill
封面
js实现
widthFix
100％，自动
宽度：100％；
其他上，下，右，左和其他非缩放图像调整位置属性与背景位置具有相同的效果，而img元素只能通过定位来控制。
小程序 API异步解决方案
如果没有强迫症，小程序 API可以使用默认的回调方法；此外，由于小程序仅支持es6，不支持异步和等待，因此该API也可以封装为promise。
function promisify(fn) { return function (obj = {}) { return new Promise((resolve, reject) => { obj.success = function (res) { resolve(res) } obj.fail = function (res) { reject(res) } fn(obj)//执行函数，obj为传入函数的参数 }) }}module.exports = { promisify: promisify}复制代码
使用：
const promisify = require('./promisify.js')const request = promisify(wx.request);request({ url: 'some URL' method: 'GET',}).then(res => { console.log(res) }复制代码
小程序问题