微信小程序开发文档 第86页

介绍 腾讯云为开发者提供免费的开发环境和生产环境，更加方便、快速、可靠的构建你的小程序。 目前服务端支持 NodeJS 和 PHP 两种语言,开发者可以使用开发者工具同时进行服务端和小程序的开发。 开发环境 免费使用 自动分配测试用二级域名：xxxxxxx.qcloud.la 自动部署免费 HTTPS 仅可用于线上调试，不可发布 代码部署、运行和数据库与生产环境完全分开 与微信开发工具打通，可一键部署、调试、重启和恢复代码 生产环境 免费使用 用户需购买或使用已有的腾讯云域名 自动部署免费 HTTPS 用于线上发布，不可调试 使用微信开发工具上传代码，在腾讯云控制台操作部署，上传和发布分离，降低误操作风险 通过微信公众平台授权登录腾讯云 打开 微信公众平台 注册并登录小程序，按如下步骤操作： 单击左侧菜单栏中的【设置】 单击右侧 Tab 栏中的【开发者工具】 单击【腾讯云】，进入腾讯云工具页面，单击【开通】 使用小程序绑定的微信扫码即可将小程序授权给腾讯云，开通之后会自动进去腾讯云微信小程序控制台，显示开发环境已开通，此时可以进行后续操作 注意： 此时通过小程序开发者工具查看腾讯云状态并不会显示已开通，已开通状态会在第一次部署开发环境之后才会同步到微信开发者工具上。 安装开发工具 下载并安装最新版本的 微信开发者工具 ，使用小程序绑定的微信号扫码登录开发者工具。 导入 NodeJS DEMO 和配置 1. 打开第二步安装的微信开发者工具，点击【小程序项目】按钮。 2. 输入小程序 AppID，项目目录选择一个 空的目录 ，接着选择【建立腾讯云 Node.js 启动模板】，点击确定创建小程序项目。 3. 安装依赖 为方便本地调试，建议您在本地安装依赖。你也可以跳过这步直接使用开发者工具的“腾讯云”菜单中的“安装依赖”直接在线上安装依赖。 在您刚刚选择的目录打开 CMD 安装依赖： cd server && npm install 4. 点击界面右上角的【腾讯云】图标，在下拉的菜单栏中选择【上传测试代码】。  5. 首次使用推荐使用，选择【模块上传】并勾选全部选项，然后勾选【部署后自动安装依赖】，点击【确定】开始上传代码。后续修改服务端代码后，推荐选择智能上传，工具仅仅上传有修改过的代码。 6. 上传代码完成之后，点击右上角的【详情】按钮，接着选择【腾讯云状态】即可看到腾讯云自动分配给你的开发环境域名： 7. 如果当前小程序是首次使用腾讯云小程序服务，需要完整复制（包括 https://）开发环境 request 域名，然后在编辑器中打开 client/config.js 文件，将复制的域名填入 host 中并保存，保存之后编辑器会自动编译小程序，左边的模拟器窗口即可实时显示出客户端的 Demo：           8. 在模拟器中点击【登录】，看到显示“登录成功”，即为开通完成，可以开始你的其他开发了。 导入 PHP DEMO 和配置 打开第二步安装的微信开发者工具，点击【小程序项目】按钮。 tips:需要注意的是，如果当前小程序已经开通了 NodeJS 环境，需要点击工具右上角详情按钮，选择腾讯云状态，点击切换语言 在腾讯云管理后台中可以选择切换语言环境 输入小程序 AppID，项目目录选择一个空的目录，接着选择【建立腾讯云 PHP 启动模板】，点击确定创建小程序项目。 再次点击【确定】进入开发者工具。           点击界面右上角的【腾讯云】图标，在下拉的菜单栏中选择【上传测试代码】。 上传代码完成之后，点击右上角的【详情】按钮，接着选择【腾讯云状态】即可看到腾讯云自动分配给你的开发环境域名。 完整复制（包括 https://）开发环境 request 域名，然后在编辑器中打开 client/config.js 文件，将复制的域名填入 host 中并保存，保存之后编辑器会自动编译小程序，左边的模拟器窗口即可实时显示出客户端的 Demo。      在模拟器中点击【登录】，看到显示“登录成功”，即为开通完成，可以开始你的其他开发了。 “` 其他具体开发文档 服务端、客户端的...

