来自「微信开发者」公众号，作者为微信小程序技术研发工程师binnie。 本文主要介绍了3个隐藏的 Canvas 小技巧： - 绘制并生成图片 - Video 绘制 Canvas / webgl - 视频解码并绘制到 webgl  - 录制并导出 webgl 视频 一键加滤镜 快速合成音视频 轻松挑选视频封面 …… Canvas 能够做这些？ 作为资深的开发者，相信大家对 Canvas 都不陌生。这项能力在绘制图形方面发挥着极大的作用，高效支持图片编辑、数据可视化等应用场景。但是只局限于一般能力应用，那格局就小了。 Canvas 的应用场景非常丰富！赶紧往下看看这些隐藏的 Canvas 小技巧，保证你新年用得上！还有手把手教程以及文末彩蛋哟。 -- • 绘制并生成图片 • -- [图片] 示例：新年模板长按保存祝福 适用场景：图片分享海报 相关 API：RenderingContext／Canvas／wx.canvasToTempFilePath Step 1: 创建实例获取对象 创建 Canvas 实例，获取 CanvasRenderingContext2D 对象（Canvas 绘图上下文）来绘制形状、文本、图像等。 const query = wx.createSelectorQuery() let canvas = null query.select('#myCanvas') .fields({ node: true, size: true }) .exec((res) => { // 通过 wx.createSelectorQuery 获取到 canvas 实例 canvas = res[0].node // 通过 canvas.getContext('2d') 获取 CanvasRenderingContext2D 对象 const ctx = canvas.getContext('2d')   }) Step 2: 设置宽高调整图片 获取 Canvas 绘图上下文后，将 Canvas 的宽高设置为节点宽高 * 设备像素比，绘制出来的图片更清晰 // 获取设备像素比 const dpr = wx.getSystemInfoSync().pixelRatio // 将 canvas 宽高设置为 canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr Step 3: 绘制内容 使用 CanvasRenderingContext2D 绘制，根据业务需要在画布中绘制头像、文字、背景等 // 矩形 ctx.fillStyle = '#FFFFFF' ctx.fillRect(0, 0, canvas.width , canvas.height ) // 图片 var image = canvas.createImage() himage.src = 'https://example.com/example.jpg' headImage.onload = (res) => { ctx.drawImage(himage 0, 0, 32, 32; } // 文本 ctx.font = "18px SimHei"; ctx.textAlgin = "left" ctx.fillStyle = "#07c160"; ctx.fillText("这是我的名字", 0, 0); Step 4: 生成并保存本地 使用 wx.canvasToTempFilePath 将画布生成图片，wx.saveImageToPhotosAlbum 将图片保存到本地。 wx.canvasToTempFilePath({ canvas: canvas, // canvas 实例 success(res) { // canvas 生成图片成功 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(res) { // 保存成功 } }) } }) -- • Video 绘制 Canvas / webgl • -- [图片] 示例：视频文件绘制 Canvas 适用场景：制作 Video 滤镜、挑选 Video 封面等 相关 API：RenderingContext／Canvas Step 1: 获取实例 通过 wx.createSelectorQuery 获取 VideoContext 实例 let video = null wx.createSelectorQuery().select('#video').context(res => { // 通过 wx.createSelectorQuery 获取 VideoContext 实例 video = res.context; }) Step 2: 绘制内容 获取 VideoContext 实例后，将 VideoContext 传递给 Canvas 进行绘制。开发者根据业务需求选择绘制类型： Canvas 2d 写法：canvas.drawImage(video, ...)webgl 写法：gl.texImage2D(..., video) wx.createSelectorQuery().selectAll('#myCanvas,#webglCanvas').node(res => { const ctx = res[0].node.getContext('2d') const gl = res[1].node.getContext('webgl') setInterval(() => { // canvas 2d // 将 video 纹理对象传入 drawImage 进行绘制 ctx1.drawImage(video, 0, 0, w * dpr, h * dpr); // 添加一个蒙层 ctx1.fillStyle = 'rgba(0, 0, 0, 0.3)' ctx1.fillRect(0, 0, w * dpr, h * dpr); // webgl const render = createRenderer(res[1].node, w, h) render(new Uint8Array(ctx1.getImageData(0, 0, w * dpr, h * dpr).data), w * dpr, h * dpr) }, 1000 / 24) }).exec() function createRenderer(canvas, width, height) { const gl = canvas.getContext("webgl") ... return (arrayBuffer, width, height) => { ... // 指定二维纹理图像 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, arrayBuffer) gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0) } } -- • 视频解码并绘制到 webgl • -- [图片] 示例：视频一键解码并绘制到 webgl 适用场景：添加特效、贴图等视频编辑场景 相关 API：wx.createVideoDecoder／VideoDecoder／RenderingContext／Canvas.requestAnimationFrame／wx.createMediaAudioPlayer／MediaAudioPlayer Step 1: 创建视频解码器进行解码 1. 调用 createVideoDecoder 对视频进行解码 2. 使用 videodecoder.start 启动解码，视频源文件不限制本地或远程路径 3. 通过 videodecoder.on('start', res => {}) 监听解码，通过 videodecoder.getFrameData() 获取到解码数据 // 获取视频解码器 getVideoDecoder(source, abortAudio) { return new Promise((resolve, reject) => { // 创建视频解码器 videodecoder = wx.createVideoDecoder() // 开始解码 videodecoder.start({ abortAudio: abortAudio, source: source, // 视频源文件，支持本地路径&远程路径 mode: 0 // 按pts解码，保证音画同步 }) // 监听解码 开始 videodecoder.on('start', res => { console.log('videodecoder start', res) // 状态初始化 isStop = false resolve(videodecoder) }) // 监听解码 结束 videodecoder.on('ended', res => { // 状态设置为结束，停止画面录制器 isStop = true }) }) }, Step 2: 解码数据绘制到 webgl 1. 通过 gl.texImage2D(..., image) 将解码数据绘制到 webgl 2. 使用 webgl.requestAnimationFrame 继续绘制，效果更加流畅 // 将解码数据绘制到 webgl 中 const query = wx.createSelectorQuery() query.select('#webglCanvas').node().exec((res) => { const webgl = res[0].node const requestAnimationFrame = webgl.requestAnimationFrame; // 初始化webgl let render = null if (!render) { render = createRenderer(webgl, 600, 400) } /** * 绘制视频帧到 canvas */ let i = 1 let loop = () => { // 解码结束，停止循环 if (isStop) { return } // 获取解码数据，绘制到 webgl 中 const imageData = videodecoder.getFrameData() if (imageData) { // render 的高宽需要设置为图片的宽高才可以绘制出来 render(new Uint8Array(imageData.data), imageData.width, imageData.height) } // 继续绘制 console.log('绘制帧数：', i++) requestAnimationFrame(loop) } // 启动录制循环 requestAnimationFrame(loop) }) Step 3: 添加音频播放器同步播放音频 完成 Step2 后，webgl 只有视频播放，缺少音频。因此使用 wx.createMediaAudioPlayer()，支持 addAudioSource 传入 videodecoder，保证视频帧渲染音画同步 /** * 创建媒体音频播放器 */ let mediaAudioPlayer = null let addAudio = () => { if (mediaAudioPlayer) return mediaAudioPlayer = wx.createMediaAudioPlayer() mediaAudioPlayer.start().then(() => { // 添加播放器音频来源 mediaAudioPlayer.addAudioSource(videodecoder).then(res => { console.log('add mediaAudioPlayer: ',) }) }) } // render 绘制视频同时添加音频 render(new Uint8Array(imageData.data), imageData.width, imageData.height) addAudio() -- • 录制并导出 webgl 视频 • -- [图片] 示例：录制并一键导出 webgl 视频 适用场景：将动画、编辑过的视频导出视频文件保存 相关 API：wx.createMediaRecorder／MediaRecorder／wx.createMediaContainer／MediaContainer／MediaTrack Step 1: 创建 webgl 画面录制器进行录制 通过 createMediaRecorder 创建页面录制器，并且绑定 webgl（建议离屏状态，效果更好）进行录制 /** * 获取画面录制器 */ getRecorder() { let canvas = this.getMainCanvasNode() let recorder = wx.createMediaRecorder(canvas, { fps: choosedVideoInfo.fps, // 实际视频的 fps videoBitsPerSecond: choosedVideoInfo.bitrate, // 实际视频的 bitrate gop: 12 }) // 监听录制事件 recorder.on("timeupdate", (res) => { console.log('recorder 录制中，当前时间：', res.currentTime) }) recorder.on("stop", (res) => { console.log('recorder停止') this.saveMedia(res.tempFilePath) }) // 开始录制 recorder.start() this.recorder = recorder return recorder }, // 初始化 画面录制器 并进行录制 await this.initRenderer() this.getDecoder().then((decoder) => { let recorder = this.getRecorder() var self = this function loop() { if (self.stopped) { return } let frameData = decoder.getFrameData() if (!frameData) { console.log('没取到帧') setTimeout(() => { loop() }, 1000/60) } else { self.renderFrame(frameData) recorder.requestFrame(() => { console.log('录制帧数：', i++) loop() }) } } loop() }) Step 2: 添加音频合成音视频 1. 通过 createMediaContainer 创建音视频处理容器来合成音视频 2. 通过 MediaContainer.extractDataSource 将视频源分离出视频轨道和音频轨道，将需要的轨道通过 MediaContainer.addTrack 添加到容器中 3. 通过 MediaContainer.export 导出即可获得合成后的视频文件 /** * 将视频和音频合到一起并保存到本地 * @param {*} videoTempFilePath */ saveMedia(videoTempFilePath) { const self = this let choosedFile = this.choosedFile const MediaContainer = wx.createMediaContainer() // webgl的取视频 MediaContainer.extractDataSource({ source: videoTempFilePath, success(res) { MediaContainer.addTrack(res.tracks[0]) // 源视频取音频 MediaContainer.extractDataSource({ source: choosedFile, success(res) { // 拿到音频轨道并加入到容器 res.tracks[0].kind == 'audio' && MediaContainer.addTrack(res.tracks[0]) res.tracks[1].kind == 'audio' && MediaContainer.addTrack(res.tracks[1]) // 合成视频并导出视频文件 MediaContainer.export({ success(res) { // 保存视频到本地 wx.saveVideoToPhotosAlbum({ filePath: res.tempFilePath, success() { wx.showToast({ title: '导出成功', icon: 'success', duration: 2000 }) self.destroy() } }) } }) } }) } }) }, -- •高效图像处理彩蛋 • -- 学会以上这些 Canvas 小技巧，还担心新年的美图美照美视频处理不过来？赶紧码下这个 Canvas 代码包，保证你就是家里最闪耀的靓女靓仔。 预祝大家新的一年 Canvas 在手，红包一直有！

接了个甲方的项目，要求用全云开发实现微信支付V3电商收付通，谈妥后，于是开干。 先看文档，再找攻略，第一步开始写段统一下单的测试代码。非常神奇的事情发生了，居然是秒过的，直接拿到prepaid_id！秒过，秒过，秒过，一个红错误都没有，难以置信； V3收付通文档：https://pay.weixin.qq.com/wiki/doc/apiv3/wxpay/pages/guide.shtml 遥想当年做V2小程序支付，仅一个统一下单的接口，就调得让人欲生欲死，前前后后一个星期不止。 我自己也有点懵圈，这是什么情况，V3新的接口里，签名？Authorization？Headers？这些都是闹着玩的吗？能不能严肃点？ 想了一会儿静静，继续，看能不能在小程序里拉起wx.requestPayment，结果V3文档里一句小程序支付的都没有，难道不支持？立马在论坛大佬群里@了一下娇华同学，得到肯定回答，于是，wx.requestPayment拉起，美滋滋地支付了0.01元，统一下单，完美。 云函数相关代码： //JSAPI下单+JS调起支付 async function partner_transactions_jsapi(event) { let wxContext = cloud.getWXContext() let jsonStr = JSON.stringify({ sp_appid: wxContext.APPID, sp_mchid: mchid, notify_url: config.notify_url, payer: { sp_openid: wxContext.OPENID }, ...event.unified_order,//小程序端传入的统一下单参数 }) let method = 'POST' let url = '/v3/pay/partner/transactions/jsapi' let headers = getHeaders(method, url, jsonStr) let res = await rp({ method, uri: config.host + url, headers, body: jsonStr }) let prepay_id = JSON.parse(res).prepay_id return getPayment(prepay_id) //返回拉起小程序 wx.requestPayment 所需参数 } 小程序端测试代码： //JSAPI下单+JS调起支付 partner_transactions_jsapi: async function () { console.log('partner_transactions_jsapi') let res = await wx.showModal({content: '统一下单？'}) if (res.confirm) { } else return wx.showToast({ icon: 'loading' }) let unified_order = { //测试订单 sub_mchid: SUB_MCHID, description: '电商收付通测试', out_trade_no: "otn" + Math.random().toString(36).substr(2, 15) + parseInt(Date.now() / 1000), amount: { total: 10, currency: 'CNY' }, } res = await wx.cloud.callFunction({ name: 'wxPayV3', data: { action: 'partner_transactions_jsapi', unified_order } }) res = await wx.requestPayment({ ...res.result }).catch(err => console.log(err)) console.log(res) wx.showToast({}) }, 今天先弄这么多，更多踩坑实录继续。 更多相关内容： [图片]

// 云函数入口文件 var cloud = require('wx-server-sdk')    crypto = require('crypto')   request = require('request')    NodeRSA = require('node-rsa')//npm安装    Form = require('./Form.class') //Form 源自北望大佬https://https://developers.weixin.qq.com/community/develop/article/doc/000c24f0390ff8b5d91b2489059413 cloud.init({   env: 'xxxxxx' }) const db = cloud.database() // 云函数入口函数 exports.main = async (event, context) => {   const rq = options =>new Promise((resolve, reject) => {     request(options, (error, response, body) => {       if (error) {         reject(error);       }       resolve(response);     })   })   // 基本参数   var mchid ='160xxxxx92'//服务商商户号   var appId = 'wx41xxxxxxfd6' //服务商和直连商户的appId   var APIv3Key = 'xxxxxxxxx'//服务商APIv3密钥   var cert_Doc = 'certificates' //存在数据库的证书记录的_id   var timeStamp = parseInt(Date.now()/1000)   var nonce_str = Math.random().toString(36).substr(2, 13)   var url = 'https://api.mch.weixin.qq.com'+event.url   //证书与私钥   var certificates = (await db.collection('a-data').doc(cert_Doc).get()).data //存在数据库的证书   /* 证书记录json如下：     "_id":"certificates",     "apiclient_key":"-----BEGIN PRIVATE KEY---- xxxxxxx",//商户证书私钥     "serial_no":"3A008xxxxxxxxxxxxxxxx335DABA0",//商户证书序列号     "wx_publicKey":"-----BEGIN PUBLIC KEY-----xxxxxxxxx",//商户对应微信支付平台证书公钥     "wx_serial_no":"32EDFA40A4xxxxxxxxxxx3FAFC91C",////商户对应微信支付平台证书序列号   */   var {serial_no} = certificates   var {wx_serial_no} = certificates   // 敏感信息加密   var RSAoaep = (e)=>{     var plaintext = crypto.publicEncrypt({       key: certificates.wx_publicKey,       padding: crypto.constants.RSA_PKCS1_OAEP_PADDING     },Buffer.from(e))     return plaintext.toString('base64')   }   // getHeaders   const getHeaders = (method,meta)=>{     var signature = new NodeRSA(certificates.apiclient_key).sign(`${method}\n${event.url}\n${timeStamp}\n${nonce_str}\n${meta}\n`, 'base64', 'utf8')     var Authorization = `WECHATPAY2-SHA256-RSA2048 mchid="${mchid}",nonce_str="${nonce_str}",signature="${signature}",timestamp="${timeStamp}",serial_no="${serial_no}"`     return {Authorization,"Content-Type": "application/json",Accept: "application/json","User-Agent": "xxxx.com",}   } // 特约商户进件：提交申请单   if(event.url=='/v3/applyment4sub/applyment/'){     /*入参 upload:{       _id:'xxx',//记录_id       id_card_number:'xxx',/超管身份证号，注：默认法人为超管       mobile_phone:'xxx',/超管电话       contact_email:'xxx',//超管邮箱       account_number:'xxx',//对公/经营者银行账户号       post:{..}//待提交表单     }     */     var {upload} = event     var {post} = upload     post.business_code = upload._id     var {legal_person} = post.subject_info.business_license_info     legal_person = RSAoaep(legal_person)     var id_card_number = RSAoaep(upload.id_card_number)     //超管信息     post.contact_info.contact_name = legal_person     post.contact_info.contact_id_number = id_card_number     post.contact_info.mobile_phone = RSAoaep(upload.mobile_phone)     post.contact_info.contact_email = RSAoaep(upload.contact_email)     // 法人信息     post.subject_info.identity_info.id_card_info.id_card_name = legal_person     post.subject_info.identity_info.id_card_info.id_card_number = id_card_number     //银行卡信息     post.bank_account_info.account_name = (post.bank_account_info.bank_account_type=='BANK_ACCOUNT_TYPE_PERSONAL'?legal_person:RSAoaep(post.subject_info.business_license_info.merchant_name))     post.bank_account_info.account_number =RSAoaep(upload.account_number)     console.log(post)     var method = 'POST'     var meta = JSON.stringify(post)     var res = await rq({url, method,       headers:{         ...getHeaders(method,meta),         "Wechatpay-Serial":wx_serial_no       },       body:meta,     })     return res   }   // 特约商户进件：图片上传接口   if(event.url=='/v3/merchant/media/upload'){     var file = (await rq({method: 'GET',url:event.imgUrl,encoding: null})).body //event.imgUrl 图片地址     var filename = `${nonce_str}${/\.\w+$/.exec(event.imgUrl)[0]}`     var sha256 = crypto.createHash('sha256').update(file).digest('hex')     var meta = JSON.stringify({filename,sha256})     var form = new Form      form.append('file',file,filename).append('meta',meta,'meta.json')     var method = 'POST'     var res = await rq({url, method,       headers:{         ...getHeaders(method,meta),         ...form.getHeaders(),       },       body:form.getBuffer(),     })     return JSON.parse(res.body)   }   // 特约商户进件：查询申请单状态   if(event.url.indexOf('/v3/applyment4sub/applyment/business_code')>-1||event.url.indexOf('/v3/applyment4sub/applyment/applyment_id')>-1){     var method = 'GET'     var res = await rq({url,method,       json:true,       headers:{...getHeaders(method,'')}     })     return res.body   } })

得到prepay_id后，小程序支付二次签名： function getPayment(prepay_id){ let wxContext = cloud.getWXContext() let appid = wxContext.APPID let package = 'prepay_id=' + prepay_id let timestamp = parseInt(Date.now() / 1000) + '' let nonce_str = Math.random().toString(36).substr(2, 15) return { appId: appid, nonceStr: nonce_str, package, signType: 'RSA', timeStamp: timestamp, paySign: getSign([appid, timestamp, nonce_str, package], key) } } function getSign(parts = [], key, str = '') {  parts.forEach(v => str += v + '\n')  return crypto.createSign('RSA-SHA256').update(str).sign(key, 'base64') }

app上常见的自动切换本地城市，还有见到有些小程序中个人账号可以获取位置服务，整理了一些封装方法 先封装request 为小程序get/post的promise封装 rq.js [代码]/* * url {String} 请求地址接口 * data {Object} 请求参数 * param {Object} request参数 * method {String} 指定使用post或者是get方法 */ export function request(url, data={}, param={}, method='POST') { return new Promise((resolve, reject)=>{ let postParam = { url, method, data, // timeout // dataType // responseType header: { 'content-type': 'application/json' // 默认值 }, success(res) { resolve(res) }, error: function (e) { reject(e) } } postParam = Object.assign(postParam, param) postParam.fail = postParam.error if (postParam.url) wx.request(postParam) }) } module.exports = { get(url, data, param){ return request(url, data={}, param={}, method='GET') }, post(){ return request.apply(null, arguments) } } [代码] 位置服务方法 需要开通小程序的位置服务功能，在小程序控制台 [图片] 简单的封装了三个位置服务的方法 所在地城市 地区搜索 范围搜索 [代码]// request的promise封装 const iKit = request('./rq.js') // key为开通位置服务所获取的查询值 // 下面这个key是随便写的 let key = 'JKDBZ-XZVLW-IAQR8-OROZ1-XR3G9-UYBD5' /* * 搜索地区... * 搜索地区的商圈， 如搜索 kfc 广州市 * key {String} 搜索内容 * region {String} 搜索区域 */ export function searchRegion(kw, region) { let opts = { keyword: encodeURI(kw), boundary: region ? `region(${encodeURI(region)}, 0)` : '', // 0 为限定范围搜搜索，1为开放范围搜素偶 page_size: 10, // 搜索结果分页最大条数 page_index: 1, // 指定分页 key } return new Promise((resolve, rej)=>{ iKit.get('https://apis.map.qq.com/ws/place/v1/search', opts).then(res=>{ resolve(res.data.data) }) }) } /* * 搜索附近的... * 以当前位置的经纬度搜索附近商圈，如附近的酒店，快餐等等 * key {String} 搜索内容 * params {Object} 搜索参数 包含三个参数 lat纬度，lng经度，distance范围(单位米) */ export function searchCircle(kw, params={}) { let {lat, lng, distance} = params if (!lat && !lng) return if (!distance) distance = 1000 // 搜索范围默认1000米 let opts = { keyword: encodeURI(kw), boundary: `nearby(${lat},${lng},${distance})`, orderby: '_distance', // 范围搜索支持排序，由近及远 page_size: 20, // 搜索结果分页最大条数 page_index: 1, // 指定分页 key } return new Promise((resolve, rej)=>{ iKit.get('https://apis.map.qq.com/ws/place/v1/search', opts).then(res=>{ resolve(res.data.data) }) }) } // 所在地的城市，省份等区域信息 /* * 所在地的城市，省份等区域信息 * 如当前地址所在省份、城市 * lat {Number} 纬度 * lng {Number} 经度 */ export function myCity(lat, lng) { return new Promise((resolve, rej)=>{ let opts = { location: `${lat},${lng}`, key } iKit.get(`https://apis.map.qq.com/ws/geocoder/v1/`, opts).then(res => { resolve(res.data.result) }) }) } [代码] 调用 [代码]wx.getLocation({ type: 'wgs84', success(location) { locationPosition = location // 所在地信息 myCity(location.latitude, location.longitude).then(res => { let myCityInfo = res.ad_info let {city, nation, province, city_code, adcode} = myCityInfo console.log({title: `国家: ${nation}，省份: ${province}，城市: ${city}`}) }) // 附近搜索 searchCircle('快餐', { lat: location.latitude, lng: location.longitude, distance: 500 }).then(res=>{ console.log(res) }) // 地区搜索 searchRegion('酒店', '广州').then(res=>{ console.log(res) }) } }) [代码] 关注小程序 [图片]

小程序不具备小程序内扫描二维码的能力，因此如果要实现关注公众号或加用户群功能大家一般都利用微信客服功能的自动回复来实现。此时如果自己去实现微信客服自动回复，客服小助手就不能用了，很令人纠结。经过我的研究，借助云开发找到了一个方案，可以实现当用户想获取微信群走自动回复的接口，真正咨询时，直接到客服小助手进行回复。 效果如下 [图片] 原理解析 云开发在做消息推送配置的时候可以配置消息类型，这个时候如果我们只配置一种类型（小程序卡片），那么就只有卡片才会被云函数接管做自动回复，其他消息类型（图片、文字）则正常走小程序客服的通道。 实现步骤 1.小程序端设置按钮属性open-type="contact"，用于用户点击时带上定义的卡片跳到客服消息界面。 申请加入 2.新建云端的函数，设置config.json定义权限，如下config.json { "permissions": { "openapi": [ "customerServiceMessage.send", "customerServiceMessage.uploadTempMedia", "customerServiceMessage.setTyping" ] } } 3.写云函数端代码，如下 if (event.Title == "我要进用户群"||event.Title =="关注公众号"||event) {     //设置输入状态     cloud.openapi.customerServiceMessage.setTyping({       touser: OPENID,       command: 'Typing'     })     //从云储存中拉取图片数据     const qunimg = await cloud.downloadFile({       fileID: "cloud://pm-hsfip.706d-pm-hsfip-1259751853/img/qun.png",     })     //上传图片素材到媒体库，并获取到图片id     const qunmedia = await cloud.openapi.customerServiceMessage.uploadTempMedia({       type: 'image',       media: {         contentType: 'image/png',         value: qunimg.fileContent       }     })     //向用户发送群二维码     await cloud.openapi.customerServiceMessage.send({       touser: OPENID,       msgtype: 'image',       image: {         mediaId: qunmedia.mediaId,       }     })     //取消状态设置     cloud.openapi.customerServiceMessage.setTyping({       touser: OPENID,       command: 'CancelTyping'     })   } 4.设置消息推送，路径如下 云开发-设置-全局设置-云函数接收消息推送 中添加消息类型为miniprogrampage，绑定云函数为新建的云函数。 [图片] 5.微信公众平台绑定客服[图片] 注意事项 如果按照本教程 客服小助手无法收到消息 或 无法自动回复，可以先将以上消息推送配置删除，然后再微信后台绑定客服后，再重新进行消息推送配置。

[图片] 请大佬指点下这种效果怎么做

微信支付内容梳理行业应用篇——从入门到精通（3） 前面的两篇梳理了微信支付的接入指引和产品，接下来就要把这些具体应该到各行各业了。那么第三篇，我们就把微信支付的行业应用解决方案给他梳理梳理。 第三大模块：微信支付的行业应用解决方案 有了使用的场景，提供了非常丰富的产品，接下来就是把这些内容落地到具体社会各行各业中去了，这样才可以体验我们的微信支付如此强大，广泛应用啊。具体哪些行业呢？ 大概分以下几大类： 一、生活服务类 [图片] 二、智慧零售类 [图片] 三、智慧餐饮类 [图片] 四、智慧出行类 [图片] 五、教育医疗类 [图片] 六、政务民生类 [图片] 我们来一间主要做旅游在线、智慧酒店和智慧景区三个行业的应用，下面重点介绍下这三个行业的具体应用解决方案。 一、旅游在线行业应用解决方案 互联网+旅游发展到今天，各大旅游在线平台已经成为年轻人购买旅行产品的主要入口，随着规模的不断扩大，流量获取越加困难，获客成本开始走高。我们希望通过微信生态产品能力，为旅游在线平台带来新的流量红利；凭借多变的营销模式，提升运营效率，降低运营成本；通过微信产品，提升用户的支付体验，提升用户的活跃度。 1.智慧下单 方案1：用户授权个人信息，提升下单效率 经过用户实名授权，商户可以获得用户在微信支付认证的手机号码、姓名及身份证信息，避免用户填写繁多的信息，可以快速完成信息填写，提升用户购买效率和体验。 [图片] [图片] 2、场景支付 方案1：委托代扣预约抢票 用户在商户处预约购买出行产品时，可以先开通委托扣款授权，待商户帮用户将出行产品采购成功后，再从用户微信账户中扣款。避免出现用户提前付款后，因产品采购失败后又退款的情况。 [图片] [图片] 方案2：好友代付 为亲情买单 孩子购物，让父母代为支付；老人购物，让子女代为支付，通过交易绑定提高亲友间消费行为的分享和交流，提升应用打开率，从而获得更多的交易量和品牌关注。 [图片] 方案3：合单支付提升支付效率 用户在商户处同时购买旅游产品和保险等搭售组合产品时，用户只输入一次密码，即可完成多个订单的支付。避免用户多次支付，提升商户整体交易量。 [图片] 方案4：分期付款 旅游从此无压力 用户购买旅行产品时，不需要一次性提前支付所有费用，可以选择分期付款的方式，先出行，后付款，缓解一次性付款带来的资金压力。 [图片] 方案5：酒店先住后付 借助微信支付分，对消费者信用进行评分，满足评分要求的用户，可以享受到店免押金、离店免查房、离店后再扣款的先享后付的极致入住体验。 [图片] [图片] 方案6：返现入零钱免费又快捷 商户通过企业微信付款能力，可以直接将返现资金或者理赔款支付至用户的微信账号，商户无支付成本，用户操作简单，而且实时到账，到账提醒明了，提升了客户的收款体验。 [图片] [图片] 方案7：一键订阅，智慧通知 PC、WAP、APP端的消息通知一般使用短信、push推送的方式，小程序通过服务通知，可以对待支付、支付成功、发货、订单取消等状态进行提醒，打开率高，价值感更好，也可以关联小程序服务，实现快速办理业务，转化率更高。 [图片] [图片] 3、用户运营 方案1：小程序客服 小程序客服，随时随地解决旅客出行过程中遇到的问题。避免排队等候影响出行体验。 [图片] 方案2：支付后关注公众号 用户在商户处消费成功后引导用户关注商户微信公众号。商户长此以往便可以积累庞大的粉丝群体，为后期公众号运营提供用户基础。 [图片] 4、流量运营 方案1：拼团拉新 用户在OTA网站购买旅行产品，作为单客户，无法议价，无法享受到团购优惠；微信拼团，可以让客户自行开团，并邀请微信好友参团，借助微信的社交链，快速扩散拼团产品，提升拼团成功率，并享受拼团优惠。对商户而言，降低了获客成本， 提升订单转化率，扩大了产品宣传的范围。 [图片] [图片] 方案2：砍价助力拉新 商户发布砍价活动后，吸引参加活动的用户通过微信朋友圈、微信群的传播帮忙砍价，最终获得砍价返现；助力者可以获取抵用券，方便随时消费；对于商户而言，借助微信社交关系链实现低成本快速获客、扩大品牌传播。 [图片][图片] [图片] 方案3：社交立减金通过社交关系实现以老带新 社交立减金是老用户在小程序完成支付后领取的可以用于社交分享的一种抵扣券。依靠微信好友的聊天分享和裂变，可以为商户：触达到更多的潜在用户，降低拉新成本，提升潜在交易量。 [图片] [图片] 方案4：尬聊汇聚目的地行中流量 用户在商户处购买旅行产品后，商户通常是将目的地导游微信号通过短信方式推送给用户，用户按照自己的需要自主添加。这种方案不仅提示效果不明显，而且操作繁琐，事后需要主动删除；通过微信小程序群聊功能，可以在订单完成页或者独立小程序中放置入口，提示效果显著；简单进入，用完即走，提升用户使用体验；在群聊中合理营销，可以提升产品转化率及交易量。 [图片] 二、智慧酒店行业应用解决方案 微信智慧酒店，与酒店经营者站在一起，通过微信公众号的内容运营能力，结合小程序电商能力、会员卡能力，致力于协助酒店建立自营直销渠道与更高效会员触达方案，以降低获客成本，提供经营效率；同时，通过支付技术的创新、智能硬件的引入，尝试将酒店一线服务人员从繁重的基础服务中解放出来，为客人提供更有温度的价值服务。 1、智慧酒店概览 [图片] 2、智慧酒店应用方案 通过基础服务产品化——客流数字化——营销智能化的基本路径，构建智慧运营、智慧服务、智慧营销的智慧酒店产品方案。 [图片] 方案1：智慧营销——建立自营直销渠道，建立用户池 [图片] [图片] 方案2：智慧运营——基础服务产品化 [图片] [图片] [图片] [图片] [图片] [图片] 方案3：智慧服务——客流进一步数字化的小工具 [图片] [图片] [图片] [图片] [图片] [图片] 三、智慧景区 随着自由行的占比越来越高，旅游用户超向年轻化，对旅游产品要求越来越高；微信智慧景区，基于微信生态能力。第一，将基础服务产品化，提升旅游服务效率，优化游客体验。第二，旅游景区需要承载多种业态，如停车、二次入园、酒店、餐饮和交通等，业态之间的服务与数据打通将利于景区管理的精细化。第三，微信生太社区分享的属性与旅游内容天然融合，基于微信平台建立营销通道，有利于提升营销效率，降低获客成本。 1.景区行业痛点及策略 [图片] [图片] 2、智慧营销 方案1：朋友圈广告 用户在景区内打开朋友圈，即可查看景区内的商户信息 [图片] 方案2：支付前扫码优惠 【扫码优惠】线下扫码购门票，景区内游客三步走：扫码、领券、付款核销 [图片] [图片] 方案3：支付后流量 A、入园购票+园内全场代金卷【拉动景区内游客二次消费】 [图片] [图片] B、【社交立减金】-景区影响力流量赋能 为商户提供支付后+社交流量发券模式。商户登录微信支付商户平台创建社交裂变代金券，用户在该商户支付成功后可在支付成功页参与活动，分享给好友/群后立即获得一张景区门票或景区内商户代金券，好友可领取余下的代金券，先到先得。 [图片] 3、智慧游园 方案1：智慧景区——刷脸入园 [图片] [图片] 方案2：小程序畅游XX景区 [图片] 方案3：刷脸游园（水上乐园） [图片] 方案4：手环游园（免密支付） 减少出门找零带来的麻烦，提高运营效率，减少管理成本。 [图片] 方案5：智慧导览 [图片] 方案6：智慧停车 [图片] [图片] 方案7：信用租赁 [图片] [图片] 4、智慧管理 方案1：企业微信搭建工作台 [图片] 方案2：基于腾讯AI的智能安防 基于腾讯天眼系统及人脸识别、图像识别能力，我们将为景区智能安防提供应用支持。包括： √ 对于景区内需要特殊关照群体，如老人，小孩等的VIP识别能力 √ 对于官方公布的社会危险人群的黑名单处理，以及联动报警机制，如公安部对社会公布的A级、B级通缉犯名单等 √ 危险行为的别能力，比如逆流人流而行，人员跌倒 √ 基于行动轨迹分析的景区内部寻人能力 [图片] 方案3：园区热力图 这是一张上海迪士尼乐园热力图，根据腾讯定位大数据结合时间与地图维度，实时展示人群拥挤程度与流向，为园区运营管理提供实时人流预警，以及时进行人流引导，提升游客体验，预防人群拥挤事故。 [图片] 我们是来一间，专业深耕旅游在线，智慧酒店和智慧景区6年，行业需求不断更新迭代，尤其是受疫情影响，帮助酒店旅游景区实现了小程序端在线预订，私域流量的建立，慢慢一点点解决行业问题。 有需求的商家可以微信搜索关注公众号“来一间”或者登录我们的官网“www.laiyijian.com”试用并体验。 上一篇：微信支付内容梳理产品篇——从入门到精通（2） 上一篇：微信支付内容梳理接入篇——从入门到精通（1）

先看效果 [视频] 小程序支持短信跳转小程序了，可以说是打开了一个巨大的流量入口。 效果过程分析 从短信到网页从网页到小程序那么就涉及到两个点 发送短信网页跳转实现步骤分析 先要有个网页，可以跳转到小程序然后发送短信，短信内容包含地址具体实现步骤 1. 先要有个网页，可以跳转到小程序 首先开通静态网页托管 [图片] 创建一个云开发的项目，点击左上方「云开发」按钮 [图片] 点击静态网页进行开通。 然后点击「下载资源包」，解压缩我们会看到 [图片] 第一个是云函数，第二个是跳转的网页。首先我们编辑下跳转的网页 [图片] 打开文件编辑以下 6 处即可（通过“replace”搜索可以快速定位修改的地方）： [图片][图片]添加好对应参数后，上传部署到你的静态托管文件目录中 [图片] 这个时候网页这块就已经搞定了，接下来部署下云函数。 刚才的 cloudfunctions 文件夹下面有个 public 文件夹里面的 index.js 复制内容到自己新建的云函数的 index.js 中，然后替换自己小程序的path（友情提示：覆盖完成后别忘记上传部署云函数）[图片]这个云函数的作用，主要是静态网页会调用它生成跳转的URL Scheme。以下为网页调用这个函数的代码区域[图片] 到这里网页显示与网页跳转就只差最后一步了，设置云函数权限。 [图片] [图片] 自定义安全规则配置： { "*": { "invoke": "auth != null" }, "public": { "invoke": true } } 2. 然后发送短信，短信内容包含地址 创建一个sendSms到云函数，复制以下代码： const cloud = require('wx-server-sdk') cloud.init() exports.main = async (event, context) => { try { const result = await cloud.openapi.cloudbase.sendSms({ env: 'online-12345678910', // 替换环境ID content: '云开发支持短信跳转小程序了',// 替换短信文案 path: '/index.html',// 替换网页路径 phoneNumberList: [ "+8612345678910" ] }) return result } catch (err) { return err } } 替换以上 3 处内容即可。 环境ID，可以在设置中找到短信内容，这个自己自定义网页路径，在静态网页托管中点击上传到网页即可查看复制[图片] 修改完成后，部署即可。 大功告成 [视频] 小程序就可以调用这个云函数发送短信，短信就会自带网页地址，点击即可跳转到小程序了。

在前面的章节，我们已经在小程序端将 button 组件 open-type 的值设置为 contact ，点击 button 就可以进入客服消息。不过这个客服消息使用的是官方的后台，没法进行深度的定制，我们可以使用云开发作为后台来自定义客服消息来实现快捷回复、添加常用回答等功能。 如果是使用传统的开发方式，需要填写服务器地址（URL）、令牌（Token） 和 消息加密密钥（EncodingAESKey）等信息，然后结合将 token、timestamp、nonce 三个参数进行字典序排序、拼接、并进行 sha1 加密，然后将加密后的字符串与 signature 对比来验证消息的确来自微信服务器，之后再来进行接收消息和事件的处理，可谓十分繁琐，而使用云开发相对简单很多。 13.8.1 客服消息的配置与说明使用开发者工具新建一个云函数，比如 customer，在 config.json 里，设置以下权限后部署上传到服务端。 { "permissions": { "openapi": [ "customerServiceMessage.send", "customerServiceMessage.getTempMedia", "customerServiceMessage.setTyping", "customerServiceMessage.uploadTempMedia" ] } } 然后再打开云开发控制台，点击右上角的设置，选择全局设置，开启云函数接收消息推送，添加消息推送配置。为了学习方便我们将所有的消息类型都指定推送到 customer 云函数里。 text，文本消息image，图片消息miniprogram，小程序卡片event，事件类型 user_enter_tempsession，进入客服消息时就会触发以上有四种消息类型，但是发送客服消息的 customerServiceMessage.send 的 msgtype 属性的合法值有 text、image、link（图文链接消息）、miniprogrampage 四种，也就是我们还可以发图文链接消息。 13.8.2 自动回复文本消息和链接1、自动回复文本消息使用开发者工具新建一个页面，比如 customer，然后在 customer.wxml 里输入以下按钮， 进入客服button> 当用户通过 button 进入到客服消息之后，在聊天界面回复信息，就能触发设置好的 customer 云函数，比如下面的例子就是当用户发一条消息（包括表情）到客服消息会话界面，云函数就会给调用 customerServiceMessage.send 接口给用户回复两条文本消息（一次性可以回复多条），内容分别为[代码]等候您多时啦[代码]和[代码]欢迎关注云开发技术训练营[代码]，一个云函数里也是可以多次调用接口的： const cloud = require("wx-server-sdk"); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV, }); exports.main = async (event, context) => { const wxContext = cloud.getWXContext(); try { const result = await cloud.openapi.customerServiceMessage.send({ touser: wxContext.OPENID, msgtype: "text", text: { content: "等候您多时啦", }, }); const result2 = await cloud.openapi.customerServiceMessage.send({ touser: wxContext.OPENID, msgtype: "text", text: { content: "欢迎关注云开发技术训练营", }, }); return event; } catch (err) { console.log(err); return err; } }; 发送文本消息时，支持插入跳小程序的文字链接的，比如我们把上面的文本消息改为以下代码： content: '欢迎浏览点击跳小程序a>'; data-miniprogram-appid 项，填写小程序 appid，则表示该链接跳小程序；data-miniprogram-path 项，填写小程序路径，路径与 app.json 中保持一致，可带参数；对于不支持 data-miniprogram-appid 项的客户端版本，如果有 herf 项，则仍然保持跳 href 中的网页链接；data-miniprogram-appid 对应的小程序必须与公众号有绑定关系。 2、自动回复链接我们还可以给用户回复链接，我们可以把 customer 云函数修改为以下代码，当用户向微信聊天对话界面发送一条消息时，就会回复给用户一个链接，这个链接可以是外部链接哦。 const cloud = require("wx-server-sdk"); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV, }); exports.main = async (event, context) => { const wxContext = cloud.getWXContext(); try { const result = await cloud.openapi.customerServiceMessage.send({ touser: wxContext.OPENID, msgtype: "link", link: { title: "快来加入云开发技术训练营", description: "零基础也能在10天内学会开发一个小程序", url: "https://cloud.tencent.com/", thumbUrl: "https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/love.png", }, }); return event; } catch (err) { console.log(err); return err; } }; 3、根据关键词来回复用户将上面的云函数部署之后，当用户向客服消息的聊天会话里输入内容时，不管用户发送的是什么内容，云函数都会回给用户相同的内容，这未免有点过于死板，客服消息能否根据用户发送的关键词回复用户不同的内容呢？要做到这一点我们需要能够获取到用户发送的内容。 我们可以留意云开发控制台云函数日志里看到，customer 云函数返回的 event 对象里的 Content 属性就会记录用户发到聊天会话里的内容： {"Content":"请问怎么加入云开发训练营", "CreateTime":1582877109, "FromUserName":"oUL-mu...XbuEDsn8", "MsgId":22661351901594052, "MsgType":"text", "ToUserName":"gh_b2bbe22535e4", "userInfo":{"appId":"wxda99ae4531b57046","openId":"oUL-m5FuRmuVmxvbYOGuXbuEDsn8"}} 由于 Content 是字符串，那这个关键词既可以是非常精准的，比如“训练营”，或“云开发训练营”，还可以是非常模糊的“请问怎么加入云开发训练营”，我们只需要对字符串进行正则匹配处理即可，比如当用户只要发的内容包含“训练营”，就会收到链接： const cloud = require("wx-server-sdk"); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV, }); exports.main = async (event, context) => { const wxContext = cloud.getWXContext(); const keyword = event.Content; try { if (keyword.search(/训练营/i) != -1) { const result = await cloud.openapi.customerServiceMessage.send({ touser: wxContext.OPENID, msgtype: "link", link: { title: "快来加入云开发技术训练营", description: "零基础也能在10天内学会开发一个小程序", url: "https://cloud.tencent.com/", thumbUrl: "https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/love.png", }, }); } return event; } catch (err) { console.log(err); return err; } }; 在前面的案例里，我们都是使用[代码]touser: wxContext.OPENID,[代码]， 13.8.2 自动触发 event 事件要触发 event 事件，我们可以将 customer.wxml 的按钮改为如下代码，这里的 session-from 是用户从该按钮进入客服消息会话界面时，开发者将收到带上本参数的事件推送，可用于区分用户进入客服会话的来源。 进入客服button> 由于我们开启了 event 类型的客服消息，事件类型的值为 user_enter_tempsession，当用户点击 button 进入客服时，就会触发云函数，不用用户发消息就能触发，同时我们返回 event 对象. const cloud = require("wx-server-sdk"); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV, }); exports.main = async (event, context) => { const wxContext = cloud.getWXContext(); try { const result = await cloud.openapi.customerServiceMessage.send({ touser: wxContext.OPENID, msgtype: "text", text: { content: "欢迎来到等候您多时啦", }, }); return event; } catch (err) { console.log(err); return err; } }; 我们可以去云开发控制台查看返回的 event 对象 {"CreateTime":1582876587, "Event":"user_enter_tempsession", "FromUserName":"oUL-m5F...8", "MsgType":"event", "SessionFrom":"文章详情的客服按钮", "ToUserName":"gh_b2bbe22535e4", "userInfo":{"appId":"wxda9...57046", "openId":"oUL-m5FuRmuVmx...sn8"}} 在云函数端，我们是可以通过 event.SessionFrom 来获取到用户到底是点击了哪个按钮从而进入客服对话的，也可以根据用户进入客服会话的来源不同，给用户推送不同类型，比如我们可以给 session-from 的值设置为“训练营”，当用户进入客服消息会话就能推送相关的信息给到用户。 还有一点就是，bindcontact 是给客服按钮绑定了了一个事件处理函数，这里为 onCustomerServiceButtonClick，通过事件处理函数我们可以在小程序端做很多事情，比如记录用户点击了多少次带有标记（比如 session-from 的值设置为“训练营”）的客服消息的按钮等功能。 13.8.3 自动回复图片要在客服消息里给用户回复图片，这个图片的来源只能是来源于微信服务器，我们需要先使用 customerServiceMessage.uploadTempMedia，把图片文件上传到微信服务器，获取到 mediaId（有点类似于微信服务器的 fileID）,然后才能在客服消息里使用。 在 customer 云函数的 index.js 里输入以下代码并部署上线，我们将获取到的 mediaId 使用 cloud.openapi.customerServiceMessage.send 发给用户： const cloud = require("wx-server-sdk"); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV, }); exports.main = async (event, context) => { const wxContext = cloud.getWXContext(); try { //我们通常会将云存储的图片作为客服消息媒体文件的素材 const fileID = "cloud://xly-xrlur.786c-xly-xrlur-1300446086/1572315793628-366.png"; //uploadTempMedia的图片类型为Buffer，而从存储下载的图片格式也是Buffer const res = await cloud.downloadFile({ fileID: fileID, }); const Buffer = res.fileContent; const result = await cloud.openapi.customerServiceMessage.uploadTempMedia({ type: "image", media: { contentType: "image/png", value: Buffer, }, }); console.log(result.mediaId); const mediaId = result.mediaId; const wxContext = cloud.getWXContext(); const result2 = await cloud.openapi.customerServiceMessage.send({ touser: wxContext.OPENID, msgtype: "image", image: { mediaId: mediaId, }, }); return event; } catch (err) { console.log(err); return err; } }; 客服消息还能给用户回复小程序消息卡片，以及客服当前的输入状态给用户（使用 customerServiceMessage.setTyping 接口）。

云调用有些接口属于 AI 服务的范畴，比如借助于人工智能来进行智能裁剪、扫描条码/二维码、图片的高清化等图像处理和识别银行卡、营业执照、驾驶证、身份证、印刷体、驾驶证等 OCR，有了这些接口我们也能在小程序里使用人工智能了。接下来我们以小程序的条码/二维码识别和识别印刷体为例来介绍一下云调用。 13.3.1 图像处理使用开发者工具新建一个云函数，如 scancode，然后在 config.json 里添加 img.scanQRCode 云调用的权限，使用 npm install 安装依赖之后，上传并部署所有文件（此时也会更新权限）。 { "permissions": { "openapi": [ "img.scanQRCode" ] } } 然后再在 index.js 里输入以下代码，注意[代码]cloud.openapi.img.scanQRCode[代码]方法和[代码]img.scanQRCode[代码]权限的对应写法，不然会报 604100 的错误。 const cloud = require("wx-server-sdk"); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV, }); exports.main = async (event, context) => { try { const result = await cloud.openapi.img.scanQRCode({ imgUrl: "https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/demo/qrcodetest.png", //注意二维码必须是条码/二维码，不能是小程序码 }); return result; } catch (err) { console.log(err); return err; } }; 调用该云函数之后，返回的 result 对象里包含 result 对象，在 codeResults 的 data 里可以得到二维码里包含的内容。 codeResults: [{ data: "使用云开发来开发微信小程序可以免费。。。", pos: {leftTop: {…}, rightTop: {…}, rightBottom: {…}, leftBottom: {…}},typeName: "QR_CODE"}] errCode: 0 errMsg: "openapi.img.scanQRCode:ok" imgSize: {w: 260, h: 260} 13.3.2 OCR 人工智能识别使用开发者工具新建一个云函数，如 ocrprint，然后在 config.json 里添加 ocr.printedText 云调用的权限，使用 npm install 安装依赖之后，上传并部署所有文件（此时也会更新权限）。 { "permissions": { "openapi": [ "ocr.printedText" ] } } 调用该云函数之后，返回的 result 对象里包含 result 对象，在 codeResults 的 data 里可以得到二维码里包含的内容。 const cloud = require("wx-server-sdk"); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV, }); exports.main = async (event, context) => { try { const result = await cloud.openapi.ocr.printedText({ imgUrl: "https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/demo/ocrprint.png", }); console.log(result); return result; } catch (err) { console.log(err); return err; } }; 调用该云函数之后，返回的 result 对象里包含 result 对象，在的 items 里可以返回图片包含的文字内容。 items: Array(4) 0: {text: "JavaScript入门", pos: {…}} 1: {text: "JavaScript是目前世界上最流行的编程语言之一，它也是小程序开发最重要的基础语言。要做出一个功能复杂的小程序，除了需要掌握JavaScript的基本语", pos: {…}} 2: {text: "法，还要了解如何使用JavaScript来操作小程序(通过API接口)", pos: {…}} 3: {text: "过API接口)。", pos: {…}} 13.3.3 图像处理拓展能力图片是小程序非常重要的元素，尤其是旅游照片、社交图片、电商产品图片、相册类小程序、媒体图文等，图片的加载速度、清晰度、图片的交互、图片效果的处理以及图片加载的 CDN 消耗都是一个不得不需要去关注的问题。而云开发图像处理拓展能力结合云存储则可以非常有效的解决很多问题。 强烈建议所有有图片处理需求的用户都应该安装图像处理拓展能力，这个能力大大弥补和增强了云存储在图片处理能力，尤其是图片按照需求的规格进行缩放可以大大减少 CDN 的消耗以及图片的加载速度以及我们可以按照不同的业务场景使用快速缩略模板，而这一切的操作和云存储的结合都是非常实用且易用的。 1、图像处理能力介绍云开发图像处理能力结合的是腾讯云数据万象的图片解决方案，图像处理提供多种图像处理功能，包含智能裁剪、无损压缩、水印、格式转换等，图像处理拓展能力所包含的功能非常丰富，使用如下图片处理的费用是按量计费的，计费周期为月，10TB 以内免费，超出 10TB，按 0.025 元/GB 来计费，省事而便宜： 缩放：等比缩放、设定目标宽高缩放等多种方式；裁剪：普通裁剪、缩放裁剪、内切圆、人脸智能裁剪；旋转：普通旋转、自适应旋转；格式转换：jpg、bmp、gif、png、webp、yjpeg 格式转换，gif 格式优化，渐进显示功能；质量变换：针对 JPG 和 WEBP 图片进行质量变换；高斯模糊：对图片进行模糊处理；锐化：对图片进行锐化处理；图片水印：提供图片水印处理功能；文字水印：提供实时文字水印处理功能；获取图片基本信息：查询图片基本信息，包括格式、长、宽等；获取图片 EXIF：查询图片 EXIF 信息，如照片的拍摄参数、缩略图等；获取图片主色调：获取图片主色调信息；去除元信息：去除图片元信息，减小图像体积；快速缩略模板：快速实现图片格式转换、缩略、剪裁等功能，生成缩略图；管道操作符：对图片按顺序进行多种处理当我们在腾讯云云开发网页控制台(注意要使用微信公众号的方式登录)添加完图像处理的拓展能力之后，我们可以在腾讯云的数据万象存储桶里看到云开发的云存储，而关于图像处理能力的深入使用，也可以参考腾讯云数据万象的技术文档。在小程序云开发里使用图像处理能力的方法有三种： 图像地址的拼接，只需要在图片的下载地址 url 里拼接一些简单的参数（API 管道操作符），就能够使用到图像处理的能力，非常方便易用，这个不会把图片处理的结果存储到云存储，不会占用云存储的空间；在获取图片基本信息、获取图片 EXIF、获取图片主色调等方面非常方便；在前端（小程序端）做持久化图像处理，支持有结果图输出的处理操作，也就是我们可以把缩放、裁剪、格式转换、质量变换等处理之后的图片存储到云存储方便以后使用；在云函数端做持久化图像处理，支持有结果图输出的处理操作 01图像地址的拼接在了解图像处理能力之前，我们需要先了解一下云存储文件的 fileID、下载地址以及下载地址携带的权限参数 sign（图像处理能力的参数拼接就是基于下载地址的），如下图所示： [图片] 在安装了图像处理拓展能力的情况下，我们可以直接拿云存储的下载地址进行拼接，拼接之后的链接我们既可以在小程序里使用，也可以用于图床，比如原始图片下载地址为： https://786c-xly-xrlur-1300446086.tcb.qcloud.la/hehe.jpg?sign=b8ac757538940ead8eed4786449b4cd7&t=1591752049 而相关的图像处理能力的拼接案例如下，具体的操作可以看技术文档，实际的效果，可以复制粘贴链接到浏览器或小程序里体验（换成自己的地址），注意拼接方式就是在下载地址后面加了一个[代码]&imageMogr2/thumbnail/!20p[代码]（注意这里由于已经有了一个 sign 参数，所以拼接时用的是[代码]$[代码]，不能写成[代码]?[代码]，否则不会生效），直接就可以啦，非常易用： //将图片等比例缩小到原来的20% https://786c-xly-xrlur-1300446086.tcb.qcloud.la/hehe.jpg?sign=b8ac757538940ead8eed4786449b4cd7&t=1591752049&imageMogr2/thumbnail/!20p 后面为了方便，我们将[代码]https://786c-xly-xrlur-1300446086.tcb.qcloud.la/hehe.jpg?sign=b8ac757538940ead8eed4786449b4cd7&t=1591752049[代码]简写为 download_url: //缩放宽度，高度不变，下面案例为宽度为原图50%，高度不变 download_url&imageMogr2/thumbnail/!50px //缩放高度，宽度不变，下面案例为高度为原图50%，宽度不变 download_url&imageMogr2/thumbnail/!x50p //指定目标图片的宽度（单位为px），高度等比压缩，注意下面的是x，不是px，p与x在拼接里代表着不同的意思 download_url&imageMogr2/thumbnail/640x //指定目标图片的高度（单位为px），宽度等比压缩： download_url&imageMogr2/thumbnail/x355 //限定缩略图的宽度和高度的最大值分别为 Width 和 Height，进行等比缩放 download_url&imageMogr2/thumbnail/640x355 //限定缩略图的宽度和高度的最小值分别为 Width 和 Height，进行等比缩放 download_url&imageMogr2/thumbnail/640x355r //忽略原图宽高比例，指定图片宽度为 Width，高度为 Height ，强行缩放图片，可能导致目标图片变形 download_url&imageMogr2/thumbnail/640x355! //等比缩放图片，缩放后的图像，总像素数量不超过 Area download_url&imageMogr2/thumbnail/150000@ //取半径为300，进行内切圆裁剪 download_url&imageMogr2/iradius/300 //取半径为100px，进行圆角裁剪 download_url&imageMogr2/rradius/100 //顺时针旋转90度 download_url&imageMogr2/rotate/90 //将jpg格式的原图片转换为 png 格式 download_url&imageMogr2/format/png //模糊半径取8，sigma 值取5，进行高斯模糊处理 download_url&imageMogr2/blur/8x5 //获取图片的基础信息，返回的是json格式，我们可以使用https请求来查看图片的format格式,width宽度、height高度，size大小，photo_rgb主色调 download_url&imageInfo 2、小程序端持久化图像处理当我们希望把缩放、裁剪、旋转、格式变换等图像处理的结果（也就是处理之后的图片）存储到云存储，这个就叫做持久化图像处理，在安装了图像处理能力之后，我们也可以在小程序端做图像处理。 当用户把原始图片上传到小程序端时，我们需要对该图片进行一定的处理，比如图片过大就对图片进行裁剪缩小；比如图片需要进行一定的高斯模糊、旋转等处理，这些虽然在图像处理之前，也是可以使用 js 来做的，但是小程序端图像处理的效果并没有那么好或者过于复杂，使用图像处理的拓展能力就非常实用了。在小程序端构建图像拓展依赖 首先在开发者工具小程序根目录（一般为 miniprogram)，右键“在终端中打开”，然后在终端里输入以下代码，也就是在小程序端安装图像拓展依赖，安装完时，我们就可以在 miniprogram 文件夹下看到 node_modules： npm install --save @cloudbase/extension-ci-wxmp@latest 然后点击开发者工具工具栏里的工具-构建 npm，构建成功之后，就可以在 miniprogram 文件夹下看到 minprogram_npm 里有@cloubase 文件夹，里面有 extension-ci-wxmp，说明图像拓展依赖就构建完成。 在小程序端进行图像处理 使用开发者工具新建一个 imgprocess 的页面，然后在 imgprocess.wmxl 里输入如下代码，我们新建一个 button 按钮： 处理图片button> 然后再在 imgprocess.js 的 Page()函数的上面（外面）引入图像处理依赖，代码如下： const extCi = require("./../../miniprogram_npm/@cloudbase/extension-ci-wxmp"); 然后再在 imgprocess.js 的 Page()函数的里面写一个 imgprocess 的事件处理函数，点击 button 之后会先执行 readFile()函数，也就是获取图片上传到小程序临时文件的结果（是一个对象），然后再调用 imageProcess()函数，这个函数会对图片进行处理，图片会保存为[代码]tcbdemo.jpg[代码]，而处理之后的图片会保存为 image_process 文件夹下的 tcbdemo.png，相当于保存了两张图片： async imgprocess(){ const readFile = async function() { let res = await new Promise(resolve=>{ wx.chooseImage({ success: function(res) { let filePath = res.tempFilePaths[0] let fm = wx.getFileSystemManager() fm.readFile({ filePath, success(res){ resolve(res) } }) } }) }) return res } let fileResult = await readFile(); //获取图像的临时文件上传结果 const fileContent = fileResult.data //获取上传到临时文件的图像，为Uint8Array或Buffer格式 async function imageProcess() { extCi.invoke({ action: "ImageProcess", cloudPath: "tcbdemo.jpg", // 图像在云存储中的路径，有点类似于wx.cloud.uploadFile接口里的cloudPath，上传的文件会保存为云存储根目录下的hehe.jpg operations: { rules: [ { fileid: "/image_process/tcbdemo.png", //将图片存储到云存储目录下的image_process文件夹里，也就是我们用image_process存储处理之后的图片 rule: "imageMogr2/format/png", // 处理样式参数，我们可以在这里写图片处理的参数拼接 } ] }, fileContent }).then(res => { console.log(res); }).catch(err => { console.log(err); }) } await imageProcess() } 可能你的开发者工具会报以下错误：[代码]https://786c-xly-xrlur-1300446086.pic.ap-shanghai.myqcloud.com 不在以下 request 合法域名列表中，请参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html[代码]，这个要按照参考文档将链接加入到合法域名当中，不然不会生成图片；[代码]action[代码]是操作类型，它的值可以为：ImageProcess 图像处理，DetectType 图片安全审核（后面会介绍），WaterMark 图片忙水印、DetectLabel 图像标签等。[代码]operations[代码]是图像处理参数，尤其是 rule 和我们之前 url 的拼接是一致的，比如[代码]imageMogr2/blur/8x5[代码]、[代码]imageMogr2/rradius/100[代码]等参数仍然有效。上面函数里的 fileContent 不是必要的，也就是说我们可以不在小程序端上传图片，而是直接修改云存储里面已有的图片，并将图片处理后的照片保存，这种情况代码可以写成如下： async imgprocess(){ extCi.invoke({ action: "ImageProcess", cloudPath: "tcbdemo.jpg", // 会直接处理这张图片 operations: { rules: [ { fileid: "/image_process/tcbdemo.png", rule: "imageMogr2/format/png", // 处理样式参数，与下载时处理图像在url拼接的参数一致 } ] }, }).then(res => { console.log(res); }).catch(err => { console.log(err); }) } 3、云函数端持久化图像处理在云函数端的处理和小程序端的处理，使用的方法大体上是一致的，不过云函数的处理图片的场景和小程序端处理图片的场景会有所不同，小程序端主要用于当用于上传图片时就对图片进行处理，云函数则主要用于从第三方下载图片之后进行处理或者对云存储里面的图片进行处理（比如使用定时触发器对云存储里指定文件夹的图片进行处理）。不建议把图片传输到云函数端再来对图片进行处理。 使用开发者工具新建一个 imgprocess 的云函数，然后在 package.json 里添加 latest 最新版的[代码]@cloudbase/extension-ci[代码]，并右键云函数目录选择在终端中打开输入命令 npm install 安装依赖： "dependencies": { "wx-server-sdk": "latest", "@cloudbase/extension-ci": "latest" } 然后再在 index.js 里输入以下代码，代码的具体含义可以参考小程序端的内容讲解： const cloud = require("wx-server-sdk"); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV, }); const extCi = require("@cloudbase/extension-ci"); cloud.registerExtension(extCi); async function process() { try { const opts = { rules: [ { fileid: "/image_process/tcbdemo.jpeg", rule: "imageMogr2/format/png", }, ], }; const res = await app.invokeExtension("CloudInfinite", { action: "ImageProcess", cloudPath: "tcbdemo.jpg", fileContent, operations: opts, }); console.log(res); return res; } catch (err) { console.log(err); } }

为了方便各类开发者，现提供免费开放Api接口，所有接口均无使用限制，返回格式全是JSON，所以基本能满足大家的开发需求下面列举了100多个国内外常用API接口，非常简单，略懂技术的菜鸟也能直接对接，包含快递单号查询、天气查询、生活常用、文体娱乐、企业金融、通讯服务、出行、技术开发等类别。API接口是获取网络服务最便捷的方式，合理地使用AP接口开发项目可以大大提高开发效率，把精力都集中在程序的业务逻辑之上，避免重复造轮子。推荐给大家很赞的第三方API接口： 一、交通出行 快递单号查询 快递鸟- 快递鸟目前支持418家国内外快递商，免费且没有使用次数限制。注：申请试用快递鸟API Key可以免费 【快递鸟】快递单号查询接口,免费电子面单API_全球物流接口服务商 提供包括申通、顺丰、圆通、韵达、中通、百世等国内国外快递公司在内的418快递物流单号查询，31家电子面单接口，免费且无使用次数限制。 微信物流助手 物流助手，帮助有物流需求的开发者，快速高效对接多家物流公司。对接后用户可通过微信服务通知接收实时物流状态，提升用户体验。 菜鸟-目前为15家国内主流快递公司提供物流信息服务的推送接口，以及20多家其他快递公司的物流信息主动拉取服务； AfterShip - 支持超过200家物流公司的物流跟踪和通知. Aramex - 通过全球物流提供商网络提供包裹, 快递和货运服务. Canada Post - 允许电子商务解决方案提供商和在线商家将加拿大邮政服务(如邮寄,评级和跟踪数据)整合到平台或网站中. DHL - DHL XML 服务为开发者提供了整合 DHL 来自140多个国家的服务可用性, 运输时间, 费率, 物流跟踪以及更多功能的能力. FedEx - FedEx 网络服务允许企业将 FedEx 的运输功能集成到他们现有的仓库管理系统中, 无需现场托管。 UPS - 提供了将 UPS 的运输功能集成到网站和企业应用程序的能力. 电子面单接口_电子面单API免费申请_热敏电子面单打印模板-快递鸟 韵达开放平台 百世开放平台 圆通快递开放平台 中通快递开放平台 人人快送-众包配送第一平台 速递易开放平台 快递100-API接口 优速开放平台(UOP)-[start] 申通开放平台 德邦快递-开放平台 顺丰开放平台 京东物流技术开放平台 达达 | 开放平台 物流评价投诉接口_物流平均分获取接口-快递鸟API免费接口 共享汽车 神州租车 - 来自中国的共享汽车公司. Uber - 允许定制旅行体验, 请求出行, 后勤保障, 创建机器人等等. 滴滴 - 滴滴提供了iOS和Android SDK, 可实现拉起滴滴叫车等方面的操作。 地图 百度地图 - 百度地图提供了Android, iOS版本的SDK和JavaScript API，可进行定位、地图、数据、出行、鹰眼轨迹和分析服务。 高德地图 - 高德地图提供了JavaScript和web服务API，Android和iOS SDK，支持地图，定位，搜索，路线规划，导航和室内地图等。 腾讯地图 - 腾讯地图提供了JavaScript API，Android和iOS SDK，支持定位，地图，地点搜索，路线和导航等。 必应地图 - 访问必应地图的 API. Google Maps - Google Maps web Service 是一个 Google 服务的 HTTP 接口集合, 为你的地图应用程序提供地理数据. Here Maps - 使用简单的 HTTP GET 方法提供地图, 路由, 地理编码, 地点, 定位, 交通, 过境和天气信息. 腾讯地图 - 访问腾讯地图的 WebService API. 即时通讯 环信 - 支持Android, iOS, WebIM, Linux, REST集成，支持多种消息类型。 融云 - 支持Android, iOS, Web, 游戏集成，支持多种消息类型。 网易云信 - 支持IM实时通讯，实时音视频，教学白班，专线电话，短信，聊天室，提供iOS, Android, Windows和Web SDK。 腾讯云通信IM - 提供iOS, Android, Windows和Web SDK，支持多种消息类型。 旅游 去哪儿 - 支持获取去哪儿网的内容。 途牛 - 支持途牛网的内容，仅开放给供应商系统。 携程 - 支持携程网的内容。 二、技术开发 用友云 阿里云 百度云 Bmob Google Cloud Platform LeanCloud Oracle Cloud 七牛 腾讯云 微信小程序开放接口 Amazon Cloud Drive - 借助 Amazon Cloud Drive 最新的 RESTful API 和 Android 与 iOS SDK, Amazon Drive 正转向为受邀的开发者提供服务, 以确保他们能够为其所支持的使用案例提供始终如一的可用云盘服务。 Box - 支持搜索, 元数据, 粒度权限模型, 企业级安全, 保留策略, 120种类型的文件预览功能. Digital Ocean - 在55秒内部署SSD云服务器. Document Cloud - DocumentCloud 运行在你通过 OpenCalais 上传的每一份文件中, 为你提供有关人员, 地点和组织的广泛信息. Dropbox - 为和文件相关的应用提供了一个强大的 API. Google Drive- Google Drive API 允许你从移动设备和网络应用中读取, 写入和同步存储在 Google Drive 中的文件. OneDrive - 访问 OneDrive 中的文件. QNAP - 借助 QNAP 开发工具包(API 和 SDK), 开发人员可以设计能在客户端设备(如智能手机或 PC)上运行的应用, 并远程管理和访问存储在NAS上的文件和文档。 Verizon Cloud - 上传, 检索和管理大量数据, 通过 API 调用访问数据, 查看预先打包的报告, 依靠 Verizon 的安全措施保证数据安全和随时可用. 开发者网站 Coding - 授权后可访问http://coding.net网站的内容。 干货集中营 - 提供妹子图和Android, iOS, 前端，拓展资源等内容。 diycode - 授权后可访问diycode网站的内容。 开源中国 - 授权后可访问开源中国网站的内容。 Laravel China - 授权后可访问 Laravel China 网站的内容。 Ruby China - 授权后可访问Ruby China网站的内容。 V2EX - 可访问V2EX网站的内容。 开发工具 爱站API市场_爱站网 设计 Dribbble - 访问 Bucket, 项目, 作品, 团队, 用户和工作等数据. Behance - 获取项目, 可关注的广告素材, 创意领域, 用户, 收藏等信息. deviantART - 允许获取 deviantart.com 的数据. 开发 ARTIK Cloud - ARTIK Cloud API 提供访问 ARTIK Cloud 平台的数据. AT&T M2X - M2X 的 RESTful API 简化了设备和 M2X 服务之间的连接, 使你能够构建利用时间序列数据分析和分布式的高可用性时间序列数据存储的应用程序和服务, 为你的客户和最终用户提供有意义的信息, 并构建物联网和 M2M 解决方案, 而无需管理自己的存储基础架构. Bitbucket - Bitbucket 是一个基于 Web 的托管服务, 由 Atlassian 拥有, 用于使用 Mercurial 或 Git 版本控制系统的源代码和开发项目. bitly - bitly是一种最简单, 最有趣的方式来保存, 分享和发现来自网络的链接. Buddy - Buddy 是一个持续集成服务. 它支持 GitHub, Bitbucket 和 Gitlab 项目. 自动化 Web 和 Docker 应用程序的生命周期: 构建, 测试和部署. Bugzilla - Bugzilla 是一个基于 Web 的通用的错误追踪器和测试工具, 最初由 Mozilla 项目开发和使用, 并在 Mozilla Public License 下获得许可. CircleCI - CircleCI API 是一个 RESTful, 全功能的 API, 允许你访问所有信息并触发 CircleCI 中的所有操作. Coding - 访问 https://coding.net/ 的 API. diycode - 访问 https://www.diycode.cc/ 的 API. 干活集中营 - 访问 http://gank.io/ 的 API. GitHub - 世界上领先的软件开发平台. Gitter - GitHub 的聊天工具. GitLab - 通过一个简单而强大的 API 自动化 GitLab. Google Play Developer - Google Play Developer API 允许你执行大量的发布和应用程序管理任务。 IPInfo.io - 使用ipinfo.io IP查找API快速简单地将IP地理位置集成到你的脚本或网站。 Laravel China - 访问 https://laravel-china.org/ 的 API. openHAB - openHAB 的 REST API 服务于不同的目标. 它可用于将 openHAB 与其他系统集成, 因为它允许读取项目和项目状态以及状态更新或发送项目命令. 此外, 它还提供对站点地图的访问, 因此它是远程用户界面(例如胖客户端或完全基于 Javascript 的 Web 客户端)使用的接口. 开源中国 - 访问 https://oschina.net/ 的 API. Particle - Particle Cloud API 是一个 REST API. QR Code Generator - 你可以使用 QR 码生成器 Web API 在 api.qrserver.com 上生成和解码/读取 QR 码图形. Ruby China - 访问 https://ruby-china.org/ 的 API. StackExchange 访问 Stack Exchange API. SVN - 文档涵盖了 Subversion 库提供的公共 API. 它主要面向程序员, 无论是从事 Subversion 本身的开发人员, 还是希望使用这些 API 的第三方应用程序开发人员. TravisCI - 这是官方 Travis CI Web 界面使用的 API, 因此 web 界面所能做的所有事情都可以通过 API 完成. V2EX - 访问 https://www.v2ex.com/ 的 API. W3C - 作为对 W3C 社区的开发人员要求与 W3C 的数据进行交互的要求的相应, W3C Systems 团队开发了一个 Web API. 通过它, 规格, 群组, 组织和用户的数据变得可用. W3C API 是基于 JSON 格式的仅针对公开数据的只读 Web API. ZenHub - ZenHub 是唯一的原生集成在 GitHub 接口中的项目管理工具. 物联网 Amazon Alexa - 利用 Alexa Voice Service API, 开发人员可以通过话筒和扬声器为连接的产品提供语音功能. Google Assistant - Actions on Google 允许你为 Google Assistant 创建应用. Home8 - 100％无线物联网系统, Home8 简化了智能报警系统的 DIY 安装, 同时为你提供最佳的视频认证报警保护. Homey - 访问 Homey 的 API. HP Print - 访问 HP Print 的 API. LIFX - LIFX 是一款多色智能 WiFi LED 灯泡. LIFX HTTP API 允许你通过互联网控制 LIFX 设备, 并且是与 LIFX 设备交互的REST API. LightwaveRF - 该 API 概述了 LightwaveRF 系统当前正在使用的本地命令协议. microBees - 轻松执行 REST API 并订阅实时消息. Mojio - 使用 REST 节点进行请求和响应类型集成, 使用 PUSH API 来实时推送数据. myStrom - myStrom WLAN Energy Control Switch 提供了一个 REST API, 允许你从 myStrom 独立的本地网络直接访问/控制交换机. Neurio - Neurio 是一个带有公共 API 的开放平台, 所以你可以任意扩展它. 将其连接到 Web 服务, 或编写自己的应用程序. Philips Hue - 飞利浦的 Hue 连接的灯泡和桥接器让你能够完全控制你的照明. Smappee - 使用 Smappee 的 API, 可以帮助你测量电能消耗和太阳能生产量. SmartThins - 访问 SmartThings 的 API. Stack Lighting - Stack API 是一个 REST API, 它定义了一组允许开发人员执行请求并通过 HTTP 协议接收响应的函数. 该 API 为开发人员提供了控制亮度, 色温, 运动设置, 环境光线感应设置以及其他功能的功能, 以根据个人喜好调整 Stack 响应式照明. Vinli - Vinli 是一个用于简单快速地构建车联网应用的平台. Yeelight - Yeelight 智能 LED 产品支持通过 WiFi 远程控制. 机器学习 Amazon Machine Learning - Amazon Machine Learning 使开发人员可以轻松构建智能应用程序, 包括欺诈检测, 需求预测, 有针对性的市场营销和点击预测等. BigML - BigML 平台具有异常检测, 聚类分析, 用于决策树的 SunBurst 可视化, 文本分析等功能. Diffbot - Diffbot 平台利用 AI, 计算机视觉, 机器学习和自然语言处理的组合, 自动从网页(如文本, 图像, 视频, 产品信息和评论)提取数据. Google Cloud Prediction - Google Cloud Prediction API 提供了一个 RESTful API 来构建机器学习模型. Prediction 的基于云的机器学习工具可以帮助你分析数据, 为你的应用程序添加各种功能, 如客户情绪分析, 垃圾邮件检测, 推荐系统等. IBM Watson - 允许开发人员构建利用机器学习技术的应用程序, 如自然语言处理, 计算机视觉和预测. Microsoft Azure Machine Learning - Microsoft Azure 机器学习平台提供自然语言处理, 推荐引擎, 模式识别, 计算机视觉和预测建模等功能. 图灵聊天机器人：http://doc.tuling123.com/openapi2/263611 团队协作 Asana - 允许你以编程方式更新和访问平台上的大部分数据. join.me - join.me 是一个在线会议工具, 让人们可以一起完成伟大的事情. Teambition - Teambition 的 Open Platform 提供用于获取数据的完整开放 API 集. 根据项目数据构建应用程序将充分利用你的协作数据, 如项目跟踪, 数据挖掘等. TeamSnap - 使用世界上最好的团队管理解决方案来支持你的用户. Trello - Trello 是一个基于 Web的项目管理应用程序. Worktile - 访问 Worktile 的 API. 文本分析 BosonNLP - 中文文本分析. 腾讯文智 - 中文文本分析. Text Analytics API - The Text Analytics API 是一套文本分析 Web 服务, 使用最佳的 Microsoft 机器学习算法构建. Watson Natural Language Understanding - Watson 的 Natural Language Understanding 使用自然语言处理来分析任何文本的语义特征. 待办 Beeminder - 访问 Beeminder 的 API. FollowUp.cc - 访问 FollowUp.cc 的 API. Todoist - Todoist API (也称为『Sync API』) 专门用于客户端(例如移动应用程序)和 Todoist 之间的高效数据同步. Toodledo - Toodledo API 可以自由使用, 并提供对用户的任务, 笔记, 大纲和列表的访问. 语音分析 百度语音 - 访问百度的语音分析 REST API. Cloud Speech API - Google Cloud Speech API 使开发人员能够通过在易于使用的 API 中应用强大的神经网络模型, 将音频转换为文本. 语义识别 BosonNLP玻森 - 支持REST API并提供Python SDK。 腾讯文智 - 支持词法类，句法类，篇章类，下载类API，目前平台能识别类别囊括了求职招聘、影视、音乐、健康养生、财经、广告推广、犯罪、政治等90多个类别，且算法支持快速迭代更新已有类别及增加新类别。提供Python SDK。 语音识别 百度语音 - 支持全平台REST API, 离线在线融合模式，深度语义解析，场景识别定制，自定义上传语料、训练模型，基础服务永久免费。提供相应SDK和Demo应用。 搜狗语音云开放平台 - 支持在线/离线语音识别，在线听歌识曲，离线语音合成等内容。提供相应平台SDK。 讯飞开放平台 - 支持语音听写/转写，在线/离线命令词识别，语音唤醒等内容，平台支持广泛，提供相应SDK。 人工智能 百度AI开放平台：涵盖图像处理、自然语言、语音技术、知识图谱、数据智能、AR、视频技术和深度学习八大方面。看需选择即可。 ref=“http://www.faceplusplus.com.cn/”>人脸识别Face++ 综合 用友APILink- 提供中国可用的API，金融企业和生活相关，支持免费试用。 魅族开放平台 阿里大于 - 提供中国可用的 API . 易信开放平台 快递鸟API接口-为电商提供最全面的物流api服务 蜻蜓开放平台 Amazon Developer - 允许构建有关 Amazon 的应用与游戏, Alexa, AWS, Amazon 服务与 API 以及 Amazon 设备的软件。 APiX - 提供中国可用的信用相关的 API. 阿凡达数据 - 提供中国可用的 API . 小店开放平台 钉钉开放平台–企业应用和企业服务创新平台 客如云开放平台 清博开放平台-首页 乐橙开放平台 阿里应用分发开放平台 Google API Library - Google API Library 包含100多个 API, 例如 Google Cloud API, Google Maps API, Google Apps API, 移动 API, 社交媒体 API, Youtube API, 广告 API 以及其他受欢迎的 API. HaoService - 提供中国可用的 API . iTunes Search API - 允许在网站中放置搜索字段以搜索 iTunes Store, App Store, iBooks Store 和 Mac App Store 中的内容. 腾讯AI开放平台 笛佛开放平台 首页-艺龙开放平台 OPPO开放平台 Microsoft Developer - 访问 Microsoft 的公共 API. ProgrammableWeb - 关于 API 的新闻和信息的主要来源, 记录全球 API 经济的发展, 提供网络最依赖的 API 目录. 新浪微博开放平台-首页 小米开放平台 讯飞开放平台-以语音交互为核心的人工智能开放平台 蚂蚁金服 三、天气查询 天气查询应用的场景非常广，我猜很多人练手的第一个项目就是做天气查询类的demo。 全国天气预报 - 一个简单的HTTP接口，根据用户输入的adcode，查询目标区域当前/未来的天气情况。 使用API前需先申请Key。 AccuWeather - AccuWeather API 通过一个简单的 REST 风格的 Web 界面为订阅者提供基于位置的天气数据的访问. Aeris Weather - 驱动你的定制应用的先进 API, 为新鲜空气提供了从简到繁的解决方案. 彩云天气 - 中国天气信息. 和风天气 - 中国天气信息. Open Weather Map - Open Weather Map 服务提供免费的天气数据和预测 API, 适用于任何制图服务, 如网页和智能手机应用程序. Weather Underground - 可靠的数据, 准确的预测, 全球覆盖80种语言. Weather Unlocked - 电子广告商, 电子商务和开发人员的天气驱动方案. 心知天气 - 中国天气信息. Yandex.Weather - Yandex.Weather 使用专有的预测技术 Meteum 来评估俄罗斯地区特定地点的当前天气情况, 并为这些地理坐标创建预报. Yahoo! Weather - 获取任何位置的最新天气信息, 包括5天预报, 风, 大气, 天文条件等. 四、生活常用 空气质量指数- 支持全国300多个城市的空气质量指数（AQI）查询，每小时更新一次，可查询到城市的首要污染物、空气质量的优良级别、指数颜色值等信息 全国医院信息查询- 可查询到国内各大医院的详细信息，包括医院所在的具体地址、医院类型、医院名称、医院等级、联系方式、重点科室、医院专家和医院简介等详细信息。 公交及站点查询-全国城市公交站点、线路、换乘查询。 谷歌日历 - Google Calendar API 可以让你将你的应用与 Google Calendar 集成, 为你吸引用户创造新的途径. Outlook Calendar - The Calendar API 提供了访问由 Office 365 中 Azure Active Directory 保护的事件, 日历, 日历组以及以下域中的特定 Microsoft 帐户中的类似数据: Hotmail.com, Live.com, MSN.com, Outlook.com 和 Passport.com. 外卖 百度外卖 - 支持商户，菜品，商品，订单和基础数据等内容，提供SDK和Demo。 大众点评 - 支持商户，团购，在线预定，商品点评，数据统计，元数据等内容。 饿了么 - 支持查询，预定，订单，其他订单，数据推送，支付，评价，活动，账户同步，数据落地同步等内容。 美团外卖 - 支持门店，配送范围，菜品，药品，订单，订单推送等内容。 五、文体娱乐 博客 Medium - 访问 medium.com 的数据. s Weebly -借助 Weebly Cloud, 你可以提供 Weebly 的最佳网站构建方式, 使你的客户能够在几分钟内创建自己的网站, 博客或在线商店, 同时完全控制帐单, 支持和客户关系. WordPress - 访问 WordPress 的 API. Telegraph - 访问 Telegraph 的 API, Telegram 的 发布服务. 书籍 An API Of Ice And Fire - 冰与火之歌的 API 提供 JSON 格式的“冰与火之歌”宇宙中的所有书籍, 人物, 房屋的数据. 无需验证身份. Node 和 Swift 库可用. Open Library Books API - Open Library 是一个开放的, 可编辑的图书馆目录, 为每一本出版的图书都建立了网页. The New York Public Library Digital Collections API - 一个多世纪以来, 纽约公共图书馆已经积累了一系列罕见而独特的材料, 涵盖了所有有记录的知识. Bookshare - Bookshare API 使我们的合作伙伴能够使具有合格的阅读障碍的顾客搜索, 浏览和下载书籍和期刊. 新闻 & 信息 Diigo - Diigo API 允许你构建与 Diigo 服务交互的应用程序. feedly - 访问 feedly 的 API. Genius - Genius API 帮助维基百科建立世界上最伟大的公共知识项目. goodreads - Goodreads API 允许开发人员访问 Goodreads 数据, 以帮助处理书籍的网站或应用程序更加个性化, 社交化和更具吸引力. HackerNews - 官方 HN API 的文档和示例. Inoreader - Inoreader API 允许你帮助用户订阅订阅源, 阅读文章或将其编目以供稍后查看. Instapaper - Instapaper API 允许第三方应用程序将 URL 添加到 Instapaper. Narro -访问文章和读物, 并代表客户提交. Newsblur - NewsBlur 的 API 允许用户获取摘要, 摘要数量, 摘要图标, 内容分析和独立的摘要故事. NPR - NPR 的 API 提供了一种灵活, 强大的方式来访问你最喜欢的 NPR 内容. Pinboard - Pinboard API 是一种以编程方式与书签, 笔记和其他 Pinboard 数据进行交互的方式. Pocket - 通过集成 Pocket API, 将『保存后使用』的功能带给用户和应用程序. Product Hunt - 访问 producthunt.com 的 API. 纽约时报 - 访问『纽约时报』的 API. 今日美国 - 访问来自『今日美国』的新闻和有趣的故事. 今日热闻API：包含以下十四个新闻频道，可以获得文章的内容和图片。 游戏 暴雪 - Battle.net 是一个在线电子游戏网站, 其特点是由暴雪娱乐开发的游戏集合. 可用的 Battle.net API 包括 D3, WoW, SC2, 社区 API 和游戏数据 API. 部落冲突 - 部落冲突 API 提供了接近实时的游戏相关数据. 星战前夜 - EVE Online 是最受欢迎的科幻大型多人在线角色扮演游戏（MMORPG）之一. EVE Online CREST 和 XML API 提供了对角色, 行业, 市场, Solar System, 联盟和企业以及其他游戏数据的编程访问. Facebook Games Services - Facebook Games Services 为游戏开发者提供了各种服务, 包括(但不限于) 成就 API, 分数 API, 应用通知, 请求, 游戏养成和 Facebook SDK for Unity. Google Play Games Services - Google Developers Games 网站提供了各种 API, SDK 和服务, 包括(但不限于)游戏发布 API, Unity 插件, Play 游戏服务(成就, 排行榜, 玩家统计等)和 Google AdMob. Riot Games - 为英雄联盟开发者社区提供安全可靠的游戏数据访问. Steam Web APIs - Steam Web API 允许开发人员向 Steam 查询他们可以在自己的网站上展示的信息. 目前我们提供的唯一 API 提供了 Team Fortress 2 的项目数据, 但是这个列表将随着时间的推移而增长. Giant Bomb - Giant Bomb API 提供了对 Giant Bomb 网站上的大量信息的程序化访问, 例如游戏名称, 评级, 视频, 公司, 主题, 流派等等。 健身 & 可穿戴 Adidas AG - 访问 Adidas AG 的 API. Fitbit - Fitbit API 允许开发人员在自己的应用程序, 产品和服务中与 Fitbit 数据进行交互. Jawbone UP - 利用步数, 运动, 食物和睡眠跟踪的力量建立自己的产品和体验. Lifelog - 索尼的 Lifelog API使你可以安全地访问智能手机中的传感器和 SmartWear 设备收集到的用户的生活方式, 健身和健康数据. 利用它在你的应用程序或服务中创建的具有创造性的新用例. Misfit - 你现在可以利用一整套工具将 Misfit 的活动跟踪, 睡眠跟踪和可穿戴控制功能集成到你的产品和服务中. Nike+ - Nike Activity Services 会将用户活动汇总的详细信息返回给 Nike +. 例如, 用户的跑步细节, 如平均速度, 时间, 距离, 从他/她的 Nike + FuelBand 获得的 NikeFuel, 终身成就等等. Recon - 访问 Recon instruments 的数据. Strava - Strava V3 API 是一个公开可用的接口, 允许开发人员访问丰富的 Strava 数据集. Withings - Withings API 允许开发人员利用 Withings 设备和 Withings 记录的数据创建应用程序. 音乐 Deezer - Deezer 是一种基于网络的音乐流服务. 豆瓣音乐 - 允许访问豆瓣音乐的数据. 考拉FM - 允许访问考拉 FM 的数据. Last.fm - Last.fm API 允许任何人使用 Last.fm 数据创建他们自己的程序, 无论他们使用网络, 桌面还是移动设备上. MusicGraph - 由 Senzari 推出的 MusicGraph API 是世界上第一个音乐知识引擎, 它将作为一个功能强大的『图形 API』的方式提供, 开发人员可以利用它来利用强大的音乐智能来增强其应用. Musixmatch - 使用 Musixmatch API 将歌词带到你的应用程序中. One Music - One Music API 能够提供令人惊讶的音乐范围的元数据, 因为它汇集了现有的, 维护良好的在线数据库. 蜻蜓FM - 允许访问蜻蜓 FM 的数据. 企鹅FM - 允许访问企鹅 FM 的数据. SoundCloud - 允许用户在网络上上传和分享音乐. Spotify - Spotify 的 Web API 可让你的应用程序从 Spotify 音乐目录获取数据, 并管理用户的播放列表和保存的音乐. 视频 Dailymotion - Dailymotion 是全球第二大视频托管平台. 豆瓣电影 - 电影数据. Narrative - 自定义剪辑, 获取玩家, 徽章, 并与 Narrative API 一起玩耍. 爱奇艺 - 支持查询爱奇艺的数据. 乐视视频 - 允许查询, 上传, 下载等. Rotten Tomatoes - Rotten Tomatoes API 提供了获得 Rotten Tomatoes 的评分和评论, 允许获得批准的公司和个人用 Rotten Tomatoes 数据丰富他们的应用和小部件. 搜狐视频 - 允许查询数据. The Movie Database (TMDb) - The Movie Database 提供最受好评的电影, 即将到来的电影, 现在播放电影, 热门电影, 热门电视节目, 最受好评的电视节目, On the air 节目, Airing today TV shows, 热门人物等的接口. Vimeo - 最受创作者支持的网络社区, 可以获得高质量的工具, 用于在没有广告的情况下以华丽的高清格式托管, 分享和流式传输视频. Youtube - 将YouTube 的功能嵌入到你自己的网站和应用程序中. 优酷 - 允许上传, 下载, 登录等. 电影 豆瓣电影 - 豆瓣电影支持电影条目，影人条目，搜索和榜单等。 笔记 OneNote - OneNote支持获取，复制，创建，更新，导入与导出笔记，支持为笔记添加多媒体内容，管理权限等。提供SDK和Demo。 有道云笔记 -有道云笔记提供了Android SDK，同时Open API允许进行授权，用户，笔记本，笔记，分享，附件等方面的操作。 为知笔记 - 为知笔记Windows客户端开放了大量的API，其中绝大部分，都通过COM提供，可以在javascript, C#, C++, Delphi等语言中使用。接口通过IDL(Interface description language)语言描述。 印象笔记 - 印象笔记提供了ActionScript 3, Android, C++, Windows, iOS, Java, JavaScript, OS X, Perl, PHP, Python, Ruby等平台的SDK和完整的API参考文档， 翻译 百度翻译 - 支持多种语言之间的相互翻译. Google Translate - 支持动态地翻译上千种语言间的相互翻译. 金山词霸 - 支持简单的翻译功能. 金山词霸(非官方) - 金山词霸允许进行简单的翻译操作。 #非官方 Microsoft Translator - 支持多种语言的基于云的机器翻译服务, 可达到全球国内生产总值 (GDP) 的95％以上. 牛津词典 - 访问牛津词典的 API. 扇贝 - 提供了完整的 API, 支持查询, 添加学习记录, 写笔记等. Yandex Translate - 支持超过70种语言并且能够翻译单独的词语或完整的文本. 译云翻译 API - 支持几种语言之间的翻译. 有道翻译 - 支持简单的翻译操作. 旅游 携程 - 访问携程的数据. 艺龙 - 访问艺龙网的酒店和飞机票数据. 去哪儿 - 访问去哪儿网的酒店, 火车票, 飞机票和保险数据. 途牛 - 访问途牛的数据. 仅对供应商开放. 摄影 500px - 500px API 提供对 500px 功能和内容的编程访问. Giphy - 世界上最大的 GIF 图片库. Imgur - 使用 Imgur 的 RESTful API, 你可以做任何你能够在 imgur.com 网站做的事情. Pixabay - pixabay API 是一个 RESTful 接口, 用于搜索和检索 Creative Commons CC0 下发布的 Pixabay 图像和视频. Unsplash - 访问世界上最强大的图片引擎. Unsplash It - 使用来自 unsplash 的优美的占位图. Unsplash Resource - 一个用于嵌入 Unsplash 图片的简单 API. 社交 Disqus -Disqus 平台包含各种功能, 如社交整合, 社交网络, 用户档案, 垃圾邮件和审核工具, 分析, 电子邮件通知和移动评论. 豆瓣 - 访问图书, 电影, 音乐, 广播等内容. Facebook - Facebook是一家美国营利性公司, 也是一家在线社交媒体和社交网络服务公司. Flickr - 几乎是世界上最好的在线照片管理和共享的应用. Foursquare - Foursquare API 让你可以访问我们的世界级的地点数据库, 并且可以与 Foursquare 用户和商家进行互动. Instagram - 与朋友和家人用一种简单有趣并有创造性的方式来捕捉, 编辑, 分享照片, 视频和信息. LinkedIn - 世界上最大的专业网络平台. Pinterest - Pinterest API 使你能够访问用户的 Pinterest 数据, 喜欢他们的信息流, Pins, 关注者等. Reddit - Reddit 是一个美国社交新闻聚合, 网上内容评分, 和讨论的网站. Tumblr - Tumblr 是一个表达自我, 发现自我, 并与你喜爱的东西紧密相连的地方. Twitter - 访问 Twitter 的数据. 微博 - 访问微博, 用户, 评论, 收藏等内容. 六、企业金融 Yelp - 访问 Yelp 的 API. Zomato - Zomato API 使你能够访问全球10000个城市超过150万家餐厅的最新, 最详尽的信息. 购物 Amazon - 访问Amazon 的 API. Best Buy -访问 Best Buy 的 APIs. eBay - 访问 eBay 的 API. Home Depot - 访问 Home Depot 的API. 京东 - 访问京东的 API. Semantics3 - 访问 Semantics3 的 RESTful API. Slice - 访问 Slice 的 REST API. 淘宝 - 访问淘宝的 API. 电商 京东 - 京东提供了Java, PHP, .net的SDK，授权后可进行多种操作。 苏宁开放服务 - 苏宁提供了Java, PHP, .Net, Python版本的SDK，授权后可进行多种操作。 淘宝开放平台 - 淘宝提供了Java, .Net, PHP, Python版本的SDK，授权后提供多种操作。 亚马逊 - 亚马逊提供多种语言版本的SDK，授权后允许多种操作。 支付 PayPal - 访问 PayPal REST API. Paymill - 访问完整的 API 参考, 获得你需要知道引入 PAYMILL 相关的任何信息。 Paytm - 访问你需要使用的 API 的详细信息, 使用 Paytm Wallet 在你的应用/网站上进行付款, 并处理与付款相关的操作问题(例如: 退款, 交易状态检查). WePay - WePay 专为平台, 如市场, 众筹网站和小型商业工具而设计. 可获得无缝的用户体验和防欺诈保护 图片与图像处理 别样网 - 无版权免费大尺寸图片共享平台。 Camera360 - 支持全帧率直播美白滤镜，提供SDK和Demo。 嗨图 - 支持图片标注，仅提供iOS版本SDK。 名片全能王 - 支持精准识别几十种语言的名片，自动切边并美化名片图像，自动返回识别结果，提供多种版本SDK，收费。 pixabay - 在所有的图像和视频Pixabay释放自由版权下创作共用CC0。你可以下载、修改、分发，并使用它们在任何你喜欢的任何东西，即使在商业应用程序中使用它们。不需要归属权。 企业证件识别 - 支持身份证，驾驶证，护照等，收费。 扫描全能王 - 支持图像智能剪裁，五种图像增强模式，手动调节图像细节，自动返回扫描结果等，提供iOS与Android版本SDK，收费。 我知图 - 支持相似图像搜索，图像识别匹配，图像识别关键词推荐，重复图片探测等内容。 图片隐写术-图片版权保护API，图片水印加密技术，处理后的图片看上去没有任何变化，但是实际上图片已经拥有了自己的唯一标识 工作 Airtable - Airtable Standard API 允许你创建, 读取, 更新和销毁记录. Buffer - The Buffer API 提供了访问用户的待发送和已发送的更新内容, 社交媒体资料, 定时访问和更多内容. Concur Labs - 访问 Concur 的 RESTful API. Envoy - 访问 Envoy 的 API. JotForm - JotForm API 可以在不使用JotForm 网站的情况下连接到你的表单数据. MailChimp - 访问 MailChimp 的 API. Pruvan - 访问 Pruvan 的 API. Quip - Quip REST API 让你实现流程自动化, 并将Quip 与你或你公司使用的其他产品集成在一起. Salesforce - 访问 Salesforce 的 API. Square - Square 提供简单的信用卡处理和针对各类业务的完整解决方案. Wolfram Data Drop - 访问 Wolfram Data Drop 的 RESTful API. 七、通讯服务 短信API 在各大网站或APP，用户注册、修改密码等涉及到个人隐私的操作时，都离不开短信验证码。 平时也收到不少的商家促销短信、还有通知短信等等，这些都可以通过短信服务的API实现。 href=“https://api.yonyoucloud.com/apilink/apiList.html#/api?fuzzy=短信”>短信API ：短信验证码、通知短信等；支持虚拟运营商号段，保证短信发送不间断 物流短信接口_快递提醒通知_发送快_成功率高-快递鸟API 邮件 Context.IO - Context.IO 是一个现代的, 可扩展的电子邮件 API, 简化了电子邮件数据的处理. Gmail - 现代, 简单, 快速, RESTful. Inbox - Inbox 提供了用于与邮件提供商合作的现代 RESTful API. 停止与旧的协议角力, 专注于构建伟大的应用程序. Mandrill - Mandrill 就像 MailChimp, 适用于应用程序. 发送交易性的, 易于触发和个性化的电子邮件, 然后跟踪结果. Outlook Mail - Outlook Mail API允许你阅读, 创建和发送消息和附件, 查看和响应事件消息, 以及管理由 Office 365中的 Azure Active Directory 保护的文件夹. 它还在 Microsoft 帐户中专门提供了与这些域中相同的功能: Hotmail.com, Live.com, MSN.com, Outlook.com 和 Passport.com. 通信 Cisco Spark - 创建一个房间, 邀请他人, 搜索公司里的人, 将信息发布到一个房间, 获取房间历史记录, 或者在他人发布新信息时实时通知他们. Dingtalk - 访问 Dingtalk 的 API. dondeEsta Family - 访问 dondeEsta family 的 API. Fleep - Fleep是所有团队和项目的使者. GroupMe - GroupMe API 使你能够使用群组消息传递功能来增强现有的应用程序, 创建有趣的新体验, 或者只是为现有的群组添加一些调味品. indoona - 基于 HTTPS 的 The indoona RESTful API 使你能够: 给 indoona 用户和群组发送信息, 创建特定的联系人地址簿使 indoona 用户能够与你的应用聊天. LINE - LINE是一款免费应用, 用于在智能手机, 平板电脑和个人电脑等电子设备上进行即时通讯. MessageBird - MessageBird API 将你的网站或应用程序连接到世界各地的运营商. 使用API, 你可以集成短信, 聊天和语音. Slack - Slack是基于云的专有团队协作工具和服务. Telegram - The Bot API 允许你轻松创建使用 Telegram 消息作为接口的应用. The Telegram API 允许你建立自己的定制 Telegram 客户端. Yo - Yo 是最简单的通知平台. 消息推送 百度云推送 - 支持iOS, Android和服务器端，支持推送，统计，组管理等Rest API接口。服务器端支持Java, Python, PHP, REST API。提供所支持各语言版本的SDK。 华为推送 - 支持Android，提供SDK。 极光 - 支持Android, iOS, WindowsPhone, 服务器端REST API, 提供Java, Python, PHP, Ruby, C#, Node.js等版本的SDK。 LeanCloud - 支持Android, iOS, WindowsPhone和Web网页推送，使用云引擎和JavaScript创建推送，使用REST API推送消息。提供Objectvie-C(开放源码), JavaScript(开放源码), Android, Unity, .Net, WindowsPhone, Java(开放源码), Python(开放源码), PHP(开放源码), C++(开放源码), Swift(开放源码)版本SDK。同时提供Demo。 腾讯信鸽 - 支持iOS和Android平台，服务器端采用Rest API, 同时服务器端支持Java, PHP, Python等语言并提供SDK。 小米 - 支持Android和iOS平台，服务器端支持Java, Python并提供SDK。 友盟 - 支持Android和iOS平台，服务器端支持PHP, Java, Python并提供SDK。

整体说明 1 小程序校友数据基母校开发。由于历史数据繁多，数据库中难免存在疏漏。若无法成功认证身份，请您提交人工审核后耐心等待，或联系校友会由管理员手动审核。 2 校友数据库目前只收录建院以来全日制本科生、研究生数据，暂不支持教职工、附中、继续教育学院等部门进行认证。未收录部分已纳入系统后期开发计划，敬请期待。 3 目前在校学生可以正常认证登录，校友类型显示为“在校生”，在校生将在毕业后由校友会统一转换为校友身份。 4 海外手机号、非大陆学籍校友可能会出现身份认证不成功的情况，请电话联系校友会，由管理员手动认证。 5 所有校友数据信息将按照法律规定严格保密，不提供给任何第三方，也不用于任何商业目的。 首页设计校友在进入小程序后，请先进行登录及认证（登录及认证指引参见下文）。完成后请继续点击首页“我的名片”全面完善个人资料，然后即可体验小程序全部功能。  [图片] 注册与认证模块进入小程序后，依次点击“我的”-“点击登录账号”（蓝色线框处）进入校友身份认证环节  [图片] 认证界面如下图所示，已在完成注册认证的校友，请直接点击图标即可一键完成认证注册步骤 [图片] 若不方便进行实名信息认证，可点击下方人工认证，选择对应校友类型填写验证信息。 [图片] 校友福利模块后续将逐步推出“地方校友分会”、“返校预约”、“同学查找”等精彩功能。 后台管理模块 [图片] [图片]

前言 生成海报这个需求非常常见，一般用于分享朋友圈，自定义分享到群，开发者为了生成写了很多绘制代码。绘制代码看上去都差不多，有不得不写，很难受。 直到我遇见了它！ Painter：小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片 看效果 [代码]{ background: '#eee', width: '654rpx', height: '400rpx', borderRadius: '20rpx', views: [ { type: 'image', url: 'https://qhyxpicoss.kujiale.com/r/2017/12/04/L3D123I45VHNYULVSAEYCV3P3X6888_3200x2400.jpg@!70q', css: { top: '48rpx', right: '48rpx', width: '192rpx', height: '192rpx', }, } ... ], } [代码] 绘制结果： [图片] 你没看错，就是如此简单，再也不用写绘制代码了！ 功能与优势 功能全，支持文本、图片、矩形、qrcode 类型的 view 绘制 布局全，支持多种布局方式，如 align（对齐方式）、rotate（旋转） 支持圆角，其中图片，矩形，和整个画布支持 borderRadius 来设置圆角 杠杠的性能优化，我们对网络素材图片加载实现了一套 LRU 存储机制，不用重复下载素材图片。 杠杠的容错，因为某些特殊情况会导致 Canvas 绘图不完整。我们对此加入了对结果图片进行检测机制，如果绘图出错会进行重绘。 实现原理 [图片] 开发者可以根据需求构建生成图片的 Palette（调色板），然后在程序运行过程中把调色板传入给 Painter（画家）。Painter 会调用 Pen（画笔），根据 Palette 内容绘制出对应的图片后返回。 看demo [图片] 从demo我们可以看出支持的样式和组件非常丰富，不仅如此还可以进行拖拽位置、对大家进行调整。 [图片] 具体详细使用方法以及json规范可以点击下方地址项目主页查看。 上地址 地址：https://github.com/Kujiale-Mobile/Painter