小程序开发精要

github : https://github.com/h357650113/wxApp

注：程序设计方式参考

• canvas_poster canvas 海报生成并保存

代码解释：

1. 要素 canvas 标签属性 canvas-id 而非 id；<canvas canvas-id='poster' style="width: 630px; height: 868px"></canvas>
2. style 为该图片的实际像素大小，需要设置 width / height
3. let ctx = wx.createCanvasContext(canvas-id); 对象
4. ctx.draw(false, callback) callback 为绘制完成回调，但是某些 android 设备会提前，导致绘制不完整，适当使用 setTimeout 等方法可以解决
5. wx.canvasToTempFilePath(options) options.canvasId = canvas-id 注意保存成临时文件
6. wx.saveImageToPhotosAlbum 降临时文件保存到用户相册
7. 微信的 canvas 是一个原生控件，不能进行 z-index 操作，因此使容器将其包裹，然后放置到可视区域外层；如果 canvas 没有实际大小（style）那么图片也是不能被绘制出来的

• 录音设备使用封装

代码解释：

1. const recorderManager = wx.getRecorderManager()；获得微信对象 wx.getXXX 是微信获得某些设备对象使用权限的普遍方式
2. recorderManager.onStop(callback) 方法监听录音结束并返回录音临时文件地址
3. 微信自身的控件全局唯一，且 stop 事件与主体 stop() 方法执行处分离，导致逻辑离散
4. 将微信的 recorderManager 对象重新进行封装，是的 stop 事件在 stop() 方法的回调里
5. 再封装的对象中放置一个存储变量，用来存放 stop 后的回调事件

Page({

  record_start() {
    record.start({
        // 录音之前		
        before(){}
    })
  },

  // 手动停止录音
  record_end() {
    record.stop({	
	    // 完成录音
	    after(r) {}	
	})
  },
  
})

• 音频播放控件使用封装

代码解释

1.  let innerAudioContext = wx.createInnerAudioContext();
2. .play(opts) 在音频播放时添加处理自然结束事件，播放前事件；引入再封装对象的内部存储变量
3. .stop(opts) 主动结束播放事件

Page({

play () {

    audio.play({
        before(){
            // 播放前操作
        },
        after(){
            // 自动结束
        }
    })

},

onHide () {

    audio.stop({
        after () {
            // 主动结束
        }
    })    

}

})

• 小程序地图控件

代码解释

1. <map> 小程序原生控件
2. 关键属性 longitude，latitude 经纬度；markers 标记点 array 类型
3. subkey="6FHBZ-5UEL5-NUSIZ-QOVY4-Z4HZH-XXXX" 申请使用地图服务码；必须与小程序 appID 统一
4. 获取用户地理位置 wx.getLocation()
5. res.longitude 对应 map 的 longitude；res.latitude 对应 map 的 latitude

• 腾讯地图服务 jssdk 使用

代码解释

1. const map = require('../../utils/qqmap-wx-jssdk.min.js'); 接口库，构造函数
2. key: '6FHBZ-5UEL5-NUSIZ-QOVY4-Z4HZH-XXXX' 使用免费申请的查询 key 生成 map 实例
3. qqmapsdk.search(opts) opts.keyword 直接输入查询关键字即可
4. https://lbs.qq.com/guides/startup.html 申请 key 
5. https://lbs.qq.com/qqmap_wx_jssdk/method-getsuggestion.html 小程序 api