绘图接口和方法 canvasContext.arc 定义 画一条弧线。 Tip: 创建一个圆可以用arc()方法指定起始弧度为0，终止弧度为2 * Math.PI。 Tip: 用stroke()或者fill()方法来在 canvas 中画弧线。 参数 参数 类型 说明 x Number 圆的x坐标 y Number 圆的y坐标 r Number 圆的半径 sAngle Number 起始弧度，单位弧度（在3点钟方向） eAngle Number 终止弧度 counterclockwise Boolean 可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。 例子 const ctx = wx.createCanvasContext('myCanvas') // Draw coordinates ctx.arc(100, 75, 50, 0, 2 * Math.PI) ctx.setFillStyle('#EEEEEE') ctx.fill() ctx.beginPath() ctx.moveTo(40, 75) ctx.lineTo(160, 75) ctx.moveTo(100, 15) ctx.lineTo(100, 135) ctx.setStrokeStyle('#AAAAAA') ctx.stroke() ctx.setFontSize(12) ctx.setFillStyle('black') ctx.fillText('0', 165, 78) ctx.fillText('0.5*PI', 83, 145) ctx.fillText('1*PI', 15, 78) ctx.fillText('1.5*PI', 83, 10) // Draw points ctx.beginPath() ctx.arc(100, 75, 2, 0, 2 * Math.PI) ctx.setFillStyle('lightgreen') ctx.fill() ctx.beginPath() ctx.arc(100, 25, 2, 0, 2 * Math.PI) ctx.setFillStyle('blue') ctx.fill() ctx.beginPath() ctx.arc(150, 75, 2, 0, 2 * Math.PI) ctx.setFillStyle('red') ctx.fill() // Draw arc ctx.beginPath() ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)...

我们建议你先完整阅读该开发文档，这将有助于更快地完成开发。如果发现我们的文档有任何错漏，或者开发过程中有任何疑问，欢迎通过下列邮箱联系我们。 weixin_developer@qq.com 为方便定位原因，如果是开发过程中的问题，我们建议你提供更多信息，包括但不限于： 公司名称 mp账户 开发者微信号 机型 操作系统 是否必现 出现时间 操作路径 问题描述 问题截图 代码片段截图

if 语句 在 WXS 中，可以使用以下格式的 if 语句 ： if (expression) statement ： 当 expression 为 truthy 时，执行 statement。 if (expression) statement1 else statement2 : 当 expression 为 truthy 时，执行 statement1。 否则，执行 statement2 if … else if … else statementN 通过该句型，可以在 statement1 ~ statementN 之间选其中一个执行。 示例语法： // if ... if (表达式) 语句; if (表达式) 语句; if (表达式) { 代码块; } // if ... else if (表达式) 语句; else 语句; if (表达式) 语句; else 语句; if (表达式) { 代码块; } else { 代码块; } // if ... else if ... else ... if (表达式) { 代码块; } else if (表达式) { 代码块; } else if (表达式) { 代码块; } else { 代码块; } switch 语句 示例语法： switch (表达式) { case 变量: 语句; case 数字: 语句; break; case 字符串: 语句; default: 语句; } default 分支可以省略不写。 case 关键词后面只能使用：变量，数字，字符串。 示例代码： var exp =...

概念 WXS 中的变量均为值的引用。 没有声明的变量直接赋值使用，会被定义为全局变量。 如果只声明变量而不赋值，则默认值为 undefined。 var表现与javascript一致，会有变量提升。 var foo = 1; var bar = "hello world"; var i; // i === undefined 上面代码，分别声明了 foo、 bar、 i 三个变量。然后，foo 赋值为数值 1 ，bar 赋值为字符串 “hello wolrd”。 变量名 变量命名必须符合下面两个规则： 首字符必须是：字母（a-zA-Z），下划线（_） 剩余字符可以是：字母（a-zA-Z），下划线（_）， 数字（0-9） 保留标识符 以下标识符不能作为变量名： delete void typeof null undefined NaN Infinity var if else true false require this function arguments return for while do break continue switch case default

WXS WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。 注意: wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。 wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。 wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。 wxs 函数不能作为组件的事件回调。 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。 以下是一些使用 WXS 的简单示例： 页面渲染 <!--wxml--> <wxs module="m1"> var msg = "hello world"; module.exports.message = msg; </wxs> <view> {{m1.message}} </view> 页面输出： hello world 数据处理 // page.js Page({ data: { array: [1, 2, 3, 4, 5, 1, 2, 3, 4] } }) <!--wxml--> <!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 --> <wxs module="m1"> var getMax = function(array) { var max = undefined; for (var i = 0; i < array.length; ++i) { max = max === undefined ? array[i] : (max >= array[i] ? max : array[i]); } return max; }...

小程序开发者工具是对微信客户端的模拟，受限于桌面设备同移动设备不同，以及微信的一些特有数据，同时考虑到开发的便捷性，那么有部分 API 在工具和微信中是有所不同的。 扫码接口 同手机端直接调用摄像头来扫码不同，在 PC 或者 Mac 上调用摄像头来扫码完成调试是一个低效的行为，所以在开发工具上调用二维码扫码 API 后，开发者可以选择一个本地的图片来进行后续的逻辑调试，而不是真正的启用摄像头来扫码，流程有所不同，但是接口的输入和输出是一致的。 微信支付 最新版本的开发者工具已经支持微信支付的调试，但是为了兼顾到安全，同手机上直接调用微信支付有所不同： 新绑定的开发者需要 24 小时后才有权限进行微信支付的调试 开发者在工具上调用微信支付的 API 后，开发工具会出现一个二维码，开发者必须使用当前开发所使用的微信号扫码后在手机上完成支付的流程 工具会同步移动端微信支付的回包到工具中，开发者自行进行后续的操作 使用的交互有所不同，但是接口的输入输出工具同客户端是保持一致的。 普通的转发 开发者工具上调用转发是一个模拟的行为，并不会真实的转发给用户，开发可以通过这个模拟行为判断是否正确的调用了转发 API。 带 shareTicket 的转发 带 shareTicket 的转发可以获取到更多的转发信息，例如群聊的名称以及群的标识 openGId。在小程序开发者工具上，开发者可以通过以下方式来调试带 shareTicket 的转发。 调用 wx.showShareMenu 的参数 withShareTicket 为 true 时，点击模拟器右上角菜单后出现的转发按钮，会出现一个测试群列表，如图： 开发者点击选取任何一个群，可以通过接口的回包获取到 shareTicket ，通过调用 wx.getShareInfo 可以获取到相关转发的信息 当开发者需要调试从某一个群点开，并且带有 shareTicket 的场景时，可以使用自定义编译中的 1044:群聊会话中的小程序消息卡片（带 shareTicket） 同时可以选择任一模拟测试群，如图 进入场景值 在微信客户端中，用户可能在各个场景下打开小程序 详情 然而在开发者工具中是没有真实的环境去模拟这些场景的。开发者可以通过条件编译的方式来达到调试不同场景的目的。 启动使用自定义参数 在日常使用中，用户可以打开一个小程序，并且依据传入的 path 跳转到对应的小程序页面而非启动页面，或者可以通过 参数 使得小程序区别默认开打状态，开发者工具中，开发者同样可以通过条件编译的方式来达到调试不同 path 和 参数 的目的。 例如下图是选择进入页面是 pages/name/name 参数 是 name=linchao 预览使用自定义参数 同 启动使用自定义参数 相同，提交预览时，开发者可以通过自定义预览的方式来达到在移动设备上调试不同 path 和 参数 的目的。 例如下图是选择进入页面是 pages/name/name 参数 是 name=linchao 小程序跳转的调试支持 小程序跳转开发调试可以分为两个部分 调试小程序是否能够正确的跳转 出于小程序代码的安全考虑，在工具上调用 wx.navigateToMiniProgram 的时候，开发者工具不会真实的打开和跳转到另外的小程序，但是工具会判断当前小程序与需要跳转的小程序之间的绑定关系，输出相关信息给到开发者。开发者可以根据成功或者失败的回调函数来判断调用是否成功。 调试被打开的小程序时候正确的接收参数 选择 自定义编译 进入场景选择 1037 从小程序进入 可以调试小程序被打开时候是否接收到了正确的参数并做了相关处理。 选择 自定义编译 进入场景选择 1038 从小程序返回 可以调试小程序返回时候是否接收到了正确的参数并做了相关处理。

概要 基于微信小程序轻快的特点，我们拟定了小程序界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持不同需求，实现用户与小程序服务方的共赢。 一、友好礼貌  为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序在设计时应该注意减少无关的设计元素对用户目标干扰，礼貌地向用户展示程序侧提供的服务，友好地引导用户进行操作。 1. 重点突出 每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容，在确定了重点的前提下，应尽量避免页面上出现其他干扰项影响用户的决策和操作。 反例示意 此页面的主题是查询，却添加了诸多与查询不相关的业务入口，与用户的预期不符，易造成用户的迷失。 纠正示意 去掉任何与用户目标不相关的内容，明确页面主题，在技术和页面控件允许的前提下提供有助于用户目标的帮助内容，比如最近搜索词等。 反例示意 操作没有主次，让用户无从选择 纠正示意 首先要避免并列过多操作让用户选择，在不得不并列多个操作时，需区分操作主次，减轻用户的选择难度。 2. 流程明确 为了让用户顺畅地使用页面，在用户进行某一个操作流程时，应避免出现用户目标流程之外的内容而打断用户。 反例示意 用户本打算进行搜索，在进入页面时却被突如其来的模态抽奖框所打断；对于抽奖没有兴趣的用户是非常不友好的干扰；而即便有部分用户确实被“诱人”的抽奖活动所吸引，离开主流程去抽奖之后可能就遗忘了原本的目标，进而失去了对产品真正价值的利用和认识。

配置 我们使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 以下是一个包含了所有配置选项的简单配置app.json ： { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true} app.json 配置项列表 属性 类型 必填 描述 pages String Array 是 设置页面路径 window Object 否 设置默认页面的窗口表现 tabBar Object 否 设置底部 tab 的表现 networkTimeout Object 否 设置网络超时时间 debug Boolean 否 设置是否开启 debug 模式 pages 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。 文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。 如开发目录为： pages/ pages/index/index.wxml pages/index/index.js pages/index/index.wxss pages/logs/logs.wxml pages/logs/logs.js app.js app.json app.wxss 则，我们需要在 app.json 中写 { "pages":[ "pages/index/index" "pages/logs/logs" ]} window 用于设置小程序的状态栏、导航条、标题、窗口背景色。 属性 类型 默认值 描述 navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如”#000000″ navigationBarTextStyle String white 导航栏标题颜色，仅支持 black/white navigationBarTitleText String   导航栏标题文字内容 backgroundColor HexColor #ffffff 窗口的背景色 backgroundTextStyle...

wx.chooseInvoiceTitle(OBJECT) 基础库 1.5.0 开始支持，低版本需做兼容处理 选择用户的发票抬头 Object参数说明： 参数 类型 必填 说明 success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） success返回参数说明： 参数名 类型 说明 type String 抬头类型（0：单位，1：个人） title String 抬头名称 taxNumber String 抬头税号 companyAddress String 单位地址 telephone String 手机号码 bankName String 银行名称 bankAccount String 银行账号 errMsg String 接口调用结果 示例代码： wx.chooseInvoiceTitle({ success(res) { }})